@vendure/dashboard 3.3.6-master-202507010922 → 3.3.6-master-202507020234

package/src/{app/routes/_authenticated/_products/components → lib/components/shared}/assign-to-channel-dialog.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { toast } from 'sonner';
 
 import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
@@ -23,9 +23,24 @@ interface AssignToChannelDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     entityIds: string[];
-    entityType: 'products' | 'variants';
+    entityType: string;
     mutationFn: (variables: any) => Promise<ResultOf<any>>;
     onSuccess?: () => void;
+    /**
+     * Function to build the input object for the mutation
+     * @param channelId - The selected channel ID
+     * @param additionalData - Any additional data (like priceFactor for products)
+     * @returns The input object for the mutation
+     */
+    buildInput: (channelId: string, additionalData?: Record<string, any>) => Record<string, any>;
+    /**
+     * Optional additional form fields to render
+     */
+    additionalFields?: ReactNode;
+    /**
+     * Optional additional data to pass to buildInput
+     */
+    additionalData?: Record<string, any>;
 }
 
 export function AssignToChannelDialog({
@@ -35,10 +50,12 @@ export function AssignToChannelDialog({
     entityType,
     mutationFn,
     onSuccess,
-}: AssignToChannelDialogProps) {
+    buildInput,
+    additionalFields,
+    additionalData = {},
+}: Readonly<AssignToChannelDialogProps>) {
     const { i18n } = useLingui();
     const [selectedChannelId, setSelectedChannelId] = useState<string>('');
-    const [priceFactor, setPriceFactor] = useState<number>(1);
     const { channels, selectedChannel } = useChannel();
 
     // Filter out the currently selected channel from available options
@@ -62,19 +79,7 @@ export function AssignToChannelDialog({
             return;
         }
 
-        const input =
-            entityType === 'products'
-                ? {
-                      productIds: entityIds,
-                      channelId: selectedChannelId,
-                      priceFactor,
-                  }
-                : {
-                      productVariantIds: entityIds,
-                      channelId: selectedChannelId,
-                      priceFactor,
-                  };
-
+        const input = buildInput(selectedChannelId, additionalData);
         mutate({ input });
     };
 
@@ -109,19 +114,7 @@ export function AssignToChannelDialog({
                             </SelectContent>
                         </Select>
                     </div>
-                    <div className="grid gap-2">
-                        <label className="text-sm font-medium">
-                            <Trans>Price conversion factor</Trans>
-                        </label>
-                        <Input
-                            type="number"
-                            min="0"
-                            max="99999"
-                            step="0.01"
-                            value={priceFactor}
-                            onChange={e => setPriceFactor(parseFloat(e.target.value) || 1)}
-                        />
-                    </div>
+                    {additionalFields}
                 </div>
                 <DialogFooter>
                     <Button variant="outline" onClick={() => onOpenChange(false)}>
@@ -135,3 +128,28 @@ export function AssignToChannelDialog({
         </Dialog>
     );
 }
+
+/**
+ * Hook for managing price factor state in assign-to-channel dialogs
+ */
+export function usePriceFactor() {
+    const [priceFactor, setPriceFactor] = useState<number>(1);
+
+    const priceFactorField = (
+        <div className="grid gap-2">
+            <label className="text-sm font-medium">
+                <Trans>Price conversion factor</Trans>
+            </label>
+            <Input
+                type="number"
+                min="0"
+                max="99999"
+                step="0.01"
+                value={priceFactor}
+                onChange={e => setPriceFactor(parseFloat(e.target.value) || 1)}
+            />
+        </div>
+    );
+
+    return { priceFactor, priceFactorField };
+}

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

@@ -20,7 +20,7 @@ export function DetailPageButton({
     }
     return (
         <Button asChild variant="ghost" disabled={disabled}>
-            <Link to={href ?? `./${id}`} search={search ?? {}}>
+            <Link to={href ?? `./${id}`} search={search ?? {}} preload={false}>
                 {label}
                 {!disabled && <ChevronRight className="h-3 w-3 text-muted-foreground" />}
             </Link>

package/src/lib/components/shared/remove-from-channel-bulk-action.tsx

@@ -0,0 +1,89 @@
+import { useMutation } from '@tanstack/react-query';
+import { LayersIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
+import { ResultOf } from '@/graphql/graphql.js';
+import { useChannel, usePaginatedList } from '@/index.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+
+interface RemoveFromChannelBulkActionProps {
+    selection: any[];
+    table: any;
+    entityType: string;
+    mutationFn: (variables: any) => Promise<ResultOf<any>>;
+    requiredPermissions: string[];
+    buildInput: () => Record<string, any>;
+    /**
+     * Additional callback to run on success, after the standard refetch and reset
+     * @param result - The result from the mutation
+     */
+    onSuccess?: (result?: ResultOf<any>) => void;
+    /**
+     * Custom success message. If not provided, a default message will be used.
+     */
+    successMessage?: string;
+    /**
+     * Custom error message. If not provided, a default message will be used.
+     */
+    errorMessage?: string;
+}
+
+export function RemoveFromChannelBulkAction({
+    selection,
+    table,
+    entityType,
+    mutationFn,
+    requiredPermissions,
+    buildInput,
+    onSuccess,
+    successMessage,
+    errorMessage,
+}: Readonly<RemoveFromChannelBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { selectedChannel } = useChannel();
+    const { i18n } = useLingui();
+    const { mutate } = useMutation({
+        mutationFn,
+        onSuccess: result => {
+            const message =
+                successMessage ||
+                i18n.t(`Successfully removed ${selection.length} ${entityType} from channel`);
+            toast.success(message);
+            refetchPaginatedList();
+            table.resetRowSelection();
+            onSuccess?.(result);
+        },
+        onError: error => {
+            const message =
+                errorMessage ||
+                `Failed to remove ${selection.length} ${entityType} from channel: ${error.message}`;
+            toast.error(message);
+        },
+    });
+
+    if (!selectedChannel) {
+        return null;
+    }
+
+    const handleRemove = () => {
+        mutate({
+            input: buildInput(),
+        });
+    };
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={requiredPermissions}
+            onClick={handleRemove}
+            label={<Trans>Remove from current channel</Trans>}
+            confirmationText={
+                <Trans>
+                    Are you sure you want to remove {selection.length} {entityType} from the current channel?
+                </Trans>
+            }
+            icon={LayersIcon}
+            className="text-warning"
+        />
+    );
+}

package/src/lib/framework/extension-api/use-dashboard-extensions.ts

@@ -1,7 +1,8 @@
-import { onExtensionSourceChange } from '@/framework/extension-api/define-dashboard-extension.js';
 import { useEffect, useState } from 'react';
 import { runDashboardExtensions } from 'virtual:dashboard-extensions';
 
+import { onExtensionSourceChange } from './define-dashboard-extension.js';
+
 /**
  * @description
  * This hook is used to load dashboard extensions via the `virtual:dashboard-extensions` module,

package/src/lib/framework/form-engine/use-generated-form.tsx

@@ -1,16 +1,13 @@
-import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
-import {
-    createFormSchemaFromFields,
-    getDefaultValuesFromFields,
-} from '@/framework/form-engine/form-schema-tools.js';
-import { transformRelationFields } from '@/framework/form-engine/utils.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { VariablesOf } from 'gql.tada';
 import { FormEvent } from 'react';
 import { useForm } from 'react-hook-form';
+import { useChannel } from '../../hooks/use-channel.js';
+import { useServerConfig } from '../../hooks/use-server-config.js';
+import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
+import { createFormSchemaFromFields, getDefaultValuesFromFields } from './form-schema-tools.js';
+import { transformRelationFields } from './utils.js';
 
 export interface GeneratedFormOptions<
     T extends TypedDocumentNode<any, any>,

package/src/lib/framework/page/use-detail-page.ts

@@ -1,7 +1,3 @@
-import { NEW_ENTITY_PATH } from '@/constants.js';
-import { api, Variables } from '@/graphql/api.js';
-import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
-import { useExtendedDetailQuery } from '@/hooks/use-extended-detail-query.js';
 import { removeReadonlyCustomFields } from '@/lib/utils.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
@@ -16,6 +12,10 @@ import { DocumentNode } from 'graphql';
 import { FormEvent } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
+import { NEW_ENTITY_PATH } from '../../constants.js';
+import { api, Variables } from '../../graphql/api.js';
+import { useCustomFieldConfig } from '../../hooks/use-custom-field-config.js';
+import { useExtendedDetailQuery } from '../../hooks/use-extended-detail-query.js';
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
 import {
     getEntityName,

package/src/lib/framework/page/use-extended-router.tsx

@@ -1,10 +1,9 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { extensionRoutes } from '@/framework/page/page-api.js';
-import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
 import { AnyRoute, createRoute, Router } from '@tanstack/react-router';
 import { useMemo } from 'react';
+import { ErrorPage } from '../../components/shared/error-page.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '../../constants.js';
+import { useDashboardExtensions } from '../extension-api/use-dashboard-extensions.js';
+import { extensionRoutes } from './page-api.js';
 
 /**
  * Extends the TanStack Router with additional routes for each dashboard

package/src/lib/hooks/use-channel.ts

@@ -1,6 +1,7 @@
-import { ChannelContext } from '@/providers/channel-provider.js';
 import * as React from 'react';
 
+import { ChannelContext } from '../providers/channel-provider.js';
+
 // Hook to use the channel context
 
 /**

package/src/lib/hooks/use-extended-detail-query.ts

@@ -1,9 +1,10 @@
-import { extendDetailFormQuery } from '@/framework/document-extension/extend-detail-form-query.js';
 import { useLingui } from '@/lib/trans.js';
 import { DocumentNode } from 'graphql';
 import { useEffect, useMemo, useRef } from 'react';
 import { toast } from 'sonner';
 
+import { extendDetailFormQuery } from '../framework/document-extension/extend-detail-form-query.js';
+
 /**
  * @description
  * Extends a detail page query document with any registered extensions provided by

package/src/lib/hooks/use-extended-list-query.ts

@@ -1,10 +1,11 @@
-import { getListQueryDocuments } from '@/framework/data-table/data-table-extensions.js';
-import { extendDocument } from '@/framework/document-extension/extend-document.js';
 import { useLingui } from '@/lib/trans.js';
 import { DocumentNode } from 'graphql';
 import { useEffect, useMemo, useRef } from 'react';
 import { toast } from 'sonner';
 
+import { getListQueryDocuments } from '../framework/data-table/data-table-extensions.js';
+import { extendDocument } from '../framework/document-extension/extend-document.js';
+
 import { usePageBlock } from './use-page-block.js';
 import { usePage } from './use-page.js';
 

package/src/lib/hooks/use-grouped-permissions.ts

@@ -1,7 +1,9 @@
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { ServerConfig } from '@/providers/server-config.js';
 import { useMemo } from 'react';
 
+import { ServerConfig } from '../providers/server-config.js';
+
+import { useServerConfig } from './use-server-config.js';
+
 export function useGroupedPermissions() {
     const serverConfig = useServerConfig();
     const permissionDefinitions = serverConfig?.permissions ?? [];

package/src/lib/hooks/use-page-block.tsx

@@ -1,5 +1,5 @@
-import { PageBlockContext } from '@/framework/layout-engine/page-block-provider.js';
 import { useContext } from 'react';
+import { PageBlockContext } from '../framework/layout-engine/page-block-provider.js';
 
 export function usePageBlock() {
     const pageBlock = useContext(PageBlockContext);

package/src/lib/hooks/use-page.tsx

@@ -1,5 +1,5 @@
-import { useContext } from "react";
-import { PageContext } from '@/framework/layout-engine/page-provider.js';
+import { useContext } from 'react';
+import { PageContext } from '../framework/layout-engine/page-provider.js';
 
 export function usePage() {
     const page = useContext(PageContext);

package/src/lib/hooks/use-permissions.ts

@@ -1,7 +1,8 @@
-import { useAuth } from '@/hooks/use-auth.js';
-import { useChannel } from '@/hooks/use-channel.js';
 import { Permission } from '@vendure/common/lib/generated-types';
 
+import { useAuth } from './use-auth.js';
+import { useChannel } from './use-channel.js';
+
 /**
  * @description
  * **Status: Developer Preview**

package/src/lib/hooks/use-server-config.ts

@@ -1,4 +1,5 @@
-import { ServerConfigContext } from '@/providers/server-config.js';
 import React from 'react';
 
+import { ServerConfigContext } from '../providers/server-config.js';
+
 export const useServerConfig = () => React.useContext(ServerConfigContext);

package/src/lib/hooks/use-theme.ts

@@ -1,6 +1,7 @@
-import { ThemeProviderContext } from '@/providers/theme-provider.js';
 import { useContext } from 'react';
 
+import { ThemeProviderContext } from '../providers/theme-provider.js';
+
 export const useTheme = () => {
     const context = useContext(ThemeProviderContext);
 

package/src/lib/providers/auth.tsx

@@ -1,5 +1,5 @@
 import { api } from '@/graphql/api.js';
-import { ResultOf, graphql } from '@/graphql/graphql.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
@@ -14,7 +14,7 @@ import * as React from 'react';
  * @since 3.3.0
  */
 export interface AuthContext {
-    status: 'authenticated' | 'verifying' | 'unauthenticated';
+    status: 'initial' | 'authenticated' | 'verifying' | 'unauthenticated';
     authenticationError?: string;
     isAuthenticated: boolean;
     login: (username: string, password: string, onSuccess?: () => void) => void;
@@ -71,8 +71,9 @@ const CurrentUserQuery = graphql(`
 export const AuthContext = React.createContext<AuthContext | null>(null);
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
-    const [status, setStatus] = React.useState<AuthContext['status']>('unauthenticated');
+    const [status, setStatus] = React.useState<AuthContext['status']>('initial');
     const [authenticationError, setAuthenticationError] = React.useState<string | undefined>();
+    const [isLoginLogoutInProgress, setIsLoginLogoutInProgress] = React.useState(false);
     const { settings, setActiveChannelId } = useUserSettings();
     const queryClient = useQueryClient();
 
@@ -84,7 +85,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         refetch: refetchCurrentUser,
     } = useQuery({
         queryKey: ['currentUser'],
-        queryFn: () => api.query(CurrentUserQuery),
+        queryFn: () => {
+            return api.query(CurrentUserQuery);
+        },
+        retry: false, // Disable retries to avoid waiting for multiple attempts
     });
 
     // Set active channel if needed
@@ -97,6 +101,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     // Auth actions
     const login = React.useCallback(
         (username: string, password: string, onLoginSuccess?: () => void) => {
+            setIsLoginLogoutInProgress(true);
             setStatus('verifying');
             api.mutate(LoginMutation)({ username, password })
                 .then(async data => {
@@ -106,15 +111,18 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                         // Invalidate all queries to ensure fresh data after login
                         await queryClient.invalidateQueries();
                         setStatus('authenticated');
+                        setIsLoginLogoutInProgress(false);
                         onLoginSuccess?.();
                     } else {
                         setAuthenticationError(data?.login.message);
                         setStatus('unauthenticated');
+                        setIsLoginLogoutInProgress(false);
                     }
                 })
                 .catch(error => {
                     setAuthenticationError(error.message);
                     setStatus('unauthenticated');
+                    setIsLoginLogoutInProgress(false);
                 });
         },
         [refetchCurrentUser, queryClient],
@@ -122,6 +130,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
     const logout = React.useCallback(
         async (onLogoutSuccess?: () => void) => {
+            setIsLoginLogoutInProgress(true);
             setStatus('verifying');
             api.mutate(LogOutMutation)({}).then(async data => {
                 if (data?.logout.success) {
@@ -131,6 +140,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                     localStorage.removeItem('vendure-selected-channel');
                     localStorage.removeItem('vendure-selected-channel-token');
                     setStatus('unauthenticated');
+                    setIsLoginLogoutInProgress(false);
                     onLogoutSuccess?.();
                 }
             });
@@ -141,15 +151,28 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     // Determine isAuthenticated from currentUserData
     const isAuthenticated = !!currentUserData?.me?.id;
 
-    // Set status based on query result (only if not in the middle of login/logout)
+    // Handle status transitions based on query state
     React.useEffect(() => {
-        if (status === 'verifying') return;
-        if (currentUserError || !currentUserData?.me?.id) {
-            setStatus('unauthenticated');
-        } else {
-            setStatus('authenticated');
+        // Don't change status if we're in the middle of login/logout
+        if (isLoginLogoutInProgress) {
+            return;
+        }
+
+        // If query is loading and we haven't started verifying yet, set to verifying
+        if (isLoading && status === 'initial') {
+            setStatus('verifying');
+            return;
+        }
+
+        // If query has completed (not loading) and we're in verifying state, determine final status
+        if (!isLoading && status === 'verifying') {
+            if (currentUserError || !currentUserData?.me?.id) {
+                setStatus('unauthenticated');
+            } else {
+                setStatus('authenticated');
+            }
         }
-    }, [currentUserData, currentUserError]);
+    }, [isLoading, currentUserData, currentUserError, status, isLoginLogoutInProgress]);
 
     return (
         <AuthContext.Provider

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

@@ -1,110 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { useState } from 'react';
-import { toast } from 'sonner';
-
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { Button } from '@/components/ui/button.js';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
-
-import { useChannel } from '@/hooks/use-channel.js';
-
-interface AssignCollectionsToChannelDialogProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    entityIds: string[];
-    mutationFn: (variables: any) => Promise<ResultOf<any>>;
-    onSuccess?: () => void;
-}
-
-export function AssignCollectionsToChannelDialog({
-    open,
-    onOpenChange,
-    entityIds,
-    mutationFn,
-    onSuccess,
-}: AssignCollectionsToChannelDialogProps) {
-    const { i18n } = useLingui();
-    const [selectedChannelId, setSelectedChannelId] = useState<string>('');
-    const { channels, selectedChannel } = useChannel();
-
-    // Filter out the currently selected channel from available options
-    const availableChannels = channels.filter(channel => channel.id !== selectedChannel?.id);
-
-    const { mutate, isPending } = useMutation({
-        mutationFn,
-        onSuccess: () => {
-            toast.success(i18n.t(`Successfully assigned ${entityIds.length} collections to channel`));
-            onSuccess?.();
-            onOpenChange(false);
-        },
-        onError: () => {
-            toast.error(`Failed to assign ${entityIds.length} collections to channel`);
-        },
-    });
-
-    const handleAssign = () => {
-        if (!selectedChannelId) {
-            toast.error('Please select a channel');
-            return;
-        }
-
-        const input = {
-            collectionIds: entityIds,
-            channelId: selectedChannelId,
-        };
-
-        mutate({ input });
-    };
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-[425px]">
-                <DialogHeader>
-                    <DialogTitle>
-                        <Trans>Assign collections to channel</Trans>
-                    </DialogTitle>
-                    <DialogDescription>
-                        <Trans>Select a channel to assign {entityIds.length} collections to</Trans>
-                    </DialogDescription>
-                </DialogHeader>
-                <div className="grid gap-4 py-4">
-                    <div className="grid gap-2">
-                        <label className="text-sm font-medium">
-                            <Trans>Channel</Trans>
-                        </label>
-                        <Select value={selectedChannelId} onValueChange={setSelectedChannelId}>
-                            <SelectTrigger>
-                                <SelectValue placeholder={i18n.t('Select a channel')} />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {availableChannels.map(channel => (
-                                    <SelectItem key={channel.id} value={channel.id}>
-                                        <ChannelCodeLabel code={channel.code} />
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button variant="outline" onClick={() => onOpenChange(false)}>
-                        <Trans>Cancel</Trans>
-                    </Button>
-                    <Button onClick={handleAssign} disabled={!selectedChannelId || isPending}>
-                        <Trans>Assign</Trans>
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}