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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.8-master-202507300243",
+    "version": "3.3.8-master-202508010249",
     "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-202508010249",
+        "@vendure/core": "^3.3.8-master-202508010249",
         "@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": "9d2ad2874a19007af173d45bd1c00d09906ac2c1"
 }

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/layout/manage-languages-dialog.tsx

@@ -0,0 +1,368 @@
+import { LanguageSelector } from '@/vdb/components/shared/language-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Label } from '@/vdb/components/ui/label.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AlertCircle, Lock } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+// GraphQL queries
+const globalSettingsLanguagesDocument = graphql(`
+    query GlobalSettingsLanguages {
+        globalSettings {
+            id
+            availableLanguages
+        }
+    }
+`);
+
+const updateGlobalSettingsLanguagesDocument = graphql(`
+    mutation UpdateGlobalSettingsLanguages($input: UpdateGlobalSettingsInput!) {
+        updateGlobalSettings(input: $input) {
+            __typename
+            ... on GlobalSettings {
+                id
+                availableLanguages
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+const updateChannelDocument = graphql(`
+    mutation UpdateChannelLanguages($input: UpdateChannelInput!) {
+        updateChannel(input: $input) {
+            __typename
+            ... on Channel {
+                id
+                code
+                defaultLanguageCode
+                availableLanguageCodes
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+// All possible language codes for global settings - includes more than what might be globally enabled
+const ALL_LANGUAGE_CODES = [
+    'en', 'es', 'fr', 'de', 'it', 'pt', 'nl', 'pl', 'ru', 'ja', 'zh', 'ko', 'ar', 'hi', 'sv', 'da', 'no', 'fi'
+];
+
+interface ManageLanguagesDialogProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogProps) {
+    const { formatLanguageName } = useLocalFormat();
+    const { activeChannel, selectedChannel } = useChannel();
+    const { hasPermissions } = usePermissions();
+    const queryClient = useQueryClient();
+    
+    const displayChannel = selectedChannel || activeChannel;
+    
+    // Permission checks
+    const canReadGlobalSettings = hasPermissions(['ReadSettings']) || hasPermissions(['ReadGlobalSettings']);
+    const canUpdateGlobalSettings = hasPermissions(['UpdateSettings']) || hasPermissions(['UpdateGlobalSettings']);
+    const canReadChannel = hasPermissions(['ReadChannel']);
+    const canUpdateChannel = hasPermissions(['UpdateChannel']);
+
+    // State for managing changes
+    const [globalLanguages, setGlobalLanguages] = useState<string[]>([]);
+    const [channelLanguages, setChannelLanguages] = useState<string[]>([]);
+    const [channelDefaultLanguage, setChannelDefaultLanguage] = useState<string>('');
+
+    // Queries
+    const { 
+        data: globalSettingsData, 
+        isLoading: globalSettingsLoading,
+        error: globalSettingsError 
+    } = useQuery({
+        queryKey: ['globalSettings', 'languages'],
+        queryFn: () => api.query(globalSettingsLanguagesDocument),
+        enabled: open && canReadGlobalSettings,
+    });
+
+    // Mutations
+    const updateGlobalSettingsMutation = useMutation({
+        mutationFn: (input: { availableLanguages: string[] }) =>
+            api.mutate(updateGlobalSettingsLanguagesDocument, { input }),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['globalSettings'] });
+            toast.success('Global language settings updated successfully');
+        },
+        onError: (error: any) => {
+            toast.error(`Failed to update global settings: ${error.message}`);
+        },
+    });
+
+    const updateChannelMutation = useMutation({
+        mutationFn: (input: { id: string; availableLanguageCodes?: string[]; defaultLanguageCode?: string }) =>
+            api.mutate(updateChannelDocument, { input }),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['channels'] });
+            toast.success('Channel language settings updated successfully');
+        },
+        onError: (error: any) => {
+            toast.error(`Failed to update channel settings: ${error.message}`);
+        },
+    });
+
+    // Initialize state when dialog opens
+    useEffect(() => {
+        if (open && globalSettingsData) {
+            setGlobalLanguages(globalSettingsData.globalSettings.availableLanguages || []);
+        }
+        if (open && displayChannel) {
+            setChannelLanguages(displayChannel.availableLanguageCodes || []);
+            setChannelDefaultLanguage(displayChannel.defaultLanguageCode || '');
+        }
+    }, [open, globalSettingsData, displayChannel]);
+
+    const handleGlobalLanguagesChange = (newLanguages: string[]) => {
+        setGlobalLanguages(newLanguages);
+        
+        // Remove channel languages that are no longer in global languages
+        const updatedChannelLanguages = channelLanguages.filter(lang => newLanguages.includes(lang));
+        setChannelLanguages(updatedChannelLanguages);
+        
+        // If the default language is no longer available, reset it
+        if (!newLanguages.includes(channelDefaultLanguage)) {
+            setChannelDefaultLanguage(updatedChannelLanguages[0] || '');
+        }
+    };
+
+    const handleChannelLanguagesChange = (newLanguages: string[]) => {
+        setChannelLanguages(newLanguages);
+        
+        // If the default language is no longer available, reset it
+        if (!newLanguages.includes(channelDefaultLanguage)) {
+            setChannelDefaultLanguage(newLanguages[0] || '');
+        }
+    };
+
+    const handleSave = async () => {
+        const promises = [];
+
+        // Update global settings if changed and permissions allow
+        if (canUpdateGlobalSettings && globalSettingsData) {
+            const currentGlobalLanguages = globalSettingsData.globalSettings.availableLanguages || [];
+            if (JSON.stringify(currentGlobalLanguages.sort()) !== JSON.stringify(globalLanguages.sort())) {
+                promises.push(updateGlobalSettingsMutation.mutateAsync({ availableLanguages: globalLanguages }));
+            }
+        }
+
+        // Update channel settings if changed and permissions allow
+        if (canUpdateChannel && displayChannel) {
+            const currentChannelLanguages = displayChannel.availableLanguageCodes || [];
+            const currentChannelDefault = displayChannel.defaultLanguageCode || '';
+            
+            const languagesChanged = JSON.stringify(currentChannelLanguages.sort()) !== JSON.stringify(channelLanguages.sort());
+            const defaultChanged = currentChannelDefault !== channelDefaultLanguage;
+            
+            if (languagesChanged || defaultChanged) {
+                promises.push(updateChannelMutation.mutateAsync({
+                    id: displayChannel.id,
+                    availableLanguageCodes: channelLanguages,
+                    defaultLanguageCode: channelDefaultLanguage,
+                }));
+            }
+        }
+
+        try {
+            await Promise.all(promises);
+            onClose();
+        } catch (error) {
+            // Error handling is done in mutation callbacks
+        }
+    };
+
+    const hasChanges = () => {
+        if (globalSettingsData && canUpdateGlobalSettings) {
+            const currentGlobal = globalSettingsData.globalSettings.availableLanguages || [];
+            if (JSON.stringify(currentGlobal.sort()) !== JSON.stringify(globalLanguages.sort())) {
+                return true;
+            }
+        }
+        
+        if (displayChannel && canUpdateChannel) {
+            const currentChannelLangs = displayChannel.availableLanguageCodes || [];
+            const currentChannelDefault = displayChannel.defaultLanguageCode || '';
+            
+            return (
+                JSON.stringify(currentChannelLangs.sort()) !== JSON.stringify(channelLanguages.sort()) ||
+                currentChannelDefault !== channelDefaultLanguage
+            );
+        }
+        
+        return false;
+    };
+
+    const isLoading = updateGlobalSettingsMutation.isPending || updateChannelMutation.isPending;
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                    <DialogTitle><Trans>Manage Languages</Trans></DialogTitle>
+                    <DialogDescription>
+                        <Trans>Configure available languages for your store and channels</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-6">
+                    {/* Global Settings Section */}
+                    <div>
+                        <div className="flex items-center gap-2 mb-3">
+                            <h3 className="text-lg font-semibold"><Trans>Global Languages</Trans></h3>
+                            {!canReadGlobalSettings && <Lock className="h-4 w-4 text-muted-foreground" />}
+                        </div>
+                        
+                        {!canReadGlobalSettings ? (
+                            <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+                                <AlertCircle className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm text-muted-foreground">
+                                    <Trans>You don't have permission to view global language settings</Trans>
+                                </span>
+                            </div>
+                        ) : globalSettingsLoading ? (
+                            <div className="text-sm text-muted-foreground">
+                                <Trans>Loading global settings...</Trans>
+                            </div>
+                        ) : globalSettingsError ? (
+                            <div className="flex items-center gap-2 p-3 bg-destructive/10 rounded-md">
+                                <AlertCircle className="h-4 w-4 text-destructive" />
+                                <span className="text-sm text-destructive">
+                                    <Trans>Failed to load global settings</Trans>
+                                </span>
+                            </div>
+                        ) : (
+                            <div className="space-y-2">
+                                <Label className="text-sm font-medium">
+                                    <Trans>Select Available Languages</Trans>
+                                </Label>
+                                <div className={!canUpdateGlobalSettings ? 'pointer-events-none opacity-50' : ''}>
+                                    <LanguageSelector
+                                        value={globalLanguages}
+                                        onChange={handleGlobalLanguagesChange}
+                                        multiple={true}
+                                        availableLanguageCodes={ALL_LANGUAGE_CODES}
+                                    />
+                                </div>
+                                <p className="text-xs text-muted-foreground">
+                                    <Trans>These languages will be available for all channels to use</Trans>
+                                </p>
+                            </div>
+                        )}
+                    </div>
+
+                    <Separator />
+
+                    {/* Channel Settings Section */}
+                    <div>
+                        <div className="flex items-center gap-2 mb-3">
+                            <h3 className="text-lg font-semibold">
+                                <Trans>Channel Languages</Trans> - <ChannelCodeLabel code={displayChannel?.code} />
+                            </h3>
+                            {!canReadChannel && <Lock className="h-4 w-4 text-muted-foreground" />}
+                        </div>
+
+                        {!canReadChannel ? (
+                            <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+                                <AlertCircle className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm text-muted-foreground">
+                                    <Trans>You don't have permission to view channel settings</Trans>
+                                </span>
+                            </div>
+                        ) : (
+                            <div className="space-y-4">
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium">
+                                        <Trans>Available Languages</Trans>
+                                    </Label>
+                                    <div className={!canUpdateChannel ? 'pointer-events-none opacity-50' : ''}>
+                                        <LanguageSelector
+                                            value={channelLanguages}
+                                            onChange={handleChannelLanguagesChange}
+                                            multiple={true}
+                                            availableLanguageCodes={globalLanguages}
+                                        />
+                                    </div>
+                                    {globalLanguages.length === 0 ? (
+                                        <p className="text-xs text-muted-foreground">
+                                            <Trans>No global languages configured</Trans>
+                                        </p>
+                                    ) : (
+                                        <p className="text-xs text-muted-foreground">
+                                            <Trans>Select from globally available languages for this channel</Trans>
+                                        </p>
+                                    )}
+                                </div>
+
+                                {channelLanguages.length > 0 && (
+                                    <div>
+                                        <Label className="text-sm font-medium mb-2 block">
+                                            <Trans>Default Language</Trans>
+                                        </Label>
+                                        <Select
+                                            value={channelDefaultLanguage}
+                                            onValueChange={setChannelDefaultLanguage}
+                                            disabled={!canUpdateChannel}
+                                        >
+                                            <SelectTrigger className="w-[200px]">
+                                                <SelectValue placeholder="Select default language" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {channelLanguages.map(languageCode => (
+                                                    <SelectItem key={languageCode} value={languageCode}>
+                                                        {formatLanguageName(languageCode)} ({languageCode.toUpperCase()})
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={onClose} disabled={isLoading}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button 
+                        onClick={handleSave} 
+                        disabled={!hasChanges() || isLoading}
+                    >
+                        {isLoading ? <Trans>Saving...</Trans> : <Trans>Save Changes</Trans>}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

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>