enhance: update loading spinner behavior for oauthApps

ui/admin/app/components/composed/ConfirmationDialog.tsx

@@ -39,9 +39,11 @@ export function ConfirmationDialog({
                         <Button variant="secondary">Cancel</Button>
                     </DialogClose>
 
-                    <Button {...confirmProps} onClick={onConfirm}>
-                        {confirmProps?.children ?? "Confirm"}
-                    </Button>
+                    <DialogClose onClick={onConfirm}>
+                        <Button {...confirmProps}>
+                            {confirmProps?.children ?? "Confirm"}
+                        </Button>
+                    </DialogClose>
                 </DialogFooter>
             </DialogContent>
         </Dialog>

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

@@ -1,7 +1,9 @@
 import { DialogDescription } from "@radix-ui/react-dialog";
 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";
 
@@ -12,22 +14,36 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "~/components/ui/dialog";
-import { useOAuthAppInfo } from "~/hooks/oauthApps";
+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 { ScrollArea } from "../ui/scroll-area";
 import { OAuthAppForm } from "./OAuthAppForm";
 import { OAuthAppTypeIcon } from "./OAuthAppTypeIcon";
 
 export function CreateOauthApp({ type }: { type: OAuthProvider }) {
     const spec = useOAuthAppInfo(type);
+    const modal = useDisclosure();
+
+    const createApp = useAsync(async (data: OAuthAppParams) => {
+        await OauthAppService.createOauthApp({
+            type,
+            refName: type,
+            ...data,
+        });
+
+        await mutate(useOAuthAppList.key());
 
-    const createApp = useAsync(OauthAppService.createOauthApp, {
-        onSuccess: () => mutate(OauthAppService.getOauthApps.key()),
+        modal.onClose();
+        toast.success(`${spec.displayName} OAuth app created`);
     });
 
     return (
-        <Dialog>
+        <Dialog open={modal.isOpen} onOpenChange={modal.onOpenChange}>
             <DialogTrigger asChild>
                 <Button className="w-full">
                     <SettingsIcon className="w-4 h-4 mr-2" />
@@ -54,13 +70,8 @@ export function CreateOauthApp({ type }: { type: OAuthProvider }) {
                 <ScrollArea className="max-h-[80vh] px-4">
                     <OAuthAppForm
                         type={type}
-                        onSubmit={(data) =>
-                            createApp.execute({
-                                type,
-                                refName: type,
-                                ...data,
-                            })
-                        }
+                        onSubmit={createApp.execute}
+                        isLoading={createApp.isLoading}
                     />
                 </ScrollArea>
             </DialogContent>

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

@@ -1,5 +1,5 @@
 import { TrashIcon } from "lucide-react";
-import { ReactNode } from "react";
+import { toast } from "sonner";
 import { mutate } from "swr";
 
 import { OauthAppService } from "~/lib/service/api/oauthAppService";
@@ -13,19 +13,21 @@ import {
     TooltipProvider,
     TooltipTrigger,
 } from "~/components/ui/tooltip";
+import { useOAuthAppList } from "~/hooks/oauthApps/useOAuthApps";
 import { useAsync } from "~/hooks/useAsync";
 
 export function DeleteOAuthApp({
     id,
-    children,
     disableTooltip,
 }: {
     id: string;
-    children?: ReactNode;
     disableTooltip?: boolean;
 }) {
-    const deleteOAuthApp = useAsync(OauthAppService.deleteOauthApp, {
-        onSuccess: () => mutate(OauthAppService.getOauthApps.key()),
+    const deleteOAuthApp = useAsync(async () => {
+        await OauthAppService.deleteOauthApp(id);
+        await mutate(useOAuthAppList.key());
+
+        toast.success("OAuth app deleted");
     });
 
     return (
@@ -35,26 +37,25 @@ export function DeleteOAuthApp({
                     <ConfirmationDialog
                         title={`Delete OAuth App`}
                         description="Are you sure you want to delete this OAuth app?"
-                        onConfirm={() => deleteOAuthApp.execute(id)}
+                        onConfirm={deleteOAuthApp.execute}
                         confirmProps={{
                             variant: "destructive",
                             children: "Delete",
                         }}
                     >
                         <TooltipTrigger asChild>
-                            {children || (
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    disabled={deleteOAuthApp.isLoading}
-                                >
-                                    {deleteOAuthApp.isLoading ? (
-                                        <LoadingSpinner />
-                                    ) : (
-                                        <TrashIcon />
-                                    )}
-                                </Button>
-                            )}
+                            <Button
+                                variant="destructive"
+                                className="w-full"
+                                disabled={deleteOAuthApp.isLoading}
+                            >
+                                {deleteOAuthApp.isLoading ? (
+                                    <LoadingSpinner className="w-4 h-4 mr-2" />
+                                ) : (
+                                    <TrashIcon className="w-4 h-4 mr-2" />
+                                )}
+                                Delete OAuth App
+                            </Button>
                         </TooltipTrigger>
                     </ConfirmationDialog>
 

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

@@ -1,6 +1,8 @@
-import { SquarePenIcon } from "lucide-react";
+import { GearIcon } from "@radix-ui/react-icons";
+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";
 
@@ -13,12 +15,9 @@ import {
     DialogTrigger,
 } from "~/components/ui/dialog";
 import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "~/components/ui/tooltip";
-import { useOAuthAppInfo } from "~/hooks/oauthApps";
+    useOAuthAppInfo,
+    useOAuthAppList,
+} from "~/hooks/oauthApps/useOAuthApps";
 import { useAsync } from "~/hooks/useAsync";
 import { useDisclosure } from "~/hooks/useDisclosure";
 
@@ -29,54 +28,48 @@ export function EditOAuthApp({ type }: { type: OAuthProvider }) {
     const spec = useOAuthAppInfo(type);
     const modal = useDisclosure();
 
-    const updateApp = useAsync(OauthAppService.updateOauthApp, {
-        onSuccess: async () => {
-            await mutate(OauthAppService.getOauthApps.key());
-            modal.onClose();
-        },
-    });
-
     const { customApp } = spec;
 
+    const updateApp = useAsync(async (data: OAuthAppParams) => {
+        if (!customApp) return;
+
+        await OauthAppService.updateOauthApp(customApp.id, {
+            type: customApp.type,
+            refName: customApp.refName,
+            ...data,
+        });
+        await mutate(useOAuthAppList.key());
+        modal.onClose();
+        toast.success(`${spec.displayName} OAuth app updated`);
+    });
+
     if (!customApp) return null;
 
     return (
-        <TooltipProvider>
-            <Tooltip>
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <TooltipTrigger asChild>
-                            <Button variant="ghost" size="icon">
-                                <SquarePenIcon />
-                            </Button>
-                        </TooltipTrigger>
-                    </DialogTrigger>
-
-                    <DialogContent>
-                        <DialogTitle>
-                            <OAuthAppTypeIcon type={type} /> Edit{" "}
-                            {spec.displayName} OAuth Configuration
-                        </DialogTitle>
+        <Dialog open={modal.isOpen} onOpenChange={modal.onOpenChange}>
+            <DialogTrigger asChild>
+                <Button>
+                    <GearIcon className="w-4 h-4 mr-2" />
+                    Edit Configuration
+                </Button>
+            </DialogTrigger>
 
-                        <DialogDescription hidden>
-                            Update the OAuth app settings.
-                        </DialogDescription>
+            <DialogContent>
+                <DialogTitle className="flex items-center gap-2">
+                    <OAuthAppTypeIcon type={type} /> Edit {spec.displayName}{" "}
+                    OAuth Configuration
+                </DialogTitle>
 
-                        <OAuthAppForm
-                            type={type}
-                            onSubmit={(data) =>
-                                updateApp.execute(customApp.id, {
-                                    type: customApp.type,
-                                    refName: customApp.refName,
-                                    ...data,
-                                })
-                            }
-                        />
-                    </DialogContent>
-                </Dialog>
+                <DialogDescription hidden>
+                    Update the OAuth app settings.
+                </DialogDescription>
 
-                <TooltipContent side="bottom">Edit</TooltipContent>
-            </Tooltip>
-        </TooltipProvider>
+                <OAuthAppForm
+                    type={type}
+                    onSubmit={updateApp.execute}
+                    isLoading={updateApp.isLoading}
+                />
+            </DialogContent>
+        </Dialog>
     );
 }