@vendure/dashboard 3.4.3-master-202509180227 → 3.4.3-master-202509200226

package/src/lib/framework/defaults.ts

@@ -37,30 +37,35 @@ export function registerDefaults() {
                         title: 'Products',
                         url: '/products',
                         order: 100,
+                        requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'product-variants',
                         title: 'Product Variants',
                         url: '/product-variants',
                         order: 200,
+                        requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'facets',
                         title: 'Facets',
                         url: '/facets',
                         order: 300,
+                        requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'collections',
                         title: 'Collections',
                         url: '/collections',
                         order: 400,
+                        requiresPermission: ['ReadCollection', 'ReadCatalog'],
                     },
                     {
                         id: 'assets',
                         title: 'Assets',
                         url: '/assets',
                         order: 500,
+                        requiresPermission: ['ReadAsset', 'ReadCatalog'],
                     },
                 ],
             },
@@ -76,6 +81,7 @@ export function registerDefaults() {
                         title: 'Orders',
                         url: '/orders',
                         order: 100,
+                        requiresPermission: ['ReadOrder'],
                     },
                 ],
             },
@@ -91,12 +97,14 @@ export function registerDefaults() {
                         title: 'Customers',
                         url: '/customers',
                         order: 100,
+                        requiresPermission: ['ReadCustomer'],
                     },
                     {
                         id: 'customer-groups',
                         title: 'Customer Groups',
                         url: '/customer-groups',
                         order: 200,
+                        requiresPermission: ['ReadCustomerGroup'],
                     },
                 ],
             },
@@ -112,6 +120,7 @@ export function registerDefaults() {
                         title: 'Promotions',
                         url: '/promotions',
                         order: 100,
+                        requiresPermission: ['ReadPromotion'],
                     },
                 ],
             },
@@ -127,18 +136,21 @@ export function registerDefaults() {
                         title: 'Job Queue',
                         url: '/job-queue',
                         order: 100,
+                        requiresPermission: ['ReadSystem'],
                     },
                     {
                         id: 'healthchecks',
                         title: 'Healthchecks',
                         url: '/healthchecks',
                         order: 200,
+                        requiresPermission: ['ReadSystem'],
                     },
                     {
                         id: 'scheduled-tasks',
                         title: 'Scheduled Tasks',
                         url: '/scheduled-tasks',
                         order: 300,
+                        requiresPermission: ['ReadSystem'],
                     },
                 ],
             },
@@ -154,72 +166,84 @@ export function registerDefaults() {
                         title: 'Sellers',
                         url: '/sellers',
                         order: 100,
+                        requiresPermission: ['ReadSeller'],
                     },
                     {
                         id: 'channels',
                         title: 'Channels',
                         url: '/channels',
                         order: 200,
+                        requiresPermission: ['ReadChannel'],
                     },
                     {
                         id: 'stock-locations',
                         title: 'Stock Locations',
                         url: '/stock-locations',
                         order: 300,
+                        requiresPermission: ['ReadStockLocation'],
                     },
                     {
                         id: 'administrators',
                         title: 'Administrators',
                         url: '/administrators',
                         order: 400,
+                        requiresPermission: ['ReadAdministrator'],
                     },
                     {
                         id: 'roles',
                         title: 'Roles',
                         url: '/roles',
                         order: 500,
+                        requiresPermission: ['ReadAdministrator'],
                     },
                     {
                         id: 'shipping-methods',
                         title: 'Shipping Methods',
                         url: '/shipping-methods',
                         order: 600,
+                        requiresPermission: ['ReadShippingMethod'],
                     },
                     {
                         id: 'payment-methods',
                         title: 'Payment Methods',
                         url: '/payment-methods',
                         order: 700,
+                        requiresPermission: ['ReadPaymentMethod'],
                     },
                     {
                         id: 'tax-categories',
                         title: 'Tax Categories',
                         url: '/tax-categories',
                         order: 800,
+                        requiresPermission: ['ReadTaxCategory'],
                     },
                     {
                         id: 'tax-rates',
                         title: 'Tax Rates',
                         url: '/tax-rates',
                         order: 900,
+                        requiresPermission: ['ReadTaxRate'],
                     },
                     {
                         id: 'countries',
                         title: 'Countries',
                         url: '/countries',
                         order: 1000,
+                        requiresPermission: ['ReadCountry'],
                     },
                     {
                         id: 'zones',
                         title: 'Zones',
                         url: '/zones',
                         order: 1100,
+                        requiresPermission: ['ReadZone'],
                     },
                     {
                         id: 'global-settings',
                         title: 'Global Settings',
                         url: '/global-settings',
                         order: 1200,
+                        requiresPermission: ['UpdateGlobalSettings'],
                     },
                 ],
             },

