Fix empty Dashboard selector

src/platform/packages/shared/dashboards/dashboards-selector/components/dashboards_selector.test.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { DashboardsSelector } from './dashboards_selector';
-import { contentManagementMock } from '@kbn/content-management-plugin/public/mocks';
+import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import userEvent from '@testing-library/user-event';
 
 const MOCK_FIRST_DASHBOARD_ID = 'dashboard-1';
@@ -20,86 +20,125 @@ const MOCK_SECOND_DASHBOARD_TITLE = 'Second Dashboard';
 const MOCK_PLACEHOLDER = 'Select a dashboard';
 
 const MOCK_FIRST_DASHBOARD = {
-  status: 'success',
   id: MOCK_FIRST_DASHBOARD_ID,
-  attributes: { title: MOCK_FIRST_DASHBOARD_TITLE },
-  references: [],
+  isManaged: false,
+  title: MOCK_FIRST_DASHBOARD_TITLE,
 };
 
 const MOCK_SECOND_DASHBOARD = {
-  status: 'success',
   id: MOCK_SECOND_DASHBOARD_ID,
-  attributes: { title: MOCK_SECOND_DASHBOARD_TITLE },
-  references: [],
+  isManaged: false,
+  title: MOCK_SECOND_DASHBOARD_TITLE,
 };
 
-const mockFetchDashboard = jest.fn();
-const mockFetchDashboards = jest
-  .fn()
-  .mockResolvedValue([MOCK_FIRST_DASHBOARD, MOCK_SECOND_DASHBOARD]);
+const mockSearchExecute = jest.fn((context: any) => {
+  if (context.onResults) {
+    context.onResults([MOCK_FIRST_DASHBOARD, MOCK_SECOND_DASHBOARD]);
+  }
+});
+
+const mockGetByIdExecute = jest.fn((context: any) => {
+  if (context.onResults && context.ids) {
+    const requestedDashboards = context.ids
+      .map((id: string) => {
+        if (id === MOCK_FIRST_DASHBOARD_ID) return MOCK_FIRST_DASHBOARD;
+        if (id === MOCK_SECOND_DASHBOARD_ID) return MOCK_SECOND_DASHBOARD;
+        return null;
+      })
+      .filter(Boolean);
+    context.onResults(requestedDashboards);
+  }
+});
 
