Merge pull request #1098 from objectstack-ai/copilot/fix-action-button-no-response

hotlong · web-flow · commit 7a20eafa2d3c · 2026-03-21T13:34:14.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- **List Toolbar Action Buttons Not Responding** (`apps/console`): Fixed a bug where schema-driven action buttons in the upper-right corner of the list view (rendered via `action:bar` with `locations: ['list_toolbar']`) did not respond to clicks. The root cause: the console `ObjectView` component rendered these action buttons via `SchemaRenderer` without wrapping them in an `ActionProvider`. This caused `useAction()` to fall back to a local `ActionRunner` with no handlers, toast, confirmation, or navigation capabilities — so clicks executed silently with no visible effect. Added `ActionProvider` with proper handlers (toast via Sonner, confirmation dialog, navigation via React Router, param collection dialog, and a generic API handler) to the console `ObjectView`, following the same pattern already used in `RecordDetailView`. Includes 4 new integration tests validating the full action chain (render, confirm, execute, cancel).
+
 - **CRM Seed Data Lookup References** (`examples/crm`): Fixed all CRM seed data files to use natural key (`name`) references for lookup fields instead of raw `id` values. The `SeedLoaderService` resolves foreign key references by the target object's `name` field (the default `externalId`), so seed data values like `order: "o1"` or `account: "2"` could not be resolved and were set to `null`. Updated all 8 affected data files (`account`, `contact`, `opportunity`, `order`, `order_item`, `opportunity_contact`, `project_task`, `event`) to use human-readable name references (e.g., `order: "ORD-2024-001"`, `product: "Workstation Pro Laptop"`, `account: "Salesforce Tower"`). This fixes the issue where Order and Product columns displayed as empty in the Order Item grid view.
 
 ### Added
