@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

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

@@ -1,28 +1,26 @@
+import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
+import {
+    createFormSchemaFromFields,
+    getDefaultValuesFromFields,
+} from '@/framework/form-engine/form-schema-tools.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { VariablesOf } from 'gql.tada';
 import { FormEvent } from 'react';
 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 { transformRelationFields } from './utils.js';
 
 export interface GeneratedFormOptions<
     T extends TypedDocumentNode<any, any>,
-    VarName extends keyof VariablesOf<T> | undefined = '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>,
-    ) => VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>;
-    onSubmit?: (
-        values: VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>,
-    ) => 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;
 }
 
 /**
@@ -43,7 +41,7 @@ export function useGeneratedForm<
     const updateFields = document ? getOperationVariablesFields(document, varName) : [];
     const schema = createFormSchemaFromFields(updateFields);
     const defaultValues = getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode);
-    const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages, defaultValues);
+    const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages);
 
     const form = useForm({
         resolver: async (values, context, options) => {
@@ -55,9 +53,7 @@ export function useGeneratedForm<
         },
         mode: 'onChange',
         defaultValues,
-        values: processedEntity
-            ? transformRelationFields(updateFields, setValues(processedEntity))
-            : defaultValues,
+        values: processedEntity ? setValues(processedEntity) : defaultValues,
     });
     let submitHandler = (event: FormEvent) => {
         event.preventDefault();
@@ -73,13 +69,11 @@ export function useGeneratedForm<
 
 /**
  * Ensures that an entity with translations has entries for all available languages.
- * If a language is missing, it creates an empty translation based on the structure of existing translations
- * and the expected form structure from defaultValues.
+ * If a language is missing, it creates an empty translation based on the structure of existing translations.
  */
 function ensureTranslationsForAllLanguages<E extends Record<string, any>>(
     entity: E | null | undefined,
     availableLanguages: string[] = [],
-    expectedStructure?: Record<string, any>,
 ): E | null | undefined {
     if (
         !entity ||
@@ -97,56 +91,23 @@ function ensureTranslationsForAllLanguages<E extends Record<string, any>>(
     // Get existing language codes
     const existingLanguageCodes = new Set(translations.map((t: any) => t.languageCode));
 
-    // Get the expected translation structure from defaultValues or existing translations
-    const existingTemplate = translations[0] || {};
-    const expectedTranslationStructure = expectedStructure?.translations?.[0] || {};
-
-    // Merge the structures to ensure we have all expected fields
-    const templateStructure = {
-        ...expectedTranslationStructure,
-        ...existingTemplate,
-    };
-
     // Add missing language translations
     for (const langCode of availableLanguages) {
         if (!existingLanguageCodes.has(langCode)) {
+            // Find a translation to use as template for field structure
+            const template = translations[0] || {};
             const emptyTranslation: Record<string, any> = {
                 languageCode: langCode,
             };
 
-            // Add empty fields based on merged template structure (excluding languageCode)
-            Object.keys(templateStructure).forEach(key => {
+            // Add empty fields based on template (excluding languageCode)
+            Object.keys(template).forEach(key => {
                 if (key !== 'languageCode') {
-                    if (typeof templateStructure[key] === 'object' && templateStructure[key] !== null) {
-                        // For nested objects like customFields, create an empty object
-                        emptyTranslation[key] = Array.isArray(templateStructure[key]) ? [] : {};
-                    } else {
-                        // For primitive values, use empty string as default
-                        emptyTranslation[key] = '';
-                    }
+                    emptyTranslation[key] = '';
                 }
             });
 
             translations.push(emptyTranslation);
-        } else {
-            // For existing translations, ensure they have all expected fields
-            const existingTranslation = translations.find((t: any) => t.languageCode === langCode);
-            if (existingTranslation) {
-                Object.keys(expectedTranslationStructure).forEach(key => {
-                    if (key !== 'languageCode' && !(key in existingTranslation)) {
-                        if (
-                            typeof expectedTranslationStructure[key] === 'object' &&
-                            expectedTranslationStructure[key] !== null
-                        ) {
-                            existingTranslation[key] = Array.isArray(expectedTranslationStructure[key])
-                                ? []
-                                : {};
-                        } else {
-                            existingTranslation[key] = '';
-                        }
-                    }
-                });
-            }
         }
     }
 

package/src/lib/framework/layout-engine/location-wrapper.tsx

@@ -1,10 +1,10 @@
-import { CopyableText } from '@/vdb/components/shared/copyable-text.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { usePage } from '@/vdb/hooks/use-page.js';
-import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { cn } from '@/vdb/lib/utils.js';
+import { CopyableText } from '@/components/shared/copyable-text.js';
+import { Button } from '@/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { usePage } from '@/hooks/use-page.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { cn } from '@/lib/utils.js';
+import { Trans } from '@/lib/trans.js';
 import { CodeXmlIcon, InfoIcon } from 'lucide-react';
 import { createContext, useContext, useState } from 'react';
 
@@ -18,10 +18,7 @@ const LocationWrapperContext = createContext<{
     setHoveredId: null,
 });
 
-export function LocationWrapper({
-    children,
-    blockId,
-}: Readonly<{ children: React.ReactNode; blockId?: string }>) {
+export function LocationWrapper({ children, blockId }: { children: React.ReactNode; blockId?: string }) {
     const page = usePage();
     const { settings } = useUserSettings();
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);

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

@@ -1,21 +1,20 @@
-import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
-import { NavigationConfirmation } from '@/vdb/components/shared/navigation-confirmation.js';
-import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
-import { Form } from '@/vdb/components/ui/form.js';
-import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
-import { usePage } from '@/vdb/hooks/use-page.js';
-import { cn } from '@/vdb/lib/utils.js';
+import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+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 } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 
-import { DashboardActionBarItem } from '../extension-api/types/layout.js';
+import { DashboardActionBarItem } from '../extension-api/extension-api-types.js';
 
-import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
-import { PageContext, PageContextValue } from '@/vdb/framework/layout-engine/page-provider.js';
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
 import { LocationWrapper } from './location-wrapper.js';
+import { PageContext, PageContextValue } from '@/framework/layout-engine/page-provider.js';
 
 export interface PageProps extends ComponentProps<'div'> {
     pageId?: string;
@@ -42,11 +41,13 @@ export interface PageProps extends ComponentProps<'div'> {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function Page({ children, pageId, entity, form, submitHandler, ...props }: Readonly<PageProps>) {
+export function Page({ children, pageId, entity, form, submitHandler, ...props }: PageProps) {
     const childArray = React.Children.toArray(children);
 
     const pageTitle = childArray.find(child => React.isValidElement(child) && child.type === PageTitle);
-    const pageActionBar = childArray.find(child => isOfType(child, PageActionBar));
+    const pageActionBar = childArray.find(
+        child => isOfType(child, PageActionBar),
+    );
 
     const pageContent = childArray.filter(
         child => !isOfType(child, PageTitle) && !isOfType(child, PageActionBar),
@@ -72,13 +73,7 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
     );
 }
 
-function PageContent({
-    pageHeader,
-    pageContent,
-    form,
-    submitHandler,
-    ...props
-}: {
+function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }: {
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     form?: UseFormReturn<any>;
@@ -99,14 +94,9 @@ function PageContent({
     );
 }
 
-export function PageContentWithOptionalForm({
-    form,
-    pageHeader,
-    pageContent,
-    submitHandler,
-}: {
+export function PageContentWithOptionalForm({ form, pageHeader, pageContent, submitHandler }: {
     form?: UseFormReturn<any>;
-    pageHeader: React.ReactNode;
+    pageHeader: React.ReactNode
     pageContent: React.ReactNode;
     submitHandler?: any;
 }) {
@@ -164,7 +154,7 @@ function isPageBlock(child: unknown): child is React.ReactElement<PageBlockProps
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
+export function PageLayout({ children, className }: PageLayoutProps) {
     const page = usePage();
     const isDesktop = useMediaQuery('only screen and (min-width : 769px)');
     // Separate blocks into categories
@@ -194,7 +184,6 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
             if (extensionBlock) {
                 const ExtensionBlock = (
                     <PageBlock
-                        key={childBlock.key}
                         column={extensionBlock.location.column}
                         blockId={extensionBlock.id}
                         title={extensionBlock.title}
@@ -238,7 +227,7 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
     );
 }
 
-export function DetailFormGrid({ children }: Readonly<{ children: React.ReactNode }>) {
+export function DetailFormGrid({ children }: { children: React.ReactNode }) {
     return <div className="md:grid md:grid-cols-2 gap-4 items-start mb-4">{children}</div>;
 }
 
@@ -252,7 +241,7 @@ export function DetailFormGrid({ children }: Readonly<{ children: React.ReactNod
  * @docsPage PageTitle
  * @since 3.3.0
  */
-export function PageTitle({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageTitle({ children }: { children: React.ReactNode }) {
     return <h1 className="text-2xl font-semibold">{children}</h1>;
 }
 
@@ -269,11 +258,15 @@ export function PageTitle({ children }: Readonly<{ children: React.ReactNode }>)
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageActionBar({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageActionBar({ children }: { children: React.ReactNode }) {
     let childArray = React.Children.toArray(children);
 
-    const leftContent = childArray.filter(child => isOfType(child, PageActionBarLeft));
-    const rightContent = childArray.filter(child => isOfType(child, PageActionBarRight));
+    const leftContent = childArray.filter(
+        child => isOfType(child, PageActionBarLeft),
+    );
+    const rightContent = childArray.filter(
+        child => isOfType(child, PageActionBarRight),
+    );
 
     return (
         <div className={cn('flex gap-2', leftContent.length > 0 ? 'justify-between' : 'justify-end')}>
@@ -291,7 +284,7 @@ export function PageActionBar({ children }: Readonly<{ children: React.ReactNode
  * @docsPage PageActionBar
  * @since 3.3.0
  */
-export function PageActionBarLeft({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageActionBarLeft({ children }: { children: React.ReactNode }) {
     return <div className="flex justify-start gap-2">{children}</div>;
 }
 
@@ -303,7 +296,7 @@ export function PageActionBarLeft({ children }: Readonly<{ children: React.React
  * @docsPage PageActionBar
  * @since 3.3.0
  */
-export function PageActionBarRight({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageActionBarRight({ children }: { children: React.ReactNode }) {
     const page = usePage();
     const actionBarItems = page.pageId ? getDashboardActionBarItems(page.pageId) : [];
     return (
@@ -355,27 +348,18 @@ export type PageBlockProps = {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageBlock({
-    children,
-    title,
-    description,
-    className,
-    blockId,
-    column,
-}: Readonly<PageBlockProps>) {
+export function PageBlock({ children, title, description, className, blockId }: PageBlockProps) {
     return (
         <LocationWrapper blockId={blockId}>
-            <PageBlockContext.Provider value={{ blockId, title, description, column }}>
-                <Card className={cn('w-full', className)}>
-                    {title || description ? (
-                        <CardHeader>
-                            {title && <CardTitle>{title}</CardTitle>}
-                            {description && <CardDescription>{description}</CardDescription>}
-                        </CardHeader>
-                    ) : null}
-                    <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
-                </Card>
-            </PageBlockContext.Provider>
+            <Card className={cn('w-full', className)}>
+                {title || description ? (
+                    <CardHeader>
+                        {title && <CardTitle>{title}</CardTitle>}
+                        {description && <CardDescription>{description}</CardDescription>}
+                    </CardHeader>
+                ) : null}
+                <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
+            </Card>
         </LocationWrapper>
     );
 }
@@ -392,15 +376,13 @@ export function PageBlock({
  * @since 3.3.0
  */
 export function FullWidthPageBlock({
-    children,
-    className,
-    blockId,
-}: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
+                                       children,
+                                       className,
+                                       blockId,
+                                   }: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
     return (
         <LocationWrapper blockId={blockId}>
-            <PageBlockContext.Provider value={{ blockId, column: 'main' }}>
-                <div className={cn('w-full', className)}>{children}</div>
-            </PageBlockContext.Provider>
+            <div className={cn('w-full', className)}>{children}</div>
         </LocationWrapper>
     );
 }
@@ -416,10 +398,10 @@ export function FullWidthPageBlock({
  * @since 3.3.0
  */
 export function CustomFieldsPageBlock({
-    column,
-    entityType,
-    control,
-}: {
+                                          column,
+                                          entityType,
+                                          control,
+                                      }: {
     column: 'main' | 'side';
     entityType: string;
     control: Control<any, any>;

package/src/lib/framework/page/detail-page-route-loader.tsx

@@ -1,55 +1,36 @@
-import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
 
-import { PageBreadcrumb } from '@/vdb/components/layout/generated-breadcrumbs.js';
-import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { PageBreadcrumb } from '@/components/layout/generated-breadcrumbs.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { FileBaseRouteOptions, ParsedLocation } from '@tanstack/react-router';
-import { addCustomFields } from '../document-introspection/add-custom-fields.js';
+import { FileBaseRouteOptions } from '@tanstack/react-router';
 import { getQueryName, getQueryTypeFieldInfo } from '../document-introspection/get-document-structure.js';
 import { DetailEntity } from './page-types.js';
 import { getDetailQueryOptions } from './use-detail-page.js';
-
+import { addCustomFields } from '../document-introspection/add-custom-fields.js';
 export interface DetailPageRouteLoaderConfig<T extends TypedDocumentNode<any, any>> {
-    /**
-     * @description
-     * The pageId is used to ensure any detail form extensions (such as extensions to
-     * the detail query document) get correctly applied at the route loader level.
-     */
-    pageId?: string;
     queryDocument: T;
-    breadcrumb: (
-        isNew: boolean,
-        entity: DetailEntity<T>,
-        location: ParsedLocation,
-    ) => Array<PageBreadcrumb | undefined>;
+    breadcrumb: (isNew: boolean, entity: DetailEntity<T>) => Array<PageBreadcrumb | undefined>;
 }
 
 export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
-    pageId,
     queryDocument,
     breadcrumb,
 }: DetailPageRouteLoaderConfig<T>) {
     const loader: FileBaseRouteOptions<any, any>['loader'] = async ({
         context,
         params,
-        location,
     }: {
         context: any;
         params: any;
-        location: ParsedLocation;
     }) => {
         if (!params.id) {
             throw new Error('ID param is required');
         }
         const isNew = params.id === NEW_ENTITY_PATH;
-        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
-            addCustomFields(queryDocument),
-            pageId,
-        );
         const result = isNew
             ? null
             : await context.queryClient.ensureQueryData(
-                  getDetailQueryOptions(extendedQueryDocument, { id: params.id }),
+                  getDetailQueryOptions(addCustomFields(queryDocument), { id: params.id }),
                   { id: params.id },
               );
 
@@ -60,7 +41,7 @@ export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
             throw new Error(`${entityName} with the ID ${params.id} was not found`);
         }
         return {
-            breadcrumb: breadcrumb(isNew, result?.[entityField], location),
+            breadcrumb: breadcrumb(isNew, result?.[entityField]),
         };
     };
     return loader;