package/src/lib/framework/extension-api/types/navigation.ts

@@ -27,6 +27,10 @@ export interface DashboardRouteDefinition {
      * @description
      * Optional navigation menu item configuration to add this route to the nav menu
      * on the left side of the dashboard.
+     *
+     * The `sectionId` specifies which nav menu section (e.g. "catalog", "customers")
+     * this item should appear in. It can also point to custom nav menu sections that
+     * have been defined using the `navSections` extension property.
      */
     navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
     /**
@@ -42,8 +46,12 @@ export interface DashboardRouteDefinition {
  * @description
  * Defines a custom navigation section in the dashboard sidebar.
  *
+ * Individual items can then be added to the section by defining routes in the
+ * `routes` property of your Dashboard extension.
+ *
  * @docsCategory extensions-api
  * @docsPage Navigation
+ * @docsWeight 0
  * @since 3.4.0
  */
 export interface DashboardNavSectionDefinition {

package/src/lib/framework/nav-menu/nav-menu-extensions.ts

@@ -5,15 +5,41 @@ import { globalRegistry } from '../registry/global-registry.js';
 // Define the placement options for navigation sections
 export type NavMenuSectionPlacement = 'top' | 'bottom';
 
+/**
+ * @description
+ * The base configuration for navigation items and sections of the main app nav bar.
+ *
+ * @docsCategory extensions-api
+ * @docsPage Navigation
+ * @since 3.4.0
+ */
 interface NavMenuBaseItem {
     id: string;
     title: string;
     icon?: LucideIcon;
     order?: number;
     placement?: NavMenuSectionPlacement;
+    /**
+     * @description
+     * This can be used to restrict the menu item to the given
+     * permission or permissions.
+     */
+    requiresPermission?: string | string[];
 }
 
+/**
+ * @description
+ * Defines an items in the navigation menu.
+ *
+ * @docsCategory extensions-api
+ * @docsPage Navigation
+ * @since 3.4.0
+ */
 export interface NavMenuItem extends NavMenuBaseItem {
+    /**
+     * @description
+     * The url of the route which this nav item links to.
+     */
     url: string;
 }
 

package/src/lib/framework/page/list-page.tsx

@@ -38,6 +38,13 @@ export interface ListPageProps<
     route: AnyRoute | (() => AnyRoute);
     title: string | React.ReactElement;
     listQuery: T;
+    /**
+     * @description
+     * Providing the `deleteMutation` will automatically add a "delete" menu item to the
+     * actions column dropdown. Note that if this table already has a "delete" bulk action,
+     * you don't need to additionally provide a delete mutation, because the bulk action
+     * will be added to the action column dropdown already.
+     */
     deleteMutation?: TypedDocumentNode<any, { id: string }>;
     transformVariables?: (variables: V) => V;
     onSearchTermChange?: (searchTerm: string) => NonNullable<V['options']>['filter'];

package/src/lib/graphql/common-operations.ts

@@ -1,3 +1,5 @@
+import { configArgDefinitionFragment } from '@/vdb/graphql/fragments.js';
+
 import { graphql } from './graphql.js';
 
 export const duplicateEntityDocument = graphql(`
@@ -16,3 +18,20 @@ export const duplicateEntityDocument = graphql(`
         }
     }
 `);
+
+export const getEntityDuplicatorsDocument = graphql(
+    `
+        query GetEntityDuplicators {
+            entityDuplicators {
+                code
+                description
+                requiresPermission
+                forEntities
+                args {
+                    ...ConfigArgDefinition
+                }
+            }
+        }
+    `,
+    [configArgDefinitionFragment],
+);

package/src/lib/graphql/fragments.ts

@@ -34,23 +34,32 @@ export const configurableOperationFragment = graphql(`
 
 export type ConfigurableOperationFragment = ResultOf<typeof configurableOperationFragment>;
 
-export const configurableOperationDefFragment = graphql(`
-    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {
-        args {
-            name
-            type
-            required
-            defaultValue
-            list
-            ui
-            label
-            description
-        }
-        code
+export const configArgDefinitionFragment = graphql(`
+    fragment ConfigArgDefinition on ConfigArgDefinition {
+        name
+        type
+        required
+        defaultValue
+        list
+        ui
+        label
         description
     }
 `);
 
+export const configurableOperationDefFragment = graphql(
+    `
+        fragment ConfigurableOperationDef on ConfigurableOperationDefinition {
+            args {
+                ...ConfigArgDefinition
+            }
+            code
+            description
+        }
+    `,
+    [configArgDefinitionFragment],
+);
+
 export const errorResultFragment = graphql(`
     fragment ErrorResult on ErrorResult {
         errorCode
@@ -59,3 +68,4 @@ export const errorResultFragment = graphql(`
 `);
 
 export type ConfigurableOperationDefFragment = ResultOf<typeof configurableOperationDefFragment>;
+export type ConfigArgDefFragment = ResultOf<typeof configArgDefinitionFragment>;

package/src/lib/hooks/use-custom-field-config.ts

@@ -1,10 +1,27 @@
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { CustomFieldConfig } from '@/vdb/providers/server-config.js';
+
 import { useServerConfig } from './use-server-config.js';
 
-export function useCustomFieldConfig(entityType: string) {
+/**
+ * @description
+ * Returns the custom field config for the given entity type (e.g. 'Product').
+ * Also filters out any custom fields that the current active user does not
+ * have permissions to access.
+ *
+ * @docsCategory hooks
+ * @since 3.4.0
+ */
+export function useCustomFieldConfig(entityType: string): CustomFieldConfig[] {
     const serverConfig = useServerConfig();
+    const { hasPermissions } = usePermissions();
     if (!serverConfig) {
         return [];
     }
     const customFieldConfig = serverConfig.entityCustomFields.find(field => field.entityName === entityType);
-    return customFieldConfig?.customFields;
+    return (
+        customFieldConfig?.customFields?.filter(config => {
+            return config.requiresPermission ? hasPermissions(config.requiresPermission) : true;
+        }) ?? []
+    );
 }

package/src/lib/index.ts

@@ -70,7 +70,6 @@ export * from './components/shared/asset/asset-preview-dialog.js';
 export * from './components/shared/asset/asset-preview-selector.js';
 export * from './components/shared/asset/asset-preview.js';
 export * from './components/shared/asset/asset-properties.js';
-export * from './components/shared/asset/focal-point-control.js';
 export * from './components/shared/assign-to-channel-bulk-action.js';
 export * from './components/shared/assign-to-channel-dialog.js';
 export * from './components/shared/assigned-facet-values.js';

package/src/lib/providers/channel-provider.tsx

@@ -19,7 +19,7 @@ const channelFragment = graphql(`
 `);
 
 // Query to get all available channels and the active channel
-const ChannelsQuery = graphql(
+const activeChannelDocument = graphql(
     `
         query ChannelInformation {
             activeChannel {
@@ -28,6 +28,14 @@ const ChannelsQuery = graphql(
                     id
                 }
             }
+        }
+    `,
+    [channelFragment],
+);
+
+const channelsDocument = graphql(
+    `
+        query ChannelInformation {
             channels {
                 items {
                     ...ChannelInfo
@@ -40,7 +48,7 @@ const ChannelsQuery = graphql(
 );
 
 // Define the type for a channel
-type ActiveChannel = ResultOf<typeof ChannelsQuery>['activeChannel'];
+type ActiveChannel = ResultOf<typeof activeChannelDocument>['activeChannel'];
 type Channel = ResultOf<typeof channelFragment>;
 
 /**
@@ -106,10 +114,18 @@ export function ChannelProvider({ children }: Readonly<{ children: React.ReactNo
         return activeChannelId;
     });
 
+    // Fetch active channel
+    const { data: activeChannelData, isLoading: isActiveChannelLoading } = useQuery({
+        queryKey: ['activeChannel', isAuthenticated],
+        queryFn: () => api.query(activeChannelDocument),
+        retry: false,
+        enabled: isAuthenticated,
+    });
+
     // Fetch all available channels
-    const { data: channelsData, isLoading: isChannelsLoading } = useQuery({
+    const { data: channelsData } = useQuery({
         queryKey: ['channels', isAuthenticated],
-        queryFn: () => api.query(ChannelsQuery),
+        queryFn: () => api.query(channelsDocument),
         retry: false,
         enabled: isAuthenticated,
     });
@@ -168,10 +184,10 @@ export function ChannelProvider({ children }: Readonly<{ children: React.ReactNo
         }
     }, [selectedChannelId, channels]);
 
-    const isLoading = isChannelsLoading;
+    const isLoading = isActiveChannelLoading;
 
     // Find the selected channel from the list of channels
-    const selectedChannel = channelsData?.activeChannel;
+    const selectedChannel = activeChannelData?.activeChannel;
 
     const refreshChannels = () => {
         refreshCurrentUser();

package/src/lib/providers/server-config.tsx

@@ -250,6 +250,7 @@ export const getServerConfigDocument = graphql(
 );
 
 type QueryResult = ResultOf<typeof getServerConfigDocument>['globalSettings']['serverConfig'];
+export type CustomFieldConfig = QueryResult['entityCustomFields'][number]['customFields'][number];
 
 export interface ServerConfig {
     availableLanguages: string[];

package/src/app/routes/_authenticated/_collections/components/move-single-collection.tsx

@@ -1,33 +0,0 @@
-import { ResultOf } from 'gql.tada';
-import { useState } from 'react';
-
-import { collectionListDocument } from '../collections.graphql.js';
-import { MoveCollectionsDialog } from './move-collections-dialog.js';
-
-type Collection = ResultOf<typeof collectionListDocument>['collections']['items'][number];
-
-export function useMoveSingleCollection() {
-    const [moveDialogOpen, setMoveDialogOpen] = useState(false);
-    const [collectionsToMove, setCollectionsToMove] = useState<Collection[]>([]);
-
-    const handleMoveClick = (collection: Collection) => {
-        setCollectionsToMove([collection]);
-        setMoveDialogOpen(true);
-    };
-
-    const MoveDialog = () => (
-        <MoveCollectionsDialog
-            open={moveDialogOpen}
-            onOpenChange={setMoveDialogOpen}
-            collectionsToMove={collectionsToMove}
-            onSuccess={() => {
-                // The dialog will handle invalidating queries internally
-            }}
-        />
-    );
-
-    return {
-        handleMoveClick,
-        MoveDialog,
-    };
-}

package/src/lib/components/shared/asset/focal-point-control.tsx

@@ -1,57 +0,0 @@
-import { cn } from '@/vdb/lib/utils.js';
-import { useEffect, useState } from 'react';
-
-export interface Point {
-    x: number;
-    y: number;
-}
-
-interface FocalPointControlProps {
-    width: number;
-    height: number;
-    point: Point;
-    onChange: (point: Point) => void;
-}
-
-export function FocalPointControl({ width, height, point, onChange }: Readonly<FocalPointControlProps>) {
-    const [dragging, setDragging] = useState(false);
-
-    useEffect(() => {
-        if (!dragging) return;
-
-        const handleMouseMove = (e: MouseEvent) => {
-            const rect = (e.target as HTMLDivElement)?.getBoundingClientRect();
-            const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-            const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-            onChange({ x, y });
-        };
-
-        const handleMouseUp = () => {
-            setDragging(false);
-        };
-
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [dragging, onChange]);
-
-    return (
-        <div className="absolute inset-0 cursor-crosshair" onMouseDown={() => setDragging(true)}>
-            <div
-                className={cn(
-                    'absolute w-6 h-6 border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2',
-                    'shadow-[0_0_0_1px_rgba(0,0,0,0.3)]',
-                    dragging && 'scale-75',
-                )}
-                style={{
-                    left: `${point.x * width}px`,
-                    top: `${point.y * height}px`,
-                }}
-            />
-        </div>
-    );
-}