@vendure/dashboard 3.6.3-master-202605050307 → 3.6.3

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.6.3-master-202605050307",
+    "version": "3.6.3",
     "type": "module",
     "repository": {
         "type": "git",
@@ -96,7 +96,7 @@
         "@types/react-dom": "^19.0.4",
         "@uidotdev/usehooks": "^2.4.1",
         "@vendure-io/design-tokens": "^1.1.2",
-        "@vendure-io/ui": "^1.0.5",
+        "@vendure-io/ui": "^1.1.0",
         "@vitejs/plugin-react": "^5.2.0",
         "acorn": "^8.16.0",
         "acorn-walk": "^8.3.5",
@@ -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.3-master-202605050307",
-        "@vendure/core": "^3.6.3-master-202605050307",
+        "@vendure/common": "3.6.3",
+        "@vendure/core": "3.6.3",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.39.0",

package/src/app/routes/_authenticated/_assets/assets.graphql.ts

@@ -17,21 +17,13 @@ export const assetDetailDocument = graphql(
     [assetFragment],
 );
 
-export const assetUpdateDocument = graphql(
-    `
-        mutation AssetUpdate($input: UpdateAssetInput!) {
-            updateAsset(input: $input) {
-                ...Asset
-                tags {
-                    id
-                    value
-                }
-                customFields
-            }
+export const assetUpdateDocument = graphql(`
+    mutation AssetUpdate($input: UpdateAssetInput!) {
+        updateAsset(input: $input) {
+            id
         }
-    `,
-    [assetFragment],
-);
+    }
+`);
 
 export const deleteAssetsDocument = graphql(`
     mutation DeleteAssets($input: DeleteAssetsInput!) {

package/src/lib/components/ui/alert-dialog.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/vdb/lib/utils.js';
-import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { AlertDialogPrimitive } from '@vendure-io/ui/lib/base-ui';
 
 export {
     AlertDialog,

package/src/lib/components/ui/collapsible.tsx

@@ -1,4 +1,4 @@
-import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+import { CollapsiblePrimitive } from '@vendure-io/ui/lib/base-ui';
 import { cn } from '@/vdb/lib/utils.js';
 
 function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {

package/src/lib/components/ui/dialog.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/vdb/lib/utils.js';
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { DialogPrimitive } from '@vendure-io/ui/lib/base-ui';
 
 export {
     Dialog,

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

@@ -2,16 +2,17 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { UserSettingsContext, type UserSettingsContextType } from '../../providers/user-settings.js';
+import type { ActionBarItemPosition } from '../extension-api/types/layout.js';
+import { globalRegistry } from '../registry/global-registry.js';
 import { ActionBarItem } from './action-bar-item-wrapper.js';
-import { PageActionBar, PageBlock, PageLayout } from './page-layout.js';
 import { registerDashboardActionBarItem, registerDashboardPageBlock } from './layout-extensions.js';
+import { PageActionBar, PageBlock, PageLayout } from './page-layout.js';
 import { PageContext } from './page-provider.js';
-import { globalRegistry } from '../registry/global-registry.js';
-import { UserSettingsContext, type UserSettingsContextType } from '../../providers/user-settings.js';
-import type { ActionBarItemPosition } from '../extension-api/types/layout.js';
 
 const useIsMobileMock = vi.hoisted(() => vi.fn(() => false));
 const useCopyToClipboardMock = vi.hoisted(() => vi.fn(() => [null, vi.fn()]));
+const hasPermissionsMock = vi.hoisted(() => vi.fn((_perms: string[]) => true));
 
 vi.mock('@/vdb/hooks/use-mobile.js', () => ({
     useIsMobile: useIsMobileMock,
@@ -23,7 +24,7 @@ vi.mock('@uidotdev/usehooks', () => ({
 
 vi.mock('@/vdb/hooks/use-permissions.js', () => ({
     usePermissions: () => ({
-        hasPermissions: () => true,
+        hasPermissions: hasPermissionsMock,
     }),
 }));
 
@@ -37,6 +38,8 @@ function registerBlock(
     id: string,
     order: 'before' | 'after' | 'replace',
     pageId = 'customer-list',
+    requiresPermission: string[] = [],
+    shouldRender?: () => boolean,
 ): void {
     registerDashboardPageBlock({
         id,
@@ -47,14 +50,12 @@ function registerBlock(
             position: { blockId: 'list-table', order },
         },
         component: ({ context }) => <div data-testid={`page-block-${id}`}>{context.pageId}</div>,
-});
+        requiresPermission,
+        shouldRender,
+    });
 }
 
-function registerActionBarItem(
-    id: string,
-    position?: ActionBarItemPosition,
-    pageId = 'customer-list',
-): void {
+function registerActionBarItem(id: string, position?: ActionBarItemPosition, pageId = 'customer-list'): void {
     registerDashboardActionBarItem({
         pageId,
         id,
@@ -152,6 +153,15 @@ function renderActionBar(
     );
 }
 
+function renderWithOriginal({ isDesktop = true } = {}) {
+    return renderPageLayout(
+        <PageBlock column="main" blockId="list-table">
+            <div data-testid="page-block-original">original</div>
+        </PageBlock>,
+        { isDesktop },
+    );
+}
+
 function getRenderedBlockIds(markup: string) {
     return Array.from(markup.matchAll(/data-testid="(page-block-[^"]+)"/g)).map(match => match[1]);
 }
@@ -165,6 +175,7 @@ describe('PageLayout', () => {
         useIsMobileMock.mockReset();
         useCopyToClipboardMock.mockReset();
         useCopyToClipboardMock.mockReturnValue([null, vi.fn()]);
+        hasPermissionsMock.mockReset();
         const pageBlockRegistry = globalRegistry.get('dashboardPageBlockRegistry');
         pageBlockRegistry.clear();
         const actionBarItemRegistry = globalRegistry.get('dashboardActionBarItemRegistry');
@@ -178,10 +189,10 @@ describe('PageLayout', () => {
 
         const markup = renderPageLayout(
             <PageBlock column="main" blockId="list-table">
-        <div data-testid="page-block-original">original</div>
+                <div data-testid="page-block-original">original</div>
             </PageBlock>,
-        { isDesktop: true },
-    );
+            { isDesktop: true },
+        );
 
         expect(getRenderedBlockIds(markup)).toEqual([
             'page-block-before-1',
@@ -197,10 +208,10 @@ describe('PageLayout', () => {
 
         const markup = renderPageLayout(
             <PageBlock column="main" blockId="list-table">
-        <div data-testid="page-block-original">original</div>
+                <div data-testid="page-block-original">original</div>
             </PageBlock>,
-        { isDesktop: true },
-    );
+            { isDesktop: true },
+        );
 
         expect(getRenderedBlockIds(markup)).toEqual(['page-block-replacement-1', 'page-block-replacement-2']);
     });
@@ -211,10 +222,10 @@ describe('PageLayout', () => {
 
         const markup = renderPageLayout(
             <PageBlock column="main" blockId="list-table">
-        <div data-testid="page-block-original">original</div>
+                <div data-testid="page-block-original">original</div>
             </PageBlock>,
-        { isDesktop: false },
-    );
+            { isDesktop: false },
+        );
 
         expect(getRenderedBlockIds(markup)).toEqual([
             'page-block-before-mobile',
@@ -223,6 +234,73 @@ describe('PageLayout', () => {
         ]);
     });
 
+    it("won't render blocks without required permissions", () => {
+        hasPermissionsMock.mockReturnValue(false);
+
+        registerBlock('permission-guard', 'before', 'customer-list', ['permission-2']);
+
+        expect(getRenderedBlockIds(renderWithOriginal())).toEqual(['page-block-original']);
+    });
+
+    // #4679 follow-up — when a `replace`-ordered extension block requires a permission the user
+    // does not have, the slot is rendered empty instead of falling back to the original child.
+    // Root cause: `replacementBlockExists` is computed in page-layout.tsx without consulting
+    // `hasPermissions`, so the original block is suppressed even though the replacement is then
+    // filtered out by the new permission check at the `ExtensionBlock` resolution site.
+    it('falls back to the original block when a replace-ordered extension is denied by permissions', () => {
+        hasPermissionsMock.mockReturnValue(false);
+
+        registerBlock('permission-replacement', 'replace', 'customer-list', ['restricted-permission']);
+
+        expect(getRenderedBlockIds(renderWithOriginal())).toEqual(['page-block-original']);
+    });
+
+    // Multi-block variant of the regression test above. With the bug present, `replacementBlockExists`
+    // would be `true` (any block with `order === 'replace'` triggered it, regardless of permissions),
+    // suppressing the original. The expected result `[]` would have failed this assertion.
+    it('falls back to the original block when ALL replace-ordered extensions are permission-denied', () => {
+        hasPermissionsMock.mockReturnValue(false);
+
+        registerBlock('replacement-1', 'replace', 'customer-list', ['perm-1']);
+        registerBlock('replacement-2', 'replace', 'customer-list', ['perm-2']);
+
+        expect(getRenderedBlockIds(renderWithOriginal())).toEqual(['page-block-original']);
+    });
+
+    // Documents the mixed-permission case: when at least one replacement is allowed,
+    // the original child is suppressed (since a real replacement renders) and only
+    // permitted replacements appear. Note: this scenario passes both pre- and post-fix
+    // — it covers the per-block JSX gate, not `replacementBlockExists`.
+    it('renders only allowed replacements when replace permissions are mixed (original suppressed)', () => {
+        hasPermissionsMock.mockImplementation((perms: string[]) => perms.includes('allowed-perm'));
+
+        registerBlock('replacement-allowed', 'replace', 'customer-list', ['allowed-perm']);
+        registerBlock('replacement-denied', 'replace', 'customer-list', ['denied-perm']);
+
+        // toEqual is exact — proves replacement-denied is absent AND original is absent
+        expect(getRenderedBlockIds(renderWithOriginal())).toEqual(['page-block-replacement-allowed']);
+    });
+
+    it('falls back to the original block when a replace-ordered extension shouldRender returns false', () => {
+        // Explicit: hasPermissions must return true so that shouldRender is the *only* veto under test.
+        // Without this, the post-`mockReset` mock returns undefined (falsy) and the test would pass
+        // for the wrong reason if check ordering inside `willBlockRender` were ever changed.
+        hasPermissionsMock.mockReturnValue(true);
+
+        registerBlock('replacement-disabled', 'replace', 'customer-list', [], () => false);
+
+        expect(getRenderedBlockIds(renderWithOriginal())).toEqual(['page-block-original']);
+    });
+
+    it('renders only the original when both before- and replace-ordered extensions are permission-denied', () => {
+        hasPermissionsMock.mockReturnValue(false);
+
+        registerBlock('before-denied', 'before', 'customer-list', ['restricted']);
+        registerBlock('replace-denied', 'replace', 'customer-list', ['restricted']);
+
+        expect(getRenderedBlockIds(renderWithOriginal())).toEqual(['page-block-original']);
+    });
+
     it('positions an extension action bar item before another extension item', () => {
         registerActionBarItem('a');
         registerActionBarItem('b', { itemId: 'a', order: 'before' });

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

@@ -7,6 +7,7 @@ import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useIsMobile } from '@/vdb/hooks/use-mobile.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
 import { cn } from '@/vdb/lib/utils.js';
 import { useCopyToClipboard } from '@uidotdev/usehooks';
 import { CheckIcon, CopyIcon, EllipsisVerticalIcon, InfoIcon } from 'lucide-react';
@@ -218,6 +219,7 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
     // Separate blocks into categories
     const childArray: React.ReactElement<PageBlockProps>[] = [];
     const extensionBlocks = getDashboardPageBlocks(page.pageId ?? '');
+    const { hasPermissions } = usePermissions();
     React.Children.forEach(children, child => {
         if (isPageBlock(child)) {
             childArray.push(child);
@@ -250,18 +252,29 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
                 return orderPriority[a.location.position.order] - orderPriority[b.location.position.order];
             });
 
+            type ExtensionBlockEntry = (typeof arrangedExtensionBlocks)[number];
+
+            // using `hasPermissions` over `PermissionGuard` as this would defeat the `isPageBlock` typeguard
+            const willBlockRender = (
+                block: ExtensionBlockEntry,
+            ): block is ExtensionBlockEntry & { component: NonNullable<ExtensionBlockEntry['component']> } => {
+                if (!block.component) return false;
+                if (typeof block.shouldRender === 'function' && !block.shouldRender(page)) {
+                    return false;
+                }
+                const required = block.requiresPermission ?? [];
+                return hasPermissions(Array.isArray(required) ? required : [required]);
+            };
+
+            // A `replace`-ordered block only counts as a replacement when it would actually render —
+            // otherwise the original child must be kept as a fallback.
             const replacementBlockExists = arrangedExtensionBlocks.some(
-                block => block.location.position.order === 'replace',
+                block => block.location.position.order === 'replace' && willBlockRender(block),
             );
 
             let childBlockInserted = false;
             if (matchingExtensionBlocks.length > 0) {
                 for (const extensionBlock of arrangedExtensionBlocks) {
-                    let extensionBlockShouldRender = true;
-                    if (typeof extensionBlock?.shouldRender === 'function') {
-                        extensionBlockShouldRender = extensionBlock.shouldRender(page);
-                    }
-
                     // Insert child block before the first non-"before" block
                     if (
                         !childBlockInserted &&
@@ -272,24 +285,21 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
                         childBlockInserted = true;
                     }
 
+                    if (!willBlockRender(extensionBlock)) continue;
+
                     const isFullWidth = extensionBlock.location.column === 'full';
                     const BlockComponent = isFullWidth ? FullWidthPageBlock : PageBlock;
 
-                    const ExtensionBlock =
-                        extensionBlock.component && extensionBlockShouldRender ? (
-                            <BlockComponent
-                                key={extensionBlock.id}
-                                column={extensionBlock.location.column}
-                                blockId={extensionBlock.id}
-                                title={extensionBlock.title}
-                            >
-                                {<extensionBlock.component context={page} />}
-                            </BlockComponent>
-                        ) : undefined;
-
-                    if (extensionBlockShouldRender && ExtensionBlock) {
-                        finalChildArray.push(ExtensionBlock);
-                    }
+                    finalChildArray.push(
+                        <BlockComponent
+                            key={extensionBlock.id}
+                            column={extensionBlock.location.column}
+                            blockId={extensionBlock.id}
+                            title={extensionBlock.title}
+                        >
+                            <extensionBlock.component context={page} />
+                        </BlockComponent>,
+                    );
                 }
 
                 // If all blocks were "before", insert child block at the end