@vendure/dashboard 3.2.2 → 3.2.4

package/src/lib/framework/document-introspection/get-document-structure.spec.ts

@@ -1,7 +1,7 @@
 import { graphql } from 'gql.tada';
 import { describe, expect, it, vi } from 'vitest';
 
-import { getListQueryFields } from './get-document-structure.js';
+import { getListQueryFields, getOperationVariablesFields } from './get-document-structure.js';
 
 vi.mock('virtual:admin-api-schema', () => {
     return {
@@ -12,7 +12,10 @@ vi.mock('virtual:admin-api-schema', () => {
                     product: ['Product', false, false, false],
                     collection: ['Collection', false, false, false],
                 },
-                Mutation: {},
+                Mutation: {
+                    updateProduct: ['Product', false, false, false],
+                    adjustDraftOrderLine: ['Order', false, false, false],
+                },
 
                 Collection: {
                     id: ['ID', false, false, false],
@@ -126,8 +129,25 @@ vi.mock('virtual:admin-api-schema', () => {
                     languageCode: ['LanguageCode', false, false, false],
                     name: ['String', false, false, false],
                 },
+                Order: {
+                    id: ['ID', false, false, false],
+                    lines: ['OrderLine', false, true, false],
+                },
+                OrderLine: {
+                    id: ['ID', false, false, false],
+                    quantity: ['Int', false, false, false],
+                },
+            },
+            inputs: {
+                UpdateProductInput: {
+                    id: ['ID', false, false, false],
+                    name: ['String', false, false, false],
+                },
+                AdjustDraftOrderLineInput: {
+                    orderLineId: ['ID', false, false, false],
+                    quantity: ['Int', false, false, false],
+                },
             },
-            inputs: {},
             scalars: ['ID', 'String', 'Int', 'Boolean', 'Float', 'JSON', 'DateTime', 'Upload', 'Money'],
             enums: {},
         },
@@ -308,3 +328,93 @@ describe('getListQueryFields', () => {
         ]);
     });
 });
+
+describe('getOperationVariablesFields', () => {
+    it('should extract fields from a simple mutation', () => {
+        const doc = graphql(`
+            mutation UpdateProduct($input: UpdateProductInput!) {
+                updateProduct(input: $input) {
+                    ...ProductDetail
+                }
+            }
+
+            fragment ProductDetail on Product {
+                id
+                name
+            }
+        `);
+
+        const fields = getOperationVariablesFields(doc, 'input');
+        expect(fields).toEqual([
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'id',
+                nullable: false,
+                type: 'ID',
+                typeInfo: undefined,
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'name',
+                nullable: false,
+                type: 'String',
+                typeInfo: undefined,
+            },
+        ]);
+    });
+
+    it('should handle a mutation with a nested input', () => {
+        const doc = graphql(`
+            mutation AdjustDraftOrderLine($orderId: ID!, $input: AdjustDraftOrderLineInput!) {
+                adjustDraftOrderLine(orderId: $orderId, input: $input) {
+                    id
+                }
+            }
+        `);
+
+        const fields = getOperationVariablesFields(doc, undefined);
+        expect(fields).toEqual([
+            {
+                name: 'orderId',
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                nullable: false,
+                type: 'ID',
+                typeInfo: undefined,
+            },
+            {
+                name: 'input',
+                isPaginatedList: false,
+                isScalar: false,
+                list: false,
+                nullable: true,
+                type: 'AdjustDraftOrderLineInput',
+                typeInfo: [
+                    {
+                        name: 'orderLineId',
+                        isPaginatedList: false,
+                        isScalar: true,
+                        list: false,
+                        nullable: false,
+                        type: 'ID',
+                        typeInfo: undefined,
+                    },
+                    {
+                        name: 'quantity',
+                        isPaginatedList: false,
+                        isScalar: true,
+                        list: false,
+                        nullable: false,
+                        type: 'Int',
+                        typeInfo: undefined,
+                    },
+                ],
+            },
+        ]);
+    });
+});

package/src/lib/framework/document-introspection/get-document-structure.ts

