@vendure/dashboard 3.3.6-master-202507100236 → 3.3.6-master-202507110238

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -7,11 +7,14 @@ import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
 import { cn } from '@/vdb/lib/utils.js';
 import { useMediaQuery } from '@uidotdev/usehooks';
-import React, { ComponentProps } from 'react';
+import { EllipsisVerticalIcon } from 'lucide-react';
+import React, { ComponentProps, useMemo } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 
 import { DashboardActionBarItem } from '../extension-api/types/layout.js';
 
+import { Button } from '@/vdb/components/ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/vdb/components/ui/dropdown-menu.js';
 import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
 import { PageContext, PageContextValue } from '@/vdb/framework/layout-engine/page-provider.js';
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
@@ -295,6 +298,8 @@ export function PageActionBarLeft({ children }: Readonly<{ children: React.React
     return <div className="flex justify-start gap-2">{children}</div>;
 }
 
+type InlineDropdownItem = Omit<DashboardActionBarItem, 'type' | 'pageId'>;
+
 /**
  * @description
  * **Status: Developer Preview**
@@ -303,20 +308,42 @@ export function PageActionBarLeft({ children }: Readonly<{ children: React.React
  * @docsPage PageActionBar
  * @since 3.3.0
  */
-export function PageActionBarRight({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageActionBarRight({
+    children,
+    dropdownMenuItems,
+}: Readonly<{
+    children: React.ReactNode;
+    dropdownMenuItems?: InlineDropdownItem[];
+}>) {
     const page = usePage();
     const actionBarItems = page.pageId ? getDashboardActionBarItems(page.pageId) : [];
+    const actionBarButtonItems = actionBarItems.filter(item => item.type !== 'dropdown');
+    const actionBarDropdownItems = [
+        ...(dropdownMenuItems ?? []).map(item => ({
+            ...item,
+            pageId: page.pageId ?? '',
+            type: 'dropdown' as const,
+        })),
+        ...actionBarItems.filter(item => item.type === 'dropdown'),
+    ];
+
     return (
         <div className="flex justify-end gap-2">
-            {actionBarItems.map((item, index) => (
-                <PageActionBarItem key={index} item={item} page={page} />
+            {actionBarButtonItems.map((item, index) => (
+                <PageActionBarItem key={item.pageId + index} item={item} page={page} />
             ))}
             {children}
+            {actionBarDropdownItems.length > 0 && (
+                <PageActionBarDropdown items={actionBarDropdownItems} page={page} />
+            )}
         </div>
     );
 }
 
-function PageActionBarItem({ item, page }: { item: DashboardActionBarItem; page: PageContextValue }) {
+function PageActionBarItem({
+    item,
+    page,
+}: Readonly<{ item: DashboardActionBarItem; page: PageContextValue }>) {
     return (
         <PermissionGuard requires={item.requiresPermission ?? []}>
             <item.component context={page} />
@@ -324,6 +351,28 @@ function PageActionBarItem({ item, page }: { item: DashboardActionBarItem; page:
     );
 }
 
+function PageActionBarDropdown({
+    items,
+    page,
+}: Readonly<{ items: DashboardActionBarItem[]; page: PageContextValue }>) {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                    <EllipsisVerticalIcon className="w-4 h-4" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                {items.map((item, index) => (
+                    <PermissionGuard key={item.pageId + index} requires={item.requiresPermission ?? []}>
+                        <item.component context={page} />
+                    </PermissionGuard>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
 /**
  * @description
  * **Status: Developer Preview**
@@ -363,8 +412,9 @@ export function PageBlock({
     blockId,
     column,
 }: Readonly<PageBlockProps>) {
+    const contextValue = useMemo(() => ({ blockId, title, description, column }), [blockId, title, description, column]);
     return (
-        <PageBlockContext.Provider value={{ blockId, title, description, column }}>
+        <PageBlockContext.Provider value={contextValue}>
             <LocationWrapper>
                 <Card className={cn('w-full', className)}>
                     {title || description ? (
@@ -395,9 +445,10 @@ export function FullWidthPageBlock({
     children,
     className,
     blockId,
-}: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
+}: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>) {
+    const contextValue = useMemo(() => ({ blockId, column: 'main' as const }), [blockId]);
     return (
-        <PageBlockContext.Provider value={{ blockId, column: 'main' }}>
+        <PageBlockContext.Provider value={contextValue}>
             <LocationWrapper>
                 <div className={cn('w-full', className)}>{children}</div>
             </LocationWrapper>
@@ -419,11 +470,11 @@ export function CustomFieldsPageBlock({
     column,
     entityType,
     control,
-}: {
+}: Readonly<{
     column: 'main' | 'side';
     entityType: string;
     control: Control<any, any>;
-}) {
+}>) {
     const customFieldConfig = useCustomFieldConfig(entityType);
     if (!customFieldConfig || customFieldConfig.length === 0) {
         return null;

package/src/lib/framework/page/use-detail-page.ts

@@ -13,7 +13,7 @@ import { FormEvent } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
 import { NEW_ENTITY_PATH } from '../../constants.js';
-import { api, Variables } from '../../graphql/api.js';
+import { api } from '../../graphql/api.js';
 import { useCustomFieldConfig } from '../../hooks/use-custom-field-config.js';
 import { useExtendedDetailQuery } from '../../hooks/use-extended-detail-query.js';
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
@@ -33,6 +33,8 @@ type RemoveNullFields<T> = {
     [K in keyof T]: RemoveNull<T[K]>;
 };
 
+const NEW_ENTITY_ID = '__NEW__';
+
 /**
  * @description
  * **Status: Developer Preview**
@@ -108,14 +110,16 @@ export interface DetailPageOptions<
     onError?: (error: unknown) => void;
 }
 
-export function getDetailQueryOptions<T, V extends Variables = Variables>(
+export function getDetailQueryOptions<T, V extends { id: string }>(
     document: TypedDocumentNode<T, V> | DocumentNode,
     variables: V,
+    options: Partial<Parameters<typeof queryOptions>[0]> = {},
 ): DefinedInitialDataOptions {
     const queryName = getQueryName(document);
     return queryOptions({
         queryKey: ['DetailPage', queryName, variables],
-        queryFn: () => api.query(document, variables),
+        queryFn: () => (variables.id === NEW_ENTITY_ID ? null : api.query(document, variables)),
+        ...options,
     }) as DefinedInitialDataOptions;
 }
 
@@ -152,7 +156,6 @@ export type DetailPageEntity<
  */
 export interface UseDetailPageResult<
     T extends TypedDocumentNode<any, any>,
-    C extends TypedDocumentNode<any, any>,
     U extends TypedDocumentNode<any, any>,
     EntityField extends keyof ResultOf<T>,
 > {
@@ -242,7 +245,7 @@ export function useDetailPage<
     VarNameCreate extends keyof VariablesOf<C> = 'input',
 >(
     options: DetailPageOptions<T, C, U, EntityField, VarNameCreate, VarNameUpdate>,
-): UseDetailPageResult<T, C, U, EntityField> {
+): UseDetailPageResult<T, U, EntityField> {
     const {
         pageId,
         queryDocument,
@@ -263,12 +266,12 @@ export function useDetailPage<
     const customFieldConfig = useCustomFieldConfig(returnEntityName);
     const extendedDetailQuery = useExtendedDetailQuery(addCustomFields(queryDocument), pageId);
     const detailQueryOptions = getDetailQueryOptions(extendedDetailQuery, {
-        id: isNew ? '__NEW__' : params.id,
+        id: isNew ? NEW_ENTITY_ID : params.id,
     });
     const detailQuery = useSuspenseQuery(detailQueryOptions);
     const entityQueryField = entityField ?? getQueryName(extendedDetailQuery);
 
-    const entity = (detailQuery?.data as any)[entityQueryField] as
+    const entity = (detailQuery?.data as any)?.[entityQueryField] as
         | DetailPageEntity<T, EntityField>
         | undefined;
 

package/vite/tests/barrel-exports.spec.ts

@@ -1,4 +1,4 @@
-import { join } from 'path';
+import { join } from 'node:path';
 import { describe, expect, it } from 'vitest';
 
 import { loadVendureConfig } from '../utils/config-loader.js';