UI feat: Update UX for OAuth app configuration (#253)

* UI feat: Update UX for OAuth app configuration
- add confirmation dialogs for updating OAuth apps

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

* fix: update messages and links for GitHub OAuth workflow

---------

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

ui/admin/app/components/oauth-apps/ConfigureOAuthApp.tsx

@@ -0,0 +1,135 @@
+import { SettingsIcon } from "lucide-react";
+import { toast } from "sonner";
+import { mutate } from "swr";
+
+import { OAuthAppParams } from "~/lib/model/oauthApps";
+import { OAuthProvider } from "~/lib/model/oauthApps/oauth-helpers";
+import { OauthAppService } from "~/lib/service/api/oauthAppService";
+
+import { Button } from "~/components/ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogTitle,
+    DialogTrigger,
+} from "~/components/ui/dialog";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import {
+    useOAuthAppInfo,
+    useOAuthAppList,
+} from "~/hooks/oauthApps/useOAuthApps";
+import { useAsync } from "~/hooks/useAsync";
+import { useDisclosure } from "~/hooks/useDisclosure";
+
+import { OAuthAppForm } from "./OAuthAppForm";
+import { OAuthAppTypeIcon } from "./OAuthAppTypeIcon";
+
+export function ConfigureOAuthApp({ type }: { type: OAuthProvider }) {
+    const spec = useOAuthAppInfo(type);
+    const { customApp } = spec;
+    const isEdit = !!customApp;
+
+    const modal = useDisclosure();
+    const successModal = useDisclosure();
+
+    const createApp = useAsync(async (data: OAuthAppParams) => {
+        await OauthAppService.createOauthApp({
+            type,
+            refName: type,
+            ...data,
+        });
+
+        await mutate(useOAuthAppList.key());
+
+        modal.onClose();
+        successModal.onOpen();
+        toast.success(`${spec.displayName} OAuth configuration created`);
+    });
+
+    const updateApp = useAsync(async (data: OAuthAppParams) => {
+        if (!customApp) throw new Error("Custom app not found");
+
+        await OauthAppService.updateOauthApp(customApp.id, {
+            type: customApp.type,
+            refName: customApp.refName,
+            ...data,
+        });
+
+        await mutate(useOAuthAppList.key());
+
+        modal.onClose();
+        successModal.onOpen();
+        toast.success(`${spec.displayName} OAuth configuration updated`);
+    });
+
+    return (
+        <>
+            <Dialog open={modal.isOpen} onOpenChange={modal.onOpenChange}>
+                <DialogTrigger asChild>
+                    <Button className="w-full">
+                        <SettingsIcon className="w-4 h-4 mr-2" />
+                        {isEdit
+                            ? "Replace Configuration"
+                            : `Configure ${spec.displayName} OAuth App`}
+                    </Button>
+                </DialogTrigger>
+
+                <DialogContent
+                    classNames={{
+                        overlay: "opacity-0",
+                    }}
+                    aria-describedby="create-oauth-app"
+                    className="px-0"
+                >
+                    <DialogTitle className="flex items-center gap-2 px-4">
+                        <OAuthAppTypeIcon type={type} />
+                        Configure {spec.displayName} OAuth App
+                    </DialogTitle>
+
+                    <DialogDescription hidden>
+                        Create a new OAuth app for {spec.displayName}
+                    </DialogDescription>
+
+                    <ScrollArea className="max-h-[80vh] px-4">
+                        <OAuthAppForm
+                            type={type}
+                            onSubmit={
+                                isEdit ? updateApp.execute : createApp.execute
+                            }
+                            isLoading={
+                                isEdit
+                                    ? updateApp.isLoading
+                                    : createApp.isLoading
+                            }
+                        />
+                    </ScrollArea>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog
+                open={successModal.isOpen}
+                onOpenChange={successModal.onOpenChange}
+            >
+                <DialogContent>
+                    <DialogTitle>
+                        Successfully Configured {spec.displayName} OAuth App
+                    </DialogTitle>
+
+                    <DialogDescription>
+                        Otto will now use your custom {spec.displayName} OAuth
+                        app to authenticate users.
+                    </DialogDescription>
+
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button className="w-full">Close</Button>
+                        </DialogClose>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}

ui/admin/app/components/oauth-apps/DeleteOAuthApp.tsx

@@ -1,7 +1,7 @@
-import { TrashIcon } from "lucide-react";
 import { toast } from "sonner";
 import { mutate } from "swr";
 
+import { OAuthProvider } from "~/lib/model/oauthApps/oauth-helpers";
 import { OauthAppService } from "~/lib/service/api/oauthAppService";
 
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
@@ -13,34 +13,41 @@ import {
     TooltipProvider,
     TooltipTrigger,
 } from "~/components/ui/tooltip";
-import { useOAuthAppList } from "~/hooks/oauthApps/useOAuthApps";
+import {
+    useOAuthAppInfo,
+    useOAuthAppList,
+} from "~/hooks/oauthApps/useOAuthApps";
 import { useAsync } from "~/hooks/useAsync";
 
 export function DeleteOAuthApp({
     id,
     disableTooltip,
+    type,
 }: {
     id: string;
     disableTooltip?: boolean;
+    type: OAuthProvider;
 }) {
+    const spec = useOAuthAppInfo(type);
+
     const deleteOAuthApp = useAsync(async () => {
         await OauthAppService.deleteOauthApp(id);
         await mutate(useOAuthAppList.key());
 
-        toast.success("OAuth app deleted");
+        toast.success(`${spec.displayName} OAuth configuration deleted`);
     });
 
     return (
         <div className="flex gap-2">
             <TooltipProvider>
                 <Tooltip open={getIsOpen()}>
                     <ConfirmationDialog
-                        title={`Delete OAuth App`}
-                        description="Are you sure you want to delete this OAuth app?"
+                        title={`Reset ${spec.displayName} OAuth to use Acorn Gateway`}
+                        description={`By clicking \`Reset\`, you will delete your custom ${spec.displayName} OAuth configuration and reset to use Acorn Gateway.`}
                         onConfirm={deleteOAuthApp.execute}
                         confirmProps={{
                             variant: "destructive",
-                            children: "Delete",
+                            children: "Reset",
                         }}
                     >
                         <TooltipTrigger asChild>
@@ -51,10 +58,9 @@ export function DeleteOAuthApp({
                             >
                                 {deleteOAuthApp.isLoading ? (
                                     <LoadingSpinner className="w-4 h-4 mr-2" />
-                                ) : (
-                                    <TrashIcon className="w-4 h-4 mr-2" />
-                                )}
-                                Delete OAuth App
+                                ) : null}
+                                Reset {spec.displayName} OAuth to use Acorn
+                                Gateway
                             </Button>
                         </TooltipTrigger>
                     </ConfirmationDialog>