@vendure/dashboard 3.6.1-master-202604080307 → 3.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.6.1-master-202604080307",
+    "version": "3.6.1",
     "type": "module",
     "repository": {
         "type": "git",
@@ -137,8 +137,8 @@
         "@storybook/addon-vitest": "^10.3.1",
         "@storybook/react-vite": "^10.3.1",
         "@types/node": "^22.19.0",
-        "@vendure/common": "^3.6.1-master-202604080307",
-        "@vendure/core": "^3.6.1-master-202604080307",
+        "@vendure/common": "3.6.1",
+        "@vendure/core": "3.6.1",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.39.0",

package/src/app/main.tsx

@@ -9,6 +9,7 @@ import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
 import { defaultLocale, dynamicActivate } from '@/vdb/providers/i18n-provider.js';
 import { AnyRoute, createRouter, RouterOptions, RouterProvider } from '@tanstack/react-router';
 import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import ReactDOM from 'react-dom/client';
 
 import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
@@ -116,7 +117,7 @@ function App() {
         extensionsLoaded && (
             <AppProviders>
                 <InnerApp />
-                <Toaster />
+                {createPortal(<Toaster />, document.body)}
             </AppProviders>
         )
     );

package/src/app/routes/_authenticated/_customers/components/customer-address-card.tsx

@@ -123,7 +123,7 @@ export function CustomerAddressCard({
                             <DialogTrigger>
                                 <EditIcon className="w-4 h-4" />
                             </DialogTrigger>
-                            <DialogContent>
+                            <DialogContent className="max-h-[90vh] overflow-y-auto">
                                 <DialogHeader>
                                     <DialogTitle>
                                         <Trans>Edit Address</Trans>

package/src/app/routes/_authenticated/_customers/customers_.$id.tsx

@@ -14,6 +14,7 @@ import {
 import { Input } from '@/vdb/components/ui/input.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { ActionBarItem } from '@/vdb/framework/layout-engine/action-bar-item-wrapper.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -23,7 +24,6 @@ import {
     PageLayout,
     PageTitle,
 } from '@/vdb/framework/layout-engine/page-layout.js';
-import { ActionBarItem } from '@/vdb/framework/layout-engine/action-bar-item-wrapper.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
@@ -222,7 +222,7 @@ function CustomerDetailPage() {
                                 <DialogTrigger render={<Button variant="outline" />}>
                                     <Plus className="w-4 h-4" /> <Trans>Add new address</Trans>
                                 </DialogTrigger>
-                                <DialogContent>
+                                <DialogContent className="max-h-[90vh] overflow-y-auto">
                                     <DialogHeader>
                                         <DialogTitle>
                                             <Trans>Add new address</Trans>

package/src/app/routes/_authenticated/index.tsx

@@ -2,7 +2,8 @@ import { DateRangePicker } from '@/vdb/components/date-range-picker.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import type { GridLayout as GridLayoutType } from '@/vdb/components/ui/grid-layout.js';
 import { GridLayout } from '@/vdb/components/ui/grid-layout.js';
-import { getDashboardWidget, getDashboardWidgetRegistry, } from '@/vdb/framework/dashboard-widget/widget-extensions.js';
+import { getDashboardWidget, getDashboardWidgetRegistry } from '@/vdb/framework/dashboard-widget/widget-extensions.js';
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
 import { DefinedDateRange, WidgetFiltersProvider, } from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
 import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
 import {
@@ -75,11 +76,19 @@ function DashboardPage() {
     });
 
     const { settings, setWidgetLayout } = useUserSettings();
+    const { hasPermissions } = usePermissions();
 
     useEffect(() => {
         const savedLayouts = settings.widgetLayout || {};
 
-        const initialWidgets = Array.from(getDashboardWidgetRegistry().entries()).reduce(
+        const initialWidgets = Array.from(getDashboardWidgetRegistry().entries())
+            .filter(([, widget]) => {
+                if (!widget.requiresPermissions || widget.requiresPermissions.length === 0) {
+                    return true;
+                }
+                return hasPermissions(widget.requiresPermissions);
+            })
+            .reduce(
             (acc: DashboardWidgetInstance[], [id, widget]) => {
                 const defaultSize = {
                     w: widget.defaultSize.w ?? 4, // Default 4 columns
@@ -130,7 +139,7 @@ function DashboardPage() {
 
         setWidgets(initialWidgets);
         setIsInitialized(true);
-    }, [settings.widgetLayout]);
+    }, [settings.widgetLayout, hasPermissions]);
 
     // Save layout when edit mode is turned off
     useEffect(() => {

package/src/lib/framework/defaults.ts

@@ -264,6 +264,7 @@ export function registerDefaults() {
         component: MetricsWidget,
         defaultSize: { w: 12, h: 6, x: 0, y: 0 },
         minSize: { w: 6, h: 4 },
+        requiresPermissions: ['ReadOrder'],
     });
 
     registerDashboardWidget({
@@ -271,6 +272,7 @@ export function registerDefaults() {
         name: /* i18n*/ 'Latest Orders Widget',
         component: LatestOrdersWidget,
         defaultSize: { w: 6, h: 7, x: 0, y: 0 },
+        requiresPermissions: ['ReadOrder'],
     });
 
     registerDashboardWidget({
@@ -278,6 +280,7 @@ export function registerDefaults() {
         name: /* i18n*/ 'Orders Summary Widget',
         component: OrdersSummaryWidget,
         defaultSize: { w: 6, h: 3, x: 6, y: 0 },
+        requiresPermissions: ['ReadOrder'],
     });
 
     registerAlert(searchIndexBufferAlert);

package/src/lib/framework/extension-api/define-dashboard-extension.spec.ts

@@ -1,5 +1,9 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import {
+    getDashboardWidgetRegistry,
+    registerDashboardWidget,
+} from '../dashboard-widget/widget-extensions.js';
 import {
     addNavMenuSection,
     getNavMenuConfig,
@@ -12,6 +16,7 @@ import {
     defineDashboardExtension,
     executeDashboardExtensionCallbacks,
 } from './define-dashboard-extension.js';
+import { DashboardWidgetDefinition } from './types/index.js';
 
 function resetNavState() {
     setNavMenuConfig({ sections: [] });
@@ -20,6 +25,10 @@ function resetNavState() {
     (globalRegistry as any).registry.set('navMenuModifiers', []);
 }
 
+function resetWidgetRegistry() {
+    globalRegistry.set('dashboardWidgetRegistry', () => new Map<string, DashboardWidgetDefinition>());
+}
+
 describe('defineDashboardExtension - navSections', () => {
     beforeEach(() => {
         resetNavState();
@@ -220,3 +229,71 @@ describe('defineDashboardExtension - navSections', () => {
         ]);
     });
 });
+
+describe('DashboardWidgetDefinition - requiresPermissions', () => {
+    beforeEach(() => {
+        resetWidgetRegistry();
+    });
+
+    it('registers a widget without requiresPermissions', () => {
+        const DummyComponent = () => null;
+        registerDashboardWidget({
+            id: 'test-widget',
+            name: 'Test Widget',
+            component: DummyComponent,
+            defaultSize: { w: 6, h: 3 },
+        });
+
+        const registry = getDashboardWidgetRegistry();
+        const widget = registry.get('test-widget');
+        expect(widget).toBeDefined();
+        expect(widget?.requiresPermissions).toBeUndefined();
+    });
+
+    it('registers a widget with requiresPermissions and preserves the value', () => {
+        const DummyComponent = () => null;
+        registerDashboardWidget({
+            id: 'restricted-widget',
+            name: 'Restricted Widget',
+            component: DummyComponent,
+            defaultSize: { w: 6, h: 3 },
+            requiresPermissions: ['ReadOrder'],
+        });
+
+        const registry = getDashboardWidgetRegistry();
+        const widget = registry.get('restricted-widget');
+        expect(widget).toBeDefined();
+        expect(widget?.requiresPermissions).toEqual(['ReadOrder']);
+    });
+
+    it('supports multiple permissions', () => {
+        const DummyComponent = () => null;
+        registerDashboardWidget({
+            id: 'multi-perm-widget',
+            name: 'Multi Permission Widget',
+            component: DummyComponent,
+            defaultSize: { w: 4, h: 2 },
+            requiresPermissions: ['ReadOrder', 'ReadCatalog'],
+        });
+
+        const registry = getDashboardWidgetRegistry();
+        const widget = registry.get('multi-perm-widget');
+        expect(widget?.requiresPermissions).toEqual(['ReadOrder', 'ReadCatalog']);
+    });
+
+    it('preserves an empty requiresPermissions array (public widget)', () => {
+        const DummyComponent = () => null;
+        registerDashboardWidget({
+            id: 'empty-perm-widget',
+            name: 'Empty Perm Widget',
+            component: DummyComponent,
+            defaultSize: { w: 6, h: 3 },
+            requiresPermissions: [],
+        });
+
+        const registry = getDashboardWidgetRegistry();
+        const widget = registry.get('empty-perm-widget');
+        expect(widget).toBeDefined();
+        expect(widget?.requiresPermissions).toEqual([]);
+    });
+});

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

@@ -98,4 +98,12 @@ export type DashboardWidgetDefinition = {
      * The maximum size constraints for the widget.
      */
     maxSize?: { w: number; h: number };
+    /**
+     * @description
+     * If set, the widget will only be displayed if the current user has
+     * at least one of the specified permissions in the active channel.
+     *
+     * If not set, the widget will be visible to all users.
+     */
+    requiresPermissions?: string[];
 };

package/src/lib/hooks/use-permissions.ts

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { useAuth } from './use-auth.js';
 import { useChannel } from './use-channel.js';
 
@@ -22,19 +24,24 @@ export function usePermissions() {
     const { channels } = useAuth();
     const { activeChannel } = useChannel();
 
-    function hasPermissions(permissions: string[]) {
-        if (permissions.length === 0) {
-            return true;
-        }
-        // Use the selected channel instead of settings.activeChannelId
-        const selectedChannel = (channels ?? []).find(channel => channel.id === activeChannel?.id);
-        if (!selectedChannel) {
-            return false;
-        }
-        return permissions.some(permission =>
-            selectedChannel.permissions.includes(permission as (typeof selectedChannel.permissions)[number]),
-        );
-    }
+    const hasPermissions = useCallback(
+        (permissions: string[]) => {
+            if (permissions.length === 0) {
+                return true;
+            }
+            // Use the selected channel instead of settings.activeChannelId
+            const selectedChannel = (channels ?? []).find(channel => channel.id === activeChannel?.id);
+            if (!selectedChannel) {
+                return false;
+            }
+            return permissions.some(permission =>
+                selectedChannel.permissions.includes(
+                    permission as (typeof selectedChannel.permissions)[number],
+                ),
+            );
+        },
+        [channels, activeChannel?.id],
+    );
 
     return { hasPermissions };
 }

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

@@ -226,12 +226,12 @@ export function ChannelProvider({ children }: Readonly<{ children: React.ReactNo
     const refreshChannels = React.useCallback(() => {
         refreshCurrentUser();
         queryClient.invalidateQueries({
-            queryKey: ['channels', isAuthenticated],
+            queryKey: ['channels'],
         });
         queryClient.invalidateQueries({
-            queryKey: ['activeChannel', isAuthenticated],
+            queryKey: ['activeChannel'],
         });
-    }, [refreshCurrentUser, queryClient, isAuthenticated]);
+    }, [refreshCurrentUser, queryClient]);
 
     const contextValue: ChannelContext = React.useMemo(
         () => ({