@vendure/dashboard 3.5.0-minor-202509261210 → 3.5.0-minor-202510031341

package/src/lib/components/data-table/filters/data-table-boolean-filter.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
@@ -14,9 +14,9 @@ export interface DataTableBooleanFilterProps {
 export const BOOLEAN_OPERATORS = ['eq', 'isNull'] as const;
 
 export function DataTableBooleanFilter({
-    value: incomingValue,
-    onChange,
-}: Readonly<DataTableBooleanFilterProps>) {
+                                           value: incomingValue,
+                                           onChange,
+                                       }: Readonly<DataTableBooleanFilterProps>) {
     const initialOperator = incomingValue ? (Object.keys(incomingValue)[0] ?? 'eq') : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : true;
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');

package/src/lib/components/data-table/global-views-bar.tsx

@@ -1,7 +1,7 @@
+import { Trans } from '@lingui/react/macro';
 import { ChevronDown } from 'lucide-react';
 import React from 'react';
 import { useSavedViews } from '../../hooks/use-saved-views.js';
-import { Trans } from '../../lib/trans.js';
 import { SavedView } from '../../types/saved-views.js';
 import { findMatchingSavedView } from '../../utils/saved-views-utils.js';
 import { PermissionGuard } from '../shared/permission-guard.js';

package/src/lib/components/data-table/human-readable-operator.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { BOOLEAN_OPERATORS } from './filters/data-table-boolean-filter.js';
 import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
 import { ID_OPERATORS } from './filters/data-table-id-filter.js';

package/src/lib/components/data-table/manage-global-views-button.tsx

@@ -2,7 +2,7 @@ import { Settings } from 'lucide-react';
 import React, { useState } from 'react';
 import { Button } from '../ui/button.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { GlobalViewsSheet } from './global-views-sheet.js';
 
 export const ManageGlobalViewsButton: React.FC = () => {

package/src/lib/components/data-table/my-views-button.tsx

@@ -1,30 +1,34 @@
+import { Trans } from '@lingui/react/macro';
 import { Bookmark } from 'lucide-react';
-import React, { useState, useMemo } from 'react';
-import { Button } from '../ui/button.js';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { UserViewsSheet } from './user-views-sheet.js';
+import React, { useMemo, useState } from 'react';
 import { useSavedViews } from '../../hooks/use-saved-views.js';
 import { findMatchingSavedView } from '../../utils/saved-views-utils.js';
+import { Button } from '../ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
 import { useDataTableContext } from './data-table-context.js';
+import { UserViewsSheet } from './user-views-sheet.js';
 
 export const MyViewsButton: React.FC = () => {
     const [sheetOpen, setSheetOpen] = useState(false);
-    const { userViews } = useSavedViews();
-    const { columnFilters, searchTerm, handleApplyView } = useDataTableContext();
+    const { userViews, savedViewsAreAvailable } = useSavedViews();
+    const { columnFilters, searchTerm } = useDataTableContext();
 
     // Find the active view using centralized utility
     const activeView = useMemo(() => {
         return findMatchingSavedView(columnFilters, searchTerm, userViews);
     }, [userViews, columnFilters, searchTerm]);
 
+    if (!savedViewsAreAvailable) {
+        return null;
+    }
+
     return (
         <>
             <div className="flex items-center gap-2">
                 <Tooltip>
                     <TooltipTrigger asChild>
                         <Button
-                            variant={activeView ? "default" : "outline"}
+                            variant={activeView ? 'default' : 'outline'}
                             size="icon"
                             onClick={() => setSheetOpen(true)}
                         >
@@ -35,11 +39,7 @@ export const MyViewsButton: React.FC = () => {
                         <Trans>My saved views</Trans>
                     </TooltipContent>
                 </Tooltip>
-                {activeView && (
-                    <span className="text-sm text-muted-foreground">
-                        {activeView.name}
-                    </span>
-                )}
+                {activeView && <span className="text-sm text-muted-foreground">{activeView.name}</span>}
             </div>
             <UserViewsSheet open={sheetOpen} onOpenChange={setSheetOpen} />
         </>

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

@@ -1,6 +1,6 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 

package/src/lib/components/data-table/save-view-button.tsx

@@ -1,10 +1,11 @@
+import { Trans } from '@lingui/react/macro';
 import { BookmarkPlus } from 'lucide-react';
 import React, { useState } from 'react';
-import { Button } from '../ui/button.js';
-import { SaveViewDialog } from './save-view-dialog.js';
 import { useSavedViews } from '../../hooks/use-saved-views.js';
 import { isMatchingSavedView } from '../../utils/saved-views-utils.js';
+import { Button } from '../ui/button.js';
 import { useDataTableContext } from './data-table-context.js';
+import { SaveViewDialog } from './save-view-dialog.js';
 
 interface SaveViewButtonProps {
     disabled?: boolean;
@@ -12,7 +13,7 @@ interface SaveViewButtonProps {
 
 export const SaveViewButton: React.FC<SaveViewButtonProps> = ({ disabled }) => {
     const [dialogOpen, setDialogOpen] = useState(false);
-    const { userViews, globalViews } = useSavedViews();
+    const { userViews, globalViews, savedViewsAreAvailable } = useSavedViews();
     const { columnFilters, searchTerm } = useDataTableContext();
 
     const hasFilters = columnFilters.length > 0 || (searchTerm && searchTerm.length > 0);
@@ -23,16 +24,15 @@ export const SaveViewButton: React.FC<SaveViewButtonProps> = ({ disabled }) => {
         return null;
     }
 
+    if (!savedViewsAreAvailable) {
+        return null;
+    }
+
     return (
         <>
-            <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setDialogOpen(true)}
-                disabled={disabled}
-            >
+            <Button variant="outline" size="sm" onClick={() => setDialogOpen(true)} disabled={disabled}>
                 <BookmarkPlus className="h-4 w-4 mr-1" />
-                Save View
+                <Trans>Save View</Trans>
             </Button>
             <SaveViewDialog
                 open={dialogOpen}
@@ -42,4 +42,4 @@ export const SaveViewButton: React.FC<SaveViewButtonProps> = ({ disabled }) => {
             />
         </>
     );
-};
+};

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -7,10 +7,10 @@ import {
 } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
-import { AccessorKeyColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
+import { AccessorFnColumnDef, AccessorKeyColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
 import { EllipsisIcon, TrashIcon } from 'lucide-react';
 import { useMemo } from 'react';
 import { toast } from 'sonner';
@@ -73,7 +73,10 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
     includeSelectionColumn?: boolean;
     includeActionsColumn?: boolean;
     enableSorting?: boolean;
-}>) {
+}>): {
+    columns: Array<AccessorKeyColumnDef<any> | AccessorFnColumnDef<any>>;
+    customFieldColumnNames: string[];
+} {
     const columnHelper = createColumnHelper<PaginatedListItemFields<T>>();
     const allBulkActions = useAllBulkActions(bulkActions ?? []);
 
@@ -264,7 +267,7 @@ function DeleteMutationRowAction({
     row: Row<{ id: string }>;
 }>) {
     const { refetchPaginatedList } = usePaginatedList();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     // Inspect the mutation variables to determine if it expects 'id' or 'ids'
     const mutationVariables = getOperationVariablesFields(deleteMutation);
@@ -285,15 +288,15 @@ function DeleteMutationRowAction({
             const resultToCheck = Array.isArray(unwrappedResult) ? unwrappedResult[0] : unwrappedResult;
             if (resultToCheck.result === 'DELETED') {
                 refetchPaginatedList();
-                toast.success(i18n.t('Deleted successfully'));
+                toast.success(t`Deleted successfully`);
             } else {
-                toast.error(i18n.t('Failed to delete'), {
+                toast.error(t`Failed to delete`, {
                     description: resultToCheck.message,
                 });
             }
         },
         onError: (err: Error) => {
-            toast.error(i18n.t('Failed to delete'), {
+            toast.error(t`Failed to delete`, {
                 description: err.message,
             });
         },

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

@@ -1,24 +1,9 @@
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Copy, Edit, Globe, MoreHorizontal, Trash2 } from 'lucide-react';
 import React, { useState } from 'react';
+import { toast } from 'sonner';
 import { useSavedViews } from '../../hooks/use-saved-views.js';
-import { useDataTableContext } from './data-table-context.js';
-import { Button } from '../ui/button.js';
-import { Input } from '../ui/input.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '../ui/dropdown-menu.js';
-import {
-    Sheet,
-    SheetContent,
-    SheetDescription,
-    SheetHeader,
-    SheetTitle,
-} from '../ui/sheet.js';
 import { SavedView } from '../../types/saved-views.js';
-import { toast } from 'sonner';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -29,7 +14,16 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '../ui/alert-dialog.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Button } from '../ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
+import { Input } from '../ui/input.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet.js';
+import { useDataTableContext } from './data-table-context.js';
 
 interface ViewsSheetProps {
     open: boolean;
@@ -38,9 +32,10 @@ interface ViewsSheetProps {
 }
 
 export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type }) => {
-    const { userViews, globalViews, deleteView, updateView, duplicateView, canManageGlobalViews } = useSavedViews();
+    const { userViews, globalViews, deleteView, updateView, duplicateView, canManageGlobalViews } =
+        useSavedViews();
     const { handleApplyView } = useDataTableContext();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const [editingId, setEditingId] = useState<string | null>(null);
     const [editingName, setEditingName] = useState('');
     const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
@@ -50,9 +45,8 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
 
     const handleViewApply = (view: SavedView) => {
         handleApplyView(view.filters, view.searchTerm);
-        const message = isGlobal
-            ? i18n.t(`Applied global view "${view.name}"`)
-            : i18n.t(`Applied view "${view.name}"`);
+        const viewName = view.name;
+        const message = isGlobal ? t`Applied global view "${viewName}"` : t`Applied view "${viewName}"`;
         toast.success(message);
     };
 
@@ -66,16 +60,12 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
 
         try {
             await updateView({ id: editingId, name: editingName.trim() });
-            const message = isGlobal
-                ? i18n.t('Global view renamed successfully')
-                : i18n.t('View renamed successfully');
+            const message = isGlobal ? t`Global view renamed successfully` : t`View renamed successfully`;
             toast.success(message);
             setEditingId(null);
             setEditingName('');
         } catch (error) {
-            const message = isGlobal
-                ? i18n.t('Failed to rename global view')
-                : i18n.t('Failed to rename view');
+            const message = isGlobal ? t`Failed to rename global view` : t`Failed to rename view`;
             toast.error(message);
         }
     };
@@ -90,15 +80,11 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
 
         try {
             await deleteView(deleteConfirmId);
-            const message = isGlobal
-                ? i18n.t('Global view deleted successfully')
-                : i18n.t('View deleted successfully');
+            const message = isGlobal ? t`Global view deleted successfully` : t`View deleted successfully`;
             toast.success(message);
             setDeleteConfirmId(null);
         } catch (error) {
-            const message = isGlobal
-                ? i18n.t('Failed to delete global view')
-                : i18n.t('Failed to delete view');
+            const message = isGlobal ? t`Failed to delete global view` : t`Failed to delete view`;
             toast.error(message);
         }
     };
@@ -107,13 +93,11 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
         try {
             await duplicateView(view.id, type);
             const message = isGlobal
-                ? i18n.t('Global view duplicated successfully')
-                : i18n.t('View duplicated successfully');
+                ? t`Global view duplicated successfully`
+                : t`View duplicated successfully`;
             toast.success(message);
         } catch (error) {
-            const message = isGlobal
-                ? i18n.t('Failed to duplicate global view')
-                : i18n.t('Failed to duplicate view');
+            const message = isGlobal ? t`Failed to duplicate global view` : t`Failed to duplicate view`;
             toast.error(message);
         }
     };
@@ -121,9 +105,9 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
     const handleConvertToUser = async (view: SavedView) => {
         try {
             await duplicateView(view.id, 'user');
-            toast.success(i18n.t('Global view converted to personal view successfully'));
+            toast.success(t`Global view converted to personal view successfully`);
         } catch (error) {
-            toast.error(i18n.t('Failed to convert global view to personal view'));
+            toast.error(t`Failed to convert global view to personal view`);
         }
     };
 
@@ -131,9 +115,9 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
         try {
             await duplicateView(view.id, 'global');
             await deleteView(view.id);
-            toast.success(i18n.t('View converted to global successfully'));
+            toast.success(t`View converted to global successfully`);
         } catch (error) {
-            toast.error(i18n.t('Failed to convert view to global'));
+            toast.error(t`Failed to convert view to global`);
         }
     };
 
@@ -142,16 +126,20 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
     };
 
     const getDescription = () => {
-        return isGlobal
-            ? <Trans>Manage global saved views that are visible to all users</Trans>
-            : <Trans>Manage your personal saved views for this table</Trans>;
+        return isGlobal ? (
+            <Trans>Manage global saved views that are visible to all users</Trans>
+        ) : (
+            <Trans>Manage your personal saved views for this table</Trans>
+        );
     };
 
     const getEmptyStateMessage = () => {
         if (isGlobal) {
             return (
                 <>
-                    <p><Trans>No global views have been created yet.</Trans></p>
+                    <p>
+                        <Trans>No global views have been created yet.</Trans>
+                    </p>
                     <p className="text-sm mt-2">
                         <Trans>Save a view as "Global" to make it available to all users.</Trans>
                     </p>
@@ -160,7 +148,9 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
         } else {
             return (
                 <>
-                    <p><Trans>You haven't saved any views yet.</Trans></p>
+                    <p>
+                        <Trans>You haven't saved any views yet.</Trans>
+                    </p>
                     <p className="text-sm mt-2">
                         <Trans>Apply filters to the table and click "Save View" to get started.</Trans>
                     </p>
@@ -174,9 +164,14 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
     };
 
     const getDeleteDialogDescription = () => {
-        return isGlobal
-            ? <Trans>Are you sure you want to delete this global view? This action cannot be undone and will affect all users.</Trans>
-            : <Trans>Are you sure you want to delete this view? This action cannot be undone.</Trans>;
+        return isGlobal ? (
+            <Trans>
+                Are you sure you want to delete this global view? This action cannot be undone and will affect
+                all users.
+            </Trans>
+        ) : (
+            <Trans>Are you sure you want to delete this view? This action cannot be undone.</Trans>
+        );
     };
 
     return (
@@ -185,9 +180,7 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
                 <SheetContent className="w-[400px] sm:w-[540px]">
                     <SheetHeader>
                         <SheetTitle>{getTitle()}</SheetTitle>
-                        <SheetDescription>
-                            {getDescription()}
-                        </SheetDescription>
+                        <SheetDescription>{getDescription()}</SheetDescription>
                     </SheetHeader>
                     <div className="mt-4">
                         {views.length === 0 ? (
@@ -216,18 +209,21 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
                                                 <Button size="sm" onClick={handleSaveEdit}>
                                                     <Trans>Save</Trans>
                                                 </Button>
-                                                <Button size="sm" variant="outline" onClick={handleCancelEdit}>
+                                                <Button
+                                                    size="sm"
+                                                    variant="outline"
+                                                    onClick={handleCancelEdit}
+                                                >
                                                     <Trans>Cancel</Trans>
                                                 </Button>
                                             </div>
                                         ) : (
                                             <>
-                                                <span className="font-medium text-sm truncate flex-1">{view.name}</span>
+                                                <span className="font-medium text-sm truncate flex-1">
+                                                    {view.name}
+                                                </span>
                                                 <div className="flex items-center gap-1">
-                                                    <Button
-                                                        size="sm"
-                                                        onClick={() => handleViewApply(view)}
-                                                    >
+                                                    <Button size="sm" onClick={() => handleViewApply(view)}>
                                                         <Trans>Apply</Trans>
                                                     </Button>
                                                     <DropdownMenu>
@@ -237,22 +233,32 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
                                                             </Button>
                                                         </DropdownMenuTrigger>
                                                         <DropdownMenuContent align="end">
-                                                            <DropdownMenuItem onClick={() => handleStartEdit(view)}>
+                                                            <DropdownMenuItem
+                                                                onClick={() => handleStartEdit(view)}
+                                                            >
                                                                 <Edit className="h-4 w-4 mr-2" />
                                                                 <Trans>Rename</Trans>
                                                             </DropdownMenuItem>
-                                                            <DropdownMenuItem onClick={() => handleDuplicate(view)}>
+                                                            <DropdownMenuItem
+                                                                onClick={() => handleDuplicate(view)}
+                                                            >
                                                                 <Copy className="h-4 w-4 mr-2" />
                                                                 <Trans>Duplicate</Trans>
                                                             </DropdownMenuItem>
                                                             {isGlobal ? (
-                                                                <DropdownMenuItem onClick={() => handleConvertToUser(view)}>
+                                                                <DropdownMenuItem
+                                                                    onClick={() => handleConvertToUser(view)}
+                                                                >
                                                                     <Copy className="h-4 w-4 mr-2" />
                                                                     <Trans>Copy to Personal</Trans>
                                                                 </DropdownMenuItem>
                                                             ) : (
                                                                 canManageGlobalViews && (
-                                                                    <DropdownMenuItem onClick={() => handleConvertToGlobal(view)}>
+                                                                    <DropdownMenuItem
+                                                                        onClick={() =>
+                                                                            handleConvertToGlobal(view)
+                                                                        }
+                                                                    >
                                                                         <Globe className="h-4 w-4 mr-2" />
                                                                         <Trans>Make Global</Trans>
                                                                     </DropdownMenuItem>
@@ -282,16 +288,18 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
                 <AlertDialogContent>
                     <AlertDialogHeader>
                         <AlertDialogTitle>{getDeleteDialogTitle()}</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            {getDeleteDialogDescription()}
-                        </AlertDialogDescription>
+                        <AlertDialogDescription>{getDeleteDialogDescription()}</AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
-                        <AlertDialogCancel><Trans>Cancel</Trans></AlertDialogCancel>
-                        <AlertDialogAction onClick={handleDelete}><Trans>Delete</Trans></AlertDialogAction>
+                        <AlertDialogCancel>
+                            <Trans>Cancel</Trans>
+                        </AlertDialogCancel>
+                        <AlertDialogAction onClick={handleDelete}>
+                            <Trans>Delete</Trans>
+                        </AlertDialogAction>
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>
         </>
     );
-};
+};