@@ -1,3 +1,5 @@
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { VariablesOf } from 'gql.tada';
 import {
     DocumentNode,
     OperationDefinitionNode,
@@ -146,7 +148,10 @@ function findNestedPaginatedLists(
  *
  * The operation variables fields are the fields of the `UpdateProductInput` type.
  */
-export function getOperationVariablesFields(documentNode: DocumentNode): FieldInfo[] {
+export function getOperationVariablesFields<T extends TypedDocumentNode<any, any>>(
+    documentNode: T,
+    varName?: keyof VariablesOf<T>,
+): FieldInfo[] {
     const fields: FieldInfo[] = [];
 
     const operationDefinition = documentNode.definitions.find(
@@ -154,11 +159,31 @@ export function getOperationVariablesFields(documentNode: DocumentNode): FieldIn
     );
 
     if (operationDefinition?.variableDefinitions) {
-        operationDefinition.variableDefinitions.forEach(variable => {
-            const unwrappedType = unwrapVariableDefinitionType(variable.type);
-            const inputName = unwrappedType.name.value;
-            const inputFields = getInputTypeInfo(inputName);
-            fields.push(...inputFields);
+        const variableDefinitions = varName
+            ? operationDefinition.variableDefinitions.filter(
+                  variable => variable.variable.name.value === varName,
+              )
+            : operationDefinition.variableDefinitions;
+        variableDefinitions.forEach(variableDef => {
+            const unwrappedType = unwrapVariableDefinitionType(variableDef.type);
+            const isScalar = isScalarType(unwrappedType.name.value);
+            const fieldName = variableDef.variable.name.value;
+            const typeName = unwrappedType.name.value;
+            const inputTypeInfo = isScalar
+                ? {
+                      name: fieldName,
+                      type: typeName,
+                      nullable: false,
+                      list: false,
+                      isScalar: true,
+                      isPaginatedList: false,
+                  }
+                : getInputTypeInfo(fieldName, typeName);
+            if (varName && inputTypeInfo?.name === varName) {
+                fields.push(...(inputTypeInfo.typeInfo ?? []));
+            } else {
+                fields.push(inputTypeInfo);
+            }
         });
     }
 
@@ -331,7 +356,9 @@ export function getOperationTypeInfo(
     if (definitionNode.kind === 'OperationDefinition') {
         const firstSelection = definitionNode?.selectionSet.selections[0];
         if (firstSelection?.kind === 'Field') {
-            return getQueryInfo(firstSelection.name.value);
+            return definitionNode.operation === 'query'
+                ? getQueryInfo(firstSelection.name.value)
+                : getMutationInfo(firstSelection.name.value);
         }
     }
     if (definitionNode.kind === 'Field' && parentTypeName) {
@@ -349,7 +376,7 @@ export function getTypeFieldInfo(typeName: string): FieldInfo[] {
             }
             return fieldInfo;
         })
-        .filter(x => x != null) as FieldInfo[];
+        .filter(x => x != null);
 }
 
 function getQueryInfo(name: string): FieldInfo {
@@ -364,8 +391,40 @@ function getQueryInfo(name: string): FieldInfo {
     };
 }
 
-function getInputTypeInfo(name: string): FieldInfo[] {
-    return Object.entries(schemaInfo.inputs[name]).map(([fieldName, fieldInfo]: [string, any]) => {
+function getMutationInfo(name: string): FieldInfo {
+    const fieldInfo = schemaInfo.types.Mutation[name];
+    return {
+        name,
+        type: fieldInfo[0],
+        nullable: fieldInfo[1],
+        list: fieldInfo[2],
+        isPaginatedList: fieldInfo[3],
+        isScalar: schemaInfo.scalars.includes(fieldInfo[0]),
+    };
+}
+
+function getInputTypeInfo(name: string, type: string): FieldInfo {
+    const fieldInfo = schemaInfo.inputs[type];
+    if (!fieldInfo) {
+        throw new Error(`Input type ${type} not found`);
+    }
+    return {
+        name,
+        type,
+        nullable: true,
+        list: false,
+        isPaginatedList: false,
+        isScalar: false,
+        typeInfo: getInputTypeFields(type),
+    };
+}
+
+function getInputTypeFields(name: string): FieldInfo[] {
+    const inputType = schemaInfo.inputs[name];
+    if (!inputType) {
+        throw new Error(`Input type ${name} not found`);
+    }
+    return Object.entries(inputType).map(([fieldName, fieldInfo]: [string, any]) => {
         const type = fieldInfo[0];
         const isScalar = isScalarType(type);
         const isEnum = isEnumType(type);
@@ -376,7 +435,7 @@ function getInputTypeInfo(name: string): FieldInfo[] {
             list: fieldInfo[2],
             isPaginatedList: fieldInfo[3],
             isScalar,
-            typeInfo: !isScalar && !isEnum ? getInputTypeInfo(type) : undefined,
+            typeInfo: !isScalar && !isEnum ? getInputTypeFields(type) : undefined,
         };
     });
 }

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

@@ -13,13 +13,14 @@ import { useForm } from 'react-hook-form';
 
 export interface GeneratedFormOptions<
     T extends TypedDocumentNode<any, any>,
-    VarName extends keyof VariablesOf<T> = 'input',
+    VarName extends (keyof VariablesOf<T>) | undefined = 'input',
     E extends Record<string, any> = Record<string, any>,
 > {
     document?: T;
+    varName?: VarName;
     entity: E | null | undefined;
-    setValues: (entity: NonNullable<E>) => VariablesOf<T>[VarName];
-    onSubmit?: (values: VariablesOf<T>[VarName]) => void;
+    setValues: (entity: NonNullable<E>) => VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>;
+    onSubmit?: (values: VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>) => void;
 }
 
 /**
@@ -31,13 +32,13 @@ export interface GeneratedFormOptions<
  */
 export function useGeneratedForm<
     T extends TypedDocumentNode<any, any>,
-    VarName extends keyof VariablesOf<T> = 'input',
+    VarName extends keyof VariablesOf<T> | undefined,
     E extends Record<string, any> = Record<string, any>,
 >(options: GeneratedFormOptions<T, VarName, E>) {
-    const { document, entity, setValues, onSubmit } = options;
+    const { document, entity, setValues, onSubmit, varName } = options;
     const { activeChannel } = useChannel();
     const availableLanguages = useServerConfig()?.availableLanguages || [];
-    const updateFields = document ? getOperationVariablesFields(document) : [];
+    const updateFields = document ? getOperationVariablesFields(document, varName) : [];
     const schema = createFormSchemaFromFields(updateFields);
     const defaultValues = getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode);
     const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages);
@@ -58,7 +59,7 @@ export function useGeneratedForm<
     };
     if (onSubmit) {
         submitHandler = (event: FormEvent) => {
-            form.handleSubmit(onSubmit)(event);
+            form.handleSubmit(onSubmit as any)(event);
         };
     }
 

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

@@ -5,10 +5,13 @@ import { Form } from '@/components/ui/form.js';
 import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
 import { usePage } from '@/hooks/use-page.js';
 import { cn } from '@/lib/utils.js';
+import { NavigationConfirmation } from '@/components/shared/navigation-confirmation.js';
 import { useMediaQuery } from '@uidotdev/usehooks';
 import React, { ComponentProps, createContext } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
+
 import { DashboardActionBarItem } from '../extension-api/extension-api-types.js';
+
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
 import { LocationWrapper } from './location-wrapper.js';
 
@@ -42,6 +45,7 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
 
     const pageContentWithOptionalForm = form ? (
         <Form {...form}>
+            <NavigationConfirmation form={form} />
             <form onSubmit={submitHandler} className="space-y-4">
                 {pageHeader}
                 {pageContent}

package/src/lib/framework/page/list-page.tsx

@@ -11,7 +11,9 @@ import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, AnyRouter, useNavigate } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { ResultOf } from 'gql.tada';
+
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
 import {
     FullWidthPageBlock,
@@ -81,12 +83,18 @@ export function ListPage<
     const route = typeof routeOrFn === 'function' ? routeOrFn() : routeOrFn;
     const routeSearch = route.useSearch();
     const navigate = useNavigate<AnyRouter>({ from: route.fullPath });
+    const { setTableSettings, settings } = useUserSettings();
+    const tableSettings = pageId ? settings.tableSettings?.[pageId] : undefined;
 
     const pagination = {
         page: routeSearch.page ? parseInt(routeSearch.page) : 1,
-        itemsPerPage: routeSearch.perPage ? parseInt(routeSearch.perPage) : 10,
+        itemsPerPage: routeSearch.perPage ? parseInt(routeSearch.perPage) : tableSettings?.pageSize ?? 10,
     };
 
+    const columnVisibility = pageId ? tableSettings?.columnVisibility : defaultVisibility;
+    const columnOrder = pageId ? tableSettings?.columnOrder : defaultColumnOrder;
+    const columnFilters = pageId ? tableSettings?.columnFilters : routeSearch.filters;
+
     const sorting: SortingState = (routeSearch.sort ?? '')
         .split(',')
         .filter((s: string) => s.length)
@@ -138,21 +146,32 @@ export function ListPage<
                         transformVariables={transformVariables}
                         customizeColumns={customizeColumns as any}
                         additionalColumns={additionalColumns as any}
-                        defaultColumnOrder={defaultColumnOrder}
-                        defaultVisibility={defaultVisibility}
+                        defaultColumnOrder={columnOrder as any}
+                        defaultVisibility={columnVisibility as any}
                         onSearchTermChange={onSearchTermChange}
                         page={pagination.page}
                         itemsPerPage={pagination.itemsPerPage}
                         sorting={sorting}
-                        columnFilters={routeSearch.filters}
+                        columnFilters={columnFilters}
                         onPageChange={(table, page, perPage) => {
                             persistListStateToUrl(table, { page, perPage });
+                            if (pageId) {
+                                setTableSettings(pageId, 'pageSize', perPage);
+                            }
                         }}
                         onSortChange={(table, sorting) => {
                             persistListStateToUrl(table, { sort: sorting });
                         }}
                         onFilterChange={(table, filters) => {
                             persistListStateToUrl(table, { filters });
+                            if (pageId) {
+                                setTableSettings(pageId, 'columnFilters', filters);
+                            }
+                        }}
+                        onColumnVisibilityChange={(table, columnVisibility) => {
+                            if (pageId) {
+                                setTableSettings(pageId, 'columnVisibility', columnVisibility);
+                            }
                         }}
                         facetedFilters={facetedFilters}
                         rowActions={rowActions}

package/src/lib/framework/page/use-detail-page.ts

@@ -195,6 +195,7 @@ export function useDetailPage<
     const document = isNew ? (createDocument ?? updateDocument) : updateDocument;
     const { form, submitHandler } = useGeneratedForm({
         document,
+        varName: 'input',
         entity,
         setValues: setValuesForUpdate,
         onSubmit(values: any) {

package/src/lib/graphql/fragments.tsx

@@ -51,4 +51,12 @@ export const configurableOperationDefFragment = graphql(`
     }
 `);
 
+export const errorResultFragment = graphql(`
+    fragment ErrorResult on ErrorResult {
+        errorCode
+        message
+    }
+`);
+
+
 export type ConfigurableOperationDefFragment = ResultOf<typeof configurableOperationDefFragment>;

package/src/lib/index.ts

@@ -28,10 +28,10 @@ export * from './components/layout/nav-user.js';
 export * from './components/login/login-form.js';
 export * from './components/shared/alerts.js';
 export * from './components/shared/animated-number.js';
-export * from './components/shared/asset-gallery.js';
-export * from './components/shared/asset-picker-dialog.js';
-export * from './components/shared/asset-preview-dialog.js';
-export * from './components/shared/asset-preview.js';
+export * from './components/shared/asset/asset-gallery.js';
+export * from './components/shared/asset/asset-picker-dialog.js';
+export * from './components/shared/asset/asset-preview-dialog.js';
+export * from './components/shared/asset/asset-preview.js';
 export * from './components/shared/assigned-facet-values.js';
 export * from './components/shared/channel-code-label.js';
 export * from './components/shared/channel-selector.js';
@@ -50,7 +50,7 @@ export * from './components/shared/entity-assets.js';
 export * from './components/shared/error-page.js';
 export * from './components/shared/facet-value-chip.js';
 export * from './components/shared/facet-value-selector.js';
-export * from './components/shared/focal-point-control.js';
+export * from './components/shared/asset/focal-point-control.js';
 export * from './components/shared/form-field-wrapper.js';
 export * from './components/shared/history-timeline/history-entry.js';
 export * from './components/shared/history-timeline/history-note-checkbox.js';

package/src/lib/providers/auth.tsx

@@ -69,17 +69,20 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     const onLogoutSuccessFn = React.useRef<() => void>(() => {});
     const isAuthenticated = status === 'authenticated';
 
-    const { data: currentUserData, isLoading } = useQuery({
-        queryKey: ['currentUser'],
+    const { data: currentUserData, isLoading , error: currentUserError} = useQuery({
+        queryKey: ['currentUser', isAuthenticated],
         queryFn: () => api.query(CurrentUserQuery),
         retry: false,
+        staleTime: 1000,
     });
 
+    const currentUser = currentUserError ? undefined : currentUserData;
+
     React.useEffect(() => {
-        if (!settings.activeChannelId && currentUserData?.me?.channels?.length) {
-            setActiveChannelId(currentUserData.me.channels[0].id);
+        if (!settings.activeChannelId && currentUser?.me?.channels?.length) {
+            setActiveChannelId(currentUser.me.channels[0].id);
         }
-    }, [settings.activeChannelId, currentUserData?.me?.channels]);
+    }, [settings.activeChannelId, currentUser?.me?.channels]);
 
     const loginMutationFn = api.mutate(LoginMutation);
     const loginMutation = useMutation({
@@ -123,7 +126,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
     React.useEffect(() => {
         if (!isLoading) {
-            if (currentUserData?.me?.id) {
+            if (currentUser?.me?.id) {
                 setStatus('authenticated');
             } else {
                 setStatus('unauthenticated');
@@ -131,7 +134,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         } else {
             setStatus('verifying');
         }
-    }, [isLoading, currentUserData]);
+    }, [isLoading, currentUser]);
 
     return (
         <AuthContext.Provider
@@ -139,8 +142,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                 isAuthenticated,
                 authenticationError,
                 status,
-                user: currentUserData?.activeAdministrator,
-                channels: currentUserData?.me?.channels,
+                user: currentUser?.activeAdministrator,
+                channels: currentUser?.me?.channels,
                 login,
                 logout,
             }}

package/src/lib/providers/channel-provider.tsx

@@ -73,6 +73,7 @@ export function ChannelProvider({ children }: { children: React.ReactNode }) {
     const { data: channelsData, isLoading: isChannelsLoading } = useQuery({
         queryKey: ['channels'],
         queryFn: () => api.query(ChannelsQuery),
+        retry: false,
     });
 
     // Set the selected channel and update localStorage

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

@@ -1,5 +1,6 @@
 import { api } from '@/graphql/api.js';
 import { graphql } from '@/graphql/graphql.js';
+import { useAuth } from '@/hooks/use-auth.js';
 import { useQuery } from '@tanstack/react-query';
 import { ResultOf } from 'gql.tada';
 import React from 'react';
@@ -260,9 +261,14 @@ export interface ServerConfig {
 
 // create a provider for the global settings
 export const ServerConfigProvider = ({ children }: { children: React.ReactNode }) => {
+    const { user } = useAuth();
+    const queryKey = ['getServerConfig', user?.id];
     const { data } = useQuery({
-        queryKey: ['getServerConfig'],
+        queryKey,
         queryFn: () => api.query(getServerConfigDocument),
+        retry: false,
+        enabled: !!user?.id,
+        staleTime: 1000,
     });
     const value: ServerConfig = {
         availableLanguages: data?.globalSettings.availableLanguages ?? [],

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

@@ -1,5 +1,13 @@
 import React, { createContext, useState, useEffect } from 'react';
 import { Theme } from './theme-provider.js';
+import { ColumnFiltersState } from '@tanstack/react-table';
+
+export interface TableSettings {
+    columnVisibility?: Record<string, boolean>;
+    columnOrder?: string[];
+    columnFilters?: ColumnFiltersState;
+    pageSize?: number;
+}
 
 export interface UserSettings {
     displayLanguage: string;
@@ -11,6 +19,7 @@ export interface UserSettings {
     activeChannelId: string;
     devMode: boolean;
     hasSeenOnboarding: boolean;
+    tableSettings?: Record<string, TableSettings>;
 }
 
 const defaultSettings: UserSettings = {
@@ -23,6 +32,7 @@ const defaultSettings: UserSettings = {
     activeChannelId: '',
     devMode: false,
     hasSeenOnboarding: false,
+    tableSettings: {},
 };
 
 export interface UserSettingsContextType {
@@ -36,6 +46,11 @@ export interface UserSettingsContextType {
     setActiveChannelId: (channelId: string) => void;
     setDevMode: (devMode: boolean) => void;
     setHasSeenOnboarding: (hasSeen: boolean) => void;
+    setTableSettings: <K extends keyof TableSettings>(
+        tableId: string,
+        key: K,
+        value: TableSettings[K],
+    ) => void;
 }
 
 export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
@@ -83,6 +98,15 @@ export const UserSettingsProvider: React.FC<React.PropsWithChildren<{}>> = ({ ch
         setActiveChannelId: channelId => updateSetting('activeChannelId', channelId),
         setDevMode: devMode => updateSetting('devMode', devMode),
         setHasSeenOnboarding: hasSeen => updateSetting('hasSeenOnboarding', hasSeen),
+        setTableSettings: (tableId, key, value) => {
+            setSettings(prev => ({
+                ...prev,
+                tableSettings: {
+                    ...prev.tableSettings,
+                    [tableId]: { ...(prev.tableSettings?.[tableId] || {}), [key]: value },
+                },
+            }));
+        },
     };
 
     return <UserSettingsContext.Provider value={contextValue}>{children}</UserSettingsContext.Provider>;