diff --git a/apps/console/src/__tests__/ListToolbarActions.test.tsx b/apps/console/src/__tests__/ListToolbarActions.test.tsx
@@ -0,0 +1,221 @@
+/**
+ * ObjectView — List toolbar action button integration tests
+ *
+ * Validates that action buttons in the list toolbar header are wired to
+ * ActionProvider and respond to clicks:
+ * - Actions with confirmText show a confirmation dialog
+ * - Actions with params show a param collection dialog
+ * - Toast notifications are displayed on success
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { ObjectView } from '../components/ObjectView';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Mock sonner toast
+const mockToastSuccess = vi.fn();
+const mockToastError = vi.fn();
+vi.mock('sonner', () => ({
+  toast: Object.assign(vi.fn(), {
+    success: (...args: any[]) => mockToastSuccess(...args),
+    error: (...args: any[]) => mockToastError(...args),
+  }),
+}));
+
+// Mock child plugins to isolate ObjectView logic
+vi.mock('@object-ui/plugin-grid', () => ({
+  ObjectGrid: (props: any) => <div data-testid="object-grid">Grid View: {props.schema.objectName}</div>
+}));
+
+vi.mock('@object-ui/plugin-kanban', () => ({
+  ObjectKanban: (props: any) => <div data-testid="object-kanban">Kanban View</div>
+}));
+
+vi.mock('@object-ui/plugin-calendar', () => ({
+  ObjectCalendar: (props: any) => <div data-testid="object-calendar">Calendar View</div>
+}));
+
+vi.mock('@object-ui/plugin-list', () => ({
+  ListView: (props: any) => (
+    <div data-testid="list-view">
+      <div data-testid="object-grid">Grid View: {props.schema?.objectName}</div>
+      <button data-testid="list-row-click" onClick={() => props.onRowClick?.({ id: 'rec-1' })}>Click Row</button>
+    </div>
+  ),
+}));
+
+vi.mock('@object-ui/components', async (importOriginal) => {
+    const actual = await importOriginal<any>();
+    return {
+        ...actual,
+        cn: (...inputs: any[]) => inputs.filter(Boolean).join(' '),
+        Button: ({ children, onClick, title, ...rest }: any) => <button onClick={onClick} title={title} {...rest}>{children}</button>,
+        Empty: ({ children }: any) => <div data-testid="empty">{children}</div>,
+        EmptyTitle: ({ children }: any) => <div>{children}</div>,
+        EmptyDescription: ({ children }: any) => <div>{children}</div>,
+        DropdownMenu: ({ children }: any) => <div>{children}</div>,
+        DropdownMenuTrigger: ({ children }: any) => <>{children}</>,
+        DropdownMenuContent: ({ children }: any) => <div>{children}</div>,
+        DropdownMenuItem: ({ children, onClick }: any) => <button onClick={onClick}>{children}</button>,
+        DropdownMenuSeparator: () => <hr />,
+    };
+});
+
+// Mock React Router
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+    useParams: () => ({ objectName: 'account', appName: 'crm' }),
+    useSearchParams: () => [new URLSearchParams(), vi.fn()],
+    useNavigate: () => mockNavigate,
+}));
+
+// Mock auth — default admin so Create button is visible
+vi.mock('@object-ui/auth', () => ({
+    useAuth: () => ({ user: { id: 'u1', name: 'Admin', role: 'admin' } }),
+}));
+
+// ─── Test Data ───────────────────────────────────────────────────────────────
+
+const listToolbarActions = [
+  {
+    name: 'bulk_import',
+    label: 'Import Records',
+    icon: 'upload',
+    type: 'api' as const,
+    target: 'bulk_import',
+    locations: ['list_toolbar' as const],
+    confirmText: 'This will import records from CSV. Continue?',
+    refreshAfter: true,
+    successMessage: 'Records imported successfully',
+  },
+  {
+    name: 'export_all',
+    label: 'Export All',
+    icon: 'download',
+    type: 'url' as const,
+    target: '/api/export/accounts',
+    locations: ['list_toolbar' as const],
+  },
+];
+
+const mockObjects = [
+  {
+    name: 'account',
+    label: 'Account',
+    fields: {
+      name: { name: 'name', label: 'Name', type: 'text' },
+      industry: { name: 'industry', label: 'Industry', type: 'text' },
+    },
+    actions: listToolbarActions,
+    listViews: {
+      all: { label: 'All Accounts', type: 'grid', columns: ['name', 'industry'] },
+    },
+  },
+];
+
+function createMockDataSource() {
+  return {
+    find: vi.fn().mockResolvedValue({ data: [], total: 0 }),
+    findOne: vi.fn().mockResolvedValue(null),
+    create: vi.fn().mockResolvedValue({ id: '1' }),
+    update: vi.fn().mockResolvedValue({ id: '1' }),
+    delete: vi.fn().mockResolvedValue(true),
+    execute: vi.fn().mockResolvedValue({ success: true }),
+  } as any;
+}
+
+// ─── Tests ───────────────────────────────────────────────────────────────────
+
+describe('ObjectView — List toolbar action buttons', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Register mock components for SchemaRenderer to find
+    ComponentRegistry.register('object-grid', (props: any) => <div data-testid="object-grid">Grid View: {props.schema.objectName}</div>);
+    ComponentRegistry.register('list-view', (_props: any) => <div data-testid="list-view">List View</div>);
+  });
+
+  it('renders action buttons in the list toolbar', async () => {
+    const ds = createMockDataSource();
+    render(<ObjectView dataSource={ds} objects={mockObjects} onEdit={vi.fn()} />);
+
+    // Action buttons should be visible
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Import Records/i })).toBeInTheDocument();
+    });
+  });
+
+  it('shows confirmation dialog when action button with confirmText is clicked', async () => {
+    const user = userEvent.setup();
+    const ds = createMockDataSource();
+    render(<ObjectView dataSource={ds} objects={mockObjects} onEdit={vi.fn()} />);
+
+    // Wait for the Import Records button to render
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Import Records/i })).toBeInTheDocument();
+    });
+
+    // Click Import Records (has confirmText)
+    await user.click(screen.getByRole('button', { name: /Import Records/i }));
+
+    // Confirmation dialog should appear
+    await waitFor(() => {
+      expect(screen.getByText('This will import records from CSV. Continue?')).toBeInTheDocument();
+    });
+  });
+
+  it('calls dataSource.execute when confirmation is accepted', async () => {
+    const user = userEvent.setup();
+    const ds = createMockDataSource();
+    render(<ObjectView dataSource={ds} objects={mockObjects} onEdit={vi.fn()} />);
+
+    // Wait for button to render
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Import Records/i })).toBeInTheDocument();
+    });
+
+    // Click action button
+    await user.click(screen.getByRole('button', { name: /Import Records/i }));
+
+    // Wait for confirmation dialog
+    await waitFor(() => {
+      expect(screen.getByText('This will import records from CSV. Continue?')).toBeInTheDocument();
+    });
+
+    // Click Continue to confirm
+    await user.click(screen.getByRole('button', { name: /Continue/i }));
+
+    // dataSource.execute should be called
+    await waitFor(() => {
+      expect(ds.execute).toHaveBeenCalledWith('account', 'bulk_import', {});
+    }, { timeout: 3000 });
+  });
+
+  it('does not execute action when confirmation is cancelled', async () => {
+    const user = userEvent.setup();
+    const ds = createMockDataSource();
+    render(<ObjectView dataSource={ds} objects={mockObjects} onEdit={vi.fn()} />);
+
+    // Wait for button
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Import Records/i })).toBeInTheDocument();
+    });
+
+    // Click action button
+    await user.click(screen.getByRole('button', { name: /Import Records/i }));
+
+    // Wait for confirmation dialog
+    await waitFor(() => {
+      expect(screen.getByText('This will import records from CSV. Continue?')).toBeInTheDocument();
+    });
+
+    // Click Cancel
+    await user.click(screen.getByRole('button', { name: /Cancel/i }));
+
+    // dataSource.execute should NOT be called
+    await new Promise(r => setTimeout(r, 100));
+    expect(ds.execute).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/console/src/components/ObjectView.tsx b/apps/console/src/components/ObjectView.tsx
@@ -30,7 +30,11 @@ import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { usePermissions } from '@object-ui/permissions';
 import { useAuth } from '@object-ui/auth';
 import { useRealtimeSubscription, useConflictResolution } from '@object-ui/collaboration';
-import { useNavigationOverlay, SchemaRenderer } from '@object-ui/react';
+import { ActionProvider, useNavigationOverlay, SchemaRenderer } from '@object-ui/react';
+import { toast } from 'sonner';
+import { ActionConfirmDialog, type ConfirmDialogState } from './ActionConfirmDialog';
+import { ActionParamDialog, type ParamDialogState } from './ActionParamDialog';
+import type { ActionDef, ActionParamDef } from '@object-ui/core';
 
 /** Map view types to Lucide icons (Airtable-style) */
 const VIEW_TYPE_ICONS: Record<string, ComponentType<{ className?: string }>> = {
@@ -386,6 +390,61 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
         onRefresh: () => setRefreshKey(k => k + 1),
     });
 
