@vendure/dashboard 3.8.1-master-202610230212 → 3.8.1

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

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

@@ -1,4 +1,5 @@
-import { LS_KEY_USER_SETTINGS } from '@/vdb/constants.js';
+import { LS_KEY_USER_SETTINGS, SETTINGS_STORE_KEY_USER_SETTINGS } from '@/vdb/constants.js';
+import { isForbiddenError } from '@/vdb/utils/is-forbidden-error.js';
 import { QueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { ColumnFiltersState } from '@tanstack/react-table';
 import React, { createContext, useEffect, useRef, useState } from 'react';
@@ -136,8 +137,6 @@ export interface UserSettingsContextType {
 
 export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
 
-const SETTINGS_STORE_KEY = 'vendure.dashboard.userSettings';
-
 interface UserSettingsProviderProps {
     queryClient?: QueryClient;
     children: React.ReactNode;
@@ -171,8 +170,8 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
         isError: serverSettingsErrored,
         error,
     } = useQuery({
-        queryKey: ['user-settings', SETTINGS_STORE_KEY],
-        queryFn: () => api.query(getSettingsStoreValueDocument, { key: SETTINGS_STORE_KEY }),
+        queryKey: ['user-settings', SETTINGS_STORE_KEY_USER_SETTINGS],
+        queryFn: () => api.query(getSettingsStoreValueDocument, { key: SETTINGS_STORE_KEY_USER_SETTINGS }),
         retry: false,
         staleTime: 0,
         enabled: settingsStoreIsAvailable,
@@ -181,7 +180,9 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     useEffect(() => {
         if (
             settingsStoreIsAvailable &&
-            error?.message.includes('Settings store field not registered: vendure.dashboard.userSettings')
+            error?.message.includes(
+                `Settings store field not registered: ${SETTINGS_STORE_KEY_USER_SETTINGS}`,
+            )
         ) {
             logSettingsStoreWarning();
             setSettingsStoreIsAvailable(false);
@@ -192,7 +193,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     const saveToServerMutation = useMutation({
         mutationFn: (settingsToSave: UserSettings) =>
             api.mutate(setSettingsStoreValueDocument, {
-                input: { key: SETTINGS_STORE_KEY, value: settingsToSave },
+                input: { key: SETTINGS_STORE_KEY_USER_SETTINGS, value: settingsToSave },
             }),
         onSuccess: (_, settingsSaved) => {
             // Only update serverSettings after successful save
@@ -205,9 +206,11 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
         },
     });
 
-    // Initialize settings from server if available
+    // Initialize settings from the first successful read of the server value. Until then
+    // `serverSettings` stays null, which stops the save effect below from writing this
+    // browser's local copy over the stored value.
     useEffect(() => {
-        if (isReady) {
+        if (serverSettings) {
             return;
         }
         if (serverSettingsLoaded) {
@@ -230,13 +233,26 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
                 setServerSettings(settings);
                 setIsReady(true);
             }
-        } else if (serverSettingsErrored) {
-            // Fetch failed and won't retry (retry: false); fall back to local settings and mark
-            // ready so consumers gating on `settingsReady` don't hang forever.
-            setServerSettings(settings);
+            return;
+        }
+        // A FORBIDDEN read (no session yet) initializes nothing: login() re-reads the settings.
+        // A signed-in user whose channel token grants no permissions gets FORBIDDEN too, and the
+        // settings stay not ready until a later read succeeds, e.g. after a channel switch.
+        if (serverSettingsErrored && !isForbiddenError(error)) {
+            // The read won't retry (retry: false). Mark ready so consumers gating on
+            // `settingsReady` don't hang forever, but leave `serverSettings` unset: the local
+            // copy was never read from the server, so it must not be saved over the stored
+            // value. A later successful read still initializes the settings.
             setIsReady(true);
         }
-    }, [serverSettingsLoaded, serverSettingsErrored, serverSettingsResponse, settings, isReady]);
+    }, [
+        serverSettings,
+        serverSettingsLoaded,
+        serverSettingsErrored,
+        error,
+        serverSettingsResponse,
+        settings,
+    ]);
 
     // Save settings to localStorage whenever they change
     useEffect(() => {

package/src/lib/storage-keys.ts

@@ -1,5 +1,5 @@
 /**
- * The local storage keys, kept in their own module so the Playwright suite can
+ * The local storage and settings store keys, kept in their own module so the Playwright suite can
  * import them. They cannot live in `constants.ts`, because that imports
  * `schema-enums.js`, which imports `virtual:admin-api-schema` — a module only
  * the Vite build provides. Importing `constants.ts` from Playwright's Node
@@ -14,3 +14,5 @@ export const LS_KEY_USER_SETTINGS = 'vendure-user-settings';
 export const LS_KEY_SELECTED_CHANNEL_TOKEN = 'vendure-selected-channel-token';
 export const LS_KEY_SHIPPING_TEST_ORDER = 'vendure-shipping-test-order';
 export const LS_KEY_SHIPPING_TEST_ADDRESS = 'vendure-shipping-test-address';
+/** The settings store key under which the server stores the user settings. */
+export const SETTINGS_STORE_KEY_USER_SETTINGS = 'vendure.dashboard.userSettings';

package/src/lib/utils/is-forbidden-error.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a GraphQL request failed because the request has no session or lacks permission.
+ * `api.query`/`api.mutate` throw a `GraphQLRequestError`, which carries the Vendure error
+ * code in `extensions.code`.
+ */
+export function isForbiddenError(error: unknown): boolean {
+    const code = (error as { extensions?: { code?: unknown } } | null)?.extensions?.code;
+    return code === 'FORBIDDEN' || code === 'UNAUTHORIZED';
+}