@vendure/dashboard 3.6.4-master-202605280309 → 3.6.4

package/src/lib/lib/utils.spec.ts

@@ -0,0 +1,253 @@
+import { describe, expect, it } from 'vitest';
+
+import { removeReadonlyAndLocalizedCustomFields } from './utils.js';
+
+describe('removeReadonlyAndLocalizedCustomFields', () => {
+    it('should return values unchanged when no customFields present', () => {
+        const values = { name: 'Test' };
+        const result = removeReadonlyAndLocalizedCustomFields(values, []);
+        expect(result).toEqual({ name: 'Test' });
+    });
+
+    it('should return falsy values as-is', () => {
+        const result = removeReadonlyAndLocalizedCustomFields(null as any, []);
+        expect(result).toBeNull();
+    });
+
+    it('should remove readonly custom fields', () => {
+        const values = {
+            customFields: {
+                editable: 'yes',
+                locked: 'no',
+            },
+        };
+        const configs = [
+            { name: 'editable', type: 'string' },
+            { name: 'locked', type: 'string', readonly: true },
+        ];
+        const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+        expect(result.customFields).toEqual({ editable: 'yes' });
+    });
+
+    it('should remove localeString and localeText fields from root customFields', () => {
+        const values = {
+            customFields: {
+                regularField: 'value',
+                localeName: 'should be removed',
+                localeDescription: 'should be removed',
+            },
+        };
+        const configs = [
+            { name: 'regularField', type: 'string' },
+            { name: 'localeName', type: 'localeString' },
+            { name: 'localeDescription', type: 'localeText' },
+        ];
+        const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+        expect(result.customFields).toEqual({ regularField: 'value' });
+    });
+
+    it('should remove non-permitted custom fields (fields not in config)', () => {
+        const values = {
+            customFields: {
+                allowed: 'yes',
+                superAdminOnly: 'secret',
+            },
+        };
+        // Only 'allowed' is in the config (user has permission for it)
+        const configs = [{ name: 'allowed', type: 'string' }];
+        const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+        expect(result.customFields).toEqual({ allowed: 'yes' });
+    });
+
+    it('should strip all custom fields when config is empty (no permitted fields)', () => {
+        const values = {
+            customFields: {
+                field1: 'a',
+                field2: 'b',
+            },
+        };
+        const result = removeReadonlyAndLocalizedCustomFields(values, []);
+        expect(result.customFields).toEqual({});
+    });
+
+    it('should handle relation fields with Id suffix for permitted fields', () => {
+        const values = {
+            customFields: {
+                featuredProductId: '123',
+                relatedProductsIds: ['1', '2'],
+            },
+        };
+        const configs = [
+            { name: 'featuredProduct', type: 'relation' },
+            { name: 'relatedProducts', type: 'relation' },
+        ];
+        const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+        expect(result.customFields).toEqual({
+            featuredProductId: '123',
+            relatedProductsIds: ['1', '2'],
+        });
+    });
+
+    it('should remove non-permitted relation fields (Id/Ids suffixed)', () => {
+        const values = {
+            customFields: {
+                allowedProductId: '123',
+                restrictedProductId: '456',
+            },
+        };
+        // Only 'allowedProduct' is permitted
+        const configs = [{ name: 'allowedProduct', type: 'relation' }];
+        const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+        expect(result.customFields).toEqual({ allowedProductId: '123' });
+    });
+
+    it('should remove readonly relation fields with Id suffix', () => {
+        const values = {
+            customFields: {
+                editableProductId: '123',
+                lockedProductId: '456',
+            },
+        };
+        const configs = [
+            { name: 'editableProduct', type: 'relation' },
+            { name: 'lockedProduct', type: 'relation', readonly: true },
+        ];
+        const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+        expect(result.customFields).toEqual({ editableProductId: '123' });
+    });
+
+    it('should remove readonly relation fields with Ids suffix (list relations)', () => {
+        const values = {
+            customFields: {
+                editableItemsIds: ['1', '2'],
+                lockedItemsIds: ['3', '4'],
+            },
+        };
+        const configs = [
+            { name: 'editableItems', type: 'relation' },
+            { name: 'lockedItems', type: 'relation', readonly: true },
+        ];
+        const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+        expect(result.customFields).toEqual({ editableItemsIds: ['1', '2'] });
+    });
+
+    it('should not mutate the original values', () => {
+        const values = {
+            customFields: {
+                allowed: 'yes',
+                restricted: 'secret',
+            },
+        };
+        const configs = [{ name: 'allowed', type: 'string' }];
+        removeReadonlyAndLocalizedCustomFields(values, configs);
+        expect(values.customFields).toEqual({ allowed: 'yes', restricted: 'secret' });
+    });
+
+    describe('translations', () => {
+        it('should remove non-permitted custom fields from translations', () => {
+            const values = {
+                translations: [
+                    {
+                        languageCode: 'en',
+                        customFields: {
+                            allowedField: 'hello',
+                            restrictedField: 'secret',
+                        },
+                    },
+                ],
+            };
+            const configs = [{ name: 'allowedField', type: 'localeString' }];
+            const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+            expect(result.translations[0].customFields).toEqual({ allowedField: 'hello' });
+        });
+
+        it('should remove readonly custom fields from translations', () => {
+            const values = {
+                translations: [
+                    {
+                        languageCode: 'en',
+                        customFields: {
+                            editable: 'can edit',
+                            locked: 'cannot edit',
+                        },
+                    },
+                ],
+            };
+            const configs = [
+                { name: 'editable', type: 'localeString' },
+                { name: 'locked', type: 'localeString', readonly: true },
+            ];
+            const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+            expect(result.translations[0].customFields).toEqual({ editable: 'can edit' });
+        });
+
+        it('should handle multiple translations', () => {
+            const values = {
+                translations: [
+                    {
+                        languageCode: 'en',
+                        customFields: { allowed: 'hello', restricted: 'secret' },
+                    },
+                    {
+                        languageCode: 'de',
+                        customFields: { allowed: 'hallo', restricted: 'geheim' },
+                    },
+                ],
+            };
+            const configs = [{ name: 'allowed', type: 'localeString' }];
+            const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+            expect(result.translations[0].customFields).toEqual({ allowed: 'hello' });
+            expect(result.translations[1].customFields).toEqual({ allowed: 'hallo' });
+        });
+
+        it('should handle translations without customFields', () => {
+            const values = {
+                translations: [{ languageCode: 'en', name: 'Test' }],
+            };
+            const configs = [{ name: 'someField', type: 'localeString' }];
+            const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+            expect(result.translations[0]).toEqual({ languageCode: 'en', name: 'Test' });
+        });
+    });
+
+    describe('combined scenarios', () => {
+        it('should handle a mix of readonly, locale, permitted, and non-permitted fields', () => {
+            const values = {
+                customFields: {
+                    editableString: 'yes',
+                    readonlyString: 'no',
+                    localeName: 'root locale',
+                    nonPermittedField: 'should go',
+                    allowedRelationId: '1',
+                    readonlyRelationId: '2',
+                    nonPermittedRelationId: '3',
+                },
+                translations: [
+                    {
+                        languageCode: 'en',
+                        customFields: {
+                            localeName: 'English name',
+                            nonPermittedLocale: 'should go',
+                        },
+                    },
+                ],
+            };
+            const configs = [
+                { name: 'editableString', type: 'string' },
+                { name: 'readonlyString', type: 'string', readonly: true },
+                { name: 'localeName', type: 'localeString' },
+                { name: 'allowedRelation', type: 'relation' },
+                { name: 'readonlyRelation', type: 'relation', readonly: true },
+                // 'nonPermittedField' and 'nonPermittedRelation' are not in config
+            ];
+            const result = removeReadonlyAndLocalizedCustomFields(values, configs);
+            expect(result.customFields).toEqual({
+                editableString: 'yes',
+                allowedRelationId: '1',
+            });
+            expect(result.translations[0].customFields).toEqual({
+                localeName: 'English name',
+            });
+        });
+    });
+});

