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

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -234,7 +234,7 @@ export function AssetGallery({
     };
 
     return (
-        <div className={`relative flex flex-col w-full ${fixedHeight ? 'h-[600px]' : ''} ${className}`}>
+        <div className={`relative flex flex-col w-full ${fixedHeight ? 'h-[600px]' : 'h-full'} ${className}`}>
             {showHeader && (
                 <div className="flex flex-col md:flex-row gap-2 mb-4 flex-shrink-0">
                     <div className="relative flex-grow flex items-center gap-2">
@@ -328,7 +328,25 @@ export function AssetGallery({
                                     />
                                     {selectable && (
                                         <div className="absolute top-2 left-2">
-                                            <Checkbox checked={isSelected(asset as Asset)} />
+                                            <Checkbox
+                                                checked={isSelected(asset as Asset)}
+                                                onClick={e => {
+                                                    e.stopPropagation();
+                                                    const isCurrentlySelected = selected.some(
+                                                        a => a.id === asset.id,
+                                                    );
+                                                    let newSelected: Asset[];
+
+                                                    if (isCurrentlySelected) {
+                                                        newSelected = selected.filter(a => a.id !== asset.id);
+                                                    } else {
+                                                        newSelected = [...selected, asset as Asset];
+                                                    }
+
+                                                    setSelected(newSelected);
+                                                    onSelect?.(newSelected);
+                                                }}
+                                            />
                                         </div>
                                     )}
                                 </div>

package/src/lib/components/shared/asset/asset-picker-dialog.tsx

@@ -39,22 +39,22 @@ export function AssetPickerDialog({
 
     return (
         <Dialog open={open} onOpenChange={onClose}>
-            <DialogContent className="sm:max-w-[800px] lg:max-w-[1000px] max-h-[80vh] flex flex-col">
-                <DialogHeader>
+            <DialogContent className="sm:max-w-[800px] lg:max-w-[1000px] h-[85vh] p-0 flex flex-col">
+                <DialogHeader className="px-6 pt-6">
                     <DialogTitle>{multiSelect ? title : title.replace('Assets', 'Asset')}</DialogTitle>
                 </DialogHeader>
 
-                <div className="flex-grow py-4">
+                <div className="flex-1 overflow-y-auto px-6 pt-1">
                     <AssetGallery
                         onSelect={handleAssetSelect}
                         multiSelect="manual"
                         initialSelectedAssets={initialSelectedAssets}
-                        fixedHeight={true}
+                        fixedHeight={false}
                         displayBulkActions={false}
                     />
                 </div>
 
-                <DialogFooter>
+                <DialogFooter className="px-6 pb-6 pt-4 border-t">
                     <Button variant="outline" onClick={onClose}>
                         Cancel
                     </Button>

package/src/lib/components/shared/assign-to-channel-dialog.tsx

@@ -56,10 +56,10 @@ export function AssignToChannelDialog({
 }: Readonly<AssignToChannelDialogProps>) {
     const { i18n } = useLingui();
     const [selectedChannelId, setSelectedChannelId] = useState<string>('');
-    const { channels, selectedChannel } = useChannel();
+    const { channels, activeChannel } = useChannel();
 
     // Filter out the currently selected channel from available options
-    const availableChannels = channels.filter(channel => channel.id !== selectedChannel?.id);
+    const availableChannels = channels.filter(channel => channel.id !== activeChannel?.id);
 
     const { mutate, isPending } = useMutation({
         mutationFn,

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

@@ -42,7 +42,7 @@ export function RemoveFromChannelBulkAction({
     errorMessage,
 }: Readonly<RemoveFromChannelBulkActionProps>) {
     const { refetchPaginatedList } = usePaginatedList();
-    const { selectedChannel } = useChannel();
+    const { activeChannel } = useChannel();
     const { i18n } = useLingui();
     const { mutate } = useMutation({
         mutationFn,
@@ -63,7 +63,7 @@ export function RemoveFromChannelBulkAction({
         },
     });
 
-    if (!selectedChannel) {
+    if (!activeChannel) {
         return null;
     }
 

package/src/lib/graphql/api.ts

@@ -8,6 +8,8 @@ const API_URL =
     (uiConfig.api.port !== 'auto' ? `:${uiConfig.api.port}` : '') +
     `/${uiConfig.api.adminApiPath}`;
 
+export const SELECTED_CHANNEL_TOKEN_KEY = 'vendure-selected-channel-token';
+
 export type Variables = object;
 export type RequestDocument = string | DocumentNode;
 
@@ -15,7 +17,7 @@ const awesomeClient = new AwesomeGraphQLClient({
     endpoint: API_URL,
     fetch: async (url: string, options: RequestInit = {}) => {
         // Get the active channel token from localStorage
-        const channelToken = localStorage.getItem('vendure-selected-channel-token');
+        const channelToken = localStorage.getItem(SELECTED_CHANNEL_TOKEN_KEY);
         const headers = new Headers(options.headers);
 
         if (channelToken) {

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

@@ -18,18 +18,18 @@ import { useChannel } from './use-channel.js';
  */
 export function usePermissions() {
     const { channels } = useAuth();
-    const { selectedChannelId } = useChannel();
+    const { activeChannel } = useChannel();
 
     function hasPermissions(permissions: string[]) {
         if (permissions.length === 0) {
             return true;
         }
         // Use the selected channel instead of settings.activeChannelId
-        const activeChannel = (channels ?? []).find(channel => channel.id === selectedChannelId);
-        if (!activeChannel) {
+        const selectedChannel = (channels ?? []).find(channel => channel.id === activeChannel?.id);
+        if (!selectedChannel) {
             return false;
         }
-        return permissions.some(permission => activeChannel.permissions.includes(permission as Permission));
+        return permissions.some(permission => selectedChannel.permissions.includes(permission as Permission));
     }
 
     return { hasPermissions };

package/src/lib/providers/auth.tsx

@@ -21,6 +21,7 @@ export interface AuthContext {
     logout: (onSuccess?: () => void) => Promise<void>;
     user: ResultOf<typeof CurrentUserQuery>['activeAdministrator'] | undefined;
     channels: NonNullable<ResultOf<typeof CurrentUserQuery>['me']>['channels'] | undefined;
+    refreshCurrentUser: () => void;
 }
 
 const LoginMutation = graphql(`
@@ -174,6 +175,12 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
         }
     }, [isLoading, currentUserData, currentUserError, status, isLoginLogoutInProgress]);
 
+    const refreshCurrentUser = () => {
+        queryClient.invalidateQueries({
+            queryKey: ['currentUser'],
+        });
+    };
+
     return (
         <AuthContext.Provider
             value={{
@@ -184,6 +191,7 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
                 channels: currentUserData?.me?.channels,
                 login,
                 logout,
+                refreshCurrentUser,
             }}
         >
             {children}

package/src/lib/providers/channel-provider.tsx

@@ -1,6 +1,7 @@
-import { api } from '@/vdb/graphql/api.js';
-import { ResultOf, graphql } from '@/vdb/graphql/graphql.js';
+import { api, SELECTED_CHANNEL_TOKEN_KEY } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 
@@ -51,33 +52,37 @@ type Channel = ResultOf<typeof channelFragment>;
  * @since 3.3.0
  */
 export interface ChannelContext {
-    activeChannel: ActiveChannel | undefined;
-    channels: Channel[];
-    selectedChannelId: string | undefined;
-    selectedChannel: Channel | undefined;
     isLoading: boolean;
-    setSelectedChannel: (channelId: string) => void;
+    channels: Channel[];
+    activeChannel: ActiveChannel | undefined;
+    setActiveChannel: (channelId: string) => void;
+    refreshChannels: () => void;
+}
+
+/**
+ * Sets the channel token in localStorage, which is then used by the `api`
+ * object to ensure we add the correct token header to all API calls.
+ */
+function setChannelTokenInLocalStorage(channelToken: string) {
+    try {
+        localStorage.setItem(SELECTED_CHANNEL_TOKEN_KEY, channelToken);
+    } catch (e) {
+        console.error('Failed to store selected channel in localStorage', e);
+    }
 }
 
 // Create the context
 export const ChannelContext = React.createContext<ChannelContext | undefined>(undefined);
 
-// Local storage key for the selected channel
-const SELECTED_CHANNEL_KEY = 'vendure-selected-channel';
-const SELECTED_CHANNEL_TOKEN_KEY = 'vendure-selected-channel-token';
-
 export function ChannelProvider({ children }: Readonly<{ children: React.ReactNode }>) {
     const queryClient = useQueryClient();
-    const { channels: userChannels, isAuthenticated } = useAuth();
+    const {
+        setActiveChannelId,
+        settings: { activeChannelId },
+    } = useUserSettings();
+    const { channels: userChannels, isAuthenticated, refreshCurrentUser } = useAuth();
     const [selectedChannelId, setSelectedChannelId] = React.useState<string | undefined>(() => {
-        // Initialize from localStorage if available
-        try {
-            const storedChannelId = localStorage.getItem(SELECTED_CHANNEL_KEY);
-            return storedChannelId || undefined;
-        } catch (e) {
-            console.error('Failed to load selected channel from localStorage', e);
-            return undefined;
-        }
+        return activeChannelId;
     });
 
     // Fetch all available channels
@@ -90,15 +95,15 @@ export function ChannelProvider({ children }: Readonly<{ children: React.ReactNo
 
     // Filter channels based on user permissions
     const channels = React.useMemo(() => {
-        // If user has specific channels assigned (non-superadmin), use those
+        // If user has specific channels assigned, use those
         if (userChannels && userChannels.length > 0) {
             // Map user channels to match the Channel type structure
             return userChannels.map(ch => {
                 const fullChannelData = channelsData?.channels.items.find(c => c.id === ch.id);
                 return {
                     id: ch.id,
-                    code: ch.code,
-                    token: ch.token,
+                    code: fullChannelData?.code ?? ch.code,
+                    token: fullChannelData?.token ?? ch.token,
                     defaultLanguageCode: fullChannelData?.defaultLanguageCode || 'en',
                     defaultCurrencyCode: fullChannelData?.defaultCurrencyCode || 'USD',
                     pricesIncludeTax: fullChannelData?.pricesIncludeTax || false,
@@ -106,25 +111,19 @@ export function ChannelProvider({ children }: Readonly<{ children: React.ReactNo
                 };
             });
         }
-        // Otherwise use all channels (superadmin)
+        // Otherwise use all channels
         return channelsData?.channels.items || [];
     }, [userChannels, channelsData?.channels.items]);
 
     // Set the selected channel and update localStorage
     const setSelectedChannel = React.useCallback(
         (channelId: string) => {
-            try {
-                // Find the channel to get its token
-                const channel = channels.find(c => c.id === channelId);
-                if (channel) {
-                    // Store channel ID and token in localStorage
-                    localStorage.setItem(SELECTED_CHANNEL_KEY, channelId);
-                    localStorage.setItem(SELECTED_CHANNEL_TOKEN_KEY, channel.token);
-                    setSelectedChannelId(channelId);
-                    queryClient.invalidateQueries();
-                }
-            } catch (e) {
-                console.error('Failed to set selected channel', e);
+            const channel = channels.find(c => c.id === channelId);
+            if (channel) {
+                setChannelTokenInLocalStorage(channel.token);
+                setSelectedChannelId(channelId);
+                setActiveChannelId(channelId);
+                queryClient.invalidateQueries();
             }
         },
         [queryClient, channels],
@@ -136,44 +135,36 @@ export function ChannelProvider({ children }: Readonly<{ children: React.ReactNo
         const validChannelIds = channels.map(c => c.id);
 
         // If selected channel is not valid for this user, reset it
-        if (selectedChannelId && !validChannelIds.includes(selectedChannelId)) {
+        if (selectedChannelId && validChannelIds.length && !validChannelIds.includes(selectedChannelId)) {
             setSelectedChannelId(undefined);
-            try {
-                localStorage.removeItem(SELECTED_CHANNEL_KEY);
-                localStorage.removeItem(SELECTED_CHANNEL_TOKEN_KEY);
-            } catch (e) {
-                console.error('Failed to remove selected channel from localStorage', e);
-            }
         }
 
         // If no selected channel is set, use the first available channel
         if (!selectedChannelId && channels.length > 0) {
             const defaultChannel = channels[0];
             setSelectedChannelId(defaultChannel.id);
-            try {
-                localStorage.setItem(SELECTED_CHANNEL_KEY, defaultChannel.id);
-                localStorage.setItem(SELECTED_CHANNEL_TOKEN_KEY, defaultChannel.token);
-            } catch (e) {
-                console.error('Failed to store selected channel in localStorage', e);
-            }
+            setChannelTokenInLocalStorage(defaultChannel.token);
         }
     }, [selectedChannelId, channels]);
 
-    const activeChannel = channelsData?.activeChannel;
     const isLoading = isChannelsLoading;
 
     // Find the selected channel from the list of channels
-    const selectedChannel = React.useMemo(() => {
-        return channels.find(channel => channel.id === selectedChannelId);
-    }, [channels, selectedChannelId]);
+    const selectedChannel = channelsData?.activeChannel;
+
+    const refreshChannels = () => {
+        refreshCurrentUser();
+        queryClient.invalidateQueries({
+            queryKey: ['channels', isAuthenticated],
+        });
+    };
 
     const contextValue: ChannelContext = {
-        activeChannel,
         channels,
-        selectedChannelId,
-        selectedChannel,
+        activeChannel: selectedChannel,
         isLoading,
-        setSelectedChannel,
+        setActiveChannel: setSelectedChannel,
+        refreshChannels,
     };
 
     return <ChannelContext.Provider value={contextValue}>{children}</ChannelContext.Provider>;