-// Mock the dashboard service
-jest.mock('../services/dashboard_service', () => ({
-  dashboardServiceProvider: jest.fn(() => ({
-    fetchDashboards: (options: { limit: number; text: string }) => mockFetchDashboards(options),
-    fetchDashboard: (id: string) => mockFetchDashboard(id),
-  })),
-}));
+const mockSearchAction = {
+  execute: mockSearchExecute,
+};
+
+const mockGetDashboardsByIdsAction = {
+  execute: mockGetByIdExecute,
+};
+
+const mockGetAction = jest.fn((actionId: string) => {
+  if (actionId === 'getDashboardsByIdsAction') {
+    return Promise.resolve(mockGetDashboardsByIdsAction);
+  }
+  return Promise.resolve(mockSearchAction);
+});
 
 const mockOnChange = jest.fn();
 
 describe('DashboardsSelector', () => {
   beforeEach(() => {
-    mockFetchDashboard.mockResolvedValueOnce(MOCK_FIRST_DASHBOARD);
-    mockFetchDashboard.mockResolvedValueOnce(MOCK_SECOND_DASHBOARD);
+    jest.clearAllMocks();
+    mockGetAction.mockImplementation((actionId: string) => {
+      if (actionId === 'getDashboardsByIdsAction') {
+        return Promise.resolve(mockGetDashboardsByIdsAction);
+      }
+      return Promise.resolve(mockSearchAction);
+    });
+    mockSearchExecute.mockImplementation((context: any) => {
+      if (context.onResults) {
+        context.onResults([MOCK_FIRST_DASHBOARD, MOCK_SECOND_DASHBOARD]);
+      }
+    });
+    mockGetByIdExecute.mockImplementation((context: any) => {
+      if (context.onResults && context.ids) {
+        const requestedDashboards = context.ids
+          .map((id: string) => {
+            if (id === MOCK_FIRST_DASHBOARD_ID) return MOCK_FIRST_DASHBOARD;
+            if (id === MOCK_SECOND_DASHBOARD_ID) return MOCK_SECOND_DASHBOARD;
+            return null;
+          })
+          .filter(Boolean);
+        context.onResults(requestedDashboards);
+      }
+    });
   });
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  const contentManagement = contentManagementMock.createStartContract();
+  const mockUiActions = {
+    getAction: mockGetAction,
+  } as unknown as UiActionsStart;
 
   it('renders the component', () => {
     render(
       <DashboardsSelector
-        contentManagement={contentManagement}
+        uiActions={mockUiActions}
         dashboardsFormData={[]}
         onChange={mockOnChange}
         placeholder={MOCK_PLACEHOLDER}
       />
     );
 
-    // Check that the component renders with the placeholder text
     expect(screen.getByTestId('dashboardsSelector')).toBeInTheDocument();
     expect(screen.getByPlaceholderText(MOCK_PLACEHOLDER)).toBeInTheDocument();
   });
 
   it('displays selected dashboard titles from dashboardsFormData', async () => {
     render(
       <DashboardsSelector
-        contentManagement={contentManagement}
+        uiActions={mockUiActions}
         dashboardsFormData={[{ id: MOCK_FIRST_DASHBOARD_ID }, { id: MOCK_SECOND_DASHBOARD_ID }]}
         onChange={mockOnChange}
         placeholder={MOCK_PLACEHOLDER}
       />
     );
 
-    // Wait for the dashboard titles to be fetched and displayed
     await waitFor(() => {
       expect(screen.getByText(MOCK_FIRST_DASHBOARD_TITLE)).toBeInTheDocument();
       expect(screen.getByText(MOCK_SECOND_DASHBOARD_TITLE)).toBeInTheDocument();
     });
 
-    // Verify that fetchDashboard was called for each dashboard ID
-    expect(mockFetchDashboard).toHaveBeenCalledWith(MOCK_FIRST_DASHBOARD_ID);
-    expect(mockFetchDashboard).toHaveBeenCalledWith(MOCK_SECOND_DASHBOARD_ID);
+    expect(mockGetAction).toHaveBeenCalledWith('getDashboardsByIdsAction');
   });
 
   it('debounces and triggers dashboard search with user input in the ComboBox', async () => {
     render(
       <DashboardsSelector
-        contentManagement={contentManagement}
+        uiActions={mockUiActions}
         dashboardsFormData={[]}
         onChange={mockOnChange}
         placeholder={MOCK_PLACEHOLDER}
@@ -109,13 +148,17 @@ describe('DashboardsSelector', () => {
     const searchInput = screen.getByPlaceholderText(MOCK_PLACEHOLDER);
     await userEvent.type(searchInput, MOCK_FIRST_DASHBOARD_TITLE);
 
-    // Assert that fetchDashboards was called with the correct search value
-    // Wait for the next tick to allow state update and effect to run
     await waitFor(() => {
       expect(searchInput).toHaveValue(MOCK_FIRST_DASHBOARD_TITLE);
 
-      expect(mockFetchDashboards).toHaveBeenCalledWith(
-        expect.objectContaining({ limit: 100, text: `${MOCK_FIRST_DASHBOARD_TITLE}*` })
+      expect(mockSearchExecute).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search: {
+            search: MOCK_FIRST_DASHBOARD_TITLE,
+            per_page: 100,
+          },
+          trigger: { id: 'searchDashboards' },
+        })
       );
 
       expect(screen.getByText(MOCK_FIRST_DASHBOARD_TITLE)).toBeInTheDocument();
@@ -125,7 +168,7 @@ describe('DashboardsSelector', () => {
   it('fetches dashboard list when combobox is focused', async () => {
     render(
       <DashboardsSelector
-        contentManagement={contentManagement}
+        uiActions={mockUiActions}
         dashboardsFormData={[]}
         onChange={mockOnChange}
         placeholder={MOCK_PLACEHOLDER}
@@ -135,61 +178,68 @@ describe('DashboardsSelector', () => {
     fireEvent.focus(searchInput);
 
     await waitFor(() => {
-      expect(mockFetchDashboards).toHaveBeenCalledWith(expect.objectContaining({ limit: 100 }));
+      expect(mockSearchExecute).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search: {
+            search: '',
+            per_page: 100,
+          },
+        })
+      );
     });
   });
 
   it('does not fetch dashboard list when combobox is not focused', async () => {
     render(
       <DashboardsSelector
-        contentManagement={contentManagement}
+        uiActions={mockUiActions}
         dashboardsFormData={[]}
         onChange={mockOnChange}
         placeholder={MOCK_PLACEHOLDER}
       />
     );
 
-    expect(mockFetchDashboards).not.toHaveBeenCalled();
+    expect(mockSearchExecute).not.toHaveBeenCalled();
   });
 
   it('dispatches selected dashboards on change', async () => {
     render(
       <DashboardsSelector
-        contentManagement={contentManagement}
+        uiActions={mockUiActions}
         dashboardsFormData={[{ id: MOCK_FIRST_DASHBOARD_ID }]}
         onChange={mockOnChange}
         placeholder={MOCK_PLACEHOLDER}
       />
     );
 
-    // Click on the combobox to open it
     const searchInput = screen.getByPlaceholderText(MOCK_PLACEHOLDER);
     fireEvent.focus(searchInput);
 
-    // Wait for the dropdown to open and options to load
     await waitFor(() => {
-      expect(mockFetchDashboards).toHaveBeenCalledWith(
-        expect.objectContaining({ limit: 100, text: '*' })
+      expect(mockSearchExecute).toHaveBeenCalled();
+      expect(mockSearchExecute).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          search: {
+            search: '',
+            per_page: 100,
+          },
+        })
       );
     });
 
-    // Wait for the second dashboard option to appear in the dropdown
     await waitFor(() => {
       expect(screen.getByText(MOCK_SECOND_DASHBOARD_TITLE)).toBeInTheDocument();
     });
 
-    // Click on the second dashboard option to select it
     await userEvent.click(screen.getByText(MOCK_SECOND_DASHBOARD_TITLE));
 
-    // Verify that the onChange callback was called with both dashboards
     await waitFor(() => {
       expect(mockOnChange).toHaveBeenCalledWith([
         { label: MOCK_FIRST_DASHBOARD_TITLE, value: MOCK_FIRST_DASHBOARD_ID },
         { label: MOCK_SECOND_DASHBOARD_TITLE, value: MOCK_SECOND_DASHBOARD_ID },
       ]);
     });
 
-    // Verify that both selected options are now displayed
     expect(screen.getByText(MOCK_FIRST_DASHBOARD_TITLE)).toBeInTheDocument();
     expect(screen.getByText(MOCK_SECOND_DASHBOARD_TITLE)).toBeInTheDocument();
   });