@vendure/dashboard 3.6.4-master-202605290309 → 3.6.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.6.4-master-202605290309",
+    "version": "3.6.4",
     "type": "module",
     "repository": {
         "type": "git",
@@ -137,8 +137,8 @@
         "@storybook/addon-vitest": "^10.3.1",
         "@storybook/react-vite": "^10.3.1",
         "@types/node": "^22.19.0",
-        "@vendure/common": "^3.6.4-master-202605290309",
-        "@vendure/core": "^3.6.4-master-202605290309",
+        "@vendure/common": "3.6.4",
+        "@vendure/core": "3.6.4",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.39.0",

package/src/app/common/duplicate-entity-dialog.tsx

@@ -1,4 +1,5 @@
 import { ConfigurableOperationInput as ConfigurableOperationInputComponent } from '@/vdb/components/shared/configurable-operation-input.js';
+import { getInitialConfigArgValue } from '@/vdb/components/shared/configurable-operation-utils.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
@@ -54,7 +55,7 @@ export function DuplicateEntityDialog({
                 arguments:
                     matchingDuplicator.args?.map(arg => ({
                         name: arg.name,
-                        value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                        value: getInitialConfigArgValue(arg),
                     })) || [],
             });
         }

package/src/app/routes/_authenticated/_orders/components/fulfill-order-dialog.tsx

@@ -1,4 +1,5 @@
 import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
+import { getInitialConfigArgValue } from '@/vdb/components/shared/configurable-operation-utils.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
@@ -120,7 +121,7 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
                 code: defaultHandler.code,
                 arguments: defaultHandler.args.map(arg => ({
                     name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                    value: getInitialConfigArgValue(arg),
                 })),
             });
         }

package/src/app/routes/_authenticated/_products/components/generate-variants-panel.tsx

@@ -3,6 +3,7 @@ import { ConfirmationDialog } from '@/vdb/components/shared/confirmation-dialog.
 import { Button } from '@/vdb/components/ui/button.js';
 import { Checkbox } from '@/vdb/components/ui/checkbox.js';
 import { Field, FieldError } from '@/vdb/components/ui/field.js';
+import { Form } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
 import { api } from '@/vdb/graphql/api.js';
@@ -10,10 +11,10 @@ import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { z, zodResolver } from '@/vdb/lib/zod.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
-import { Save } from 'lucide-react';
-import { useMemo } from 'react';
+import { useDebounce } from '@uidotdev/usehooks';
+import { Save, Search } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
-import { Form } from '@/vdb/components/ui/form.js';
 import { toast } from 'sonner';
 import { createProductVariantsDocument } from '../products.graphql.js';
 
