@vendure/dashboard 3.8.1-master-202610220213 → 3.8.1

package/src/lib/components/shared/paginated-list-data-table.spec.tsx

@@ -0,0 +1,151 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { VisibilityState } from '@tanstack/table-core';
+import { DocumentNode, parse, print } from 'graphql';
+import { act, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { PaginatedListDataTable } from './paginated-list-data-table.js';
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock('virtual:admin-api-schema', () => {
+    return import('../../framework/document-introspection/testing-utils.js').then(m => m.getMockSchemaInfo());
+});
+
+const queryDocuments: DocumentNode[] = [];
+// The visibility changes the DataTable stub reports after mounting
+let reportedVisibilityChange: VisibilityState = {};
+
+vi.mock('@/vdb/graphql/api.js', () => ({
+    api: {
+        query: vi.fn((document: DocumentNode) => {
+            queryDocuments.push(document);
+            return Promise.resolve({ products: { items: [], totalItems: 0 } });
+        }),
+    },
+}));
+
+// Stands in for DataTable, which owns the live column visibility state. After mounting it
+// reports `reportedVisibilityChange` the same way DataTable reports a column settings
+// change through onColumnVisibilityChange.
+vi.mock('@/vdb/components/data-table/data-table.js', () => ({
+    DataTable: (props: {
+        defaultColumnVisibility?: VisibilityState;
+        onColumnVisibilityChange?: (table: any, visibility: VisibilityState) => void;
+    }) => {
+        useEffect(() => {
+            props.onColumnVisibilityChange?.(
+                {},
+                {
+                    ...props.defaultColumnVisibility,
+                    ...reportedVisibilityChange,
+                },
+            );
+        }, []);
+        return null;
+    },
+}));
+
+vi.mock('@/vdb/hooks/use-extended-list-query.js', () => ({
+    useExtendedListQuery: (listQuery: DocumentNode) => listQuery,
+}));
+
+vi.mock('@/vdb/framework/document-introspection/add-custom-fields.js', () => ({
+    addCustomFields: (listQuery: DocumentNode) => listQuery,
+}));
+
+vi.mock('@/vdb/framework/document-introspection/hooks.js', () => ({
+    useListQueryFields: () => [],
+}));
+
+vi.mock('@/vdb/hooks/use-view-option-defaults.js', () => ({
+    useViewOptionDefaults: (defaultColumnVisibility: VisibilityState) => ({
+        defaultColumnVisibility: defaultColumnVisibility ?? {},
+        defaultColumnOrder: [],
+    }),
+}));
+
+vi.mock('../data-table/use-generated-columns.js', () => ({
+    useGeneratedColumns: () => ({
+        columns: [{ id: 'id' }, { id: 'name' }, { id: 'sku' }],
+        customFieldColumnNames: [],
+    }),
+}));
+
+const listQuery = parse(`
+    query ProductList($options: ProductListOptions) {
+        products(options: $options) {
+            items {
+                id
+                name
+                sku
+            }
+            totalItems
+        }
+    }
+`);
+
+describe('PaginatedListDataTable', () => {
+    let container: HTMLDivElement;
+    let root: ReturnType<typeof createRoot>;
+
+    beforeEach(() => {
+        queryDocuments.length = 0;
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    });
+
+    afterEach(() => {
+        act(() => root.unmount());
+        container.remove();
+    });
+
+    async function renderTable() {
+        const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+        await act(async () => {
+            root.render(
+                <QueryClientProvider client={queryClient}>
+                    <PaginatedListDataTable
+                        listQuery={listQuery}
+                        defaultVisibility={{ name: true, sku: false }}
+                        page={1}
+                        itemsPerPage={10}
+                        sorting={[]}
+                        columnFilters={[]}
+                        onPageChange={() => undefined}
+                        onSortChange={() => undefined}
+                    />
+                </QueryClientProvider>,
+            );
+        });
+    }
+
+    function lastQuery() {
+        return print(queryDocuments[queryDocuments.length - 1]);
+    }
+
+    // #5619 — a column shown via the column settings rendered empty cells when the caller
+    // did not persist column visibility, because its field was never selected
+    it('selects the field of a column shown in the DataTable without onColumnVisibilityChange', async () => {
+        reportedVisibilityChange = { sku: true };
+        await renderTable();
+
+        await vi.waitFor(() => {
+            expect(queryDocuments.length).toBeGreaterThan(0);
+            expect(lastQuery()).toMatch(/\bsku\b/);
+        });
+    });
+
+    it('does not select the field of a column that stays hidden', async () => {
+        reportedVisibilityChange = {};
+        await renderTable();
+
+        await vi.waitFor(() => {
+            expect(queryDocuments.length).toBeGreaterThan(0);
+            expect(lastQuery()).toMatch(/\bname\b/);
+            expect(lastQuery()).not.toMatch(/\bsku\b/);
+        });
+    });
+});

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -529,11 +529,20 @@ export function PaginatedListDataTable<
         includeSelectionColumn,
     });
     const columnVisibility = getColumnVisibility(columns, defaultColumnVisibility, customFieldColumnNames);
