fix(dashboard): Improve facet list table

packages/dashboard/src/app/routes/_authenticated/_facets/facets.graphql.ts

@@ -31,7 +31,6 @@ export const facetWithValuesFragment = graphql(
             updatedAt
             name
             code
-            languageCode
             isPrivate
             valueList(options: $facetValueListOptions) {
                 totalItems

packages/dashboard/src/app/routes/_authenticated/_facets/facets.tsx

@@ -1,6 +1,7 @@
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { FacetValueChip } from '@/vdb/components/shared/facet-value-chip.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
@@ -16,12 +17,49 @@ import {
 } from './components/facet-bulk-actions.js';
 import { FacetValuesSheet } from './components/facet-values-sheet.js';
 import { deleteFacetDocument, facetListDocument } from './facets.graphql.js';
+import { DataTableCellComponent } from '@/vdb/components/shared/table-cell/table-cell-types.js';
 
 export const Route = createFileRoute('/_authenticated/_facets/facets')({
     component: FacetListPage,
     loader: () => ({ breadcrumb: () => <Trans>Facets</Trans> }),
 });
 
+const FacetValuesCell: DataTableCellComponent<ResultOf<
+    typeof facetListDocument
+>['facets']['items'][0]> = ({ row }) => {
+    const value = row.original.valueList;
+    if (!value) {
+        return null;
+    }
+    const list = value;
+    return (
+        <div className="flex flex-wrap gap-2 items-center">
+            {list.items.map(item => {
+                return (
+                    <FacetValueChip
+                        key={item.id}
+                        facetValue={item}
+                        removable={false}
+                        displayFacetName={false}
+                    />
+                );
+            })}
+            <FacetValuesSheet
+                facetId={row.original.id}
+                facetName={row.original.name}
+            >
+                {list.totalItems > 3 ? (
+                    <div>
+                        <Trans>+ {list.totalItems - 3} more</Trans>
+                    </div>
+                ) : (
+                    <Trans>View values</Trans>
+                )}
+            </FacetValuesSheet>
+        </div>
+    );
+};
+
 function FacetListPage() {
     return (
         <ListPage
@@ -29,49 +67,31 @@ function FacetListPage() {
             title="Facets"
             listQuery={facetListDocument}
             deleteMutation={deleteFacetDocument}
+            defaultVisibility={{
+                name: true,
+                isPrivate: true,
+                valueList: true,
+            }}
             customizeColumns={{
                 name: {
-                    header: 'Facet Name',
+                    header: () => <Trans>Facet Name</Trans>,
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
-                valueList: {
-                    header: () => <Trans>Values</Trans>,
-                    cell: ({ cell }) => {
-                        const value = cell.getValue();
-                        if (!value) {
-                            return null;
-                        }
-                        const list = value as any as ResultOf<
-                            typeof facetListDocument
-                        >['facets']['items'][0]['valueList'];
+                isPrivate: {
+                    header: () => <Trans>Visibility</Trans>,
+                    cell: ({ row }) => {
+                        const isPrivate = row.original.isPrivate;
                         return (
-                            <div className="flex flex-wrap gap-2 items-center">
-                                {list.items.map(item => {
-                                    return (
-                                        <FacetValueChip
-                                            key={item.id}
-                                            facetValue={item}
-                                            removable={false}
-                                            displayFacetName={false}
-                                        />
-                                    );
-                                })}
-                                <FacetValuesSheet
-                                    facetId={cell.row.original.id}
-                                    facetName={cell.row.original.name}
-                                >
-                                    {list.totalItems > 3 ? (
-                                        <div>
-                                            <Trans>+ {list.totalItems - 3} more</Trans>
-                                        </div>
-                                    ) : (
-                                        <Trans>View values</Trans>
-                                    )}
-                                </FacetValuesSheet>
-                            </div>
+                            <Badge variant={isPrivate ? 'destructive' : 'success'}>
+                                {isPrivate ? <Trans>private</Trans> : <Trans>public</Trans>}
+                            </Badge>
                         );
                     },
                 },
+                valueList: {
+                    header: () => <Trans>Values</Trans>,
+                    cell: FacetValuesCell,
+                },
             }}
             onSearchTermChange={searchTerm => {
                 return {