@vendure/dashboard 3.3.5-master-202506250727 → 3.3.5-master-202506251318

package/src/lib/components/shared/custom-fields-form.tsx

@@ -7,12 +7,15 @@ import {
     FormMessage,
 } from '@/components/ui/form.js';
 import { Input } from '@/components/ui/input.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
 import { CustomFormComponent } from '@/framework/form-engine/custom-form-component.js';
 import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { useLingui } from '@/lib/trans.js';
 import { customFieldConfigFragment } from '@/providers/server-config.js';
 import { CustomFieldType } from '@vendure/common/lib/shared-types';
 import { ResultOf } from 'gql.tada';
+import React, { useMemo } from 'react';
 import { Control, ControllerRenderProps } from 'react-hook-form';
 import { Switch } from '../ui/switch.js';
 import { TranslatableFormField } from './translatable-form-field.js';
@@ -29,6 +32,7 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
     const {
         settings: { displayLanguage },
     } = useUserSettings();
+    const { i18n } = useLingui();
 
     const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
         return input?.find(t => t.languageCode === displayLanguage)?.value;
@@ -42,18 +46,80 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
             : `customFields.${fieldDefName}`;
     };
 
+    // Group custom fields by tabs
+    const groupedFields = useMemo(() => {
+        if (!customFields) return [];
+
+        const tabMap = new Map<string, CustomFieldConfig[]>();
+        const defaultTabName = '__default_tab__';
+
+        for (const field of customFields) {
+            const tabName = field.ui?.tab ?? defaultTabName;
+            if (tabMap.has(tabName)) {
+                tabMap.get(tabName)?.push(field);
+            } else {
+                tabMap.set(tabName, [field]);
+            }
+        }
+
+        return Array.from(tabMap.entries())
+            .sort((a, b) => (a[0] === defaultTabName ? -1 : 1))
+            .map(([tabName, customFields]) => ({
+                tabName: tabName === defaultTabName ? 'general' : tabName,
+                customFields,
+            }));
+    }, [customFields]);
+
+    // Check if we should show tabs (more than one tab or at least one field has a tab)
+    const shouldShowTabs = useMemo(() => {
+        if (!customFields) return false;
+        const hasTabbedFields = customFields.some(field => field.ui?.tab);
+        return hasTabbedFields || groupedFields.length > 1;
+    }, [customFields, groupedFields.length]);
+
+    if (!shouldShowTabs) {
+        // Single tab view - use the original grid layout
+        return (
+            <div className="grid grid-cols-2 gap-4">
+                {customFields?.map(fieldDef => (
+                    <CustomFieldItem
+                        key={fieldDef.name}
+                        fieldDef={fieldDef}
+                        control={control}
+                        fieldName={getFieldName(fieldDef.name)}
+                        getTranslation={getTranslation}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    // Tabbed view
     return (
-        <div className="grid grid-cols-2 gap-4">
-            {customFields?.map(fieldDef => (
-                <CustomFieldItem
-                    key={fieldDef.name}
-                    fieldDef={fieldDef}
-                    control={control}
-                    fieldName={getFieldName(fieldDef.name)}
-                    getTranslation={getTranslation}
-                />
+        <Tabs defaultValue={groupedFields[0]?.tabName} className="w-full">
+            <TabsList>
+                {groupedFields.map(group => (
+                    <TabsTrigger key={group.tabName} value={group.tabName}>
+                        {group.tabName === 'general' ? i18n.t('General') : group.tabName}
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+            {groupedFields.map(group => (
+                <TabsContent key={group.tabName} value={group.tabName} className="mt-4">
+                    <div className="grid grid-cols-2 gap-4">
+                        {group.customFields.map(fieldDef => (
+                            <CustomFieldItem
+                                key={fieldDef.name}
+                                fieldDef={fieldDef}
+                                control={control}
+                                fieldName={getFieldName(fieldDef.name)}
+                                getTranslation={getTranslation}
+                            />
+                        ))}
+                    </div>
+                </TabsContent>
             ))}
-        </div>
+        </Tabs>
     );
 }
 
@@ -69,83 +135,91 @@ interface CustomFieldItemProps {
 function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: CustomFieldItemProps) {
     const hasCustomFormComponent = fieldDef.ui && fieldDef.ui.component;
     const isLocaleField = fieldDef.type === 'localeString' || fieldDef.type === 'localeText';
+    const shouldBeFullWidth = fieldDef.ui?.fullWidth === true;
+    const containerClassName = shouldBeFullWidth ? 'col-span-2' : '';
 
     // For locale fields, always use TranslatableFormField regardless of custom components
     if (isLocaleField) {
         return (
-            <TranslatableFormField
-                control={control}
-                name={fieldName}
-                render={({ field, ...props }) => (
-                    <FormItem>
-                        <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
-                        <FormControl>
-                            {hasCustomFormComponent ? (
-                                <CustomFormComponent
-                                    fieldDef={fieldDef}
-                                    fieldProps={{
-                                        ...props,
-                                        field: {
-                                            ...field,
-                                            disabled: fieldDef.readonly ?? false,
-                                        },
-                                    }}
-                                />
-                            ) : (
-                                <FormInputForType fieldDef={fieldDef} field={field} />
-                            )}
-                        </FormControl>
-                        <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
-                        <FormMessage />
-                    </FormItem>
-                )}
-            />
+            <div className={containerClassName}>
+                <TranslatableFormField
+                    control={control}
+                    name={fieldName}
+                    render={({ field, ...props }) => (
+                        <FormItem>
+                            <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                            <FormControl>
+                                {hasCustomFormComponent ? (
+                                    <CustomFormComponent
+                                        fieldDef={fieldDef}
+                                        fieldProps={{
+                                            ...props,
+                                            field: {
+                                                ...field,
+                                                disabled: fieldDef.readonly ?? false,
+                                            },
+                                        }}
+                                    />
+                                ) : (
+                                    <FormInputForType fieldDef={fieldDef} field={field} />
+                                )}
+                            </FormControl>
+                            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </div>
         );
     }
 
     // For non-locale fields with custom components
     if (hasCustomFormComponent) {
         return (
+            <div className={containerClassName}>
+                <FormField
+                    control={control}
+                    name={fieldName}
+                    render={fieldProps => (
+                        <CustomFieldFormItem
+                            fieldDef={fieldDef}
+                            getTranslation={getTranslation}
+                            fieldName={fieldProps.field.name}
+                        >
+                            <CustomFormComponent
+                                fieldDef={fieldDef}
+                                fieldProps={{
+                                    ...fieldProps,
+                                    field: {
+                                        ...fieldProps.field,
+                                        disabled: fieldDef.readonly ?? false,
+                                    },
+                                }}
+                            />
+                        </CustomFieldFormItem>
+                    )}
+                />
+            </div>
+        );
+    }
+
+    // For regular fields without custom components
+    return (
+        <div className={containerClassName}>
             <FormField
                 control={control}
                 name={fieldName}
-                render={fieldProps => (
+                render={({ field }) => (
                     <CustomFieldFormItem
                         fieldDef={fieldDef}
                         getTranslation={getTranslation}
-                        fieldName={fieldProps.field.name}
+                        fieldName={field.name}
                     >
-                        <CustomFormComponent
-                            fieldDef={fieldDef}
-                            fieldProps={{
-                                ...fieldProps,
-                                field: {
-                                    ...fieldProps.field,
-                                    disabled: fieldDef.readonly ?? false,
-                                },
-                            }}
-                        />
+                        <FormInputForType fieldDef={fieldDef} field={field} />
                     </CustomFieldFormItem>
                 )}
             />
-        );
-    }
-
-    // For regular fields without custom components
-    return (
-        <FormField
-            control={control}
-            name={fieldName}
-            render={({ field }) => (
-                <CustomFieldFormItem
-                    fieldDef={fieldDef}
-                    getTranslation={getTranslation}
-                    fieldName={field.name}
-                >
-                    <FormInputForType fieldDef={fieldDef} field={field} />
-                </CustomFieldFormItem>
-            )}
-        />
+        </div>
     );
 }
 

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -7,15 +7,9 @@ import {
 } from '@/framework/document-introspection/get-document-structure.js';
 import { useListQueryFields } from '@/framework/document-introspection/hooks.js';
 import { api } from '@/graphql/api.js';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -27,11 +21,17 @@ import {
     AlertDialogTitle,
     AlertDialogTrigger,
 } from '@/components/ui/alert-dialog.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
 import { DisplayComponent } from '@/framework/component-registry/dynamic-component.js';
+import { BulkAction } from '@/framework/data-table/data-table-types.js';
 import { ResultOf } from '@/graphql/graphql.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { useQuery } from '@tanstack/react-query';
 import {
     ColumnFiltersState,
     ColumnSort,
@@ -44,6 +44,7 @@ import { EllipsisIcon, TrashIcon } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { toast } from 'sonner';
 import { Button } from '../ui/button.js';
+import { Checkbox } from '../ui/checkbox.js';
 
 // Type that identifies a paginated list structure (has items array and totalItems)
 type IsPaginatedList<T> = T extends { items: any[]; totalItems: number } ? true : false;
@@ -227,6 +228,7 @@ export interface PaginatedListDataTableProps<
     onColumnVisibilityChange?: (table: Table<any>, columnVisibility: VisibilityState) => void;
     facetedFilters?: FacetedFilterConfig<T>;
     rowActions?: RowAction<PaginatedListItemFields<T>>[];
+    bulkActions?: BulkAction[];
     disableViewOptions?: boolean;
     transformData?: (data: PaginatedListItemFields<T>[]) => PaginatedListItemFields<T>[];
     setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
@@ -265,6 +267,7 @@ export function PaginatedListDataTable<
     onColumnVisibilityChange,
     facetedFilters,
     rowActions,
+    bulkActions,
     disableViewOptions,
     setTableOptions,
     transformData,
@@ -309,6 +312,7 @@ export function PaginatedListDataTable<
     function refetchPaginatedList() {
         queryClient.invalidateQueries({ queryKey });
     }
+
     registerRefresher?.(refetchPaginatedList);
 
     const { data } = useQuery({
@@ -427,7 +431,10 @@ export function PaginatedListDataTable<
             // existing order
             const orderedColumns = finalColumns
                 .filter(column => column.id && defaultColumnOrder.includes(column.id as any))
-                .sort((a, b) => defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any));
+                .sort(
+                    (a, b) =>
+                        defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any),
+                );
             const remainingColumns = finalColumns.filter(
                 column => !column.id || !defaultColumnOrder.includes(column.id as any),
             );
@@ -441,6 +448,31 @@ export function PaginatedListDataTable<
             }
         }
 
+        // Add the row selection column
+        finalColumns.unshift({
+            id: 'selection',
+            accessorKey: 'selection',
+            header: ({ table }) => (
+                <Checkbox
+                    className="mx-1"
+                    checked={table.getIsAllRowsSelected()}
+                    onCheckedChange={checked =>
+                        table.toggleAllRowsSelected(checked === 'indeterminate' ? undefined : checked)
+                    }
+                />
+            ),
+            enableColumnFilter: false,
+            cell: ({ row }) => {
+                return (
+                    <Checkbox
+                        className="mx-1"
+                        checked={row.getIsSelected()}
+                        onCheckedChange={row.getToggleSelectedHandler()}
+                    />
+                );
+            },
+        });
+
         return { columns: finalColumns, customFieldColumnNames };
     }, [fields, customizeColumns, rowActions]);
 
@@ -465,6 +497,7 @@ export function PaginatedListDataTable<
                 defaultColumnVisibility={columnVisibility}
                 facetedFilters={facetedFilters}
                 disableViewOptions={disableViewOptions}
+                bulkActions={bulkActions}
                 setTableOptions={setTableOptions}
                 onRefresh={refetchPaginatedList}
             />
@@ -536,7 +569,7 @@ function DeleteMutationRowAction({
     return (
         <AlertDialog>
             <AlertDialogTrigger asChild>
-                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <DropdownMenuItem onSelect={e => e.preventDefault()}>
                     <div className="flex items-center gap-2 text-destructive">
                         <TrashIcon className="w-4 h-4 text-destructive" />
                         <Trans>Delete</Trans>
@@ -549,7 +582,9 @@ function DeleteMutationRowAction({
                         <Trans>Confirm deletion</Trans>
                     </AlertDialogTitle>
                     <AlertDialogDescription>
-                        <Trans>Are you sure you want to delete this item? This action cannot be undone.</Trans>
+                        <Trans>
+                            Are you sure you want to delete this item? This action cannot be undone.
+                        </Trans>
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
@@ -567,6 +602,7 @@ function DeleteMutationRowAction({
         </AlertDialog>
     );
 }
+
 /**
  * Returns the default column visibility configuration.
  */

package/src/lib/framework/data-table/data-table-extensions.ts

@@ -0,0 +1,21 @@
+import { BulkAction } from '@/framework/data-table/data-table-types.js';
+
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('bulkActionsRegistry', new Map<string, BulkAction[]>());
+
+export function getBulkActions(pageId: string, blockId = 'list-table'): BulkAction[] {
+    const key = createKey(pageId, blockId);
+    return globalRegistry.get('bulkActionsRegistry').get(key) || [];
+}
+
+export function addBulkAction(pageId: string, blockId: string | undefined, action: BulkAction) {
+    const bulkActionsRegistry = globalRegistry.get('bulkActionsRegistry');
+    const key = createKey(pageId, blockId);
+    const existingActions = bulkActionsRegistry.get(key) || [];
+    bulkActionsRegistry.set(key, [...existingActions, action]);
+}
+
+function createKey(pageId: string, blockId: string | undefined): string {
+    return `${pageId}__${blockId ?? 'list-table'}`;
+}

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

@@ -0,0 +1,25 @@
+import { Table } from '@tanstack/react-table';
+
+export type BulkActionContext<Item extends { id: string } & Record<string, any>> = {
+    selection: Item[];
+    table: Table<Item>;
+};
+
+export type BulkActionComponent<Item extends { id: string } & Record<string, any>> = React.FunctionComponent<
+    BulkActionContext<Item>
+>;
+
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * A bulk action is a component that will be rendered in the bulk actions dropdown.
+ *
+ * @docsCategory components
+ * @docsPage DataTableBulkActions
+ * @since 3.4.0
+ */
+export type BulkAction = {
+    order?: number;
+    component: BulkActionComponent<any>;
+};

package/src/lib/framework/extension-api/define-dashboard-extension.ts

@@ -1,3 +1,5 @@
+import { addBulkAction } from '@/framework/data-table/data-table-extensions.js';
+
 import { registerDashboardWidget } from '../dashboard-widget/widget-extensions.js';
 import { addCustomFormComponent } from '../form-engine/custom-form-component-extensions.js';
 import {
@@ -82,6 +84,15 @@ export function defineDashboardExtension(extension: DashboardExtension) {
                 addCustomFormComponent(component);
             }
         }
+        if (extension.dataTables) {
+            for (const dataTable of extension.dataTables) {
+                if (dataTable.bulkActions?.length) {
+                    for (const action of dataTable.bulkActions) {
+                        addBulkAction(dataTable.pageId, dataTable.blockId, action);
+                    }
+                }
+            }
+        }
         const callbacks = globalRegistry.get('extensionSourceChangeCallbacks');
         if (callbacks.size) {
             for (const callback of callbacks) {

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

@@ -5,6 +5,7 @@ import type React from 'react';
 
 import { DashboardAlertDefinition } from '../alert/types.js';
 import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
+import { BulkAction } from '../data-table/data-table-types.js';
 import { CustomFormComponentInputProps } from '../form-engine/custom-form-component.js';
 import { NavMenuItem } from '../nav-menu/nav-menu-extensions.js';
 
@@ -109,6 +110,35 @@ export interface DashboardPageBlockDefinition {
     requiresPermission?: string | string[];
 }
 
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * This allows you to customize aspects of existing data tables in the dashboard.
+ *
+ * @docsCategory extensions
+ * @since 3.4.0
+ */
+export interface DashboardDataTableDefinition {
+    /**
+     * @description
+     * The ID of the page where the data table is located, e.g. `'product-list'`, `'order-list'`.
+     */
+    pageId: string;
+    /**
+     * @description
+     * The ID of the data table block. Defaults to `'list-table'`, which is the default blockId
+     * for the standard list pages. However, some other pages may use a different blockId,
+     * such as `'product-variants-table'` on the `'product-detail'` page.
+     */
+    blockId?: string;
+    /**
+     * @description
+     * An array of additional bulk actions that will be available on the data table.
+     */
+    bulkActions?: BulkAction[];
+}
+
 /**
  * @description
  * **Status: Developer Preview**
@@ -155,4 +185,9 @@ export interface DashboardExtension {
      * Allows you to define custom form components for custom fields in the dashboard.
      */
     customFormComponents?: DashboardCustomFormComponent[];
+    /**
+     * @description
+     * Allows you to customize aspects of existing data tables in the dashboard.
+     */
+    dataTables?: DashboardDataTableDefinition[];
 }

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

@@ -1,8 +1,5 @@
 import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
-import {
-    createFormSchemaFromFields,
-    getDefaultValuesFromFields,
-} from '@/framework/form-engine/form-schema-tools.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';
@@ -57,7 +54,7 @@ export function useGeneratedForm<
         },
         mode: 'onChange',
         defaultValues,
-        values: processedEntity ? processedEntity : defaultValues,
+        values: processedEntity ? setValues(processedEntity) : defaultValues,
     });
     let submitHandler = (event: FormEvent) => {
         event.preventDefault();

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

@@ -0,0 +1,6 @@
+import { PageBlockProps } from '@/framework/layout-engine/page-layout.js';
+import { createContext } from 'react';
+
+export type PageBlockContextValue = Pick<PageBlockProps, 'blockId' | 'column' | 'title' | 'description'>;
+
+export const PageBlockContext = createContext<PageBlockContextValue | undefined>(undefined);