@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/lib/framework/document-introspection/testing-utils.ts

@@ -0,0 +1,161 @@
+export function getMockSchemaInfo() {
+    return {
+        schemaInfo: {
+            types: {
+                Query: {
+                    products: ['ProductList', false, false, true],
+                    product: ['Product', false, false, false],
+                    collection: ['Collection', false, false, false],
+                    order: ['Order', false, false, false],
+                },
+                Mutation: {
+                    updateProduct: ['Product', false, false, false],
+                    adjustDraftOrderLine: ['Order', false, false, false],
+                },
+
+                Collection: {
+                    id: ['ID', false, false, false],
+                    name: ['String', false, false, false],
+                    productVariants: ['ProductVariantList', false, false, true],
+                },
+
+                ProductVariantList: {
+                    items: ['ProductVariant', false, true, false],
+                    totalItems: ['Int', false, false, false],
+                },
+
+                Product: {
+                    channels: ['Channel', false, true, false],
+                    id: ['ID', false, false, false],
+                    createdAt: ['DateTime', false, false, false],
+                    updatedAt: ['DateTime', false, false, false],
+                    languageCode: ['LanguageCode', false, false, false],
+                    name: ['String', false, false, false],
+                    slug: ['String', false, false, false],
+                    description: ['String', false, false, false],
+                    enabled: ['Boolean', false, false, false],
+                    featuredAsset: ['Asset', true, false, false],
+                    assets: ['Asset', false, true, false],
+                    variants: ['ProductVariant', false, true, false],
+                    variantList: ['ProductVariantList', false, false, true],
+                    optionGroups: ['ProductOptionGroup', false, true, false],
+                    facetValues: ['FacetValue', false, true, false],
+                    translations: ['ProductTranslation', false, true, false],
+                    collections: ['Collection', false, true, false],
+                    reviews: ['ProductReviewList', false, false, true],
+                    reviewsHistogram: ['ProductReviewHistogramItem', false, true, false],
+                    customFields: ['ProductCustomFields', true, false, false],
+                },
+                ProductVariantPrice: {
+                    currencyCode: ['CurrencyCode', false, false, false],
+                    price: ['Money', false, false, false],
+                    customFields: ['JSON', true, false, false],
+                },
+                ProductVariant: {
+                    enabled: ['Boolean', false, false, false],
+                    trackInventory: ['GlobalFlag', false, false, false],
+                    stockOnHand: ['Int', false, false, false],
+                    stockAllocated: ['Int', false, false, false],
+                    outOfStockThreshold: ['Int', false, false, false],
+                    useGlobalOutOfStockThreshold: ['Boolean', false, false, false],
+                    prices: ['ProductVariantPrice', false, true, false],
+                    stockLevels: ['StockLevel', false, true, false],
+                    stockMovements: ['StockMovementList', false, false, false],
+                    channels: ['Channel', false, true, false],
+                    id: ['ID', false, false, false],
+                    product: ['Product', false, false, false],
+                    productId: ['ID', false, false, false],
+                    createdAt: ['DateTime', false, false, false],
+                    updatedAt: ['DateTime', false, false, false],
+                    languageCode: ['LanguageCode', false, false, false],
+                    sku: ['String', false, false, false],
+                    name: ['String', false, false, false],
+                    featuredAsset: ['Asset', true, false, false],
+                    assets: ['Asset', false, true, false],
+                    price: ['Money', false, false, false],
+                    currencyCode: ['CurrencyCode', false, false, false],
+                    priceWithTax: ['Money', false, false, false],
+                    stockLevel: ['String', false, false, false],
+                    taxRateApplied: ['TaxRate', false, false, false],
+                    taxCategory: ['TaxCategory', false, false, false],
+                    options: ['ProductOption', false, true, false],
+                    facetValues: ['FacetValue', false, true, false],
+                    translations: ['ProductVariantTranslation', false, true, false],
+                    customFields: ['JSON', true, false, false],
+                },
+                ProductCustomFields: {
+                    custom1: ['String', false, false, false],
+                },
+
+                Asset: {
+                    id: ['ID', false, false, false],
+                    createdAt: ['DateTime', false, false, false],
+                    updatedAt: ['DateTime', false, false, false],
+                    name: ['String', false, false, false],
+                    type: ['AssetType', false, false, false],
+                    fileSize: ['Int', false, false, false],
+                    mimeType: ['String', false, false, false],
+                    width: ['Int', false, false, false],
+                    height: ['Int', false, false, false],
+                    source: ['String', false, false, false],
+                    preview: ['String', false, false, false],
+                    focalPoint: ['Coordinate', true, false, false],
+                    tags: ['Tag', false, true, false],
+                    customFields: ['JSON', true, false, false],
+                },
+                ProductTranslation: {
+                    id: ['ID', false, false, false],
+                    createdAt: ['DateTime', false, false, false],
+                    updatedAt: ['DateTime', false, false, false],
+                    languageCode: ['LanguageCode', false, false, false],
+                    name: ['String', false, false, false],
+                    slug: ['String', false, false, false],
+                    description: ['String', false, false, false],
+                    customFields: ['ProductTranslationCustomFields', true, false, false],
+                },
+                ProductList: {
+                    items: ['Product', false, true, false],
+                    totalItems: ['Int', false, false, false],
+                },
+
+                ProductVariantTranslation: {
+                    id: ['ID', false, false, false],
+                    createdAt: ['DateTime', false, false, false],
+                    updatedAt: ['DateTime', false, false, false],
+                    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],
+                },
+            },
+            scalars: [
+                'ID',
+                'String',
+                'Int',
+                'Boolean',
+                'Float',
+                'JSON',
+                'DateTime',
+                'Upload',
+                'CurrencyCode',
+            ],
+            enums: {},
+        },
+    };
+}

