fix(dashboard): Improved facet value editing

Author: michaelbromley

packages/dashboard/src/app/routes/_authenticated/_facets/components/add-facet-value-dialog.tsx

@@ -1,13 +1,13 @@
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { Trans } from '@/vdb/lib/trans.js';
+import { Link } from '@tanstack/react-router';
+import { Button } from '@/vdb/components/ui/button.js';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { PlusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
-import { AddFacetValueDialog } from './add-facet-value-dialog.js';
-import { EditFacetValue } from './edit-facet-value.js';
 import { deleteFacetValuesDocument } from '../facets.graphql.js';
 
 export const facetValueListDocument = graphql(`
@@ -82,41 +82,26 @@ export function FacetValuesTable({ facetId, registerRefresher }: Readonly<FacetV
                         },
                     };
                 }}
-                additionalColumns={{
-                    actions: {
-                        header: 'Actions',
-                        cell: ({ row }) => {
-                            const [open, setOpen] = useState(false);
-                            const facetValue = row.original;
-                            return (
-                                <Popover open={open} onOpenChange={setOpen}>
-                                    <PopoverTrigger asChild>
-                                        <Button type="button" variant="outline" size="sm">
-                                            <Trans>Edit</Trans>
-                                        </Button>
-                                    </PopoverTrigger>
-                                    <PopoverContent className="w-80">
-                                        <EditFacetValue
-                                            facetValueId={facetValue.id}
-                                            onSuccess={() => {
-                                                setOpen(false);
-                                                refreshRef.current?.();
-                                            }}
-                                        />
-                                    </PopoverContent>
-                                </Popover>
-                            );
-                        },
+                customizeColumns={{
+                    name: {
+                        header: 'Name',
+                        cell: ({ row }) => (
+                            <DetailPageButton
+                                id={row.original.id}
+                                label={row.original.name}
+                                href={`/facets/${facetId}/values/${row.original.id}`}
+                            />
+                        ),
                     },
                 }}
             />
             <div className="mt-4">
-                <AddFacetValueDialog
-                    facetId={facetId}
-                    onSuccess={() => {
-                        refreshRef.current?.();
-                    }}
-                />
+                <Button asChild variant="outline">
+                    <Link to="./values/new">
+                        <PlusIcon />
+                        <Trans>Add facet value</Trans>
+                    </Link>
+                </Button>
             </div>
         </>
     );

packages/dashboard/src/app/routes/_authenticated/_facets/components/facet-values-table.tsx

@@ -141,3 +141,43 @@ export const deleteFacetValuesDocument = graphql(`
         }
     }
 `);
+
+export const facetValueDetailDocument = graphql(`
+    query FacetValueDetail($id: ID!) {
+        facetValue(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+            languageCode
+            translations {
+                id
+                languageCode
+                name
+            }
+            facet {
+                id
+                name
+                code
+            }
+            customFields
+        }
+    }
+`);
+
+export const createFacetValueDocument = graphql(`
+    mutation CreateFacetValue($input: CreateFacetValueInput!) {
+        createFacetValue(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateFacetValueDocument = graphql(`
+    mutation UpdateFacetValue($input: UpdateFacetValueInput!) {
+        updateFacetValue(input: $input) {
+            id
+        }
+    }
+`);