@vendure/dashboard 3.3.8-master-202507300243 → 3.3.8-master-202507310242

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.8-master-202507300243",
+    "version": "3.3.8-master-202507310242",
     "type": "module",
     "repository": {
         "type": "git",
@@ -95,8 +95,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.3.8-master-202507300243",
-        "@vendure/core": "^3.3.8-master-202507300243",
+        "@vendure/common": "^3.3.8-master-202507310242",
+        "@vendure/core": "^3.3.8-master-202507310242",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -146,5 +146,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "3679d74357c979aa9c60d8f8b575190723e2bb8f"
+    "gitHead": "146703259a0efc748d92322ed5713a15503a015d"
 }

package/src/app/routes/_authenticated/_global-settings/global-settings.tsx

@@ -6,6 +6,8 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Switch } from '@/vdb/components/ui/switch.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -16,20 +18,25 @@ import {
     PageLayout,
     PageTitle,
 } from '@/vdb/framework/layout-engine/page-layout.js';
-import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { api } from '@/vdb/graphql/api.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { globalSettingsDocument, updateGlobalSettingsDocument } from './global-settings.graphql.js';
 
+const pageId = 'global-settings';
+
 export const Route = createFileRoute('/_authenticated/_global-settings/global-settings')({
     component: GlobalSettingsPage,
     loader: async ({ context }) => {
-        await context.queryClient.ensureQueryData({
-            queryFn: () => api.query(globalSettingsDocument),
-            queryKey: ['DetailPage', 'globalSettings'],
-        });
+        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
+            addCustomFields(globalSettingsDocument),
+            pageId,
+        );
+        await context.queryClient.ensureQueryData(
+            getDetailQueryOptions(extendedQueryDocument, { id: '' }),
+            {},
+        );
         return {
             breadcrumb: [{ path: '/global-settings', label: <Trans>Global settings</Trans> }],
         };
@@ -45,8 +52,9 @@ function GlobalSettingsPage() {
 
     const { form, submitHandler, entity, isPending } = useDetailPage({
         queryDocument: globalSettingsDocument,
-        entityField: 'globalSettings',
+        entityName: 'GlobalSettings',
         updateDocument: updateGlobalSettingsDocument,
+        pageId,
         setValuesForUpdate: entity => {
             return {
                 id: entity.id,
@@ -78,7 +86,7 @@ function GlobalSettingsPage() {
     });
 
     return (
-        <Page pageId="global-settings" form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Global settings</Trans>
             </PageTitle>

package/src/app/routes/_authenticated/_system/components/payload-dialog.tsx

@@ -26,7 +26,7 @@ export function PayloadDialog({ payload, trigger, title, description }: Readonly
                     <DialogDescription>{description}</DialogDescription>
                 </DialogHeader>
                 <ScrollArea className="max-h-[600px]">
-                    <JsonEditor viewOnly data={payload} collapse />
+                    <JsonEditor viewOnly data={payload} collapse={1} rootFontSize={12} />
                 </ScrollArea>
             </DialogContent>
         </Dialog>

package/src/app/routes/_authenticated/_system/job-queue.graphql.ts

@@ -41,3 +41,14 @@ export const jobQueueListDocument = graphql(`
         }
     }
 `);
+
+export const cancelJobDocument = graphql(
+    `
+        mutation CancelJob($jobId: ID!) {
+            cancelJob(jobId: $jobId) {
+                ...JobInfo
+            }
+        }
+    `,
+    [jobInfoFragment],
+);

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -1,13 +1,32 @@
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { api } from '@/vdb/graphql/api.js';
 import { Trans } from '@/vdb/lib/trans.js';
+import { useMutation } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { formatRelative } from 'date-fns';
-import { Ban, CheckCircle2Icon, CircleXIcon, ClockIcon, LoaderIcon, RotateCcw } from 'lucide-react';
+import {
+    Ban,
+    CheckCircle2Icon,
+    ChevronDown,
+    CircleXIcon,
+    ClockIcon,
+    LoaderIcon,
+    MoreVertical,
+    RefreshCw,
+    RotateCcw,
+} from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
 import { PayloadDialog } from './components/payload-dialog.js';
-import { jobListDocument, jobQueueListDocument } from './job-queue.graphql.js';
+import { cancelJobDocument, jobListDocument, jobQueueListDocument } from './job-queue.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_system/job-queue')({
     component: JobQueuePage,
@@ -47,7 +66,30 @@ const STATES = [
     },
 ];
 
+const REFRESH_INTERVALS = [
+    { label: <Trans>Off</Trans>, value: 0 },
+    { label: <Trans>Every 5 seconds</Trans>, value: 5000 },
+    { label: <Trans>Every 10 seconds</Trans>, value: 10000 },
+    { label: <Trans>Every 30 seconds</Trans>, value: 30000 },
+    { label: <Trans>Every 60 seconds</Trans>, value: 60000 },
+];
+
 function JobQueuePage() {
+    const refreshRef = useRef<() => void>(() => {});
+    const [refreshInterval, setRefreshInterval] = useState(10000);
+
+    useEffect(() => {
+        if (refreshInterval === 0) return;
+
+        const interval = setInterval(() => {
+            refreshRef.current();
+        }, refreshInterval);
+
+        return () => clearInterval(interval);
+    }, [refreshInterval]);
+
+    const currentInterval = REFRESH_INTERVALS.find(i => i.value === refreshInterval);
+
     return (
         <ListPage
             pageId="job-queue-list"
@@ -105,9 +147,14 @@ function JobQueuePage() {
                 },
                 state: {
                     header: 'State',
-                    cell: ({ row }) => {
+                    cell: ({ row, table }) => {
+                        const cancelJobMutation = useMutation({
+                            mutationFn: (jobId: string) => api.mutate(cancelJobDocument, { jobId }),
+                            onSuccess: () => {
+                                refreshRef.current();
+                            },
+                        });
                         const state = STATES.find(s => s.value === row.original.state);
-
                         return (
                             <Badge
                                 variant={
@@ -122,6 +169,27 @@ function JobQueuePage() {
                             >
                                 {state && <state.icon />}
                                 {row.original.state}
+                                {row.original.state === 'RUNNING' ? (
+                                    <div className="flex items-center gap-2">
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger asChild>
+                                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
+                                                    <MoreVertical className="h-4 w-4" />
+                                                </Button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent align="end">
+                                                <DropdownMenuItem
+                                                    onClick={() => cancelJobMutation.mutate(row.original.id)}
+                                                    disabled={cancelJobMutation.isPending}
+                                                    className="text-destructive focus:text-destructive"
+                                                >
+                                                    <Ban className="mr-2 h-4 w-4" />
+                                                    <Trans>Cancel Job</Trans>
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    </div>
+                                ) : null}
                             </Badge>
                         );
                     },
@@ -159,6 +227,32 @@ function JobQueuePage() {
                     options: STATES,
                 },
             }}
-        ></ListPage>
+            registerRefresher={refresher => {
+                refreshRef.current = refresher;
+            }}
+        >
+            <PageActionBarRight>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="outline" size="sm" className="gap-2">
+                            <RefreshCw className="h-4 w-4" />
+                            <span>Auto refresh: {currentInterval?.label}</span>
+                            <ChevronDown className="h-4 w-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        {REFRESH_INTERVALS.map(interval => (
+                            <DropdownMenuItem
+                                key={interval.value}
+                                onClick={() => setRefreshInterval(interval.value)}
+                                className={refreshInterval === interval.value ? 'bg-accent' : ''}
+                            >
+                                {interval.label}
+                            </DropdownMenuItem>
+                        ))}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </PageActionBarRight>
+        </ListPage>
     );
 }

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

@@ -229,7 +229,7 @@ function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: Reado
                         name={fieldName}
                         render={({ field }) => (
                             <FormItem>
-                                <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                                <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
                                 <FormControl>
                                     <CustomFieldListInput
                                         field={field}
@@ -263,7 +263,7 @@ function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: Reado
                     name={fieldName}
                     render={({ field }) => (
                         <FormItem>
-                            <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                            <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
                             <FormControl>
                                 <StructFormInput
                                     field={field}
@@ -291,7 +291,7 @@ function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: Reado
                     <CustomFieldFormItem
                         fieldDef={fieldDef}
                         getTranslation={getTranslation}
-                        fieldName={field.name}
+                        fieldName={fieldDef.name}
                     >
                         <FormInputForType fieldDef={fieldDef} field={field} />
                     </CustomFieldFormItem>

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

@@ -7,6 +7,7 @@ import {
     ListQueryOptionsShape,
     ListQueryShape,
     PaginatedListDataTable,
+    PaginatedListRefresherRegisterFn,
     RowAction,
 } from '@/vdb/components/shared/paginated-list-data-table.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
@@ -53,6 +54,12 @@ export interface ListPageProps<
     transformData?: (data: any[]) => any[];
     setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
     bulkActions?: BulkAction[];
+    /**
+     * Register a function that allows you to assign a refresh function for
+     * this list. The function can be assigned to a ref and then called when
+     * the list needs to be refreshed.
+     */
+    registerRefresher?: PaginatedListRefresherRegisterFn;
 }
 
 /**
@@ -90,6 +97,7 @@ export function ListPage<
     transformData,
     setTableOptions,
     bulkActions,
+    registerRefresher,
 }: Readonly<ListPageProps<T, U, V, AC>>) {
     const route = typeof routeOrFn === 'function' ? routeOrFn() : routeOrFn;
     const routeSearch = route.useSearch();
@@ -191,6 +199,7 @@ export function ListPage<
                         bulkActions={bulkActions}
                         setTableOptions={setTableOptions}
                         transformData={transformData}
+                        registerRefresher={registerRefresher}
                     />
                 </FullWidthPageBlock>
             </PageLayout>