package/src/lib/framework/extension-api/display-component-extensions.tsx

@@ -1,5 +1,6 @@
 import { BooleanDisplayBadge, BooleanDisplayCheckbox } from '@/vdb/components/data-display/boolean.js';
 import { DateTime } from '@/vdb/components/data-display/date-time.js';
+import { Json } from '@/vdb/components/data-display/json.js';
 import { Money } from '@/vdb/components/data-display/money.js';
 import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
 import { DataDisplayComponent } from '../component-registry/component-registry.js';
@@ -17,6 +18,7 @@ displayComponents.set('vendure:booleanBadge', BooleanDisplayBadge);
 displayComponents.set('vendure:dateTime', DateTime);
 displayComponents.set('vendure:asset', AssetDisplay);
 displayComponents.set('vendure:money', Money);
+displayComponents.set('vendure:json', Json);
 
 export function getDisplayComponent(id: string): DataDisplayComponent | undefined {
     return globalRegistry.get('displayComponents').get(id);

package/src/lib/framework/extension-api/types/data-table.ts

@@ -35,12 +35,70 @@ export type BulkActionComponent<Item extends { id: string } & Record<string, any
 
 /**
  * @description
- * **Status: Developer Preview**
- *
  * A bulk action is a component that will be rendered in the bulk actions dropdown.
  *
- * @docsCategory components
- * @docsPage DataTable
+ * The component receives the following props:
+ *
+ * - `selection`: The selected row or rows
+ * - `table`: A reference to the Tanstack table instance powering the list
+ *
+ * The `table` object has
+ *
+ * @example
+ * ```tsx
+ * import { BulkActionComponent, DataTableBulkActionItem, usePaginatedList } from '\@vendure/dashboard';
+ *
+ * // This is an example of a bulk action that shows some typical
+ * // uses of the provided props
+ * export const MyBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *   const { refetchPaginatedList } = usePaginatedList();
+ *
+ *   const doTheAction = async () => {
+ *     // Actual logic of the action
+ *     // goes here...
+ *
+ *     // On success, we refresh the list
+ *     refetchPaginatedList();
+ *     // and un-select any selected rows in the table
+ *     table.resetRowSelection();
+ *   };
+ *
+ *  return (
+ *    <DataTableBulkActionItem
+ *      onClick={doTheAction}
+ *      label={<Trans>Delete</Trans>}
+ *      confirmationText={<Trans>Are you sure?</Trans>}
+ *      icon={Check}
+ *      className="text-destructive"
+ *    />
+ *  );
+ * }
+ * ```
+ *
+ * For the common action of deletion, we provide a ready-made helper component:
+ *
+ * @example
+ * ```tsx
+ * import { BulkActionComponent, DeleteProductsBulkAction } from '\@vendure/dashboard';
+ *
+ * // Define the BulkAction component. This one uses
+ * // a built-in wrapper for "delete" actions, which includes
+ * // a confirmation dialog.
+ * export const DeleteProductsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *     return (
+ *         <DeleteBulkAction
+ *             mutationDocument={deleteProductsDocument}
+ *             entityName="products"
+ *             requiredPermissions={['DeleteCatalog', 'DeleteProduct']}
+ *             selection={selection}
+ *             table={table}
+ *         />
+ *     );
+ * };
+ * ```
+ *
+ * @docsCategory list-views
+ * @docsPage bulk-actions
  * @since 3.4.0
  */
 export type BulkAction = {

package/src/lib/framework/extension-api/types/navigation.ts

@@ -40,6 +40,22 @@ export interface DashboardRouteDefinition {
      * [loader function](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#route-loaders)
      */
     loader?: RouteOptions['loader'];
+
+    /**
+     * @description
+     * Optional search parameter validation function.
+     * The value is a Tanstack Router
+     * [validateSearch function](https://tanstack.com/router/latest/docs/framework/react/guide/search-params#search-param-validation)
+     */
+    validateSearch?: RouteOptions['validateSearch'];
+
+    /**
+     * @description
+     * Define if the route should be under the authentication context, i.e have the authenticated route
+     * as a parent.
+     * @default true
+     */
+    authenticated?: boolean;
 }
 
 /**

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

@@ -19,6 +19,8 @@ import {
     StructField,
     TextCustomFieldConfig,
 } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { FormEvent } from 'react';
+import { UseFormReturn } from 'react-hook-form';
 
 import { FieldInfo } from '../document-introspection/get-document-structure.js';
 
@@ -320,3 +322,35 @@ export function hasPermissionRequirement(input: ConfigurableFieldDef): boolean {
 export function isNullableField(input: ConfigurableFieldDef): boolean {
     return isCustomFieldConfig(input) && Boolean(input.nullable);
 }
+
+/**
+ * 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.
+ *
+ * @param form - The react-hook-form instance
+ * @param onSubmit - The submit handler function
+ * @returns An event handler that prevents propagation and handles the form submission
+ *
+ * @example
+ * ```tsx
+ * const form = useForm<FormSchema>({ resolver: zodResolver(formSchema) });
+ *
+ * return (
+ *   <form onSubmit={handleNestedFormSubmit(form, (data) => {
+ *     // Handle form submission
+ *   })}>
+ *     ...
+ *   </form>
+ * );
+ * ```
+ */
+export function handleNestedFormSubmit<TFieldValues extends Record<string, any>>(
+    form: UseFormReturn<TFieldValues>,
+    onSubmit: (data: TFieldValues) => void | Promise<void>,
+) {
+    return (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        void form.handleSubmit(onSubmit)(e);
+    };
+}

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

@@ -23,7 +23,7 @@ import {
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
 import { PageContext, PageContextValue } from '@/vdb/framework/layout-engine/page-provider.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
 import { LocationWrapper } from './location-wrapper.js';
 
@@ -119,12 +119,12 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
 }
 
 function PageContent({
-    pageHeader,
-    pageContent,
-    form,
-    submitHandler,
-    ...props
-}: {
+                         pageHeader,
+                         pageContent,
+                         form,
+                         submitHandler,
+                         ...props
+                     }: {
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     form?: UseFormReturn<any>;
@@ -146,11 +146,11 @@ function PageContent({
 }
 
 export function PageContentWithOptionalForm({
-    form,
-    pageHeader,
-    pageContent,
-    submitHandler,
-}: {
+                                                form,
+                                                pageHeader,
+                                                pageContent,
+                                                submitHandler,
+                                            }: {
     form?: UseFormReturn<any>;
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
@@ -425,9 +425,9 @@ function EntityInfoDropdown({ entity }: Readonly<{ entity: any }>) {
  * @since 3.3.0
  */
 export function PageActionBarRight({
-    children,
-    dropdownMenuItems,
-}: Readonly<{
+                                       children,
+                                       dropdownMenuItems,
+                                   }: Readonly<{
     children: React.ReactNode;
     dropdownMenuItems?: InlineDropdownItem[];
 }>) {
@@ -458,9 +458,9 @@ export function PageActionBarRight({
 }
 
 function PageActionBarItem({
-    item,
-    page,
-}: Readonly<{ item: DashboardActionBarItem; page: PageContextValue }>) {
+                               item,
+                               page,
+                           }: Readonly<{ item: DashboardActionBarItem; page: PageContextValue }>) {
     return (
         <PermissionGuard requires={item.requiresPermission ?? []}>
             <item.component context={page} />
@@ -469,9 +469,9 @@ function PageActionBarItem({
 }
 
 function PageActionBarDropdown({
-    items,
-    page,
-}: Readonly<{ items: DashboardActionBarItem[]; page: PageContextValue }>) {
+                                   items,
+                                   page,
+                               }: Readonly<{ items: DashboardActionBarItem[]; page: PageContextValue }>) {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -550,13 +550,13 @@ export type PageBlockProps = {
  * @since 3.3.0
  */
 export function PageBlock({
-    children,
-    title,
-    description,
-    className,
-    blockId,
-    column,
-}: Readonly<PageBlockProps>) {
+                              children,
+                              title,
+                              description,
+                              className,
+                              blockId,
+                              column,
+                          }: Readonly<PageBlockProps>) {
     const contextValue = useMemo(
         () => ({
             blockId,
@@ -595,10 +595,10 @@ export function PageBlock({
  * @since 3.3.0
  */
 export function FullWidthPageBlock({
-    children,
-    className,
-    blockId,
-}: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>) {
+                                       children,
+                                       className,
+                                       blockId,
+                                   }: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>) {
     const contextValue = useMemo(() => ({ blockId, column: 'main' as const }), [blockId]);
     return (
         <PageBlockContext.Provider value={contextValue}>
@@ -625,10 +625,10 @@ export function FullWidthPageBlock({
  * @since 3.3.0
  */
 export function CustomFieldsPageBlock({
-    column,
-    entityType,
-    control,
-}: Readonly<{
+                                          column,
+                                          entityType,
+                                          control,
+                                      }: Readonly<{
     column: 'main' | 'side';
     entityType: string;
     control: Control<any, any>;

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

@@ -5,7 +5,7 @@ import { Checkbox } from '@/vdb/components/ui/checkbox.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, useNavigate } from '@tanstack/react-router';
 import { ResultOf, VariablesOf } from 'gql.tada';
@@ -152,15 +152,15 @@ export function DetailPage<
     C extends TypedDocumentNode<any, any>,
     U extends TypedDocumentNode<any, any>,
 >({
-    pageId,
-    route,
-    entityName: passedEntityName,
-    queryDocument,
-    createDocument,
-    updateDocument,
-    setValuesForUpdate,
-    title,
-}: DetailPageProps<T, C, U>) {
+      pageId,
+      route,
+      entityName: passedEntityName,
+      queryDocument,
+      createDocument,
+      updateDocument,
+      setValuesForUpdate,
+      title,
+  }: DetailPageProps<T, C, U>) {
     const params = route.useParams();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const navigate = useNavigate();