@vendure/dashboard 3.3.6-master-202506290242 → 3.3.6-master-202507010243

package/src/app/routes/_authenticated/_products/components/assign-facet-values-dialog.tsx

@@ -13,20 +13,15 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog.js';
-import { api } from '@/graphql/api.js';
 import { ResultOf } from '@/graphql/graphql.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 
 import { getDetailQueryOptions } from '@/framework/page/use-detail-page.js';
-import {
-    getProductsWithFacetValuesByIdsDocument,
-    productDetailDocument,
-    updateProductsDocument,
-} from '../products.graphql.js';
 
-interface ProductWithFacetValues {
+interface EntityWithFacetValues {
     id: string;
     name: string;
+    sku?: string;
     facetValues: Array<{
         id: string;
         name: string;
@@ -42,14 +37,22 @@ interface ProductWithFacetValues {
 interface AssignFacetValuesDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    productIds: string[];
+    entityIds: string[];
+    entityType: 'products' | 'variants';
+    queryFn: (variables: any) => Promise<ResultOf<any>>;
+    mutationFn: (variables: any) => Promise<ResultOf<any>>;
+    detailDocument: any;
     onSuccess?: () => void;
 }
 
 export function AssignFacetValuesDialog({
     open,
     onOpenChange,
-    productIds,
+    entityIds,
+    entityType,
+    queryFn,
+    mutationFn,
+    detailDocument,
     onSuccess,
 }: AssignFacetValuesDialogProps) {
     const { i18n } = useLingui();
@@ -58,30 +61,30 @@ export function AssignFacetValuesDialog({
     const [removedFacetValues, setRemovedFacetValues] = useState<Set<string>>(new Set());
     const queryClient = useQueryClient();
 
-    // Fetch existing facet values for the products
-    const { data: productsData, isLoading } = useQuery({
-        queryKey: ['productsWithFacetValues', productIds],
-        queryFn: () => api.query(getProductsWithFacetValuesByIdsDocument, { ids: productIds }),
-        enabled: open && productIds.length > 0,
+    // Fetch existing facet values for the entities
+    const { data: entitiesData, isLoading } = useQuery({
+        queryKey: [`${entityType}WithFacetValues`, entityIds],
+        queryFn: () => queryFn({ ids: entityIds }),
+        enabled: open && entityIds.length > 0,
     });
 
     const { mutate, isPending } = useMutation({
-        mutationFn: api.mutate(updateProductsDocument),
-        onSuccess: (result: ResultOf<typeof updateProductsDocument>) => {
-            toast.success(i18n.t(`Successfully updated facet values for ${productIds.length} products`));
+        mutationFn,
+        onSuccess: () => {
+            toast.success(i18n.t(`Successfully updated facet values for ${entityIds.length} ${entityType}`));
             onSuccess?.();
             onOpenChange(false);
             // Reset state
             setSelectedValues([]);
             setFacetValuesRemoved(false);
             setRemovedFacetValues(new Set());
-            productIds.forEach(id => {
-                const { queryKey } = getDetailQueryOptions(productDetailDocument, { id });
+            entityIds.forEach(id => {
+                const { queryKey } = getDetailQueryOptions(detailDocument, { id });
                 queryClient.removeQueries({ queryKey });
             });
         },
         onError: () => {
-            toast.error(`Failed to update facet values for ${productIds.length} products`);
+            toast.error(`Failed to update facet values for ${entityIds.length} ${entityType}`);
         },
     });
 
@@ -91,18 +94,25 @@ export function AssignFacetValuesDialog({
             return;
         }
 
-        if (!productsData?.products.items) {
+        const items =
+            entityType === 'products'
+                ? (entitiesData as any)?.products?.items
+                : (entitiesData as any)?.productVariants?.items;
+
+        if (!items) {
             return;
         }
 
         const selectedFacetValueIds = selectedValues.map(sv => sv.id);
 
         mutate({
-            input: productsData.products.items.map(product => ({
-                id: product.id,
+            input: items.map((entity: EntityWithFacetValues) => ({
+                id: entity.id,
                 facetValueIds: [
                     ...new Set([
-                        ...product.facetValues.filter(fv => !removedFacetValues.has(fv.id)).map(fv => fv.id),
+                        ...entity.facetValues
+                            .filter((fv: any) => !removedFacetValues.has(fv.id))
+                            .map((fv: any) => fv.id),
                         ...selectedFacetValueIds,
                     ]),
                 ],
@@ -114,7 +124,7 @@ export function AssignFacetValuesDialog({
         setSelectedValues(prev => [...prev, facetValue]);
     };
 
-    const removeFacetValue = (productId: string, facetValueId: string) => {
+    const removeFacetValue = (entityId: string, facetValueId: string) => {
         setRemovedFacetValues(prev => new Set([...prev, facetValueId]));
         setFacetValuesRemoved(true);
     };
@@ -128,10 +138,15 @@ export function AssignFacetValuesDialog({
     };
 
     // Filter out removed facet values for display
-    const getDisplayFacetValues = (product: ProductWithFacetValues) => {
-        return product.facetValues.filter(fv => !removedFacetValues.has(fv.id));
+    const getDisplayFacetValues = (entity: EntityWithFacetValues) => {
+        return entity.facetValues.filter(fv => !removedFacetValues.has(fv.id));
     };
 
+    const items =
+        entityType === 'products'
+            ? (entitiesData as any)?.products?.items
+            : (entitiesData as any)?.productVariants?.items;
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[800px] max-h-[80vh] overflow-hidden flex flex-col">
@@ -140,7 +155,9 @@ export function AssignFacetValuesDialog({
                         <Trans>Edit facet values</Trans>
                     </DialogTitle>
                     <DialogDescription>
-                        <Trans>Add or remove facet values for {productIds.length} products</Trans>
+                        <Trans>
+                            Add or remove facet values for {entityIds.length} {entityType}
+                        </Trans>
                     </DialogDescription>
                 </DialogHeader>
 
@@ -156,33 +173,47 @@ export function AssignFacetValuesDialog({
                         />
                     </div>
 
-                    {/* Products table */}
+                    {/* Entities table */}
                     <div className="flex-1 overflow-auto">
                         {isLoading ? (
                             <div className="flex items-center justify-center py-8">
                                 <div className="text-sm text-muted-foreground">Loading...</div>
                             </div>
-                        ) : productsData?.products.items ? (
+                        ) : items ? (
                             <div className="border rounded-md">
                                 <table className="w-full">
                                     <thead className="bg-muted/50">
                                         <tr>
                                             <th className="text-left p-3 text-sm font-medium">
-                                                <Trans>Product</Trans>
+                                                <Trans>
+                                                    {entityType === 'products' ? 'Product' : 'Variant'}
+                                                </Trans>
                                             </th>
+                                            {entityType === 'variants' && (
+                                                <th className="text-left p-3 text-sm font-medium">
+                                                    <Trans>SKU</Trans>
+                                                </th>
+                                            )}
                                             <th className="text-left p-3 text-sm font-medium">
                                                 <Trans>Current facet values</Trans>
                                             </th>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        {productsData.products.items.map(product => {
-                                            const displayFacetValues = getDisplayFacetValues(product);
+                                        {items.map((entity: EntityWithFacetValues) => {
+                                            const displayFacetValues = getDisplayFacetValues(entity);
                                             return (
-                                                <tr key={product.id} className="border-t">
+                                                <tr key={entity.id} className="border-t">
                                                     <td className="p-3 align-top">
-                                                        <div className="font-medium">{product.name}</div>
+                                                        <div className="font-medium">{entity.name}</div>
                                                     </td>
+                                                    {entityType === 'variants' && (
+                                                        <td className="p-3 align-top">
+                                                            <div className="text-sm text-muted-foreground">
+                                                                {entity.sku}
+                                                            </div>
+                                                        </td>
+                                                    )}
                                                     <td className="p-3">
                                                         <div className="flex flex-wrap gap-2">
                                                             {displayFacetValues.map(facetValue => (
@@ -192,7 +223,7 @@ export function AssignFacetValuesDialog({
                                                                     removable={true}
                                                                     onRemove={() =>
                                                                         removeFacetValue(
-                                                                            product.id,
+                                                                            entity.id,
                                                                             facetValue.id,
                                                                         )
                                                                     }

package/src/app/routes/_authenticated/_products/components/assign-to-channel-dialog.tsx

@@ -14,24 +14,26 @@ import {
 } from '@/components/ui/dialog.js';
 import { Input } from '@/components/ui/input.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
 import { ResultOf } from '@/graphql/graphql.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 
 import { useChannel } from '@/hooks/use-channel.js';
-import { assignProductsToChannelDocument } from '../products.graphql.js';
 
 interface AssignToChannelDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    productIds: string[];
+    entityIds: string[];
+    entityType: 'products' | 'variants';
+    mutationFn: (variables: any) => Promise<ResultOf<any>>;
     onSuccess?: () => void;
 }
 
 export function AssignToChannelDialog({
     open,
     onOpenChange,
-    productIds,
+    entityIds,
+    entityType,
+    mutationFn,
     onSuccess,
 }: AssignToChannelDialogProps) {
     const { i18n } = useLingui();
@@ -43,14 +45,14 @@ export function AssignToChannelDialog({
     const availableChannels = channels.filter(channel => channel.id !== selectedChannel?.id);
 
     const { mutate, isPending } = useMutation({
-        mutationFn: api.mutate(assignProductsToChannelDocument),
-        onSuccess: (result: ResultOf<typeof assignProductsToChannelDocument>) => {
-            toast.success(i18n.t(`Successfully assigned ${productIds.length} products to channel`));
+        mutationFn,
+        onSuccess: () => {
+            toast.success(i18n.t(`Successfully assigned ${entityIds.length} ${entityType} to channel`));
             onSuccess?.();
             onOpenChange(false);
         },
         onError: () => {
-            toast.error(`Failed to assign ${productIds.length} products to channel`);
+            toast.error(`Failed to assign ${entityIds.length} ${entityType} to channel`);
         },
     });
 
@@ -60,13 +62,20 @@ export function AssignToChannelDialog({
             return;
         }
 
-        mutate({
-            input: {
-                productIds,
-                channelId: selectedChannelId,
-                priceFactor,
-            },
-        });
+        const input =
+            entityType === 'products'
+                ? {
+                      productIds: entityIds,
+                      channelId: selectedChannelId,
+                      priceFactor,
+                  }
+                : {
+                      productVariantIds: entityIds,
+                      channelId: selectedChannelId,
+                      priceFactor,
+                  };
+
+        mutate({ input });
     };
 
     return (
@@ -74,10 +83,12 @@ export function AssignToChannelDialog({
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
                     <DialogTitle>
-                        <Trans>Assign products to channel</Trans>
+                        <Trans>Assign {entityType} to channel</Trans>
                     </DialogTitle>
                     <DialogDescription>
-                        <Trans>Select a channel to assign {productIds.length} products to</Trans>
+                        <Trans>
+                            Select a channel to assign {entityIds.length} {entityType} to
+                        </Trans>
                     </DialogDescription>
                 </DialogHeader>
                 <div className="grid gap-4 py-4">

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -12,9 +12,13 @@ import { Trans, useLingui } from '@/lib/trans.js';
 
 import { Permission } from '@vendure/common/lib/generated-types';
 import {
+    assignProductsToChannelDocument,
     deleteProductsDocument,
     duplicateEntityDocument,
+    getProductsWithFacetValuesByIdsDocument,
+    productDetailDocument,
     removeProductsFromChannelDocument,
+    updateProductsDocument,
 } from '../products.graphql.js';
 import { AssignFacetValuesDialog } from './assign-facet-values-dialog.js';
 import { AssignToChannelDialog } from './assign-to-channel-dialog.js';
@@ -84,7 +88,9 @@ export const AssignProductsToChannelBulkAction: BulkActionComponent<any> = ({ se
             <AssignToChannelDialog
                 open={dialogOpen}
                 onOpenChange={setDialogOpen}
-                productIds={selection.map(s => s.id)}
+                entityIds={selection.map(s => s.id)}
+                entityType="products"
+                mutationFn={api.mutate(assignProductsToChannelDocument)}
                 onSuccess={handleSuccess}
             />
         </>
@@ -156,7 +162,11 @@ export const AssignFacetValuesToProductsBulkAction: BulkActionComponent<any> = (
             <AssignFacetValuesDialog
                 open={dialogOpen}
                 onOpenChange={setDialogOpen}
-                productIds={selection.map(s => s.id)}
+                entityIds={selection.map(s => s.id)}
+                entityType="products"
+                queryFn={variables => api.query(getProductsWithFacetValuesByIdsDocument, variables)}
+                mutationFn={api.mutate(updateProductsDocument)}
+                detailDocument={productDetailDocument}
                 onSuccess={handleSuccess}
             />
         </>

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

@@ -1,12 +1,15 @@
-import { Money } from "@/components/data-display/money.js";
-import { PaginatedListDataTable, PaginatedListRefresherRegisterFn } from "@/components/shared/paginated-list-data-table.js";
-import { StockLevelLabel } from "@/components/shared/stock-level-label.js";
-import { useLocalFormat } from "@/hooks/use-local-format.js";
-import { DetailPageButton } from "@/index.js";
-import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
-import { useState } from "react";
-import { productVariantListDocument } from "../products.graphql.js";
+import { Money } from '@/components/data-display/money.js';
+import {
+    PaginatedListDataTable,
+    PaginatedListRefresherRegisterFn,
+} from '@/components/shared/paginated-list-data-table.js';
+import { StockLevelLabel } from '@/components/shared/stock-level-label.js';
 import { graphql } from '@/graphql/graphql.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { DetailPageButton } from '@/index.js';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { productVariantListDocument } from '../products.graphql.js';
 
 export const deleteProductVariantDocument = graphql(`
     mutation DeleteProductVariant($id: ID!) {
@@ -17,62 +20,78 @@ export const deleteProductVariantDocument = graphql(`
     }
 `);
 
-
 interface ProductVariantsTableProps {
     productId: string;
     registerRefresher?: PaginatedListRefresherRegisterFn;
+    fromProductDetailPage?: boolean;
 }
 
-export function ProductVariantsTable({ productId, registerRefresher }: ProductVariantsTableProps) {
+export function ProductVariantsTable({
+    productId,
+    registerRefresher,
+    fromProductDetailPage,
+}: ProductVariantsTableProps) {
     const { formatCurrencyName } = useLocalFormat();
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [sorting, setSorting] = useState<SortingState>([]);
     const [filters, setFilters] = useState<ColumnFiltersState>([]);
 
-    return <PaginatedListDataTable
-        registerRefresher={registerRefresher}
-        listQuery={productVariantListDocument}
-        deleteMutation={deleteProductVariantDocument}
-        transformVariables={variables => ({
-            ...variables,
-            productId,
-        })}
-        defaultVisibility={{
-            id: false,
-            currencyCode: false,
-        }}
-        customizeColumns={{
-            name: {
-                header: 'Variant name',
-                cell: ({ row: { original } }) => <DetailPageButton href={`../../product-variants/${original.id}`} label={original.name} />,
-            },
-            currencyCode: {
-                cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
-            },
-            price: {
-                cell: ({ row: { original } }) => <Money value={original.price} currency={original.currencyCode} />,
-            },
-            priceWithTax: {
-                cell: ({ row: { original } }) => <Money value={original.priceWithTax} currency={original.currencyCode} />,
-            },
-            stockLevels: {
-                cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,
-            },
-        }}
-        page={page}
-        itemsPerPage={pageSize}
-        sorting={sorting}
-        columnFilters={filters}
-        onPageChange={(_, page, perPage) => {
-            setPage(page);
-            setPageSize(perPage);
-        }}
-        onSortChange={(_, sorting) => {
-            setSorting(sorting);
-        }}
-        onFilterChange={(_, filters) => {
-            setFilters(filters);
-        }}
-    />;
+    return (
+        <PaginatedListDataTable
+            registerRefresher={registerRefresher}
+            listQuery={productVariantListDocument}
+            deleteMutation={deleteProductVariantDocument}
+            transformVariables={variables => ({
+                ...variables,
+                productId,
+            })}
+            defaultVisibility={{
+                id: false,
+                currencyCode: false,
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Variant name',
+                    cell: ({ row: { original } }) => (
+                        <DetailPageButton
+                            href={`../../product-variants/${original.id}`}
+                            label={original.name}
+                            search={fromProductDetailPage ? { from: 'product' } : undefined}
+                        />
+                    ),
+                },
+                currencyCode: {
+                    cell: ({ row: { original } }) => formatCurrencyName(original.currencyCode, 'full'),
+                },
+                price: {
+                    cell: ({ row: { original } }) => (
+                        <Money value={original.price} currency={original.currencyCode} />
+                    ),
+                },
+                priceWithTax: {
+                    cell: ({ row: { original } }) => (
+                        <Money value={original.priceWithTax} currency={original.currencyCode} />
+                    ),
+                },
+                stockLevels: {
+                    cell: ({ row: { original } }) => <StockLevelLabel stockLevels={original.stockLevels} />,
+                },
+            }}
+            page={page}
+            itemsPerPage={pageSize}
+            sorting={sorting}
+            columnFilters={filters}
+            onPageChange={(_, page, perPage) => {
+                setPage(page);
+                setPageSize(perPage);
+            }}
+            onSortChange={(_, sorting) => {
+                setSorting(sorting);
+            }}
+            onFilterChange={(_, filters) => {
+                setFilters(filters);
+            }}
+        />
+    );
 }

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -148,6 +148,7 @@ function ProductDetailPage() {
                             registerRefresher={refresher => {
                                 refreshRef.current = refresher;
                             }}
+                            fromProductDetailPage={true}
                         />
                         <div className="mt-4">
                             <AddProductVariantDialog

package/src/lib/components/shared/detail-page-button.tsx

@@ -7,18 +7,20 @@ export function DetailPageButton({
     href,
     label,
     disabled,
+    search,
 }: {
     label: string | React.ReactNode;
     id?: string;
     href?: string;
     disabled?: boolean;
+    search?: Record<string, string>;
 }) {
     if (!id && !href) {
         return <span>{label}</span>;
     }
     return (
         <Button asChild variant="ghost" disabled={disabled}>
-            <Link to={href ?? `./${id}`}>
+            <Link to={href ?? `./${id}`} search={search ?? {}}>
                 {label}
                 {!disabled && <ChevronRight className="h-3 w-3 text-muted-foreground" />}
             </Link>

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -30,6 +30,7 @@ import {
 import { DisplayComponent } from '@/framework/component-registry/dynamic-component.js';
 import { BulkAction } from '@/framework/data-table/data-table-types.js';
 import { ResultOf } from '@/graphql/graphql.js';
+import { useExtendedListQuery } from '@/hooks/use-extended-list-query.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
@@ -276,6 +277,7 @@ export function PaginatedListDataTable<
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
     const queryClient = useQueryClient();
+    const extendedListQuery = useExtendedListQuery(listQuery);
 
     const sort = sorting?.reduce((acc: any, sort: ColumnSort) => {
         const direction = sort.desc ? 'DESC' : 'ASC';
@@ -300,7 +302,7 @@ export function PaginatedListDataTable<
 
     const defaultQueryKey = [
         PaginatedListDataTableKey,
-        listQuery,
+        extendedListQuery,
         page,
         itemsPerPage,
         sorting,
@@ -329,14 +331,14 @@ export function PaginatedListDataTable<
             } as V;
 
             const transformedVariables = transformVariables ? transformVariables(variables) : variables;
-            return api.query(listQuery, transformedVariables);
+            return api.query(extendedListQuery, transformedVariables);
         },
         queryKey,
         placeholderData: keepPreviousData,
     });
 
-    const fields = useListQueryFields(listQuery);
-    const paginatedListObjectPath = getObjectPathToPaginatedList(listQuery);
+    const fields = useListQueryFields(extendedListQuery);
+    const paginatedListObjectPath = getObjectPathToPaginatedList(extendedListQuery);
 
     let listData = data as any;
     for (const path of paginatedListObjectPath) {

package/src/lib/framework/data-table/data-table-extensions.ts

@@ -1,8 +1,10 @@
 import { BulkAction } from '@/framework/data-table/data-table-types.js';
+import { DocumentNode } from 'graphql';
 
 import { globalRegistry } from '../registry/global-registry.js';
 
 globalRegistry.register('bulkActionsRegistry', new Map<string, BulkAction[]>());
+globalRegistry.register('listQueryDocumentRegistry', new Map<string, DocumentNode[]>());
 
 export function getBulkActions(pageId: string, blockId = 'list-table'): BulkAction[] {
     const key = createKey(pageId, blockId);
@@ -16,6 +18,18 @@ export function addBulkAction(pageId: string, blockId: string | undefined, actio
     bulkActionsRegistry.set(key, [...existingActions, action]);
 }
 
+export function getListQueryDocuments(pageId: string, blockId = 'list-table'): DocumentNode[] {
+    const key = createKey(pageId, blockId);
+    return globalRegistry.get('listQueryDocumentRegistry').get(key) || [];
+}
+
+export function addListQueryDocument(pageId: string, blockId: string | undefined, document: DocumentNode) {
+    const listQueryDocumentRegistry = globalRegistry.get('listQueryDocumentRegistry');
+    const key = createKey(pageId, blockId);
+    const existingDocuments = listQueryDocumentRegistry.get(key) || [];
+    listQueryDocumentRegistry.set(key, [...existingDocuments, document]);
+}
+
 function createKey(pageId: string, blockId: string | undefined): string {
     return `${pageId}__${blockId ?? 'list-table'}`;
 }