@vendure/dashboard 3.7.1-master-202607110305 → 3.7.1

package/dist/bundle/main.js

@@ -1,6 +1,8 @@
 import "react/jsx-runtime";
-import "./chunks/use-job-queue-polling-BESJ2s1g.js";
-import "./chunks/main-CG6JVORh.js";
+import "./chunks/use-job-queue-polling-mUjHlukj.js";
+import "sonner";
+import "./chunks/main-DVt3RsH7.js";
+import "@tanstack/react-router";
 import "react";
 import "react-dom";
 import "react-dom/client";

package/dist/plugin/service/metrics.service.js

@@ -34,7 +34,7 @@ let MetricsService = class MetricsService {
             .update(JSON.stringify({
             startDate: calculatedStartDate,
             endDate: calculatedEndDate,
-            types: [...types].sort(),
+            types: [...types].sort((a, b) => a.localeCompare(b)),
             channel: ctx.channel.token,
         }))
             .digest('base64');

package/dist/vite/lib-externals.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Dependencies kept **external** in the pre-built dashboard bundle
+ * (`dist/bundle`, produced by `vite.lib.config.mts`).
+ *
+ * Anything not listed here is frozen into the bundle's shared chunks. That is
+ * fine for leaf utilities, but a library that (a) owns a React Context or other
+ * module-level singleton AND (b) is reachable by extension code through the
+ * `@vendure/dashboard` public API MUST be external. Otherwise the consumer's
+ * separate extension build re-bundles a second copy: the two module instances
+ * each call `createContext()`, and the extension's hook reads a different
+ * context than the one the dashboard's provider populated — the "No QueryClient
+ * set" class of failure. See issue #4919.
+ *
+ * A duplication audit that turns this contract into a test lives in
+ * `vite/tests/bundle-singleton.spec.ts`.
+ */
+/**
+ * Always-external: resolved from the consumer's own module graph at runtime
+ * (React, Lingui) or injected by the consumer's Vite plugins (`virtual:*`).
+ */
+export declare const runtimePeers: Array<string | RegExp>;
+/**
+ * Context- and singleton-bearing libraries that must be **shared** between the
+ * dashboard app and extension code rather than frozen into the bundle. Keeping
+ * them external means both `main.js` (which renders the providers) and an
+ * extension's separately-built code resolve to the consumer's single instance.
+ */
+export declare const singletonSharedDeps: Array<string | RegExp>;
+/**
+ * Bare specifiers of {@link singletonSharedDeps}, for the consumer dev server's
+ * dep optimizer (`optimizeDeps.include`) so every bare import — from the
+ * pre-built `main.js`, from `lib.js`, and from extension code — resolves to one
+ * pre-bundled instance.
+ */
+export declare const singletonSharedDepNames: string[];
+/**
+ * The full external list for the dashboard bundle build.
+ */
+export declare const dashboardBundleExternals: Array<string | RegExp>;
+/**
+ * Returns `true` if `id` is matched by any entry in `externals` (string exact
+ * match or subpath, or RegExp test).
+ */
+export declare function isExternalId(id: string, externals: Array<string | RegExp>): boolean;

package/dist/vite/lib-externals.js

@@ -0,0 +1,80 @@
+/**
+ * Dependencies kept **external** in the pre-built dashboard bundle
+ * (`dist/bundle`, produced by `vite.lib.config.mts`).
+ *
+ * Anything not listed here is frozen into the bundle's shared chunks. That is
+ * fine for leaf utilities, but a library that (a) owns a React Context or other
+ * module-level singleton AND (b) is reachable by extension code through the
+ * `@vendure/dashboard` public API MUST be external. Otherwise the consumer's
+ * separate extension build re-bundles a second copy: the two module instances
+ * each call `createContext()`, and the extension's hook reads a different
+ * context than the one the dashboard's provider populated — the "No QueryClient
+ * set" class of failure. See issue #4919.
+ *
+ * A duplication audit that turns this contract into a test lives in
+ * `vite/tests/bundle-singleton.spec.ts`.
+ */
+/**
+ * Always-external: resolved from the consumer's own module graph at runtime
+ * (React, Lingui) or injected by the consumer's Vite plugins (`virtual:*`).
+ */
+export const runtimePeers = [
+    // React core (peer deps in user projects)
+    'react',
+    'react-dom',
+    'react-dom/client',
+    'react/jsx-runtime',
+    'react/jsx-dev-runtime',
+    // Lingui — macros are transformed separately; keep the runtime external
+    /^@lingui\//,
+    // Virtual modules — resolved by the consumer's vendureDashboardPlugin
+    /^virtual:/,
+    // @vendure/common is a peer of every Vendure plugin
+    /^@vendure\/common(\/|$)/,
+    // The dashboard's own subpath exports
+    '@vendure/dashboard/plugin',
+    '@vendure/dashboard/vite',
+];
+/**
+ * Context- and singleton-bearing libraries that must be **shared** between the
+ * dashboard app and extension code rather than frozen into the bundle. Keeping
+ * them external means both `main.js` (which renders the providers) and an
+ * extension's separately-built code resolve to the consumer's single instance.
+ */
+export const singletonSharedDeps = [
+    // @tanstack/react-query — QueryClientContext
+    '@tanstack/react-query',
+    // react-hook-form — FormProvider context
+    'react-hook-form',
+    // @tanstack/react-router — RouterContext (companion packages travel with it
+    // since the whole package stays external)
+    /^@tanstack\/react-router(\/|$)/,
+    // sonner — module-level toast observer
+    'sonner',
+];
+/**
+ * Bare specifiers of {@link singletonSharedDeps}, for the consumer dev server's
+ * dep optimizer (`optimizeDeps.include`) so every bare import — from the
+ * pre-built `main.js`, from `lib.js`, and from extension code — resolves to one
+ * pre-bundled instance.
+ */
+export const singletonSharedDepNames = [
+    '@tanstack/react-query',
+    'react-hook-form',
+    '@tanstack/react-router',
+    'sonner',
+];
+/**
+ * The full external list for the dashboard bundle build.
+ */
+export const dashboardBundleExternals = [
+    ...runtimePeers,
+    ...singletonSharedDeps,
+];
+/**
+ * Returns `true` if `id` is matched by any entry in `externals` (string exact
+ * match or subpath, or RegExp test).
+ */
+export function isExternalId(id, externals) {
+    return externals.some(entry => typeof entry === 'string' ? id === entry || id.startsWith(`${entry}/`) : entry.test(id));
+}

package/dist/vite/vite-plugin-config.js

@@ -1,4 +1,5 @@
 import path from 'path';
+import { singletonSharedDepNames } from './lib-externals.js';
 export function viteConfigPlugin({ packageRoot, useExperimentalBundle }) {
     return {
         name: 'vendure:vite-config-plugin',
@@ -67,6 +68,13 @@ export function viteConfigPlugin({ packageRoot, useExperimentalBundle }) {
                     'use-sync-external-store/shim',
                     'use-sync-external-store/shim/with-selector',
                     '@messageformat/parser',
+                    // In bundle mode these context/singleton libraries are kept
+                    // external from the pre-built bundle (see lib-externals.ts),
+                    // so pre-bundle them here to guarantee that main.js, lib.js
+                    // and extension code all resolve to ONE instance. Without
+                    // this the dashboard's provider and an extension's hook can
+                    // bind to different module instances — issue #4919.
+                    ...(useExperimentalBundle ? singletonSharedDepNames : []),
                 ] });
             return config;
         },

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.7.1-master-202607110305",
+    "version": "3.7.1",
     "type": "module",
     "repository": {
         "type": "git",
@@ -22,6 +22,7 @@
         "build": "npm run check-types && npm run build:vite && npm run build:plugin && npm run build:lib",
         "watch": "tsc --project tsconfig.vite.json --watch",
         "test": "vitest run",
+        "audit:bundle": "cross-env RUN_BUNDLE_AUDIT=true vitest run vite/tests/bundle-singleton.spec.ts vite/tests/bundle-singleton-dev-serving.spec.ts",
         "lint": "eslint .",
         "preview": "vite preview",
         "generate-index": "node scripts/generate-index.js",
@@ -138,8 +139,8 @@
         "@storybook/addon-vitest": "^10.3.1",
         "@storybook/react-vite": "^10.3.1",
         "@types/node": "^22.19.0",
-        "@vendure/common": "^3.7.1-master-202607110305",
-        "@vendure/core": "^3.7.1-master-202607110305",
+        "@vendure/common": "3.7.1",
+        "@vendure/core": "3.7.1",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.39.0",

package/src/app/routes/_authenticated/_customer-groups/components/customer-group-members-bulk-actions.tsx

@@ -0,0 +1,69 @@
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { usePaginatedList } from '@/vdb/hooks/use-paginated-list.js';
+import { plural } from '@lingui/core/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import { useMutation } from '@tanstack/react-query';
+import { UserMinus } from 'lucide-react';
+import { toast } from 'sonner';
+import { removeCustomersFromGroupDocument } from '../customer-groups.graphql.js';
+
+/**
+ * The group id is only known by the parent table, so the bulk action is built as a factory rather
+ * than a plain component. Callers must memoize the result: `DataTableBulkActions` renders the
+ * component by identity, so a fresh one each render would remount it and discard the confirmation
+ * dialog's open state mid-interaction.
+ */
+export function createRemoveFromGroupBulkAction(customerGroupId: string): BulkActionComponent<any> {
+    return function RemoveFromGroupBulkAction({ selection, table }) {
+        const { refetchPaginatedList } = usePaginatedList();
+        const { t } = useLingui();
+        const count = selection.length;
+
+        const { mutate, isPending } = useMutation({
+            mutationFn: api.mutate(removeCustomersFromGroupDocument),
+            onSuccess: () => {
+                // `plural` from @lingui/core/macro is used (not useLingui's `t`) because this is a
+                // non-JSX message: it compiles to an i18n._() call against the same global instance
+                // the I18nProvider activates. Do NOT nest t`...` inside the arms — that breaks extraction.
+                toast.success(
+                    plural(count, {
+                        one: `Removed ${count} customer from group`,
+                        other: `Removed ${count} customers from group`,
+                    }),
+                );
+                refetchPaginatedList();
+                table.resetRowSelection();
+            },
+            onError: error => {
+                toast.error(t`Failed to remove customers from group`, {
+                    description: error.message,
+                });
+            },
+        });
+
+        return (
+            <DataTableBulkActionItem
+                requiresPermission={['UpdateCustomerGroup']}
+                onClick={() =>
+                    mutate({
+                        customerGroupId,
+                        customerIds: selection.map(s => s.id),
+                    })
+                }
+                disabled={isPending}
+                label={<Trans>Remove from group</Trans>}
+                confirmationText={
+                    <Plural
+                        value={count}
+                        one={`Are you sure you want to remove ${count} customer from this group?`}
+                        other={`Are you sure you want to remove ${count} customers from this group?`}
+                    />
+                }
+                icon={UserMinus}
+                className="text-destructive"
+            />
+        );
+    };
+}

package/src/app/routes/_authenticated/_customer-groups/components/customer-group-members-table.tsx

@@ -11,9 +11,10 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { addCustomerToGroupDocument } from '../../_customers/customers.graphql.js';
+import { createRemoveFromGroupBulkAction } from './customer-group-members-bulk-actions.js';
 
 export const customerGroupMemberListDocument = graphql(`
     query CustomerGroupMemberList($id: ID!, $options: CustomerListOptions) {
@@ -49,6 +50,11 @@ export function CustomerGroupMembersTable({
     const { t } = useLingui();
     const queryClient = useQueryClient();
 
+    const bulkActions = useMemo(
+        () => [{ component: createRemoveFromGroupBulkAction(customerGroupId) }],
+        [customerGroupId],
+    );
+
     const { mutate: addCustomerToGroup } = useMutation({
         mutationFn: api.mutate(addCustomerToGroupDocument),
         onSuccess: () => {
@@ -70,6 +76,7 @@ export function CustomerGroupMembersTable({
                     ...variables,
                     id: customerGroupId,
                 })}
+                bulkActions={bulkActions}
                 page={page}
                 itemsPerPage={pageSize}
                 sorting={sorting}
@@ -100,7 +107,10 @@ export function CustomerGroupMembersTable({
                         cell: ({ row }) => {
                             const value = `${row.original.firstName} ${row.original.lastName}`;
                             return (
-                                <Button render={<Link to="/customers/$id" params={{ id: row.original.id }} />} variant="ghost">
+                                <Button
+                                    render={<Link to="/customers/$id" params={{ id: row.original.id }} />}
+                                    variant="ghost"
+                                >
                                     {value}
                                 </Button>
                             );

package/src/app/routes/_authenticated/_orders/components/edit-order-table.tsx

@@ -14,7 +14,7 @@ import {
     VisibilityState,
 } from '@tanstack/react-table';
 import { Trash2 } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
     couponCodeSelectorPromotionListDocument,
     draftOrderEligibleShippingMethodsDocument,
@@ -27,6 +27,77 @@ import { OrderTableTotals } from './order-table-totals.js';
 import { ShippingMethodSelector } from './shipping-method-selector.js';
 
 type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
+
+function QuantityCell({
+    line,
+    onAdjustLine,
+    onRemoveLine,
+}: {
+    line: OrderLineFragment & { customFields?: Record<string, any> };
+    onAdjustLine: OrderTableProps['onAdjustLine'];
+    onRemoveLine: OrderTableProps['onRemoveLine'];
+}) {
+    const [localValue, setLocalValue] = useState<string>(String(line.quantity));
+
+    // Sync local value when server state changes (e.g. after mutation completes)
+    useEffect(() => {
+        setLocalValue(String(line.quantity));
+    }, [line.quantity]);
+
+    const commitValue = (removeOnZero: boolean) => {
+        const numValue = localValue === '' ? 0 : Number(localValue);
+        if (numValue <= 0 || Number.isNaN(numValue)) {
+            if (removeOnZero) {
+                onRemoveLine({ lineId: line.id });
+            } else {
+                // Revert to the server value on blur
+                setLocalValue(String(line.quantity));
+            }
+        } else if (numValue !== line.quantity) {
+            onAdjustLine({ lineId: line.id, quantity: numValue, customFields: line.customFields });
+        }
+    };
+
+    return (
+        <div className="flex gap-2">
+            <Input
+                type="number"
+                value={localValue}
+                min={0}
+                placeholder="0"
+                data-testid="order-line-quantity"
+                onChange={e => setLocalValue(e.target.value)}
+                onKeyDown={e => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        commitValue(true);
+                    }
+                }}
+                onBlur={() => commitValue(false)}
+            />
+            <Button
+                variant="outline"
+                type="button"
+                size="icon"
+                onClick={() => onRemoveLine({ lineId: line.id })}
+            >
+                <Trash2 />
+            </Button>
+            {line.customFields && (
+                <OrderLineCustomFieldsForm
+                    onUpdate={customFields => {
+                        onAdjustLine({
+                            lineId: line.id,
+                            quantity: line.quantity,
+                            customFields: customFields,
+                        });
+                    }}
+                    value={line.customFields}
+                />
+            )}
+        </div>
+    );
+}
 type OrderLineFragment = ResultOf<typeof orderLineFragment>;
 
 type ShippingMethodQuote = ResultOf<
@@ -110,49 +181,13 @@ export function EditOrderTable({
             {
                 header: t`Quantity`,
                 accessorKey: 'quantity',
-                cell: ({ row }) => {
-                    return (
-                        <div className="flex gap-2">
-                            <Input
-                                type="number"
-                                value={row.original.quantity}
-                                min={0}
-                                data-testid="order-line-quantity"
-                                onChange={e => {
-                                    const value = Number.isNaN(e.target.valueAsNumber)
-                                        ? 0
-                                        : e.target.valueAsNumber;
-                                    onAdjustLine({
-                                        lineId: row.original.id,
-                                        quantity: value,
-                                        customFields: row.original.customFields,
-                                    });
-                                }}
-                            />
-                            <Button
-                                variant="outline"
-                                type="button"
-                                size="icon"
-                                disabled={row.original.quantity === 0}
-                                onClick={() => onRemoveLine({ lineId: row.original.id })}
-                            >
-                                <Trash2 />
-                            </Button>
-                            {row.original.customFields && (
-                                <OrderLineCustomFieldsForm
-                                    onUpdate={customFields => {
-                                        onAdjustLine({
-                                            lineId: row.original.id,
-                                            quantity: row.original.quantity,
-                                            customFields: customFields,
-                                        });
-                                    }}
-                                    value={row.original.customFields}
-                                />
-                            )}
-                        </div>
-                    );
-                },
+                cell: ({ row }) => (
+                    <QuantityCell
+                        line={row.original}
+                        onAdjustLine={onAdjustLine}
+                        onRemoveLine={onRemoveLine}
+                    />
+                ),
             },
             {
                 header: t`Total`,

package/src/app/routes/_authenticated/_products/components/force-remove-option-group-dialog.tsx

@@ -0,0 +1,66 @@
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/vdb/components/ui/alert-dialog.js';
+import { Trans } from '@lingui/react/macro';
+
+interface ForceRemoveOptionGroupDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+    isPending?: boolean;
+}
+
+/**
+ * Confirmation shown when an option group cannot be removed normally because it is
+ * still in use by existing variants (`ProductOptionInUseError`). Shared by the
+ * product-detail badge and the Manage Variants page so the copy and behaviour stay
+ * in one place.
+ */
+export function ForceRemoveOptionGroupDialog({
+    open,
+    onOpenChange,
+    onConfirm,
+    isPending,
+}: Readonly<ForceRemoveOptionGroupDialogProps>) {
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>
+                        <Trans>Force remove option group</Trans>
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                        <Trans>
+                            This option group is in use by existing variants. Force removing it may affect
+                            those variants. Are you sure?
+                        </Trans>
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel disabled={isPending}>
+                        <Trans>Cancel</Trans>
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        disabled={isPending}
+                        // preventDefault keeps the dialog open while the mutation is in
+                        // flight so the disabled state can block a double-submit; the hook
+                        // closes it on success.
+                        onClick={event => {
+                            event.preventDefault();
+                            onConfirm();
+                        }}
+                    >
+                        <Trans>Force remove</Trans>
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

package/src/app/routes/_authenticated/_products/components/product-option-group-badge.tsx

@@ -1,24 +1,78 @@
+import { ConfirmationDialog } from '@/vdb/components/shared/confirmation-dialog.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
+import { useLingui } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
-import { Edit2 } from 'lucide-react';
+import { Edit2, Trash2 } from 'lucide-react';
+
+import { useRemoveOptionGroup } from '../hooks/use-remove-option-group.js';
+import { ForceRemoveOptionGroupDialog } from './force-remove-option-group-dialog.js';
 
 interface ProductOptionGroupBadgeProps {
     id: string;
     name: string;
     productId: string;
+    /**
+     * When provided, the badge renders a remove control that detaches the option
+     * group from the product (issue #4703 — a wrongly-added option group could
+     * not be removed from the product detail page). Called after a successful
+     * removal so the parent can refresh.
+     */
+    onRemoved?: () => void;
 }
 
-export function ProductOptionGroupBadge({ id, name, productId }: ProductOptionGroupBadgeProps) {
+export function ProductOptionGroupBadge({
+    id,
+    name,
+    productId,
+    onRemoved,
+}: Readonly<ProductOptionGroupBadgeProps>) {
+    const { t } = useLingui();
+    const { remove, forceRemove, inUseGroupId, clearInUseGroup, isPending } = useRemoveOptionGroup(
+        productId,
+        { onRemoved },
+    );
+
     return (
-        <Badge variant="secondary" className="text-xs">
-            <span>{name}</span>
-            <Link
-                to={`/option-groups/${id}`}
-                search={{ from: 'product', productId }}
-                className="ml-1.5 inline-flex"
-            >
-                <Edit2 className="h-3 w-3" />
-            </Link>
-        </Badge>
+        <>
+            <Badge variant="secondary" className="text-xs">
+                <span>{name}</span>
+                <Link
+                    to={`/option-groups/${id}`}
+                    search={{ from: 'product', productId }}
+                    className="ml-1.5 inline-flex"
+                >
+                    <Edit2 className="h-3 w-3" />
+                </Link>
+                {onRemoved && (
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <ConfirmationDialog
+                            title={t`Remove option group`}
+                            description={t`Are you sure you want to remove this option group from the product?`}
+                            onConfirm={() => remove(id)}
+                        >
+                            <button
+                                type="button"
+                                aria-label={t`Remove option group`}
+                                disabled={isPending}
+                                className="ml-1 inline-flex"
+                            >
+                                <Trash2 className="h-3 w-3 text-destructive" />
+                            </button>
+                        </ConfirmationDialog>
+                    </PermissionGuard>
+                )}
+            </Badge>
+            <ForceRemoveOptionGroupDialog
+                open={inUseGroupId === id}
+                onOpenChange={open => {
+                    if (!open) {
+                        clearInUseGroup();
+                    }
+                }}
+                onConfirm={forceRemove}
+                isPending={isPending}
+            />
+        </>
     );
 }