@vendure/dashboard 3.6.4-master-202605290309 → 3.6.4

package/src/lib/components/data-input/default-relation-input.tsx

@@ -548,6 +548,66 @@ const createEntityConfigs = (i18n: any) => ({
             );
         },
     }),
+
+    Administrator: createRelationSelectorConfig({
+        idKey: 'id',
+        labelKey: 'lastName',
+        placeholder: i18n`Search administrator...`,
+        // Match the search term against any of the name/email fields independently
+        buildSearchFilter: (term: string) => ({
+            _or: [
+                { firstName: { contains: term } },
+                { lastName: { contains: term } },
+                { emailAddress: { contains: term } },
+            ],
+        }),
+        listQuery: graphql(`
+            query GetAdministratorsForRelationSelector($options: AdministratorListOptions) {
+                administrators(options: $options) {
+                    items {
+                        id
+                        firstName
+                        lastName
+                        emailAddress
+                    }
+                    totalItems
+                }
+            }
+        `),
+        label: (item: any) => (
+            <EntityLabel
+                title={`${item.firstName} ${item.lastName}`}
+                subtitle={item.emailAddress}
+                placeholderLetter={item.firstName?.[0]?.toUpperCase() || 'A'}
+                rounded
+                tooltipText={`${item.firstName} ${item.lastName} (${item.emailAddress})`}
+            />
+        ),
+    }),
+
+    Seller: createRelationSelectorConfig({
+        ...createBaseEntityConfig('Seller', i18n),
+        listQuery: graphql(`
+            query GetSellersForRelationSelector($options: SellerListOptions) {
+                sellers(options: $options) {
+                    items {
+                        id
+                        name
+                    }
+                    totalItems
+                }
+            }
+        `),
+        label: (item: any) => (
+            <EntityLabel
+                title={item.name}
+                subtitle={''}
+                placeholderLetter={item.name?.[0]?.toUpperCase() || 'S'}
+                rounded
+                tooltipText={item.name}
+            />
+        ),
+    }),
 });
 
 type DefaultRelationInputProps = DashboardFormComponentProps & {

package/src/lib/components/data-input/select-with-options.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/vdb/framework/form-engine/form-engine-types.js';
 import {
     extractFieldOptions,
+    isFieldNullable,
     isReadonlyField,
     isStringFieldWithOptions,
     isStringStructFieldWithOptions,
@@ -83,24 +84,30 @@ export function SelectWithOptions({
     }
 
     // For single fields, use regular Select
-    const currentValue = value ?? '';
+    const isNullable = isFieldNullable(fieldDef);
+    const selectValue = isNullable ? (value == null || value === '' ? null : value) : (value ?? '');
 
-    const handleValueChange = (value: string) => {
-        if (value) {
-            onChange(value);
+    const handleValueChange = (newValue: string | null) => {
+        if (isNullable) {
+            onChange(newValue ?? null);
+        } else if (newValue) {
+            onChange(newValue);
         }
     };
 
     const selectItems = Object.fromEntries(
         options.map(option => [option.value, option.label ? getTranslation(option.label) : option.value]),
     );
+    // Add a null item for nullable selects
+    if (isNullable) selectItems.null = '';
 
     return (
-        <Select value={currentValue} onValueChange={handleValueChange} disabled={readOnly} items={selectItems}>
+        <Select value={selectValue} onValueChange={handleValueChange} disabled={readOnly} items={selectItems}>
             <SelectTrigger className="mb-0">
                 <SelectValue placeholder={placeholder || <Trans>Select an option</Trans>} />
             </SelectTrigger>
             <SelectContent>
+                {isNullable && <SelectItem value={null}>{'\u00a0'}</SelectItem>}
                 {options.map(option => (
                     <SelectItem key={option.value} value={option.value}>
                         {option.label ? getTranslation(option.label) : option.value}

package/src/lib/components/shared/configurable-operation-multi-selector.tsx

@@ -14,6 +14,7 @@ import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@v
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect, useRef } from 'react';
 import { ConfigurableOperationInput } from './configurable-operation-input.js';
+import { getInitialConfigArgValue } from './configurable-operation-utils.js';
 
 /**
  * Props interface for ConfigurableOperationMultiSelector component
@@ -178,7 +179,7 @@ export function ConfigurableOperationMultiSelector({
                 code: operation.code,
                 arguments: operationDef.args.map(arg => ({
                     name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : arg.list ? '[]' : '',
+                    value: getInitialConfigArgValue(arg),
                 })),
             },
         ]);

package/src/lib/components/shared/configurable-operation-selector.tsx

@@ -12,6 +12,7 @@ import { useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { Plus } from 'lucide-react';
 import { ConfigurableOperationInput } from './configurable-operation-input.js';
+import { getInitialConfigArgValue } from './configurable-operation-utils.js';
 
 /**
  * Props interface for ConfigurableOperationSelector component
@@ -103,7 +104,7 @@ export function ConfigurableOperationSelector({
             code: operation.code,
             arguments: operationDef.args.map(arg => ({
                 name: arg.name,
-                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                value: getInitialConfigArgValue(arg),
             })),
         });
     };

package/src/lib/components/shared/configurable-operation-utils.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { getInitialConfigArgValue } from './configurable-operation-utils.js';
+
+type ConfigArgDef = ConfigurableOperationDefFragment['args'][number];
+
+const argDef = (overrides: Partial<ConfigArgDef>): ConfigArgDef =>
+    ({
+        name: 'test',
+        type: 'string',
+        required: true,
+        defaultValue: null,
+        list: false,
+        ui: null,
+        label: 'Test',
+        description: null,
+        ...overrides,
+    }) as ConfigArgDef;
+
+describe('getInitialConfigArgValue', () => {
+    it('should initialize list args as JSON arrays', () => {
+        expect(getInitialConfigArgValue(argDef({ list: true }))).toBe('[]');
+        expect(getInitialConfigArgValue(argDef({ list: true, defaultValue: true }))).toBe('[true]');
+    });
+
+    it('should initialize boolean scalar args without defaults as false', () => {
+        expect(getInitialConfigArgValue(argDef({ type: 'boolean' }))).toBe('false');
+    });
+
+    it('should preserve scalar defaults and empty scalar fallback', () => {
+        expect(getInitialConfigArgValue(argDef({ defaultValue: 1 }))).toBe('1');
+        expect(getInitialConfigArgValue(argDef({ type: 'string' }))).toBe('');
+    });
+
+    // The `!= null` guard must treat falsy-but-defined defaults (0, false, '') as
+    // real values rather than absent. A naive truthy check (`if (arg.defaultValue)`)
+    // would drop these and fall through to the type-based fallbacks.
+    it('should preserve falsy-but-defined scalar defaults', () => {
+        expect(getInitialConfigArgValue(argDef({ type: 'int', defaultValue: 0 }))).toBe('0');
+        expect(getInitialConfigArgValue(argDef({ type: 'boolean', defaultValue: false }))).toBe('false');
+        expect(getInitialConfigArgValue(argDef({ type: 'string', defaultValue: '' }))).toBe('');
+    });
+
+    it('should wrap falsy-but-defined list defaults in a JSON array', () => {
+        expect(getInitialConfigArgValue(argDef({ list: true, defaultValue: 0 }))).toBe('[0]');
+        expect(getInitialConfigArgValue(argDef({ list: true, defaultValue: false }))).toBe('[false]');
+    });
+});

package/src/lib/components/shared/configurable-operation-utils.ts

@@ -0,0 +1,18 @@
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+
+type ConfigurableOperationArgDef = ConfigurableOperationDefFragment['args'][number];
+
+export function getInitialConfigArgValue(arg: ConfigurableOperationArgDef): string {
+    if (arg.list) {
+        return arg.defaultValue != null ? JSON.stringify([arg.defaultValue]) : '[]';
+    }
+    if (arg.defaultValue != null) {
+        return arg.defaultValue.toString();
+    }
+    // Required boolean args render as an off switch by default, so persist the
+    // same explicit false value that the UI communicates to validation.
+    if (arg.type === 'boolean') {
+        return 'false';
+    }
+    return '';
+}

package/src/lib/framework/form-engine/form-schema-tools.spec.ts

@@ -2,6 +2,7 @@ import { FieldInfo } from '@/vdb/framework/document-introspection/get-document-s
 import { describe, expect, it } from 'vitest';
 
 import {
+    applyNullableSelectCustomFieldDefaults,
     createFormSchemaFromFields,
     getDefaultValuesFromFields,
     getZodTypeFromField,
@@ -643,6 +644,44 @@ describe('form-schema-tools', () => {
             const defaults = getDefaultValuesFromFields(fields, 'en');
             expect(defaults.value).toBe(expected);
         });
+
+        it('nullable string custom field with options should default to null', () => {
+            const fields: FieldInfo[] = [
+                createMockField('customFields', 'Object', false, false, [
+                    createMockField('featureType', 'String', true),
+                ]),
+            ];
+            const customFieldConfigs = [
+                {
+                    name: 'featureType',
+                    type: 'string',
+                    nullable: true,
+                    readonly: false,
+                    list: false,
+                    options: [{ value: 'standard' }, { value: 'premium' }],
+                },
+            ] as any[];
+
+            const defaults = getDefaultValuesFromFields(fields, 'en', customFieldConfigs);
+            expect(defaults.customFields.featureType).toBeNull();
+        });
+
+        it('applyNullableSelectCustomFieldDefaults should normalize empty string to null', () => {
+            const values = { customFields: { featureType: '' } };
+            const customFieldConfigs = [
+                {
+                    name: 'featureType',
+                    type: 'string',
+                    nullable: true,
+                    readonly: false,
+                    list: false,
+                    options: [{ value: 'a' }],
+                },
+            ] as any[];
+
+            const result = applyNullableSelectCustomFieldDefaults(values, customFieldConfigs);
+            expect(result.customFields.featureType).toBeNull();
+        });
     });
 
     describe('createFormSchemaFromFields - edge cases', () => {

package/src/lib/framework/form-engine/form-schema-tools.ts

@@ -4,6 +4,7 @@ import {
     isScalarType,
 } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import {
+    ConfigurableFieldDef,
     CustomFieldConfig,
     DateTimeCustomFieldConfig,
     FloatCustomFieldConfig,
@@ -12,6 +13,7 @@ import {
     StructCustomFieldConfig,
     StructField,
 } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isStringFieldWithOptions, isStructCustomFieldConfig } from '@/vdb/framework/form-engine/utils.js';
 import { z, ZodRawShape, ZodType, ZodTypeAny } from '@/vdb/lib/zod.js';
 
 function mapGraphQLCustomFieldToConfig(field: StructField) {
@@ -335,7 +337,11 @@ export function createFormSchemaFromFields(
     return z.object(schemaConfig);
 }
 
-export function getDefaultValuesFromFields(fields: FieldInfo[], defaultLanguageCode?: string) {
+export function getDefaultValuesFromFields(
+    fields: FieldInfo[],
+    defaultLanguageCode?: string,
+    customFieldConfigs?: CustomFieldConfig[],
+) {
     const defaultValues: Record<string, any> = {};
     for (const field of fields) {
         if (field.typeInfo) {
@@ -349,7 +355,71 @@ export function getDefaultValuesFromFields(fields: FieldInfo[], defaultLanguageC
             defaultValues[field.name] = getDefaultValueFromField(field, defaultLanguageCode);
         }
     }
-    return defaultValues;
+    return applyNullableSelectCustomFieldDefaults(defaultValues, customFieldConfigs);
+}
+
+/**
+ * Nullable string fields with options should default to `null`, not `''`.
+ */
+export function applyNullableSelectCustomFieldDefaults<T extends Record<string, any>>(
+    values: T,
+    customFieldConfigs?: CustomFieldConfig[],
+): T {
+    if (!customFieldConfigs?.length || values.customFields == null) return values;
+
+    return {
+        ...values,
+        customFields: applyNullableSelectDefaultsToCustomFieldsObject(
+            values.customFields,
+            customFieldConfigs,
+        ),
+    };
+}
+
+function applyNullableSelectDefaultsToCustomFieldsObject(
+    customFieldsDefaults: Record<string, any>,
+    configs: CustomFieldConfig[],
+): Record<string, any> {
+    const result = { ...customFieldsDefaults };
+    for (const config of configs) {
+        const fieldDef = config as ConfigurableFieldDef;
+        if (isStructCustomFieldConfig(fieldDef)) {
+            const structValue = result[fieldDef.name];
+            if (structValue && typeof structValue === 'object' && !Array.isArray(structValue)) {
+                result[fieldDef.name] = applyNullableSelectDefaultsToStructFields(
+                    structValue,
+                    fieldDef.fields,
+                );
+            }
+        } else if (
+            config.type === 'string' &&
+            isStringFieldWithOptions(config as ConfigurableFieldDef) &&
+            config.nullable !== false &&
+            (result[config.name] === '' || result[config.name] === undefined)
+        ) {
+            result[config.name] = null;
+        }
+    }
+    return result;
+}
+
+function applyNullableSelectDefaultsToStructFields(
+    structDefaults: Record<string, any>,
+    fields: StructField[],
+): Record<string, any> {
+    const result = { ...structDefaults };
+    for (const field of fields) {
+        const subFieldConfig = mapGraphQLCustomFieldToConfig(field);
+        if (
+            subFieldConfig.type === 'string' &&
+            isStringFieldWithOptions(subFieldConfig as ConfigurableFieldDef) &&
+            subFieldConfig.nullable !== false &&
+            (result[field.name] === '' || result[field.name] === undefined)
+        ) {
+            result[field.name] = null;
+        }
+    }
+    return result;
 }
 
 export function getDefaultValueFromField(field: FieldInfo, defaultLanguageCode?: string) {

package/src/lib/framework/form-engine/use-generated-form.tsx

@@ -6,7 +6,11 @@ import { useForm } from 'react-hook-form';
 import { useChannel } from '../../hooks/use-channel.js';
 import { useServerConfig } from '../../hooks/use-server-config.js';
 import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
-import { createFormSchemaFromFields, getDefaultValuesFromFields } from './form-schema-tools.js';
+import {
+    applyNullableSelectCustomFieldDefaults,
+    createFormSchemaFromFields,
+    getDefaultValuesFromFields,
+} from './form-schema-tools.js';
 import {
     convertEmptyStringsToNull,
     removeEmptyIdFields,
@@ -133,8 +137,8 @@ export function useGeneratedForm<
         [updateFields, customFieldConfig],
     );
     const defaultValues = useMemo(
-        () => getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode),
-        [updateFields, activeChannel?.defaultLanguageCode],
+        () => getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode, customFieldConfig),
+        [updateFields, activeChannel?.defaultLanguageCode, customFieldConfig],
     );
     const processedEntity = useMemo(
         () => ensureTranslationsForAllLanguages(entity, availableLanguages, defaultValues),
@@ -147,13 +151,12 @@ export function useGeneratedForm<
         [defaultValues, availableLanguages],
     );
 
-    const values = useMemo(
-        () =>
-            processedEntity
-                ? transformRelationFields(updateFields, setValuesRef.current(processedEntity))
-                : processedDefaultValues,
-        [processedEntity, processedDefaultValues, updateFields],
-    );
+    const values = useMemo(() => {
+        const raw = processedEntity
+            ? transformRelationFields(updateFields, setValuesRef.current(processedEntity))
+            : processedDefaultValues;
+        return applyNullableSelectCustomFieldDefaults(raw, customFieldConfig);
+    }, [processedEntity, processedDefaultValues, updateFields, customFieldConfig]);
 
     const form = useForm({
         resolver: async (values, context, options) => {

package/src/lib/framework/form-engine/utils.spec.ts

@@ -5,10 +5,12 @@ import { FieldInfo, getOperationVariablesFields } from '../document-introspectio
 
 import {
     convertEmptyStringsToNull,
+    isFieldNullable,
     removeEmptyIdFields,
     stripNullNullableFields,
     transformRelationFields,
 } from './utils.js';
+import { ConfigurableFieldDef } from "./form-engine-types.js";
 
 const createProductDocument = graphql(`
     mutation CreateProduct($input: CreateProductInput!) {
@@ -674,3 +676,51 @@ describe('stripNullNullableFields', () => {
         expect(result).toEqual({});
     });
 });
+
+describe('isFieldNullable', () => {
+    it('should return true for nullable custom fields', () => {
+        expect(
+            isFieldNullable({
+                name: 'featureType',
+                type: 'string',
+                nullable: true,
+                readonly: false,
+                list: false,
+            } as ConfigurableFieldDef),
+        ).toBe(true);
+    });
+
+    it('should return false for non-nullable custom fields', () => {
+        expect(
+            isFieldNullable({
+                name: 'priority',
+                type: 'string',
+                nullable: false,
+                readonly: false,
+                list: false,
+            } as ConfigurableFieldDef),
+        ).toBe(false);
+    });
+
+    it('should return true for nullable struct sub-fields', () => {
+        expect(
+            isFieldNullable({
+                name: 'kind',
+                type: 'string',
+                nullable: true,
+                options: [{ value: 'a' }],
+            } as ConfigurableFieldDef),
+        ).toBe(true);
+    });
+
+    it('should return false for configurable operation args', () => {
+        expect(
+            isFieldNullable({
+                name: 'arg',
+                type: 'string',
+                list: false,
+                ui: { options: [{ value: 'a' }] },
+            } as ConfigurableFieldDef),
+        ).toBe(false);
+    });
+});

package/src/lib/framework/form-engine/utils.ts

@@ -444,6 +444,20 @@ export function isNullableField(input: ConfigurableFieldDef): boolean {
     return isCustomFieldConfig(input) && Boolean(input.nullable);
 }
 
+/**
+ * Determines if a custom field or struct sub-field allows null values.
+ * Configurable operation args are never treated as nullable.
+ */
+export function isFieldNullable(input: ConfigurableFieldDef | StructField): boolean {
+    if (isCustomFieldConfig(input as ConfigurableFieldDef)) {
+        return (input as ConfigurableFieldDef & { nullable?: boolean }).nullable !== false;
+    }
+    if ('nullable' in input && input.nullable) {
+        return true;
+    }
+    return false;
+}
+
 /**
  * Handles nested form submission to prevent event bubbling in nested forms.
  * This is useful when you have a form inside a dialog that's within another form.

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