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

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/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>
-    );
-}