feat(dashboard): Add entity prop to detail pages for improved context

packages/dashboard/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -87,7 +87,7 @@ function AdministratorDetailPage() {
     const roleIds = form.watch('roleIds');
 
     return (
-        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
 
             <PageActionBar>

packages/dashboard/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -1,23 +1,30 @@
-import { AssetPreview } from '@/components/shared/asset/asset-preview.js'
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { createFileRoute } from '@tanstack/react-router'
-import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { toast } from 'sonner';
-import { Page, PageTitle, PageActionBar, PageActionBarRight, PageBlock, PageLayout, CustomFieldsPageBlock } from '@/framework/layout-engine/page-layout.js'
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { useState, useRef } from 'react';
-import { PreviewPreset } from '@/components/shared/asset/asset-preview.js';
+import { AssetFocalPointEditor } from '@/components/shared/asset/asset-focal-point-editor.js';
 import { AssetPreviewSelector } from '@/components/shared/asset/asset-preview-selector.js';
+import { PreviewPreset } from '@/components/shared/asset/asset-preview.js';
 import { AssetProperties } from '@/components/shared/asset/asset-properties.js';
-import { AssetFocalPointEditor } from '@/components/shared/asset/asset-focal-point-editor.js';
-import { FocusIcon } from 'lucide-react';
 import { Point } from '@/components/shared/asset/focal-point-control.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { Button } from '@/components/ui/button.js';
 import { Label } from '@/components/ui/label.js';
+import {
+    CustomFieldsPageBlock,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { createFileRoute } from '@tanstack/react-router';
+import { FocusIcon } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
 export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
     component: AssetDetailPage,
     loader: detailPageRouteLoader({
@@ -25,7 +32,7 @@ export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
         breadcrumb(isNew, entity) {
             return [
                 { path: '/assets', label: 'Assets' },
-                isNew ? <Trans>New asset</Trans> : entity?.name ?? '',
+                isNew ? <Trans>New asset</Trans> : (entity?.name ?? ''),
             ];
         },
     }),
@@ -79,17 +86,14 @@ function AssetDetailPage() {
         return null;
     }
     return (
-        <Page pageId="asset-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="asset-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Edit asset</Trans>
             </PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
                     <PermissionGuard requires={['UpdateChannel']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || isPending}
-                        >
+                        <Button type="submit" disabled={!form.formState.isDirty || isPending}>
                             <Trans>Update</Trans>
                         </Button>
                     </PermissionGuard>
@@ -103,7 +107,7 @@ function AssetDetailPage() {
                             height={height}
                             settingFocalPoint={settingFocalPoint}
                             focalPoint={form.getValues().focalPoint ?? { x: 0.5, y: 0.5 }}
-                            onFocalPointChange={(point) => {
+                            onFocalPointChange={point => {
                                 form.setValue('focalPoint.x', point.x, { shouldDirty: true });
                                 form.setValue('focalPoint.y', point.y, { shouldDirty: true });
                                 setSettingFocalPoint(false);
@@ -124,11 +128,7 @@ function AssetDetailPage() {
                         </AssetFocalPointEditor>
                     </div>
                 </PageBlock>
-                <CustomFieldsPageBlock
-                    column="main"
-                    entityType={'Asset'}
-                    control={form.control}
-                />
+                <CustomFieldsPageBlock column="main" entityType={'Asset'} control={form.control} />
                 <PageBlock column="side" blockId="asset-properties">
                     <AssetProperties asset={entity} />
                 </PageBlock>
@@ -136,15 +136,24 @@ function AssetDetailPage() {
                     <div className="flex flex-col gap-2">
                         <AssetPreviewSelector size={size} setSize={setSize} width={width} height={height} />
                         <div className="flex items-center gap-2">
-                            <Button type='button' variant="outline" size="icon" onClick={() => setSettingFocalPoint(true)}>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() => setSettingFocalPoint(true)}
+                            >
                                 <FocusIcon className="h-4 w-4" />
                             </Button>
                             <div className="text-sm text-muted-foreground">
-                                <Label><Trans>Focal Point</Trans></Label>
+                                <Label>
+                                    <Trans>Focal Point</Trans>
+                                </Label>
                                 <div className="text-sm text-muted-foreground">
-                                    {form.getValues().focalPoint?.x && form.getValues().focalPoint?.y
-                                        ? `${form.getValues().focalPoint?.x.toFixed(2)}, ${form.getValues().focalPoint?.y.toFixed(2)}`
-                                        : <Trans>Not set</Trans>}
+                                    {form.getValues().focalPoint?.x && form.getValues().focalPoint?.y ? (
+                                        `${form.getValues().focalPoint?.x.toFixed(2)}, ${form.getValues().focalPoint?.y.toFixed(2)}`
+                                    ) : (
+                                        <Trans>Not set</Trans>
+                                    )}
                                 </div>
                             </div>
                         </div>
@@ -152,5 +161,5 @@ function AssetDetailPage() {
                 </PageBlock>
             </PageLayout>
         </Page>
-    )
+    );
 }

packages/dashboard/src/app/routes/_authenticated/_channels/channels_.$id.tsx

@@ -100,7 +100,7 @@ function ChannelDetailPage() {
     const codeIsDefault = entity?.code === DEFAULT_CHANNEL_CODE;
 
     return (
-        <Page pageId="channel-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="channel-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? (
                     <Trans>New channel</Trans>

packages/dashboard/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -105,7 +105,7 @@ function CollectionDetailPage() {
     const currentInheritFiltersValue = form.watch('inheritFilters');
 
     return (
-        <Page pageId="collection-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="collection-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_countries/countries_.$id.tsx

@@ -71,7 +71,7 @@ function CountryDetailPage() {
     });
 
     return (
-        <Page pageId="country-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="country-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New country</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_customer-groups/customer-groups_.$id.tsx

@@ -72,7 +72,7 @@ function CustomerGroupDetailPage() {
     });
 
     return (
-        <Page pageId="customer-group-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="customer-group-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New customer group</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_customers/customers_.$id.tsx

@@ -137,7 +137,7 @@ function CustomerDetailPage() {
     const customerName = entity ? `${entity.firstName} ${entity.lastName}` : '';
 
     return (
-        <Page pageId="customer-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="customer-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New customer</Trans> : customerName}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_facets/facets_.$id.tsx

@@ -82,7 +82,7 @@ function FacetDetailPage() {
     });
 
     return (
-        <Page pageId="facet-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="facet-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New facet</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_global-settings/global-settings.tsx

@@ -78,7 +78,7 @@ function GlobalSettingsPage() {
     });
 
     return (
-        <Page pageId="global-settings" form={form} submitHandler={submitHandler}>
+        <Page pageId="global-settings" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Global settings</Trans>
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_orders/orders_.$id.tsx

@@ -27,10 +27,7 @@ import { orderDetailDocument } from './orders.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders_/$id')({
     component: OrderDetailPage,
-    loader: async ({
-        context,
-        params,
-    }) => {
+    loader: async ({ context, params }) => {
         if (!params.id) {
             throw new Error('ID param is required');
         }
@@ -86,7 +83,7 @@ function OrderDetailPage() {
     }
 
     return (
-        <Page pageId="order-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="order-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{entity?.code ?? ''}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -102,7 +102,7 @@ function PaymentMethodDetailPage() {
     });
 
     return (
-        <Page pageId="payment-method-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="payment-method-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New payment method</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -102,7 +102,7 @@ function ProductVariantDetailPage() {
     const [price, taxCategoryId] = form.watch(['price', 'taxCategoryId']);
 
     return (
-        <Page pageId="product-variant-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="product-variant-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New product variant</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -24,12 +24,12 @@ import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader
 import { useDetailPage } from '@/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useRef } from 'react';
 import { toast } from 'sonner';
+import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
-import { AddProductVariantDialog } from './components/add-product-variant-dialog.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
-import { useRef } from 'react';
 
 export const Route = createFileRoute('/_authenticated/_products/products_/$id')({
     component: ProductDetailPage,
@@ -88,9 +88,9 @@ function ProductDetailPage() {
             });
         },
     });
-    
+
     return (
-        <Page pageId="product-detail" entity={entity} form={form} submitHandler={submitHandler}>
+        <Page pageId="product-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New product</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
@@ -142,10 +142,13 @@ function ProductDetailPage() {
                 <CustomFieldsPageBlock column="main" entityType="Product" control={form.control} />
                 {entity && entity.variantList.totalItems > 0 && (
                     <PageBlock column="main" blockId="product-variants-table">
-                        <ProductVariantsTable productId={params.id} registerRefresher={refresher => {
-                            refreshRef.current = refresher;
-                        }} />
-                         <div className="mt-4">
+                        <ProductVariantsTable
+                            productId={params.id}
+                            registerRefresher={refresher => {
+                                refreshRef.current = refresher;
+                            }}
+                        />
+                        <div className="mt-4">
                             <AddProductVariantDialog
                                 productId={params.id}
                                 onSuccess={() => {

packages/dashboard/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -114,7 +114,7 @@ function PromotionDetailPage() {
     });
 
     return (
-        <Page pageId="promotion-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="promotion-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New promotion</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_roles/roles_.$id.tsx

@@ -71,7 +71,7 @@ function RoleDetailPage() {
     });
 
     return (
-        <Page pageId="role-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="role-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New role</Trans> : (entity?.description ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_sellers/sellers_.$id.tsx

@@ -65,7 +65,7 @@ function SellerDetailPage() {
     });
 
     return (
-        <Page pageId="seller-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="seller-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New seller</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -94,7 +94,7 @@ function ShippingMethodDetailPage() {
     });
 
     return (
-        <Page pageId="shipping-method-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="shipping-method-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New shipping method</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_stock-locations/stock-locations_.$id.tsx

@@ -74,7 +74,7 @@ function StockLocationDetailPage() {
     });
 
     return (
-        <Page pageId="stock-location-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="stock-location-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New stock location</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_tax-categories/tax-categories_.$id.tsx

@@ -73,7 +73,7 @@ function TaxCategoryDetailPage() {
     });
 
     return (
-        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? <Trans>New tax category</Trans> : (entity?.name ?? '')}
             </PageTitle>

packages/dashboard/src/app/routes/_authenticated/_tax-rates/tax-rates_.$id.tsx

@@ -77,7 +77,7 @@ function TaxRateDetailPage() {
     });
 
     return (
-        <Page pageId="tax-rate-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="tax-rate-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New tax rate</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

packages/dashboard/src/app/routes/_authenticated/_zones/zones_.$id.tsx

@@ -66,7 +66,7 @@ function ZoneDetailPage() {
     });
 
     return (
-        <Page pageId="zone-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId="zone-detail" form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>