+    // DataTable owns column visibility and reports it via onColumnVisibilityChange. Mirror it
+    // here so the list query selects every visible column, including when the caller does
+    // not persist visibility.
+    const [liveColumnVisibility, setLiveColumnVisibility] = React.useState<VisibilityState>();
+    const handleColumnVisibilityChange = (table: Table<any>, visibility: VisibilityState) => {
+        setLiveColumnVisibility(visibility);
+        onColumnVisibilityChange?.(table, visibility);
+    };
+    const effectiveColumnVisibility = { ...columnVisibility, ...liveColumnVisibility };
     // Get the actual visible columns and only fetch those
     const visibleColumns = columns
         // Filter out invisible columns, but _always_ select "id"
         // because it is usually needed.
-        .filter(c => columnVisibility[c.id as string] !== false || c.id === 'id')
+        .filter(c => effectiveColumnVisibility[c.id as string] !== false || c.id === 'id')
         .map(c => ({
             name: c.id as string,
             isCustomField: (c.meta as any)?.isCustomField ?? false,
@@ -615,7 +624,7 @@ export function PaginatedListDataTable<
                     onPageChange={onPageChange}
                     onSortChange={onSortChange}
                     onFilterChange={onFilterChange}
-                    onColumnVisibilityChange={onColumnVisibilityChange}
+                    onColumnVisibilityChange={handleColumnVisibilityChange}
                     onSearchTermChange={onSearchTermChange ? term => setSearchTerm(term) : undefined}
                     searchPlaceholder={searchPlaceholder}
                     defaultColumnVisibility={columnVisibility}

package/src/lib/constants.ts

@@ -6,6 +6,7 @@ export {
     LS_KEY_SHIPPING_TEST_ADDRESS,
     LS_KEY_SHIPPING_TEST_ORDER,
     LS_KEY_USER_SETTINGS,
+    SETTINGS_STORE_KEY_USER_SETTINGS,
 } from './storage-keys.js';
 
 export const NEW_ENTITY_PATH = 'new';

package/src/lib/framework/registry/registry-types.ts

@@ -18,7 +18,6 @@ import { DataDisplayComponent } from '../component-registry/component-registry.j
 import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
 import { DataTableDisplayComponent } from '../extension-api/types/data-table.js';
 import { NavMenuConfig } from '../nav-menu/nav-menu-extensions.js';
-import { PlatformGrantedCapabilitiesStore } from '../platform-promotion/platform-granted-capabilities.js';
 
 export interface GlobalRegistryContents {
     extensionSourceChangeCallbacks: Set<() => void>;
@@ -42,5 +41,4 @@ export interface GlobalRegistryContents {
     navMenuModifiers: Array<(config: NavMenuConfig) => NavMenuConfig>;
     dashboardToolbarItemRegistry: Map<string, DashboardToolbarItemDefinition>;
     dashboardCustomProvidersRegistry: Map<string, DashboardCustomProviderDefinition>;
-    platformGrantedCapabilities: PlatformGrantedCapabilitiesStore;
 }

package/src/lib/index.ts

@@ -344,8 +344,6 @@ export * from './framework/page/page-api.js';
 export * from './framework/page/page-types.js';
 export * from './framework/page/use-detail-page.js';
 export * from './framework/page/use-extended-router.js';
-export * from './framework/platform-promotion/platform-granted-capabilities.js';
-export * from './framework/platform-promotion/platform-promotion-types.js';
 export * from './framework/refund-destination/refund-destination-extensions.js';
 export * from './framework/registry/global-registry.js';
 export * from './framework/registry/registry-types.js';
@@ -376,7 +374,6 @@ export * from './hooks/use-page-block.js';
 export * from './hooks/use-page.js';
 export * from './hooks/use-paginated-list.js';
 export * from './hooks/use-permissions.js';
-export * from './hooks/use-platform-promotion.js';
 export * from './hooks/use-redirect-to-list-on-not-found.js';
 export * from './hooks/use-saved-views.js';
 export * from './hooks/use-server-config.js';

package/src/lib/providers/auth.tsx

@@ -2,6 +2,7 @@ import { LS_KEY_SELECTED_CHANNEL_TOKEN } from '@/vdb/constants.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 
@@ -27,7 +28,9 @@ export interface AuthContext {
     authenticationError?: string;
     /**
      * @description
-     * Whether the user is authenticated.
+     * Whether the user can use the Dashboard: they have an active session with access to
+     * at least one Channel. An Administrator without access to any Channel is not
+     * authenticated, as every Channel-scoped query is forbidden for them.
      */
     isAuthenticated: boolean;
     /**
@@ -127,6 +130,15 @@ const CurrentUserQuery = graphql(`
     }
 `);
 
+/**
+ * An Administrator needs access to at least one Channel to use the Dashboard. Without it, every
+ * Channel-scoped query is forbidden, including the server config which the Dashboard waits for
+ * before it renders. See #5617
+ */
+function hasDashboardAccess(currentUser: ResultOf<typeof CurrentUserQuery> | undefined): boolean {
+    return !!currentUser?.me?.channels.length;
+}
+
 const CurrentAdministratorAvatarQuery = `
     query CurrentAdministratorAvatar {
         activeAdministrator {
@@ -148,6 +160,8 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
     const [isLoginLogoutInProgress, setIsLoginLogoutInProgress] = React.useState(false);
     const { settings, setActiveChannelId } = useUserSettings();
     const queryClient = useQueryClient();
+    const { t } = useLingui();
+    const noChannelAccessError = t`You do not have access to any channel`;
 
     // Query for current user
     const {
@@ -174,7 +188,7 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
     }, [settings.activeChannelId, currentUserData?.me?.channels]);
 
     // Determine isAuthenticated from currentUserData
-    const isAuthenticated = !!currentUserData?.me?.id;
+    const isAuthenticated = hasDashboardAccess(currentUserData);
     const { data: avatarData } = useQuery<{
         activeAdministrator: { avatar: AdministratorAvatar | null } | null;
     }>({
@@ -185,6 +199,21 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
         staleTime: Infinity,
     });
 
+    // A session without access to any channel cannot be used, so end it. This also
+    // removes the cached user, so that `user` is not set while `isAuthenticated` is false.
+    const endSessionWithoutChannelAccess = React.useCallback(async () => {
+        setIsLoginLogoutInProgress(true);
+        try {
+            await api.mutate(LogOutMutation)({});
+        } catch {
+            // The session has no access anyway, so the local state is cleared regardless
+        }
+        queryClient.removeQueries({ queryKey: ['currentUser'] });
+        setAuthenticationError(noChannelAccessError);
+        setStatus('unauthenticated');
+        setIsLoginLogoutInProgress(false);
+    }, [queryClient, noChannelAccessError]);
+
     // Auth actions
     const login = React.useCallback(
         (username: string, password: string, onLoginSuccess?: () => void) => {
@@ -194,7 +223,11 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
                 .then(async data => {
                     if (data.login.__typename === 'CurrentUser') {
                         setAuthenticationError(undefined);
-                        const { data: refetchedData } = await refetchCurrentUser();
+                        const { data: refetchedData, error: refetchError } = await refetchCurrentUser();
+                        if (!refetchError && !hasDashboardAccess(refetchedData)) {
+                            await endSessionWithoutChannelAccess();
+                            return;
+                        }
                         // Synchronously set the channel token in localStorage before
                         // invalidating queries. This is critical for non-superadmin users
                         // whose roles are scoped only to non-default channels. Without this,
@@ -221,6 +254,24 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
                         await queryClient.cancelQueries();
                         // Invalidate all queries to ensure fresh data after login
                         await queryClient.invalidateQueries();
+                        // The refetch above can fail, so check the access again with the reloaded
+                        // user. Without access, the Dashboard would wait for the server config forever.
+                        const currentUserState = queryClient.getQueryState<ResultOf<typeof CurrentUserQuery>>(
+                            ['currentUser'],
+                        );
+                        if (
+                            currentUserState?.status === 'success' &&
+                            !hasDashboardAccess(currentUserState.data)
+                        ) {
+                            await endSessionWithoutChannelAccess();
+                            return;
+                        }
+                        if (!hasDashboardAccess(currentUserState?.data)) {
+                            setAuthenticationError(currentUserState?.error?.message);
+                            setStatus('unauthenticated');
+                            setIsLoginLogoutInProgress(false);
+                            return;
+                        }
                         setStatus('authenticated');
                         setIsLoginLogoutInProgress(false);
                         onLoginSuccess?.();
@@ -236,7 +287,13 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
                     setIsLoginLogoutInProgress(false);
                 });
         },
-        [refetchCurrentUser, queryClient, settings.activeChannelId, setActiveChannelId],
+        [
+            refetchCurrentUser,
+            queryClient,
+            settings.activeChannelId,
+            setActiveChannelId,
+            endSessionWithoutChannelAccess,
+        ],
     );
 
     const logout = React.useCallback(
@@ -263,7 +320,7 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
                 // means react-query won't auto-refetch this query).
                 setAuthenticationError(error instanceof Error ? error.message : String(error));
                 const { data: refreshedData, error: refreshedError } = await refetchCurrentUser();
-                if (refreshedError || !refreshedData?.me?.id) {
+                if (refreshedError || !hasDashboardAccess(refreshedData)) {
                     setStatus('unauthenticated');
                 } else {
                     setStatus('authenticated');
@@ -312,13 +369,24 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
 
         // If query has completed (not loading) and we're in verifying state, determine final status
         if (!isLoading && status === 'verifying') {
-            if (currentUserError || !currentUserData?.me?.id) {
+            if (!currentUserError && currentUserData?.me?.id && !isAuthenticated) {
+                // Signed in, but without access to any channel, e.g. after it was removed
+                void endSessionWithoutChannelAccess();
+            } else if (currentUserError || !isAuthenticated) {
                 setStatus('unauthenticated');
             } else {
                 setStatus('authenticated');
             }
         }
-    }, [isLoading, currentUserData, currentUserError, status, isLoginLogoutInProgress]);
+    }, [
+        isLoading,
+        currentUserData,
+        currentUserError,
+        isAuthenticated,
+        status,
+        isLoginLogoutInProgress,
+        endSessionWithoutChannelAccess,
+    ]);
 
     const refreshCurrentUser = () => {
         queryClient.invalidateQueries({

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

@@ -264,13 +264,14 @@ export interface ServerConfig {
 
 // create a provider for the global settings
 export const ServerConfigProvider = ({ children }: { children: React.ReactNode }) => {
-    const { user } = useAuth();
+    const { user, isAuthenticated } = useAuth();
     const queryKey = ['getServerConfig', user?.id];
     const { data } = useQuery({
         queryKey,
         queryFn: () => api.query(getServerConfigDocument),
         retry: false,
-        enabled: !!user?.id,
+        // Like the Channel queries, the server config needs access to a Channel. See #5617
+        enabled: isAuthenticated,
         // The server config rarely changes during a session (it's driven by
         // VendureConfig at boot time). Treat it as session-stable so we don't
         // re-fetch on every reconnect, which would cause flashes of empty

package/src/lib/providers/user-settings.spec.tsx

@@ -0,0 +1,191 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, useContext } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { SETTINGS_STORE_KEY_USER_SETTINGS } from '../storage-keys.js';
+import { UserSettingsContext, type UserSettingsContextType, UserSettingsProvider } from './user-settings.js';
+
+const apiMock = vi.hoisted(() => ({ query: vi.fn(), mutate: vi.fn() }));
+
+vi.mock('../graphql/api.js', () => ({ api: apiMock }));
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+function graphQLError(message: string, code?: string) {
+    return Object.assign(new Error(message), code ? { extensions: { code } } : {});
+}
+
+const forbiddenError = () =>
+    graphQLError('You are not currently authorized to perform this action', 'FORBIDDEN');
+
+describe('UserSettingsProvider', () => {
+    let container: HTMLDivElement;
+    let root: Root;
+    let queryClient: QueryClient;
+    let context: UserSettingsContextType;
+
+    function Probe() {
+        context = useContext(UserSettingsContext)!;
+        return null;
+    }
+
+    async function flush() {
+        for (let i = 0; i < 5; i++) {
+            await act(async () => {
+                await new Promise(resolve => setTimeout(resolve, 0));
+            });
+        }
+    }
+
+    async function render() {
+        await act(async () => {
+            root.render(
+                <QueryClientProvider client={queryClient}>
+                    <UserSettingsProvider queryClient={queryClient}>
+                        <Probe />
+                    </UserSettingsProvider>
+                </QueryClientProvider>,
+            );
+        });
+        await flush();
+    }
+
+    function savedValues() {
+        return apiMock.mutate.mock.calls.map(([, variables]) => variables.input.value);
+    }
+
+    beforeEach(() => {
+        localStorage.clear();
+        apiMock.query.mockReset();
+        apiMock.mutate.mockReset();
+        apiMock.mutate.mockResolvedValue({ setSettingsStoreValue: { result: true } });
+        queryClient = new QueryClient();
+        container = document.createElement('div');
+        root = createRoot(container);
+    });
+
+    afterEach(() => {
+        act(() => root.unmount());
+        queryClient.clear();
+    });
+
+    it('initializes from the stored value and saves changes on top of it', async () => {
+        apiMock.query.mockResolvedValue({ getSettingsStoreValue: { displayLanguage: 'de' } });
+        await render();
+
+        expect(context.settingsReady).toBe(true);
+        expect(context.settings.displayLanguage).toBe('de');
+
+        await act(async () => context.setActiveChannelId('1'));
+        await flush();
+        expect(savedValues()).toEqual([
+            expect.objectContaining({ displayLanguage: 'de', activeChannelId: '1' }),
+        ]);
+    });
+
+    // #5595 — a FORBIDDEN read (no session yet) must not initialize the settings, and the
+    // authenticated re-read after the login must initialize them from the stored value
+    it('does not initialize on a FORBIDDEN read and initializes from the read after login', async () => {
+        apiMock.query.mockRejectedValue(forbiddenError());
+        await render();
+
+        expect(context.settingsReady).toBe(false);
+        // The login sets the active channel before it invalidates the queries
+        await act(async () => context.setActiveChannelId('1'));
+        await flush();
+        expect(apiMock.mutate).not.toHaveBeenCalled();
+
+        apiMock.query.mockResolvedValue({
+            getSettingsStoreValue: { displayLanguage: 'de', tableSettings: { products: { pageSize: 37 } } },
+        });
+        await act(async () => queryClient.invalidateQueries());
+        await flush();
+
+        expect(context.settingsReady).toBe(true);
+        expect(context.settings.displayLanguage).toBe('de');
+        expect(context.settings.tableSettings).toEqual({ products: { pageSize: 37 } });
+        // The stored value has no active channel, so it replaces the one which the login set
+        expect(context.settings.activeChannelId).toBe('');
+        expect(apiMock.mutate).not.toHaveBeenCalled();
+
+        // Stands in for the "Set active channel if needed" effect in AuthProvider
+        await act(async () => context.setActiveChannelId('1'));
+        await flush();
+        expect(savedValues()).toEqual([
+            expect.objectContaining({
+                displayLanguage: 'de',
+                activeChannelId: '1',
+                tableSettings: { products: { pageSize: 37 } },
+            }),
+        ]);
+    });
+
+    it('uses the local settings when the read after login finds no stored value', async () => {
+        apiMock.query.mockRejectedValue(forbiddenError());
+        await render();
+        expect(context.settingsReady).toBe(false);
+
+        apiMock.query.mockResolvedValue({ getSettingsStoreValue: null });
+        await act(async () => queryClient.invalidateQueries());
+        await flush();
+
+        expect(context.settingsReady).toBe(true);
+        expect(apiMock.mutate).not.toHaveBeenCalled();
+
+        const localSettings = context.settings;
+        await act(async () => context.setTheme('dark'));
+        await flush();
+        expect(savedValues()).toEqual([{ ...localSettings, theme: 'dark' }]);
+    });
+
+    it('becomes ready on a failed read without saving the local copy', async () => {
+        apiMock.query.mockRejectedValue(graphQLError('Network request failed'));
+        await render();
+
+        expect(context.settingsReady).toBe(true);
+        await act(async () => context.setTheme('dark'));
+        await flush();
+        expect(apiMock.mutate).not.toHaveBeenCalled();
+    });
+
+    it('initializes from a successful read that follows a failed read', async () => {
+        apiMock.query.mockRejectedValue(graphQLError('Network request failed'));
+        await render();
+        expect(context.settingsReady).toBe(true);
+
+        apiMock.query.mockResolvedValue({ getSettingsStoreValue: { displayLanguage: 'de' } });
+        await act(async () => queryClient.invalidateQueries());
+        await flush();
+        expect(context.settings.displayLanguage).toBe('de');
+
+        await act(async () => context.setTheme('dark'));
+        await flush();
+        expect(savedValues()).toEqual([expect.objectContaining({ displayLanguage: 'de', theme: 'dark' })]);
+    });
+
+    it('does not initialize on an UNAUTHORIZED read', async () => {
+        apiMock.query.mockRejectedValue(graphQLError('Unauthorized', 'UNAUTHORIZED'));
+        await render();
+
+        expect(context.settingsReady).toBe(false);
+        await act(async () => context.setTheme('dark'));
+        await flush();
+        expect(apiMock.mutate).not.toHaveBeenCalled();
+    });
+
+    it('becomes ready when the settings store field is not registered', async () => {
+        const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        apiMock.query.mockRejectedValue(
+            graphQLError(`Settings store field not registered: ${SETTINGS_STORE_KEY_USER_SETTINGS}`),
+        );
+        await render();
+
+        expect(context.settingsReady).toBe(true);
+        expect(context.settingsStoreIsAvailable).toBe(false);
+        await act(async () => context.setTheme('dark'));
+        await flush();
+        expect(apiMock.mutate).not.toHaveBeenCalled();
+        warn.mockRestore();
+    });
+});