@vendure/dashboard 3.3.2 → 3.3.3

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -6,15 +6,16 @@ import {
 } from '@dnd-kit/modifiers';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 import { Table } from '@tanstack/react-table';
 import { GripVertical, Settings2 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button.js';
 import {
+    DropdownMenuSeparator, DropdownMenuTrigger,
     DropdownMenu,
     DropdownMenuCheckboxItem,
-    DropdownMenuContent
+    DropdownMenuContent,
+    DropdownMenuItem
 } from '@/components/ui/dropdown-menu.js';
 import { usePage } from '@/hooks/use-page.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
@@ -69,6 +70,13 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
         }
     };
 
+    const handleReset = () => {
+        if (page?.pageId) {
+            setTableSettings(page.pageId, 'columnOrder', undefined);
+            setTableSettings(page.pageId, 'columnVisibility', undefined);
+        }
+    };
+
     return (
         <div className="flex items-center gap-2">
             <DropdownMenu>
@@ -95,6 +103,8 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
                             ))}
                         </SortableContext>
                     </DndContext>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={handleReset}>Reset</DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
         </div>

package/src/lib/components/data-table/data-table.tsx

@@ -86,6 +86,15 @@ export function DataTable<TData>({
         defaultColumnVisibility ?? {},
     );
 
+    useEffect(() => {
+        // If the defaultColumnVisibility changes externally (e.g. the user reset the table settings),
+        // we want to reset the column visibility to the default.
+        if (defaultColumnVisibility && JSON.stringify(defaultColumnVisibility) !== JSON.stringify(columnVisibility)) {
+            setColumnVisibility(defaultColumnVisibility);
+        }
+        // We intentionally do not include `columnVisibility` in the dependency array
+    }, [defaultColumnVisibility]);
+
     let tableOptions: TableOptions<TData> = {
         data,
         columns,

package/src/lib/components/layout/channel-switcher.tsx

@@ -61,13 +61,12 @@ export function ChannelSwitcher() {
                                 onClick={() => setSelectedChannel(channel.id)}
                                 className="gap-2 p-2"
                             >
-                                <div className="flex size-6 items-center justify-center rounded-xs border">
+                                <div className="flex size-8 items-center justify-center rounded border">
                                     <span className="truncate font-semibold text-xs">
                                         {channel.defaultCurrencyCode}
                                     </span>
                                 </div>
                                 <ChannelCodeLabel code={channel.code} />
-                                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
                             </DropdownMenuItem>
                         ))}
                         <DropdownMenuSeparator />

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -23,19 +23,19 @@ interface AssignedFacetValuesProps {
 }
 
 export function AssignedFacetValues({
-    value = [],
-    facetValues,
-    canUpdate = true,
-    onBlur,
-    onChange,
-}: AssignedFacetValuesProps) {
+                                        value = [],
+                                        facetValues,
+                                        canUpdate = true,
+                                        onBlur,
+                                        onChange,
+                                    }: AssignedFacetValuesProps) {
     const [knownFacetValues, setKnownFacetValues] = useState<FacetValue[]>(facetValues);
-    
+
     function onSelectHandler(facetValue: FacetValue) {
         setKnownFacetValues(prev => [...prev, facetValue]);
         onChange?.([...new Set([...(value ?? []), facetValue.id])]);
     }
-    
+
     function onRemoveHandler(id: string) {
         onChange?.(value?.filter(fvId => fvId !== id) ?? []);
     }
@@ -47,12 +47,11 @@ export function AssignedFacetValues({
                     const facetValue = knownFacetValues.find(fv => fv.id === id);
                     if (!facetValue) return null;
                     return (
-                        <div className="mb-2 mr-1">
-                        <FacetValueChip
-                            key={facetValue.id}
-                            facetValue={facetValue}
-                            removable={canUpdate}
-                            onRemove={onRemoveHandler}
+                        <div className="mb-2 mr-1" key={facetValue.id}>
+                            <FacetValueChip
+                                facetValue={facetValue}
+                                removable={canUpdate}
+                                onRemove={onRemoveHandler}
                             />
                         </div>
                     );

package/src/lib/components/shared/entity-assets.tsx

@@ -47,16 +47,55 @@ interface EntityAssetsProps {
     onChange?: (change: EntityAssetValue) => void;
 }
 
+// FeaturedAsset component
+interface FeaturedAssetProps {
+    featuredAsset?: Asset | null;
+    compact?: boolean;
+    onSelectAssets: () => void;
+    onPreviewAsset: (asset: Asset) => void;
+}
+
+function FeaturedAsset({
+                           featuredAsset,
+                           compact = false,
+                           onSelectAssets,
+                           onPreviewAsset,
+                       }: FeaturedAssetProps) {
+    return (
+        <div
+            className={`flex items-center justify-center ${compact ? 'h-40' : 'h-64'} border border-dashed rounded-md`}
+        >
+            {featuredAsset ? (
+                <VendureImage
+                    asset={featuredAsset}
+                    mode="crop"
+                    preset="small"
+                    onClick={() => onPreviewAsset(featuredAsset)}
+                    className="max-w-full max-h-full object-contain cursor-pointer"
+                />
+            ) : (
+                <div
+                    className="flex flex-col items-center justify-center text-muted-foreground cursor-pointer"
+                    onClick={onSelectAssets}
+                >
+                    <ImageIcon className={compact ? 'h-10 w-10' : 'h-16 w-16'} />
+                    {!compact && <div className="mt-2">No featured asset</div>}
+                </div>
+            )}
+        </div>
+    );
+}
+
 // Sortable asset item component
 function SortableAsset({
-    asset,
-    compact,
-    isFeatured,
-    updatePermissions,
-    onPreview,
-    onSetAsFeatured,
-    onRemove,
-}: {
+                           asset,
+                           compact,
+                           isFeatured,
+                           updatePermissions,
+                           onPreview,
+                           onSetAsFeatured,
+                           onRemove,
+                       }: {
     asset: Asset;
     compact: boolean;
     isFeatured: boolean;
@@ -122,13 +161,13 @@ function SortableAsset({
 }
 
 export function EntityAssets({
-    assets: initialAssets = [],
-    featuredAsset: initialFeaturedAsset,
-    compact = false,
-    updatePermissions = true,
-    multiSelect = true,
-    onChange,
-}: EntityAssetsProps) {
+                                 assets: initialAssets = [],
+                                 featuredAsset: initialFeaturedAsset,
+                                 compact = false,
+                                 updatePermissions = true,
+                                 multiSelect = true,
+                                 onChange,
+                             }: EntityAssetsProps) {
     const [assets, setAssets] = useState<Asset[]>([...initialAssets]);
     const [featuredAsset, setFeaturedAsset] = useState<Asset | undefined | null>(initialFeaturedAsset);
     const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -234,57 +273,6 @@ export function EntityAssets({
         },
         [featuredAsset],
     );
-
-    const renderAssetList = () => (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-            <div className={`${compact ? 'max-h-32' : ''} overflow-auto p-1`}>
-                <SortableContext
-                    items={assets.map(asset => asset.id)}
-                    strategy={horizontalListSortingStrategy}
-                >
-                    <div className="flex flex-wrap gap-2">
-                        {assets.map(asset => (
-                            <SortableAsset
-                                key={asset.id}
-                                asset={asset}
-                                compact={compact}
-                                isFeatured={isFeatured(asset)}
-                                updatePermissions={updatePermissions}
-                                onPreview={setPreviewAsset}
-                                onSetAsFeatured={handleSetAsFeatured}
-                                onRemove={handleRemoveAsset}
-                            />
-                        ))}
-                    </div>
-                </SortableContext>
-            </div>
-        </DndContext>
-    );
-
-    const FeaturedAsset = () => (
-        <div
-            className={`flex items-center justify-center ${compact ? 'h-40' : 'h-64'} border border-dashed rounded-md`}
-        >
-            {featuredAsset ? (
-                <VendureImage
-                    asset={featuredAsset}
-                    mode="crop"
-                    preset="small"
-                    onClick={() => setPreviewAsset(featuredAsset)}
-                    className="max-w-full max-h-full object-contain cursor-pointer"
-                />
-            ) : (
-                <div
-                    className="flex flex-col items-center justify-center text-muted-foreground cursor-pointer"
-                    onClick={handleSelectAssets}
-                >
-                    <ImageIcon className={compact ? 'h-10 w-10' : 'h-16 w-16'} />
-                    {!compact && <div className="mt-2">No featured asset</div>}
-                </div>
-            )}
-        </div>
-    );
-
     // AddAssetButton component
     const AddAssetButton = () =>
         updatePermissions && (
@@ -303,15 +291,45 @@ export function EntityAssets({
         <>
             {compact ? (
                 <div className="flex flex-col gap-3">
-                    <FeaturedAsset />
-                    {renderAssetList()}
+                    <FeaturedAsset
+                        featuredAsset={featuredAsset}
+                        compact={compact}
+                        onSelectAssets={handleSelectAssets}
+                        onPreviewAsset={setPreviewAsset}
+                    />
+                    <AssetList
+                        assets={assets}
+                        compact={compact}
+                        sensors={sensors}
+                        updatePermissions={updatePermissions}
+                        isFeatured={isFeatured}
+                        onPreview={setPreviewAsset}
+                        onSetAsFeatured={handleSetAsFeatured}
+                        onRemove={handleRemoveAsset}
+                        onDragEnd={handleDragEnd}
+                    />
                     <AddAssetButton />
                 </div>
             ) : (
                 <div className="grid grid-cols-1 md:grid-cols-[256px_1fr] gap-4">
-                    <FeaturedAsset />
+                    <FeaturedAsset
+                        featuredAsset={featuredAsset}
+                        compact={compact}
+                        onSelectAssets={handleSelectAssets}
+                        onPreviewAsset={setPreviewAsset}
+                    />
                     <div className="flex flex-col gap-4">
-                        {renderAssetList()}
+                        <AssetList
+                            assets={assets}
+                            compact={compact}
+                            sensors={sensors}
+                            updatePermissions={updatePermissions}
+                            isFeatured={isFeatured}
+                            onPreview={setPreviewAsset}
+                            onSetAsFeatured={handleSetAsFeatured}
+                            onRemove={handleRemoveAsset}
+                            onDragEnd={handleDragEnd}
+                        />
                         <AddAssetButton />
                     </div>
                 </div>
@@ -338,3 +356,55 @@ export function EntityAssets({
         </>
     );
 }
+
+// AssetList component
+interface AssetListProps {
+    assets: Asset[];
+    compact: boolean;
+    sensors: ReturnType<typeof useSensors>;
+    updatePermissions: boolean;
+    isFeatured: (asset: Asset) => boolean;
+    onPreview: (asset: Asset) => void;
+    onSetAsFeatured: (asset: Asset) => void;
+    onRemove: (asset: Asset) => void;
+    onDragEnd: (event: DragEndEvent) => void;
+}
+
+
+function AssetList({
+                       assets,
+                       compact,
+                       sensors,
+                       updatePermissions,
+                       isFeatured,
+                       onPreview,
+                       onSetAsFeatured,
+                       onRemove,
+                       onDragEnd,
+                   }: AssetListProps) {
+    return (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+            <div className={`${compact ? 'max-h-32' : ''} overflow-auto p-1`}>
+                <SortableContext
+                    items={assets.map(asset => asset.id)}
+                    strategy={horizontalListSortingStrategy}
+                >
+                    <div className="flex flex-wrap gap-2">
+                        {assets.map(asset => (
+                            <SortableAsset
+                                key={asset.id}
+                                asset={asset}
+                                compact={compact}
+                                isFeatured={isFeatured(asset)}
+                                updatePermissions={updatePermissions}
+                                onPreview={onPreview}
+                                onSetAsFeatured={onSetAsFeatured}
+                                onRemove={onRemove}
+                            />
+                        ))}
+                    </div>
+                </SortableContext>
+            </div>
+        </DndContext>
+    );
+}

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

@@ -174,6 +174,8 @@ export interface RowAction<T> {
     onClick?: (row: Row<T>) => void;
 }
 
+export type PaginatedListRefresherRegisterFn = (refreshFn: () => void) => void;
+
 export interface PaginatedListDataTableProps<
     T extends TypedDocumentNode<U, V>,
     U extends any,
@@ -202,6 +204,12 @@ export interface PaginatedListDataTableProps<
     disableViewOptions?: boolean;
     transformData?: (data: PaginatedListItemFields<T>[]) => PaginatedListItemFields<T>[];
     setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
+    /**
+     * Register a function that allows you to assign a refresh function for
+     * this list. The function can be assigned to a ref and then called when
+     * the list needs to be refreshed.
+     */
+    registerRefresher?: PaginatedListRefresherRegisterFn;
 }
 
 export const PaginatedListDataTableKey = 'PaginatedListDataTable';
@@ -234,6 +242,7 @@ export function PaginatedListDataTable<
     disableViewOptions,
     setTableOptions,
     transformData,
+    registerRefresher,
 }: PaginatedListDataTableProps<T, U, V, AC>) {
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
@@ -274,6 +283,7 @@ export function PaginatedListDataTable<
     function refetchPaginatedList() {
         queryClient.invalidateQueries({ queryKey });
     }
+    registerRefresher?.(refetchPaginatedList);
 
     const { data } = useQuery({
         queryFn: () => {

package/src/lib/components/ui/button.tsx

@@ -43,7 +43,7 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ({ className, variant, size, asChild = false, ...props }, ref) => {
         const Comp = asChild ? Slot : 'button';
-        return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+        return <Comp className={cn(buttonVariants({ variant, size, className }))} type={props.type ?? 'button'} ref={ref} {...props} />;
     },
 );
 Button.displayName = 'Button';

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

@@ -51,6 +51,7 @@ export function useGeneratedForm<
             }
             return result;
         },
+        mode: 'onChange',
         defaultValues,
         values: processedEntity ? setValues(processedEntity) : defaultValues,
     });

package/src/lib/framework/page/list-page.tsx

@@ -110,8 +110,8 @@ export function ListPage<
         itemsPerPage: routeSearch.perPage ? parseInt(routeSearch.perPage) : tableSettings?.pageSize ?? 10,
     };
 
-    const columnVisibility = pageId ? tableSettings?.columnVisibility : defaultVisibility;
-    const columnOrder = pageId ? tableSettings?.columnOrder : defaultColumnOrder;
+    const columnVisibility = pageId ? tableSettings?.columnVisibility ?? defaultVisibility : defaultVisibility;
+    const columnOrder = pageId ? tableSettings?.columnOrder ?? defaultColumnOrder : defaultColumnOrder;
     const columnFilters = pageId ? tableSettings?.columnFilters : routeSearch.filters;
 
     const sorting: SortingState = (routeSearch.sort ?? '')

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

@@ -288,6 +288,13 @@ export function useDetailPage<
         },
     });
 
+    // A kind of ridiculous workaround to ensure that the `isDirty` and `isValid` properties
+    // are always up-to-date when used by the consuming component. This seems to be necessary
+    // due to the way that `react-hook-form` uses a Proxy object for the form state.
+    // See https://react-hook-form.com/docs/useform/formstate
+    // noinspection JSUnusedLocalSymbols
+    const { isDirty, isValid } = form.formState;
+
     return {
         form: form as any,
         submitHandler,

package/src/lib/graphql/api.ts

@@ -1,6 +1,6 @@
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AwesomeGraphQLClient } from 'awesome-graphql-client';
-import { DocumentNode, parse, print } from 'graphql';
+import { DocumentNode, print } from 'graphql';
 import { uiConfig } from 'virtual:vendure-ui-config';
 
 const API_URL = uiConfig.apiHost + (uiConfig.apiPort !== 'auto' ? `:${uiConfig.apiPort}` : '') + '/admin-api';
@@ -11,8 +11,17 @@ export type RequestDocument = string | DocumentNode;
 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 headers = new Headers(options.headers);
+
+        if (channelToken) {
+            headers.set('vendure-token', channelToken);
+        }
+
         return fetch(url, {
             ...options,
+            headers,
             credentials: 'include',
             mode: 'cors',
         });

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

@@ -1,8 +1,7 @@
 import { useAuth } from '@/hooks/use-auth.js';
+import { useChannel } from '@/hooks/use-channel.js';
 import { Permission } from '@vendure/common/lib/generated-types';
 
-import { useUserSettings } from './use-user-settings.js';
-
 /**
  * @description
  * **Status: Developer Preview**
@@ -18,13 +17,14 @@ import { useUserSettings } from './use-user-settings.js';
  */
 export function usePermissions() {
     const { channels } = useAuth();
-    const { settings } = useUserSettings();
+    const { selectedChannelId } = useChannel();
 
     function hasPermissions(permissions: string[]) {
         if (permissions.length === 0) {
             return true;
         }
-        const activeChannel = (channels ?? []).find(channel => channel.id === settings.activeChannelId);
+        // Use the selected channel instead of settings.activeChannelId
+        const activeChannel = (channels ?? []).find(channel => channel.id === selectedChannelId);
         if (!activeChannel) {
             return false;
         }

package/src/lib/providers/auth.tsx

@@ -103,6 +103,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                     if (data.login.__typename === 'CurrentUser') {
                         setAuthenticationError(undefined);
                         await refetchCurrentUser();
+                        // Invalidate all queries to ensure fresh data after login
+                        await queryClient.invalidateQueries();
                         setStatus('authenticated');
                         onLoginSuccess?.();
                     } else {
@@ -115,7 +117,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                     setStatus('unauthenticated');
                 });
         },
-        [refetchCurrentUser],
+        [refetchCurrentUser, queryClient],
     );
 
     const logout = React.useCallback(
@@ -123,13 +125,17 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
             setStatus('verifying');
             api.mutate(LogOutMutation)({}).then(async data => {
                 if (data?.logout.success) {
-                    queryClient.removeQueries({ queryKey: ['currentUser'] });
+                    // Clear all cached queries to prevent stale data
+                    queryClient.clear();
+                    // Clear selected channel from localStorage
+                    localStorage.removeItem('vendure-selected-channel');
+                    localStorage.removeItem('vendure-selected-channel-token');
                     setStatus('unauthenticated');
                     onLogoutSuccess?.();
                 }
             });
         },
-        [refetchCurrentUser],
+        [queryClient],
     );
 
     // Determine isAuthenticated from currentUserData