@vendure/dashboard 3.4.2-master-202509020230 → 3.4.2-master-202509030226

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.4.2-master-202509020230",
+    "version": "3.4.2-master-202509030226",
     "type": "module",
     "repository": {
         "type": "git",
@@ -100,8 +100,8 @@
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.4.2-master-202509020230",
-        "@vendure/core": "^3.4.2-master-202509020230",
+        "@vendure/common": "^3.4.2-master-202509030226",
+        "@vendure/core": "^3.4.2-master-202509030226",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -152,5 +152,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "061ef50c94ef21121b3fa30e6c5cd63899b62a8e"
+    "gitHead": "ea17999f2c068b9d5c96d81f4646393acb5baedf"
 }

package/src/app/routes/_authenticated/_channels/channels_.$id.tsx

@@ -22,6 +22,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
@@ -49,6 +50,7 @@ function ChannelDetailPage() {
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { i18n } = useLingui();
+    const { refreshChannels } = useChannel();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -81,6 +83,7 @@ function ChannelDetailPage() {
         onSuccess: async data => {
             if (data.__typename === 'Channel') {
                 toast(i18n.t('Successfully updated channel'));
+                refreshChannels();
                 resetForm();
                 if (creatingNewEntity) {
                     await navigate({ to: `../$id`, params: { id: data.id } });

package/src/app/routes/_authenticated/_collections/components/collection-bulk-actions.tsx

@@ -1,15 +1,15 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
 import { FolderTree } from 'lucide-react';
+import { useState } from 'react';
 
-import { Trans } from '@/vdb/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
 import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
 import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
-import { api } from '@/vdb/graphql/api.js';
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
-import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {
@@ -41,7 +41,7 @@ export const AssignCollectionsToChannelBulkAction: BulkActionComponent<any> = ({
 };
 
 export const RemoveCollectionsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
     const queryClient = useQueryClient();
 
     return (
@@ -53,7 +53,7 @@ export const RemoveCollectionsFromChannelBulkAction: BulkActionComponent<any> =
             requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
             buildInput={() => ({
                 collectionIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
+                channelId: activeChannel?.id,
             })}
             onSuccess={() => {
                 queryClient.invalidateQueries({ queryKey: ['childCollections'] });

package/src/app/routes/_authenticated/_facets/components/facet-bulk-actions.tsx

@@ -2,9 +2,9 @@ import { toast } from 'sonner';
 
 import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
 import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLingui } from '@/vdb/lib/trans.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
@@ -45,7 +45,7 @@ export const AssignFacetsToChannelBulkAction: BulkActionComponent<any> = ({ sele
 };
 
 export const RemoveFacetsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
     const { i18n } = useLingui();
 
     return (
@@ -57,7 +57,7 @@ export const RemoveFacetsFromChannelBulkAction: BulkActionComponent<any> = ({ se
             requiredPermissions={['UpdateCatalog', 'UpdateFacet']}
             buildInput={() => ({
                 facetIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
+                channelId: activeChannel?.id,
             })}
             onSuccess={result => {
                 const typedResult = result as ResultOf<typeof removeFacetsFromChannelDocument>;

package/src/app/routes/_authenticated/_payment-methods/components/payment-method-bulk-actions.tsx

@@ -40,7 +40,7 @@ export const AssignPaymentMethodsToChannelBulkAction: BulkActionComponent<any> =
 };
 
 export const RemovePaymentMethodsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
 
     return (
         <RemoveFromChannelBulkAction
@@ -51,7 +51,7 @@ export const RemovePaymentMethodsFromChannelBulkAction: BulkActionComponent<any>
             requiredPermissions={['UpdatePaymentMethod']}
             buildInput={() => ({
                 paymentMethodIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
+                channelId: activeChannel?.id,
             })}
         />
     );

package/src/app/routes/_authenticated/_product-variants/components/product-variant-bulk-actions.tsx

@@ -4,11 +4,11 @@ import { useState } from 'react';
 import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
 import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
 import { usePriceFactor } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
 import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
-import { api } from '@/vdb/graphql/api.js';
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
@@ -58,7 +58,7 @@ export const RemoveProductVariantsFromChannelBulkAction: BulkActionComponent<any
     selection,
     table,
 }) => {
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
 
     return (
         <RemoveFromChannelBulkAction
@@ -69,7 +69,7 @@ export const RemoveProductVariantsFromChannelBulkAction: BulkActionComponent<any
             requiredPermissions={['UpdateCatalog', 'UpdateProduct']}
             buildInput={() => ({
                 productVariantIds: selection.map(s => s.id),
-                channelId: selectedChannel?.id,
+                channelId: activeChannel?.id,
             })}
         />
     );

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

@@ -0,0 +1,127 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { Plus, Save } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { addOptionGroupToProductDocument, createProductOptionGroupDocument } from '../products.graphql.js';
+import { OptionGroup, optionGroupSchema, SingleOptionGroupEditor } from './option-groups-editor.js';
+
+export function AddOptionGroupDialog({
+    productId,
+    onSuccess,
+}: Readonly<{
+    productId: string;
+    onSuccess?: () => void;
+}>) {
+    const [open, setOpen] = useState(false);
+    const { i18n } = useLingui();
+
+    const form = useForm<OptionGroup>({
+        resolver: zodResolver(optionGroupSchema),
+        defaultValues: {
+            name: '',
+            values: [],
+        },
+        mode: 'onChange',
+    });
+
+    const createOptionGroupMutation = useMutation({
+        mutationFn: api.mutate(createProductOptionGroupDocument),
+    });
+
+    const addOptionGroupToProductMutation = useMutation({
+        mutationFn: api.mutate(addOptionGroupToProductDocument),
+    });
+
+    const handleSave = async () => {
+        const formValue = form.getValues();
+        if (!formValue.name || formValue.values.length === 0) return;
+
+        try {
+            const createResult = await createOptionGroupMutation.mutateAsync({
+                input: {
+                    code: formValue.name.toLowerCase().replace(/\s+/g, '-'),
+                    translations: [
+                        {
+                            languageCode: 'en',
+                            name: formValue.name,
+                        },
+                    ],
+                    options: formValue.values.map(value => ({
+                        code: value.value.toLowerCase().replace(/\s+/g, '-'),
+                        translations: [
+                            {
+                                languageCode: 'en',
+                                name: value.value,
+                            },
+                        ],
+                    })),
+                },
+            });
+
+            if (createResult?.createProductOptionGroup) {
+                await addOptionGroupToProductMutation.mutateAsync({
+                    productId,
+                    optionGroupId: createResult.createProductOptionGroup.id,
+                });
+            }
+
+            toast.success(i18n.t('Successfully created option group'));
+            setOpen(false);
+            onSuccess?.();
+        } catch (error) {
+            toast.error(i18n.t('Failed to create option group'), {
+                description: error instanceof Error ? error.message : i18n.t('Unknown error'),
+            });
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button variant="outline">
+                    <Plus className="mr-2 h-4 w-4" />
+                    <Trans>Add option group</Trans>
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-2xl" aria-description={'Add option group'}>
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Add option group to product</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4">
+                    <Form {...form}>
+                        <SingleOptionGroupEditor control={form.control} fieldArrayPath={''} />
+                    </Form>
+                </div>
+                <DialogFooter>
+                    <Button
+                        onClick={handleSave}
+                        disabled={
+                            !form.formState.isValid ||
+                            createOptionGroupMutation.isPending ||
+                            addOptionGroupToProductMutation.isPending
+                        }
+                    >
+                        <Save className="mr-2 h-4 w-4" />
+                        <Trans>Save option group</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_products/components/add-product-variant-dialog.tsx

@@ -22,6 +22,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import * as z from 'zod';
+import { createProductOptionDocument } from '../products.graphql.js';
 import { CreateProductOptionsDialog } from './create-product-options-dialog.js';
 import { ProductOptionSelect } from './product-option-select.js';
 
@@ -63,43 +64,6 @@ const createProductVariantDocument = graphql(`
     }
 `);
 
-const createProductOptionDocument = graphql(`
-    mutation CreateProductOption($input: CreateProductOptionInput!) {
-        createProductOption(input: $input) {
-            id
-            code
-            name
-            groupId
-        }
-    }
-`);
-
-const createProductOptionGroupDocument = graphql(`
-    mutation CreateProductOptionGroup($input: CreateProductOptionGroupInput!) {
-        createProductOptionGroup(input: $input) {
-            id
-        }
-    }
-`);
-
-const addOptionGroupToProductDocument = graphql(`
-    mutation AddOptionGroupToProduct($productId: ID!, $optionGroupId: ID!) {
-        addOptionGroupToProduct(productId: $productId, optionGroupId: $optionGroupId) {
-            id
-            optionGroups {
-                id
-                code
-                name
-                options {
-                    id
-                    code
-                    name
-                }
-            }
-        }
-    }
-`);
-
 const formSchema = z.object({
     name: z.string().min(1, 'Name is required'),
     sku: z.string().min(1, 'SKU is required'),
@@ -256,8 +220,8 @@ export function AddProductVariantDialog({
         [createProductVariantMutation, productData?.product, duplicateVariantError, productId],
     );
 
-    // If there are no option groups, show the create options dialog instead
-    if (productData?.product?.optionGroups.length === 0) {
+    // If there are no option groups and no variants, show the create options dialog instead
+    if (productData?.product?.optionGroups.length === 0 && productData?.product?.variants.length === 0) {
         return (
             <CreateProductOptionsDialog
                 productId={productId}
@@ -269,6 +233,35 @@ export function AddProductVariantDialog({
         );
     }
 
+    // If there are no option groups but there are existing variants, show a different UI
+    if (productData?.product?.optionGroups.length === 0 && productData?.product?.variants.length > 0) {
+        return (
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogTrigger asChild>
+                    <Button variant="outline">
+                        <Plus className="mr-2 h-4 w-4" />
+                        <Trans>Add variant</Trans>
+                    </Button>
+                </DialogTrigger>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>
+                            <Trans>Add product options first</Trans>
+                        </DialogTitle>
+                    </DialogHeader>
+                    <div className="space-y-4">
+                        <p className="text-sm text-muted-foreground">
+                            <Trans>
+                                This product has existing variants but no option groups defined. You need to
+                                add option groups before creating new variants.
+                            </Trans>
+                        </p>
+                    </div>
+                </DialogContent>
+            </Dialog>
+        );
+    }
+
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
@@ -291,6 +284,15 @@ export function AddProductVariantDialog({
                         }}
                         className="space-y-4"
                     >
+                        {productData?.product?.optionGroups.length && (
+                            <div className="flex flex-col gap-2">
+                                <div className="flex justify-between items-center">
+                                    <label className="text-sm font-medium">
+                                        <Trans>Product options</Trans>
+                                    </label>
+                                </div>
+                            </div>
+                        )}
                         <div className="grid grid-cols-2 gap-4">
                             {productData?.product?.optionGroups.map(group => (
                                 <ProductOptionSelect

package/src/app/routes/_authenticated/_products/components/create-product-options-dialog.tsx

@@ -20,6 +20,7 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import * as z from 'zod';
+import { addOptionGroupToProductDocument, createProductOptionGroupDocument } from '../products.graphql.js';
 
 const getProductDocument = graphql(`
     query GetProduct($productId: ID!) {
@@ -51,39 +52,6 @@ const getProductDocument = graphql(`
     }
 `);
 
-const createProductOptionGroupDocument = graphql(`
-    mutation CreateProductOptionGroup($input: CreateProductOptionGroupInput!) {
-        createProductOptionGroup(input: $input) {
-            id
-            code
-            name
-            options {
-                id
-                code
-                name
-            }
-        }
-    }
-`);
-
-const addOptionGroupToProductDocument = graphql(`
-    mutation AddOptionGroupToProduct($productId: ID!, $optionGroupId: ID!) {
-        addOptionGroupToProduct(productId: $productId, optionGroupId: $optionGroupId) {
-            id
-            optionGroups {
-                id
-                code
-                name
-                options {
-                    id
-                    code
-                    name
-                }
-            }
-        }
-    }
-`);
-
 const updateProductVariantDocument = graphql(`
     mutation UpdateProductVariant($input: UpdateProductVariantInput!) {
         updateProductVariant(input: $input) {

package/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx

@@ -9,54 +9,19 @@ import {
     DialogTrigger,
 } from '@/vdb/components/ui/dialog.js';
 import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { normalizeString } from '@/vdb/lib/utils.js';
 import { useMutation } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
+import {
+    addOptionGroupToProductDocument,
+    createProductOptionGroupDocument,
+    createProductVariantsDocument,
+} from '../products.graphql.js';
 import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
 
-const createProductOptionsMutation = graphql(`
-    mutation CreateOptionGroups($input: CreateProductOptionGroupInput!) {
-        createProductOptionGroup(input: $input) {
-            id
-            name
-            options {
-                id
-                code
-                name
-            }
-        }
-    }
-`);
-
-export const addOptionGroupToProductDocument = graphql(`
-    mutation AddOptionGroupToProduct($productId: ID!, $optionGroupId: ID!) {
-        addOptionGroupToProduct(productId: $productId, optionGroupId: $optionGroupId) {
-            id
-            optionGroups {
-                id
-                code
-                options {
-                    id
-                    code
-                }
-            }
-        }
-    }
-`);
-
-export const createProductVariantsDocument = graphql(`
-    mutation CreateProductVariants($input: [CreateProductVariantInput!]!) {
-        createProductVariants(input: $input) {
-            id
-            name
-        }
-    }
-`);
-
 export function CreateProductVariantsDialog({
     productId,
     productName,
@@ -71,7 +36,7 @@ export function CreateProductVariantsDialog({
     const [open, setOpen] = useState(false);
 
     const createOptionGroupMutation = useMutation({
-        mutationFn: api.mutate(createProductOptionsMutation),
+        mutationFn: api.mutate(createProductOptionGroupDocument),
     });
 
     const addOptionGroupToProductMutation = useMutation({
@@ -180,7 +145,7 @@ export function CreateProductVariantsDialog({
                     </Button>
                 </DialogTrigger>
 
-                <DialogContent>
+                <DialogContent className="max-w-90vw">
                     <DialogHeader>
                         <DialogTitle>
                             <Trans>Create Variants</Trans>