package/src/lib/lib/utils.ts

@@ -63,46 +63,77 @@ export function normalizeString(input: string, spaceReplacer = ' '): string {
  * Removes any readonly custom fields from form values before submission.
  * Also removes localeString and localeText fields from the root customFields object
  * since they should only exist in the translations array.
- * This prevents errors when submitting readonly custom field values to mutations.
+ * Additionally removes any custom fields that are not present in the provided config,
+ * which handles fields the user does not have permission to update.
+ * This prevents errors when submitting readonly or permission-restricted custom field values to mutations.
  *
  * @param values - The form values that may contain custom fields
  * @param customFieldConfigs - Array of custom field configurations for the entity
- * @returns The values with readonly custom fields removed and locale fields properly placed
+ *   (should already be filtered to only include fields the current user has access to)
+ * @returns The values with readonly, locale, and non-permitted custom fields removed
  */
 export function removeReadonlyAndLocalizedCustomFields<T extends Record<string, any>>(
     values: T,
     customFieldConfigs: Array<{ name: string; readonly?: boolean | null; type?: string }> = [],
 ): T {
-    if (!values || !customFieldConfigs?.length) {
+    if (!values) {
         return values;
     }
 
     const result = structuredClone(values);
-    const readonlyFieldNames = customFieldConfigs
-        .filter(config => config.readonly === true)
-        .map(config => config.name);
+    const permittedFieldNames = new Set(
+        customFieldConfigs.flatMap(config => {
+            if (config.type === 'relation') {
+                // Relation fields are transformed to `nameId` or `nameIds` by
+                // transformRelationFields() before this function runs
+                return [config.name, `${config.name}Id`, `${config.name}Ids`];
+            }
+            return [config.name];
+        }),
+    );
+    const readonlyFieldNames = customFieldConfigs.flatMap(config => {
+        if (config.readonly !== true) return [];
+        if (config.type === 'relation') {
+            return [config.name, `${config.name}Id`, `${config.name}Ids`];
+        }
+        return [config.name];
+    });
     const localeFieldNames = customFieldConfigs
         .filter(config => config.type === 'localeString' || config.type === 'localeText')
         .map(config => config.name);
     const fieldsToRemoveFromRoot = [...readonlyFieldNames, ...localeFieldNames];
 
     if (result.customFields && typeof result.customFields === 'object') {
+        for (const fieldName of Object.keys(result.customFields)) {
+            if (!permittedFieldNames.has(fieldName)) {
+                delete result.customFields[fieldName];
+            }
+        }
         fieldsToRemoveFromRoot.forEach(fieldName => {
             delete result.customFields[fieldName];
         });
     }
 
-    removeReadonlyFromTranslations(result, readonlyFieldNames);
+    removeNonPermittedAndReadonlyFromTranslations(result, readonlyFieldNames, permittedFieldNames);
     return result;
 }
 
-function removeReadonlyFromTranslations(entity: Record<string, any>, readonlyFieldNames: string[]): void {
+function removeNonPermittedAndReadonlyFromTranslations(
+    entity: Record<string, any>,
+    readonlyFieldNames: string[],
+    permittedFieldNames: Set<string>,
+): void {
     if (!Array.isArray(entity.translations)) {
         return;
     }
 
-    entity.translations.forEach(translation => {
+    entity.translations.forEach((translation: Record<string, any>) => {
         if (translation?.customFields && typeof translation.customFields === 'object') {
+            for (const fieldName of Object.keys(translation.customFields)) {
+                if (!permittedFieldNames.has(fieldName)) {
+                    delete translation.customFields[fieldName];
+                }
+            }
             readonlyFieldNames.forEach(fieldName => {
                 delete translation.customFields[fieldName];
             });

package/src/lib/providers/auth.tsx

@@ -135,6 +135,9 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
         }
     }, [settings.activeChannelId, currentUserData?.me?.channels]);
 
+    // Determine isAuthenticated from currentUserData
+    const isAuthenticated = !!currentUserData?.me?.id;
+
     // Auth actions
     const login = React.useCallback(
         (username: string, password: string, onLoginSuccess?: () => void) => {
@@ -187,26 +190,62 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
 
     const logout = React.useCallback(
         async (onLogoutSuccess?: () => void) => {
+            // Clear any stale error from a previous logout attempt. Matches the
+            // login() pattern (line 149 below clears it on the success path)
+            // and ensures UI doesn't keep rendering a previous failure's
+            // message during a retry.
+            setAuthenticationError(undefined);
             setIsLoginLogoutInProgress(true);
             setStatus('verifying');
-            api.mutate(LogOutMutation)({}).then(async data => {
-                if (data?.logout.success) {
-                    // Clear all cached queries to prevent stale data
-                    queryClient.clear();
-                    // Clear selected channel from localStorage
-                    localStorage.removeItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
+            // Try block scoped to the mutation call only. Exceptions thrown
+            // by the success-branch side-effects below (queryClient.clear,
+            // localStorage.removeItem, onLogoutSuccess) propagate naturally
+            // rather than being misclassified as transport failures.
+            let data;
+            try {
+                data = await api.mutate(LogOutMutation)({});
+            } catch (error) {
+                // Network/server failure. Transport failure doesn't tell us
+                // whether the server applied the logout, so refetch the
+                // current user to determine actual state rather than trusting
+                // the cached isAuthenticated snapshot (staleTime: Infinity
+                // 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) {
                     setStatus('unauthenticated');
-                    setIsLoginLogoutInProgress(false);
-                    onLogoutSuccess?.();
+                } else {
+                    setStatus('authenticated');
                 }
-            });
+                setIsLoginLogoutInProgress(false);
+                return;
+            }
+
+            if (data?.logout.success) {
+                // Clear all cached queries to prevent stale data
+                queryClient.clear();
+                try {
+                    // localStorage can throw (quota exceeded, Safari private
+                    // mode, security errors, storage disabled). The server-side
+                    // logout already succeeded — don't let storage cleanup
+                    // failure block the UI state transition below.
+                    localStorage.removeItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
+                } catch {
+                    // intentionally swallowed — see comment above
+                }
+                setStatus('unauthenticated');
+                setIsLoginLogoutInProgress(false);
+                onLogoutSuccess?.();
+            } else {
+                // Server responded but reported success=false. Restore the
+                // pre-logout authenticated status so the UI is interactive again.
+                setStatus(isAuthenticated ? 'authenticated' : 'unauthenticated');
+                setIsLoginLogoutInProgress(false);
+            }
         },
-        [queryClient],
+        [queryClient, isAuthenticated, refetchCurrentUser],
     );
 
-    // Determine isAuthenticated from currentUserData
-    const isAuthenticated = !!currentUserData?.me?.id;
-
     // Handle status transitions based on query state
     React.useEffect(() => {
         // Don't change status if we're in the middle of login/logout