+    // ─── ActionProvider handlers for schema-driven toolbar actions ──────
+    const currentUser = user
+        ? { id: user.id, name: user.name, avatar: user.image }
+        : FALLBACK_USER;
+
+    const [confirmState, setConfirmState] = useState<ConfirmDialogState>({ open: false, message: '' });
+    const [paramState, setParamState] = useState<ParamDialogState>({ open: false, params: [] });
+
+    const confirmHandler = useCallback((message: string, options?: { title?: string; confirmText?: string; cancelText?: string }) => {
+        return new Promise<boolean>((resolve) => {
+            setConfirmState({ open: true, message, options, resolve });
+        });
+    }, []);
+
+    const paramCollectionHandler = useCallback((params: ActionParamDef[]) => {
+        return new Promise<Record<string, any> | null>((resolve) => {
+            setParamState({ open: true, params, resolve });
+        });
+    }, []);
+
+    const toastHandler = useCallback((message: string, options?: { type?: string }) => {
+        if (options?.type === 'error') toast.error(message);
+        else toast.success(message);
+    }, []);
+
+    const navigateHandler = useCallback((url: string, options?: { external?: boolean; newTab?: boolean }) => {
+        if (options?.external || options?.newTab) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        } else {
+            navigate(url);
+        }
+    }, [navigate]);
+
+    const apiHandler = useCallback(async (action: ActionDef) => {
+        try {
+            const target = action.target || action.name;
+            const params = action.params || {};
+
+            // Generic list-level API handler: update/execute via dataSource
+            if (typeof dataSource.execute === 'function') {
+                await dataSource.execute(objectDef.name, target, params);
+            } else if (params.recordId && Object.keys(params).length > 1 && typeof dataSource.update === 'function') {
+                await dataSource.update(objectDef.name, params.recordId, params);
+            }
+
+            const shouldRefresh = action.refreshAfter !== false;
+            if (shouldRefresh) {
+                setRefreshKey(k => k + 1);
+            }
+            return { success: true, reload: shouldRefresh };
+        } catch (error) {
+            return { success: false, error: (error as Error).message };
+        }
+    }, [dataSource, objectDef.name]);
+
     // Real-time: auto-refresh when server reports data changes
     const { lastMessage: realtimeMessage } = useRealtimeSubscription({
         channel: `object:${objectDef.name}`,
@@ -678,6 +737,14 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
     }), [objectDef.name, onEdit, activeView?.showSearch, activeView?.showFilters, activeView?.showSort, navigate, viewId, isAdmin]);
 
     return (
+        <ActionProvider
+            context={{ objectName: objectDef.name, user: currentUser }}
+            onConfirm={confirmHandler}
+            onToast={toastHandler}
+            onNavigate={navigateHandler}
+            onParamCollection={paramCollectionHandler}
+            handlers={{ api: apiHandler }}
+        >
         <div className="h-full flex flex-col bg-background min-w-0 overflow-hidden">
              {/* 1. Header with breadcrumb + description */}
              <div className="flex justify-between items-center py-2.5 sm:py-3 px-3 sm:px-4 border-b shrink-0 bg-background z-10">
@@ -882,5 +949,12 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
              </NavigationOverlay>
              )}
         </div>
+        <ActionConfirmDialog state={confirmState} onOpenChange={(open) => {
+            if (!open) setConfirmState({ open: false, message: '' });
+        }} />
+        <ActionParamDialog state={paramState} onOpenChange={(open) => {
+            if (!open) setParamState({ open: false, params: [] });
+        }} />
+        </ActionProvider>
     );
 }
