fix: auth providers: allow only one at a time (#1382)

Signed-off-by: Grant Linville <[email protected]>

Author: g-linville

pkg/api/handlers/authprovider.go

@@ -59,14 +59,23 @@ func (ap *AuthProviderHandler) ByID(req api.Context) error {
 }
 
 func (ap *AuthProviderHandler) List(req api.Context) error {
+	resp, err := ap.listAuthProviders(req)
+	if err != nil {
+		return err
+	}
+
+	return req.Write(types.AuthProviderList{Items: resp})
+}
+
+func (ap *AuthProviderHandler) listAuthProviders(req api.Context) ([]types.AuthProvider, error) {
 	var refList v1.ToolReferenceList
 	if err := req.List(&refList, &kclient.ListOptions{
 		Namespace: req.Namespace(),
 		FieldSelector: fields.SelectorFromSet(map[string]string{
 			"spec.type": string(types.ToolReferenceTypeAuthProvider),
 		}),
 	}); err != nil {
-		return err
+		return nil, err
 	}
 
 	credCtxs := make([]string, 0, len(refList.Items))
@@ -78,7 +87,7 @@ func (ap *AuthProviderHandler) List(req api.Context) error {
 		CredentialContexts: credCtxs,
 	})
 	if err != nil {
-		return fmt.Errorf("failed to list auth provider credentials: %w", err)
+		return nil, fmt.Errorf("failed to list auth provider credentials: %w", err)
 	}
 
 	credMap := make(map[string]map[string]string, len(creds))
@@ -90,8 +99,7 @@ func (ap *AuthProviderHandler) List(req api.Context) error {
 	for _, ref := range refList.Items {
 		resp = append(resp, convertToolReferenceToAuthProvider(ref, credMap[string(ref.UID)+ref.Name]))
 	}
-
-	return req.Write(types.AuthProviderList{Items: resp})
+	return resp, nil
 }
 
 func (ap *AuthProviderHandler) Configure(req api.Context) error {
@@ -104,6 +112,19 @@ func (ap *AuthProviderHandler) Configure(req api.Context) error {
 		return types.NewErrBadRequest("%q is not an auth provider", ref.Name)
 	}
 
+	// Check to see if there are any other configured auth providers.
+	// For now, we only support one auth provider at a time to be configured.
+	allAuthProviders, err := ap.listAuthProviders(req)
+	if err != nil {
+		return err
+	}
+
+	for _, ap := range allAuthProviders {
+		if ap.Configured && (ap.Name != authProviderNameFromToolRef(ref) || ap.Namespace != ref.Namespace) {
+			return types.NewErrBadRequest("another auth provider is already configured")
+		}
+	}
+
 	var envVars map[string]string
 	if err := req.Read(&envVars); err != nil {
 		return err
@@ -198,16 +219,19 @@ func (ap *AuthProviderHandler) Reveal(req api.Context) error {
 	return types.NewErrNotFound("no credential found for %q", ref.Name)
 }
 
-func convertToolReferenceToAuthProvider(ref v1.ToolReference, credEnvVars map[string]string) types.AuthProvider {
+func authProviderNameFromToolRef(ref v1.ToolReference) string {
 	name := ref.Name
 	if ref.Status.Tool != nil {
 		name = ref.Status.Tool.Name
 	}
+	return name
+}
 
+func convertToolReferenceToAuthProvider(ref v1.ToolReference, credEnvVars map[string]string) types.AuthProvider {
 	ap := types.AuthProvider{
 		Metadata: MetadataFrom(&ref),
 		AuthProviderManifest: types.AuthProviderManifest{
-			Name:          name,
+			Name:          authProviderNameFromToolRef(ref),
 			Namespace:     ref.Namespace,
 			ToolReference: ref.Spec.Reference,
 		},

ui/admin/app/components/auth-and-model-providers/AuthProviderLists.tsx

@@ -1,4 +1,4 @@
-import { CircleCheckIcon, CircleSlashIcon } from "lucide-react";
+import { CircleCheckIcon, CircleHelpIcon, CircleSlashIcon } from "lucide-react";
 import { Link } from "react-router";
 
 import { AuthProvider } from "~/lib/model/providers";
@@ -8,7 +8,23 @@ import { ProviderIcon } from "~/components/auth-and-model-providers/ProviderIcon
 import { ProviderMenu } from "~/components/auth-and-model-providers/ProviderMenu";
 import { AuthProviderLinks } from "~/components/auth-and-model-providers/constants";
 import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+function isDisabled(
+	authProvider: AuthProvider,
+	authProviders: AuthProvider[]
+): boolean {
+	return (
+		!authProvider.configured &&
+		authProviders.filter((p) => p.configured).length > 0
+	);
+}
 
 export function AuthProviderList({
 	authProviders,
@@ -21,13 +37,32 @@ export function AuthProviderList({
 				{authProviders.map((authProvider) => (
 					<Card key={authProvider.id}>
 						<CardHeader className="flex flex-row items-center justify-between pb-4 pt-2">
-							{authProvider.configured ? (
+							{authProvider.configured && (
 								<div className="flex flex-row items-center gap-2">
 									<ProviderMenu provider={authProvider} />
 								</div>
-							) : (
-								<div className="h-9 w-9" />
 							)}
+							{isDisabled(authProvider, authProviders) && (
+								<div className="flex flex-row items-center gap-2">
+									<Tooltip>
+										<TooltipTrigger>
+											<Button variant="ghost" size="icon">
+												<CircleHelpIcon />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent>
+											<span>
+												You must deconfigure the existing provider before
+												configuring this one.
+											</span>
+										</TooltipContent>
+									</Tooltip>
+								</div>
+							)}
+							{!isDisabled(authProvider, authProviders) &&
+								!authProvider.configured && (
+									<div className="flex flex-row items-center gap-2" />
+								)}
 						</CardHeader>
 						<CardContent className="flex flex-col items-center gap-4">
 							<Link to={AuthProviderLinks[authProvider.id]}>
@@ -50,7 +85,10 @@ export function AuthProviderList({
 									</span>
 								)}
 							</Badge>
-							<ProviderConfigure provider={authProvider} />
+							<ProviderConfigure
+								provider={authProvider}
+								disabled={isDisabled(authProvider, authProviders)}
+							/>
 						</CardContent>
 					</Card>
 				))}

ui/admin/app/components/auth-and-model-providers/ModelProviderLists.tsx

@@ -60,7 +60,7 @@ export function ModelProviderList({
 									</span>
 								)}
 							</Badge>
-							<ProviderConfigure provider={modelProvider} />
+							<ProviderConfigure provider={modelProvider} disabled={false} />
 						</CardContent>
 					</Card>
 				))}

ui/admin/app/components/auth-and-model-providers/ProviderConfigure.tsx

@@ -26,9 +26,13 @@ import { Link } from "~/components/ui/link";
 
 type ProviderConfigureProps = {
 	provider: ModelProvider | AuthProvider;
+	disabled: boolean;
 };
 
-export function ProviderConfigure({ provider }: ProviderConfigureProps) {
+export function ProviderConfigure({
+	provider,
+	disabled,
+}: ProviderConfigureProps) {
 	const [dialogIsOpen, setDialogIsOpen] = useState(false);
 	const [showDefaultModelAliasForm, setShowDefaultModelAliasForm] =
 		useState(false);
@@ -70,6 +74,7 @@ export function ProviderConfigure({ provider }: ProviderConfigureProps) {
 		<Dialog open={dialogIsOpen} onOpenChange={setDialogIsOpen}>
 			<DialogTrigger asChild>
 				<Button
+					disabled={disabled}
 					variant={provider.configured ? "secondary" : "accent"}
 					className="mt-0 w-full"
 				>