@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202509261210

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

@@ -0,0 +1,97 @@
+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';
+import { Button } from '../ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
+import { useDataTableContext } from './data-table-context.js';
+import { ManageGlobalViewsButton } from './manage-global-views-button.js';
+
+export const GlobalViewsBar: React.FC = () => {
+    const { globalViews, canManageGlobalViews } = useSavedViews();
+    const { columnFilters, searchTerm, handleApplyView } = useDataTableContext();
+
+    if (globalViews.length === 0) {
+        return null;
+    }
+
+    const sortedViews = [...globalViews].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+    );
+
+    const handleViewClick = (view: SavedView) => {
+        handleApplyView(view.filters, view.searchTerm);
+    };
+
+    const isViewActive = (view: SavedView) => {
+        return findMatchingSavedView(columnFilters, searchTerm, [view]) !== undefined;
+    };
+
+    if (sortedViews.length <= 3) {
+        // Show all views as buttons
+        return (
+            <div className="flex items-center gap-1">
+                {sortedViews.map(view => (
+                    <Button
+                        key={view.id}
+                        variant={isViewActive(view) ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => handleViewClick(view)}
+                    >
+                        {view.name}
+                    </Button>
+                ))}
+                {canManageGlobalViews && <ManageGlobalViewsButton />}
+            </div>
+        );
+    }
+
+    // Show first 3 as buttons, rest in dropdown
+    const visibleViews = sortedViews.slice(0, 3);
+    const dropdownViews = sortedViews.slice(3);
+
+    return (
+        <div className="flex items-center gap-1">
+            {visibleViews.map(view => (
+                <Button
+                    key={view.id}
+                    variant={isViewActive(view) ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => handleViewClick(view)}
+                >
+                    {view.name}
+                </Button>
+            ))}
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                        <Trans>More views</Trans>
+                        <ChevronDown className="h-3 w-3" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                    {dropdownViews.map(view => (
+                        <DropdownMenuItem
+                            key={view.id}
+                            onClick={() => handleViewClick(view)}
+                            className={isViewActive(view) ? 'bg-primary' : ''}
+                        >
+                            {view.name}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+            <PermissionGuard requires={['WriteDashboardGlobalViews']}>
+                {canManageGlobalViews && <ManageGlobalViewsButton />}
+            </PermissionGuard>
+        </div>
+    );
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewsSheet } from './views-sheet.js';
+
+interface GlobalViewsSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export const GlobalViewsSheet: React.FC<GlobalViewsSheetProps> = ({ open, onOpenChange }) => {
+    return <ViewsSheet open={open} onOpenChange={onOpenChange} type="global" />;
+};

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

@@ -0,0 +1,26 @@
+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 { GlobalViewsSheet } from './global-views-sheet.js';
+
+export const ManageGlobalViewsButton: React.FC = () => {
+    const [sheetOpen, setSheetOpen] = useState(false);
+
+    return (
+        <>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button variant="outline" size="icon-sm" onClick={() => setSheetOpen(true)}>
+                        <Settings />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <Trans>Manage global views</Trans>
+                </TooltipContent>
+            </Tooltip>
+            <GlobalViewsSheet open={sheetOpen} onOpenChange={setSheetOpen} />
+        </>
+    );
+};

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

@@ -0,0 +1,47 @@
+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 { useSavedViews } from '../../hooks/use-saved-views.js';
+import { findMatchingSavedView } from '../../utils/saved-views-utils.js';
+import { useDataTableContext } from './data-table-context.js';
+
+export const MyViewsButton: React.FC = () => {
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const { userViews } = useSavedViews();
+    const { columnFilters, searchTerm, handleApplyView } = useDataTableContext();
+
+    // Find the active view using centralized utility
+    const activeView = useMemo(() => {
+        return findMatchingSavedView(columnFilters, searchTerm, userViews);
+    }, [userViews, columnFilters, searchTerm]);
+
+    return (
+        <>
+            <div className="flex items-center gap-2">
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant={activeView ? "default" : "outline"}
+                            size="icon"
+                            onClick={() => setSheetOpen(true)}
+                        >
+                            <Bookmark />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <Trans>My saved views</Trans>
+                    </TooltipContent>
+                </Tooltip>
+                {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,4 +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 { RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -33,8 +35,15 @@ export function RefreshButton({
     };
 
     return (
-        <Button variant="ghost" size="sm" onClick={handleClick} disabled={delayedLoading}>
-            <RefreshCw className={delayedLoading ? 'animate-rotate' : ''} />
-        </Button>
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <Button variant="outline" size="sm" onClick={handleClick} disabled={delayedLoading}>
+                    <RefreshCw className={delayedLoading ? 'animate-rotate' : ''} />
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+                <Trans>Refresh data</Trans>
+            </TooltipContent>
+        </Tooltip>
     );
 }

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

@@ -0,0 +1,45 @@
+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 { useDataTableContext } from './data-table-context.js';
+
+interface SaveViewButtonProps {
+    disabled?: boolean;
+}
+
+export const SaveViewButton: React.FC<SaveViewButtonProps> = ({ disabled }) => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const { userViews, globalViews } = useSavedViews();
+    const { columnFilters, searchTerm } = useDataTableContext();
+
+    const hasFilters = columnFilters.length > 0 || (searchTerm && searchTerm.length > 0);
+    const matchesExistingView = isMatchingSavedView(columnFilters, searchTerm || '', userViews, globalViews);
+
+    // Don't show the button if there are no filters or if filters match an existing saved view
+    if (!hasFilters || matchesExistingView) {
+        return null;
+    }
+
+    return (
+        <>
+            <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setDialogOpen(true)}
+                disabled={disabled}
+            >
+                <BookmarkPlus className="h-4 w-4 mr-1" />
+                Save View
+            </Button>
+            <SaveViewDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                filters={columnFilters}
+                searchTerm={searchTerm}
+            />
+        </>
+    );
+};

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

@@ -0,0 +1,113 @@
+import { ColumnFiltersState } from '@tanstack/react-table';
+import React, { useState } from 'react';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { Button } from '../ui/button.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
+import { Input } from '../ui/input.js';
+import { Label } from '../ui/label.js';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group.js';
+import { toast } from 'sonner';
+
+interface SaveViewDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    filters: ColumnFiltersState;
+    searchTerm?: string;
+}
+
+export const SaveViewDialog: React.FC<SaveViewDialogProps> = ({
+    open,
+    onOpenChange,
+    filters,
+    searchTerm,
+}) => {
+    const [name, setName] = useState('');
+    const [scope, setScope] = useState<'user' | 'global'>('user');
+    const [saving, setSaving] = useState(false);
+    const { saveView, userViews, globalViews, canManageGlobalViews } = useSavedViews();
+
+    const handleSave = async () => {
+        if (!name.trim()) {
+            toast.error('Please enter a name for the view');
+            return;
+        }
+
+        // Check for duplicate names
+        const existingViews = scope === 'user' ? userViews : globalViews;
+        if (existingViews.some(v => v.name === name.trim())) {
+            toast.error(`A ${scope} view with this name already exists`);
+            return;
+        }
+
+        setSaving(true);
+        try {
+            await saveView({
+                name: name.trim(),
+                scope,
+                filters,
+                searchTerm,
+            });
+            toast.success(`View "${name}" saved successfully`);
+            onOpenChange(false);
+            setName('');
+            setScope('user');
+        } catch (error) {
+            toast.error('Failed to save view');
+            console.error('Failed to save view:', error);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Save Current View</DialogTitle>
+                    <DialogDescription>
+                        Save the current filters and search term as a reusable view.
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="view-name">View Name</Label>
+                        <Input
+                            id="view-name"
+                            value={name}
+                            onChange={e => setName(e.target.value)}
+                            placeholder="Enter a name for this view"
+                            autoFocus
+                        />
+                    </div>
+                    {canManageGlobalViews && (
+                        <div className="space-y-2">
+                            <Label>View Scope</Label>
+                            <RadioGroup value={scope} onValueChange={value => setScope(value as 'user' | 'global')}>
+                                <div className="flex items-center space-x-2">
+                                    <RadioGroupItem value="user" id="scope-user" />
+                                    <Label htmlFor="scope-user" className="font-normal">
+                                        Personal View (only visible to you)
+                                    </Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                    <RadioGroupItem value="global" id="scope-global" />
+                                    <Label htmlFor="scope-global" className="font-normal">
+                                        Global View (visible to all users)
+                                    </Label>
+                                </div>
+                            </RadioGroup>
+                        </div>
+                    )}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSave} disabled={saving || !name.trim()}>
+                        {saving ? 'Saving...' : 'Save View'}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};

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

@@ -136,7 +136,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
                         return <DisplayComponent id="vendure:asset" value={value} />;
                     }
                     if (value !== null && typeof value === 'object') {
-                        return JSON.stringify(value);
+                        return <DisplayComponent id="vendure:json" value={value} />;
                     }
                     return value;
                 },
@@ -196,6 +196,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
                     />
                 ),
                 enableColumnFilter: false,
+                enableHiding: false,
                 cell: ({ row }) => {
                     return (
                         <Checkbox
@@ -224,6 +225,7 @@ function getRowActions(
         accessorKey: 'actions',
         header: () => <Trans>Actions</Trans>,
         enableColumnFilter: false,
+        enableHiding: false,
         cell: ({ row, table }) => {
             return (
                 <DropdownMenu>

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewsSheet } from './views-sheet.js';
+
+interface UserViewsSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export const UserViewsSheet: React.FC<UserViewsSheetProps> = ({ open, onOpenChange }) => {
+    return <ViewsSheet open={open} onOpenChange={onOpenChange} type="user" />;
+};