UI feat: models grid - clicking row opens edit dialog

ui/admin/app/components/model/DeleteModel.tsx

@@ -38,6 +38,7 @@ export function DeleteModel(props: DeleteModelProps) {
                         <Button
                             size="icon"
                             variant="ghost"
+                            onClick={(e) => e.stopPropagation()}
                             disabled={deleteModel.isLoading}
                             loading={deleteModel.isLoading}
                         >

ui/admin/app/components/model/UpdateModel.tsx

@@ -1,60 +1,37 @@
-import { PenSquareIcon } from "lucide-react";
-import { useState } from "react";
-
 import { Model } from "~/lib/model/models";
 
 import { ModelForm } from "~/components/model/ModelForm";
-import { Button } from "~/components/ui/button";
 import {
     Dialog,
     DialogContent,
     DialogDescription,
     DialogTitle,
     DialogTrigger,
 } from "~/components/ui/dialog";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "~/components/ui/tooltip";
-
-type UpdateModelProps = {
-    model: Model;
+
+type UpdateModelDialogProps = {
+    model: Nullish<Model>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    children?: React.ReactNode;
 };
 
-export function UpdateModel(props: UpdateModelProps) {
-    const { model } = props;
-    const [open, setOpen] = useState(false);
+export function UpdateModelDialog(props: UpdateModelDialogProps) {
+    const { model, open, setOpen, children } = props;
+
+    if (!model) return null;
 
     return (
-        <TooltipProvider>
-            <Tooltip>
-                <Dialog open={open} onOpenChange={setOpen}>
-                    <DialogContent>
-                        <DialogTitle>Update model</DialogTitle>
-
-                        <DialogDescription hidden>
-                            Update model
-                        </DialogDescription>
-
-                        <ModelForm
-                            model={model}
-                            onSubmit={() => setOpen(false)}
-                        />
-                    </DialogContent>
-
-                    <DialogTrigger asChild>
-                        <TooltipTrigger asChild>
-                            <Button size={"icon"} variant="ghost">
-                                <PenSquareIcon />
-                            </Button>
-                        </TooltipTrigger>
-                    </DialogTrigger>
-                </Dialog>
-
-                <TooltipContent>Update Model</TooltipContent>
-            </Tooltip>
-        </TooltipProvider>
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent>
+                <DialogTitle>Update model</DialogTitle>
+
+                <DialogDescription hidden>Update model</DialogDescription>
+
+                <ModelForm model={model} onSubmit={() => setOpen(false)} />
+            </DialogContent>
+
+            {children && <DialogTrigger asChild>{children}</DialogTrigger>}
+        </Dialog>
     );
 }

ui/admin/app/components/ui/dialog.tsx

@@ -48,7 +48,10 @@ const DialogContent = React.forwardRef<
 
     return (
         <DialogPortal>
-            <DialogOverlay className={classNames.overlay} />
+            <DialogOverlay
+                className={classNames.overlay}
+                onClick={(e) => e.stopPropagation()}
+            />
             <DialogPrimitive.Content
                 ref={ref}
                 className={cn(

ui/admin/app/routes/_auth.models.tsx

@@ -1,5 +1,6 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { useMemo } from "react";
+import { PenSquareIcon } from "lucide-react";
+import { useMemo, useState } from "react";
 import useSWR, { preload } from "swr";
 
 import { Model } from "~/lib/model/models";
@@ -9,7 +10,13 @@ import { TypographyH2, TypographySmall } from "~/components/Typography";
 import { DataTable } from "~/components/composed/DataTable";
 import { CreateModel } from "~/components/model/CreateModel";
 import { DeleteModel } from "~/components/model/DeleteModel";
-import { UpdateModel } from "~/components/model/UpdateModel";
+import { UpdateModelDialog } from "~/components/model/UpdateModel";
+import { Button } from "~/components/ui/button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
 
 export async function clientLoader() {
     await Promise.all([
@@ -24,6 +31,8 @@ export async function clientLoader() {
 }
 
 export default function Models() {
+    const [modelToEdit, setModelToEdit] = useState<Model | null>(null);
+
     const { data } = useSWR(
         ModelApiService.getModels.key(),
         ModelApiService.getModels
@@ -57,7 +66,13 @@ export default function Models() {
                 columns={getColumns()}
                 data={data ?? []}
                 sort={[{ id: "id", desc: true }]}
-                disableClickPropagation={(cell) => cell.id.includes("actions")}
+                onRowClick={setModelToEdit}
+            />
+
+            <UpdateModelDialog
+                model={modelToEdit}
+                open={!!modelToEdit}
+                setOpen={(open) => setModelToEdit(open ? modelToEdit : null)}
             />
         </div>
     );
@@ -95,7 +110,16 @@ export default function Models() {
                 id: "actions",
                 cell: ({ row }) => (
                     <div className="flex justify-end">
-                        <UpdateModel model={row.original} />
+                        <Tooltip>
+                            <TooltipTrigger>
+                                <Button size={"icon"} variant="ghost">
+                                    <PenSquareIcon />
+                                </Button>
+                            </TooltipTrigger>
+
+                            <TooltipContent>Update Model</TooltipContent>
+                        </Tooltip>
+
                         <DeleteModel id={row.original.id} />
                     </div>
                 ),