fix(dashboard): Use DetailPageButton on existing list views

packages/dashboard/src/components/shared/paginated-list-data-table.tsx

@@ -313,7 +313,11 @@ export function PaginatedListDataTable<
                         return <DisplayComponent id="vendure:dateTime" value={value} />;
                     }
                     if (fieldInfo.type === 'Boolean') {
-                        return <DisplayComponent id="vendure:boolean" value={value} />;
+                        if (cell.column.id === 'enabled') {
+                            return <DisplayComponent id="vendure:booleanBadge" value={value} />;
+                        } else {
+                            return <DisplayComponent id="vendure:booleanCheckbox" value={value} />;
+                        }
                     }
                     if (fieldInfo.type === 'Asset') {
                         return <DisplayComponent id="vendure:asset" value={value} />;

packages/dashboard/src/framework/component-registry/component-registry.tsx

@@ -1,10 +1,10 @@
-import { BooleanDisplayCheckbox } from '@/components/data-display/boolean.js';
+import { BooleanDisplayBadge, BooleanDisplayCheckbox } from '@/components/data-display/boolean.js';
 import { DateTime } from '@/components/data-display/date-time.js';
 import { Money } from '@/components/data-display/money.js';
 import { DateTimeInput } from '@/components/data-input/datetime-input.js';
 import { FacetValueInput } from '@/components/data-input/facet-value-input.js';
 import { MoneyInput } from '@/components/data-input/money-input.js';
-import { AssetLike, VendureImage } from '@/components/shared/vendure-image.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
 import { Checkbox } from '@/components/ui/checkbox.js';
 import { Input } from '@/components/ui/input.js';
 import * as React from 'react';
@@ -25,7 +25,8 @@ interface ComponentRegistry {
 
 export const COMPONENT_REGISTRY: ComponentRegistry = {
     dataDisplay: {
-        'vendure:boolean': BooleanDisplayCheckbox,
+        'vendure:booleanCheckbox': BooleanDisplayCheckbox,
+        'vendure:booleanBadge': BooleanDisplayBadge,
         'vendure:dateTime': DateTime,
         'vendure:asset': ({value}) => <VendureImage asset={value} preset="tiny" />,
         'vendure:money': Money,

packages/dashboard/src/routes/_authenticated/_collections/collections.tsx

@@ -1,3 +1,4 @@
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
 import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { Button } from '@/components/ui/button.js';
 import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
@@ -8,7 +9,6 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { collectionListDocument } from './collections.graphql.js';
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
-import { Badge } from '@/components/ui/badge.js';
 
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
     component: CollectionListPage,
@@ -22,13 +22,7 @@ export function CollectionListPage() {
             customizeColumns={{
                 name: {
                     header: 'Collection Name',
-                    cell: ({ row }) => {
-                        return (
-                            <Link to={`./${row.original.id}`}>
-                                <Button variant="ghost">{row.original.name}</Button>
-                            </Link>
-                        );
-                    },
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
                 breadcrumbs: {
                     cell: ({ cell }) => {

packages/dashboard/src/routes/_authenticated/_customers/customers.tsx

@@ -1,14 +1,13 @@
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
 import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
 import { ListPage } from '@/framework/page/list-page.js';
 import { createFileRoute } from '@tanstack/react-router';
-import { ResultOf } from 'gql.tada';
 import { CustomerStatusBadge } from './components/customer-status-badge.js';
 import { customerListDocument } from './customers.graphql.js';
-import { Button } from '@/components/ui/button.js';
-import { Link } from '@tanstack/react-router';
-
+import { Trans } from '@lingui/react/macro';
 export const Route = createFileRoute('/_authenticated/_customers/customers')({
     component: CustomerListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Customers</Trans> }),
 });
 
 export function CustomerListPage() {
@@ -49,16 +48,7 @@ export function CustomerListPage() {
                     header: 'Name',
                     cell: ({ row }) => {
                         const value = `${row.original.firstName} ${row.original.lastName}`;
-                        return (
-                            <Button asChild variant="ghost">
-                                <Link
-                                    to="/customers/$id"
-                                    params={{ id: row.original.id }}
-                                >
-                                    {value}
-                                </Link>
-                            </Button>
-                        );
+                        return <DetailPageButton id={row.original.id} label={value} />;
                     },
                 },
             }}

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

@@ -11,7 +11,7 @@ import { facetListDocument } from './facets.graphql.js';
 
 import { ResultOf } from 'gql.tada';
 import { FacetValuesSheet } from './components/facet-values-sheet.js';
-
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
 export const Route = createFileRoute('/_authenticated/_facets/facets')({
     component: FacetListPage,
     loader: () => ({ breadcrumb: () => <Trans>Facets</Trans> }),
@@ -24,13 +24,7 @@ export function FacetListPage() {
             customizeColumns={{
                 name: {
                     header: 'Facet Name',
-                    cell: ({ row }) => {
-                        return (
-                            <Link to={`./${row.original.id}`}>
-                                <Button variant="ghost">{row.original.name}</Button>
-                            </Link>
-                        );
-                    },
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
                 valueList: {
                     header: () => <Trans>Values</Trans>,

packages/dashboard/src/routes/_authenticated/_orders/orders.tsx

@@ -6,9 +6,12 @@ import { ListPage } from '@/framework/page/list-page.js';
 import { ResultOf } from '@/graphql/graphql.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { orderListDocument } from './orders.graphql.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { Trans } from '@lingui/react/macro';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders')({
     component: OrderListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Orders</Trans> }),
 });
 
 export function OrderListPage() {
@@ -66,11 +69,7 @@ export function OrderListPage() {
                     cell: ({ cell, row }) => {
                         const value = cell.getValue() as string;
                         const id = row.original.id;
-                        return (
-                            <Button asChild variant="ghost">
-                                <Link to={`/orders/${id}`}>{value}</Link>
-                            </Button>
-                        );
+                        return <DetailPageButton id={id} label={value} />;
                     },
                 },
                 customer: {

packages/dashboard/src/routes/_authenticated/_product-variants/product-variants.tsx

@@ -1,11 +1,11 @@
+import { Money } from '@/components/data-display/money.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
 import { PageActionBar } from '@/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/framework/page/list-page.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { Trans } from '@lingui/react/macro';
-import { createFileRoute, Link } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
 import { productVariantListDocument } from './product-variants.graphql.js';
-import { Button } from '@/components/ui/button.js';
-import { Money } from '@/components/data-display/money.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
 
 export const Route = createFileRoute('/_authenticated/_product-variants/product-variants')({
     component: ProductListPage,
@@ -20,13 +20,7 @@ export function ProductListPage() {
             customizeColumns={{
                 name: {
                     header: 'Product Name',
-                    cell: ({ row }) => {
-                        return (
-                            <Button asChild variant="ghost">
-                                <Link to={`./${row.original.id}`}>{row.original.name} </Link>
-                            </Button>
-                        );
-                    },
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
                 currencyCode: {
                     cell: ({ cell, row }) => {
@@ -60,7 +54,11 @@ export function ProductListPage() {
                         if (Array.isArray(value)) {
                             const totalOnHand = value.reduce((acc, curr) => acc + curr.stockOnHand, 0);
                             const totalAllocated = value.reduce((acc, curr) => acc + curr.stockAllocated, 0);
-                            return <span>{totalOnHand} / {totalAllocated}</span>;
+                            return (
+                                <span>
+                                    {totalOnHand} / {totalAllocated}
+                                </span>
+                            );
                         }
                         return value;
                     },

packages/dashboard/src/routes/_authenticated/_products/products.tsx

@@ -7,6 +7,7 @@ import { PlusIcon } from 'lucide-react';
 import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
 import { Trans } from '@lingui/react/macro';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products')({
     component: ProductListPage,
@@ -20,13 +21,7 @@ export function ProductListPage() {
             customizeColumns={{
                 name: {
                     header: 'Product Name',
-                    cell: ({ row }) => {
-                        return (
-                            <Link to={`./${row.original.id}`}>
-                                <Button variant="ghost">{row.original.name}</Button>
-                            </Link>
-                        );
-                    },
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
             onSearchTermChange={searchTerm => {
@@ -35,7 +30,7 @@ export function ProductListPage() {
                 };
             }}
             listQuery={addCustomFields(productListDocument)}
-            route={Route} 
+            route={Route}
         >
             <PageActionBar>
                 <div></div>
@@ -43,9 +38,9 @@ export function ProductListPage() {
                     <Button asChild>
                         <Link to="./new">
                             <PlusIcon className="mr-2 h-4 w-4" />
-                        New Product
-                    </Link>
-                </Button>
+                            New Product
+                        </Link>
+                    </Button>
                 </PermissionGuard>
             </PageActionBar>
         </ListPage>