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

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-calculator-selector.tsx

@@ -1,21 +1,7 @@
-import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { api } from '@/vdb/graphql/api.js';
-import {
-    configurableOperationDefFragment,
-    ConfigurableOperationDefFragment,
-} from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationSelector } from '@/vdb/components/shared/configurable-operation-selector.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
 
 export const shippingCalculatorsDocument = graphql(
     `
@@ -34,70 +20,14 @@ interface ShippingCalculatorSelectorProps {
 }
 
 export function ShippingCalculatorSelector({ value, onChange }: Readonly<ShippingCalculatorSelectorProps>) {
-    const { data: calculatorsData } = useQuery({
-        queryKey: ['shippingCalculators'],
-        queryFn: () => api.query(shippingCalculatorsDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const calculators = calculatorsData?.shippingCalculators;
-
-    const onCalculatorSelected = (calculator: ConfigurableOperationDefFragment) => {
-        const calculatorDef = calculators?.find(c => c.code === calculator.code);
-        if (!calculatorDef) {
-            return;
-        }
-        onChange({
-            code: calculator.code,
-            arguments: calculatorDef.args.map(arg => ({
-                name: arg.name,
-                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-            })),
-        });
-    };
-
-    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
-        onChange(newVal);
-    };
-
-    const onOperationRemove = () => {
-        onChange(undefined);
-    };
-
-    const calculatorDef = calculators?.find(c => c.code === value?.code);
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {value && calculatorDef && (
-                <div className="flex flex-col gap-2">
-                    <ConfigurableOperationInput
-                        operationDefinition={calculatorDef}
-                        value={value}
-                        onChange={value => onOperationValueChange(value)}
-                        onRemove={() => onOperationRemove()}
-                    />
-                </div>
-            )}
-            <DropdownMenu>
-                {!value && (
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline">
-                            <Plus />
-                            <Trans context="Add new promotion action">Select Shipping Calculator</Trans>
-                        </Button>
-                    </DropdownMenuTrigger>
-                )}
-                <DropdownMenuContent className="w-96">
-                    {calculators?.map(calculator => (
-                        <DropdownMenuItem
-                            key={calculator.code}
-                            onClick={() => onCalculatorSelected(calculator)}
-                        >
-                            {calculator.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={shippingCalculatorsDocument}
+            queryKey="shippingCalculators"
+            dataPath="shippingCalculators"
+            buttonText="Select Shipping Calculator"
+        />
     );
 }

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-eligibility-checker-selector.tsx

@@ -1,21 +1,7 @@
-import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { api } from '@/vdb/graphql/api.js';
-import {
-    configurableOperationDefFragment,
-    ConfigurableOperationDefFragment,
-} from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationSelector } from '@/vdb/components/shared/configurable-operation-selector.js';
+import { configurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
 
 export const shippingEligibilityCheckersDocument = graphql(
     `
@@ -37,69 +23,14 @@ export function ShippingEligibilityCheckerSelector({
     value,
     onChange,
 }: ShippingEligibilityCheckerSelectorProps) {
-    const { data: checkersData } = useQuery({
-        queryKey: ['shippingEligibilityCheckers'],
-        queryFn: () => api.query(shippingEligibilityCheckersDocument),
-        staleTime: 1000 * 60 * 60 * 5,
-    });
-
-    const checkers = checkersData?.shippingEligibilityCheckers;
-
-    const onCheckerSelected = (checker: ConfigurableOperationDefFragment) => {
-        const checkerDef = checkers?.find(c => c.code === checker.code);
-        if (!checkerDef) {
-            return;
-        }
-        onChange({
-            code: checker.code,
-            arguments: checkerDef.args.map(arg => ({
-                name: arg.name,
-                value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-            })),
-        });
-    };
-
-    const onOperationValueChange = (newVal: ConfigurableOperationInputType) => {
-        onChange(newVal);
-    };
-
-    const onOperationRemove = () => {
-        onChange(undefined);
-    };
-
-    const checkerDef = checkers?.find(c => c.code === value?.code);
-
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {value && checkerDef && (
-                <div className="flex flex-col gap-2">
-                    <ConfigurableOperationInput
-                        operationDefinition={checkerDef}
-                        value={value}
-                        onChange={value => onOperationValueChange(value)}
-                        onRemove={() => onOperationRemove()}
-                    />
-                </div>
-            )}
-            <DropdownMenu>
-                {!value && (
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline">
-                            <Plus />
-                            <Trans context="Add new promotion action">
-                                Select Shipping Eligibility Checker
-                            </Trans>
-                        </Button>
-                    </DropdownMenuTrigger>
-                )}
-                <DropdownMenuContent className="w-96">
-                    {checkers?.map(checker => (
-                        <DropdownMenuItem key={checker.code} onClick={() => onCheckerSelected(checker)}>
-                            {checker.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
+        <ConfigurableOperationSelector
+            value={value}
+            onChange={onChange}
+            queryDocument={shippingEligibilityCheckersDocument}
+            queryKey="shippingEligibilityCheckers"
+            dataPath="shippingEligibilityCheckers"
+            buttonText="Select Shipping Eligibility Checker"
+        />
     );
 }

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -130,12 +130,14 @@ function ShippingMethodDetailPage() {
                             render={({ field }) => <Input {...field} />}
                         />
                     </DetailFormGrid>
-                    <TranslatableFormFieldWrapper
-                        control={form.control}
-                        name="description"
-                        label={<Trans>Description</Trans>}
-                        render={({ field }) => <Textarea {...field} />}
-                    />
+                    <div className="mb-6">
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="description"
+                            label={<Trans>Description</Trans>}
+                            render={({ field }) => <Textarea {...field} />}
+                        />
+                    </div>
                     <DetailFormGrid>
                         <FormFieldWrapper
                             control={form.control}

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/data-input/combination-mode-input.tsx

@@ -0,0 +1,52 @@
+import { DataInputComponent } from '@/vdb/framework/component-registry/component-registry.js';
+import { Trans } from '@/vdb/lib/trans.js';
+
+export const CombinationModeInput: DataInputComponent = ({ value, onChange, position, ...props }) => {
+    const booleanValue = value === 'true' || value === true;
+
+    // Only show for items after the first one
+    const selectable = position !== undefined && position > 0;
+
+    const setCombinationModeAnd = () => {
+        onChange(true);
+    };
+
+    const setCombinationModeOr = () => {
+        onChange(false);
+    };
+
+    if (!selectable) {
+        return null;
+    }
+
+    return (
+        <div className="flex items-center justify-center -mt-4 -mb-4">
+            <div className="bg-muted border px-3 py-1.5 rounded-full flex gap-1.5 text-xs shadow-sm">
+                <button
+                    type="button"
+                    className={`px-2 py-0.5 rounded-full transition-colors ${
+                        booleanValue
+                            ? 'bg-primary text-background'
+                            : 'text-muted-foreground hover:bg-muted-foreground/10'
+                    }`}
+                    onClick={setCombinationModeAnd}
+                    {...props}
+                >
+                    <Trans>AND</Trans>
+                </button>
+                <button
+                    type="button"
+                    className={`px-2 py-0.5 rounded-full transition-colors ${
+                        !booleanValue
+                            ? 'bg-primary text-background'
+                            : 'text-muted-foreground hover:bg-muted-foreground/10'
+                    }`}
+                    onClick={setCombinationModeOr}
+                    {...props}
+                >
+                    <Trans>OR</Trans>
+                </button>
+            </div>
+        </div>
+    );
+};