@@ -126,14 +127,20 @@ export function GenerateVariantsPanel({
 
     const variants = useMemo(() => generateVariantCombinations(optionGroups), [optionGroups]);
 
+    // For small products (few option-group combinations) the historical
+    // "all variants enabled by default" workflow is convenient. For products
+    // built on a shared option group with many values (the reporter's case in
+    // OSS-531 — 129 colors), defaulting every variant on forces the user to
+    // uncheck almost everything. Above the threshold we flip the default off
+    // and let them check only the ones they want; the filter + master toggle
+    // above the table make that workflow practical.
+    const enableByDefault = variants.length <= 20;
+
     const form = useForm<VariantFormValues>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             variants: Object.fromEntries(
-                variants.map(v => [
-                    v.id,
-                    { enabled: true, sku: '', price: '', stock: '' },
-                ]),
+                variants.map(v => [v.id, { enabled: enableByDefault, sku: '', price: '', stock: '' }]),
             ),
         },
         mode: 'onChange',
@@ -150,9 +157,7 @@ export function GenerateVariantsPanel({
             .filter(v => formValues.variants[v.id]?.enabled)
             .map(v => {
                 const data = formValues.variants[v.id];
-                const name = v.optionNames.length
-                    ? `${productName} ${v.optionNames.join(' ')}`
-                    : productName;
+                const name = v.optionNames.length ? `${productName} ${v.optionNames.join(' ')}` : productName;
 
                 return {
                     productId,
@@ -185,18 +190,95 @@ export function GenerateVariantsPanel({
     const watchedVariants = useWatch({ control: form.control, name: 'variants' });
     const enabledCount = variants.filter(v => watchedVariants?.[v.id]?.enabled).length;
 
+    const [filter, setFilter] = useState('');
+    const debouncedFilter = useDebounce(filter, 300);
+    const filteredVariants = useMemo(() => {
+        if (!debouncedFilter) return variants;
+        // Rows render `optionNames.join(' / ')`, so accept that exact shape
+        // ("Red / M") as well as the space-joined source name.
+        const normalize = (s: string) =>
+            s
+                .toLowerCase()
+                .replace(/\s*\/\s*/g, ' ')
+                .replace(/\s+/g, ' ')
+                .trim();
+        const q = normalize(debouncedFilter);
+        if (!q) return variants;
+        return variants.filter(v => normalize(v.name).includes(q));
+    }, [variants, debouncedFilter]);
+
+    // Master toggle drives every variant currently visible after the filter,
+    // not the whole list — so a user can scope a check/uncheck-all to e.g.
+    // "Red" without losing their selections in other rows.
+    const visibleEnabledCount = filteredVariants.filter(v => watchedVariants?.[v.id]?.enabled).length;
+    const allVisibleEnabled = filteredVariants.length > 0 && visibleEnabledCount === filteredVariants.length;
+    const someVisibleEnabled = visibleEnabledCount > 0;
+    const handleToggleVisible = () => {
+        const shouldEnable = !allVisibleEnabled;
+        // Single setValue with the full record avoids N RHF subscriber updates
+        // (the table has 129+ rows for shared option groups).
+        const next = { ...(form.getValues('variants') ?? {}) };
+        for (const v of filteredVariants) {
+            next[v.id] = { ...next[v.id], enabled: shouldEnable };
+        }
+        form.setValue('variants', next, { shouldDirty: true });
+    };
+
+    const showVariantTools = variants.length > 1;
+    const isFiltered = debouncedFilter.length > 0;
+
     return (
         <Form {...form}>
             <div className="space-y-4">
+                {showVariantTools && (
+                    <div className="flex items-center gap-3">
+                        <div className="relative w-full max-w-sm">
+                            <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                            <Input
+                                value={filter}
+                                onChange={e => setFilter(e.target.value)}
+                                placeholder={t`Filter variants...`}
+                                className="pl-8"
+                                data-testid="variant-filter-input"
+                            />
+                        </div>
+                        <div className="text-sm text-muted-foreground">
+                            {(() => {
+                                // Hoist locals so Lingui extracts named placeholders
+                                // (`{shown}`, `{total}`, `{selected}`) in the .po
+                                // catalog instead of positional `{0}`, `{1}`, `{2}`.
+                                const shown = filteredVariants.length;
+                                const total = variants.length;
+                                const selected = enabledCount;
+                                return isFiltered ? (
+                                    <Trans>
+                                        Showing {shown} of {total} • {selected} selected
+                                    </Trans>
+                                ) : (
+                                    <Trans>
+                                        {selected} of {total} selected
+                                    </Trans>
+                                );
+                            })()}
+                        </div>
+                    </div>
+                )}
                 <Table>
                     <TableHeader>
                         <TableRow>
-                            {variants.length > 1 && (
+                            {showVariantTools && (
                                 <TableHead className="w-12">
-                                    <Trans>Create</Trans>
+                                    <Checkbox
+                                        checked={allVisibleEnabled || someVisibleEnabled}
+                                        indeterminate={someVisibleEnabled && !allVisibleEnabled}
+                                        onCheckedChange={handleToggleVisible}
+                                        disabled={filteredVariants.length === 0}
+                                        aria-label={t`Toggle all visible variants`}
+                                        data-testid="variant-toggle-all"
+                                    />
                                 </TableHead>
                             )}
-                            {variants.length > 1 && (
+                            {showVariantTools && (
                                 <TableHead>
                                     <Trans>Variant</Trans>
                                 </TableHead>
@@ -213,9 +295,19 @@ export function GenerateVariantsPanel({
                         </TableRow>
                     </TableHeader>
                     <TableBody>
-                        {variants.map(variant => (
+                        {filteredVariants.length === 0 && (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={showVariantTools ? 5 : 3}
+                                    className="text-center text-muted-foreground py-8"
+                                >
+                                    <Trans>No variants match the current filter.</Trans>
+                                </TableCell>
+                            </TableRow>
+                        )}
+                        {filteredVariants.map(variant => (
                             <TableRow key={variant.id}>
-                                {variants.length > 1 && (
+                                {showVariantTools && (
                                     <TableCell>
                                         <Controller
                                             control={form.control}
@@ -230,7 +322,7 @@ export function GenerateVariantsPanel({
                                     </TableCell>
                                 )}
 
-                                {variants.length > 1 && (
+                                {showVariantTools && (
                                     <TableCell className="font-medium">
                                         {variant.optionNames.join(' / ')}
                                     </TableCell>
@@ -242,8 +334,14 @@ export function GenerateVariantsPanel({
                                         name={`variants.${variant.id}.sku`}
                                         render={({ field, fieldState }) => (
                                             <Field data-invalid={fieldState.invalid || undefined}>
-                                                <Input {...field} placeholder="SKU" data-testid="variant-sku-input" />
-                                                {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                                                <Input
+                                                    {...field}
+                                                    placeholder="SKU"
+                                                    data-testid="variant-sku-input"
+                                                />
+                                                {fieldState.invalid && (
+                                                    <FieldError errors={[fieldState.error]} />
+                                                )}
                                             </Field>
                                         )}
                                     />
@@ -258,14 +356,12 @@ export function GenerateVariantsPanel({
                                                 <MoneyInput
                                                     {...field}
                                                     value={Number(field.value) || 0}
-                                                    onChange={value =>
-                                                        field.onChange(value.toString())
-                                                    }
-                                                    currency={
-                                                        activeChannel?.defaultCurrencyCode
-                                                    }
+                                                    onChange={value => field.onChange(value.toString())}
+                                                    currency={activeChannel?.defaultCurrencyCode}
                                                 />
-                                                {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                                                {fieldState.invalid && (
+                                                    <FieldError errors={[fieldState.error]} />
+                                                )}
                                             </Field>
                                         )}
                                     />
@@ -284,7 +380,9 @@ export function GenerateVariantsPanel({
                                                     step="1"
                                                     data-testid="variant-stock-input"
                                                 />
-                                                {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+                                                {fieldState.invalid && (
+                                                    <FieldError errors={[fieldState.error]} />
+                                                )}
                                             </Field>
                                         )}
                                     />
@@ -296,8 +394,8 @@ export function GenerateVariantsPanel({
 
                 <div className="flex justify-between items-center">
                     <div>
-                        {onBack && (
-                            onBack.confirmation ? (
+                        {onBack &&
+                            (onBack.confirmation ? (
                                 <ConfirmationDialog
                                     title={onBack.confirmation.title}
                                     description={onBack.confirmation.description}
@@ -318,8 +416,7 @@ export function GenerateVariantsPanel({
                                 >
                                     ← <Trans>Back</Trans>
                                 </button>
-                            )
-                        )}
+                            ))}
                     </div>
                     <Button
                         type="button"
@@ -328,8 +425,12 @@ export function GenerateVariantsPanel({
                     >
                         <Save className="mr-2 h-4 w-4" />
                         {createVariantsMutation.isPending && <Trans>Creating...</Trans>}
-                        {!createVariantsMutation.isPending && enabledCount === 1 && <Trans>Create variant</Trans>}
-                        {!createVariantsMutation.isPending && enabledCount !== 1 && <Trans>Create {enabledCount} variants</Trans>}
+                        {!createVariantsMutation.isPending && enabledCount === 1 && (
+                            <Trans>Create variant</Trans>
+                        )}
+                        {!createVariantsMutation.isPending && enabledCount !== 1 && (
+                            <Trans>Create {enabledCount} variants</Trans>
+                        )}
                     </Button>
                 </div>
             </div>