chore: tests for Searches component (ET-198) (#9576)

webui/react/src/components/ColumnPickerMenu.tsx

@@ -183,7 +183,7 @@ const ColumnPickerTab: React.FC<ColumnTabProps> = ({
   );
 
   return (
-    <div data-test-component="columnPickerTab">
+    <div data-test-component="columnPickerTab" data-testid="column-picker-tab">
       <Input
         allowClear
         autoFocus

webui/react/src/components/Searches/Searches.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import UIProvider, { DefaultTheme } from 'hew/Theme';
+import { BrowserRouter } from 'react-router-dom';
+
+import { ThemeProvider } from 'components/ThemeProvider';
+import { Project } from 'types';
+
+import Searches from './Searches';
+import { defaultProjectSettings } from './Searches.settings';
+
+const projectMock: Project = {
+  archived: false,
+  description: '',
+  id: 1849,
+  immutable: false,
+  lastExperimentStartedAt: '2024-06-03T19:33:38.731220Z',
+  name: 'test',
+  notes: [],
+  numActiveExperiments: 1,
+  numExperiments: 16,
+  state: 'UNSPECIFIED',
+  userId: 1354,
+  workspaceId: 1684,
+  workspaceName: '',
+};
+
+const expectedFilterString = JSON.stringify({
+  filterGroup: {
+    children: [
+      { children: [], conjunction: 'and', kind: 'group' },
+      {
+        columnName: 'searcherType',
+        kind: 'field',
+        location: 'LOCATION_TYPE_EXPERIMENT',
+        operator: '!=',
+        type: 'COLUMN_TYPE_TEXT',
+        value: 'single',
+      },
+    ],
+    conjunction: 'and',
+    kind: 'group',
+  },
+  showArchived: false,
+});
+
+const searchExperiments = vi.hoisted(() => vi.fn());
+
+vi.mock('services/api', () => ({
+  getProjectColumns: vi.fn().mockReturnValue([]),
+  getWorkspaces: vi.fn().mockResolvedValue({ workspaces: [] }),
+  resetUserSetting: () => Promise.resolve(),
+  searchExperiments,
+}));
+
+vi.mock('stores/userSettings', async (importOriginal) => {
+  const userSettings = await import('stores/userSettings');
+  const store = new userSettings.UserSettingsStore();
+
+  store.clear();
+
+  return {
+    ...(await importOriginal<typeof import('stores/userSettings')>()),
+    default: store,
+  };
+});
+
+vi.mock('hooks/useMobile', async (importOriginal) => {
+  return {
+    ...(await importOriginal<typeof import('hooks/useMobile')>()),
+    default: () => false,
+  };
+});
+
+const user = userEvent.setup();
+
+const setup = (numExperiments?: number) => {
+  searchExperiments.mockImplementation(() => {
+    return Promise.resolve({
+      experiments: [],
+      pagination: { total: numExperiments ?? 0 },
+    });
+  });
+
+  render(
+    <UIProvider theme={DefaultTheme.Light}>
+      <ThemeProvider>
+        <BrowserRouter>
+          <Searches project={projectMock} />
+        </BrowserRouter>
+      </ThemeProvider>
+    </UIProvider>,
+  );
+};
+
+describe('Searches', () => {
+  it('should display count', async () => {
+    setup(2);
+    expect(screen.getByText('Loading searches...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText('2 searches')).toBeInTheDocument();
+    });
+  });
+
+  it('should display empty state', async () => {
+    setup();
+    expect(screen.getByText('Loading searches...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText('0 searches')).toBeInTheDocument();
+      expect(screen.getByText('No Searches')).toBeInTheDocument();
+    });
+  });
+
+  it('should display column picker menu without tab selection', async () => {
+    setup();
+
+    await user.click(screen.getByTestId('columns-menu-button'));
+    expect(screen.queryByRole('tab')).not.toBeInTheDocument();
+    expect(screen.getByTestId('column-picker-tab')).toBeInTheDocument();
+  });
+
+  it('should have hidden filter to exclude single-trial experiments', () => {
+    setup();
+
+    expect(vi.mocked(searchExperiments)).toHaveBeenCalledWith(
+      expect.objectContaining({
+        filter: expectedFilterString,
+        limit: defaultProjectSettings.pageLimit,
+        offset: 0,
+        projectId: projectMock.id,
+        sort: defaultProjectSettings.sortString,
+      }),
+      { signal: expect.any(AbortSignal) },
+    );
+  });
+});

webui/react/src/components/Searches/Searches.tsx

@@ -21,6 +21,7 @@ import DataGrid, {
 } from 'hew/DataGrid/DataGrid';
 import { MenuItem } from 'hew/Dropdown';
 import Icon from 'hew/Icon';
+import Link from 'hew/Link';
 import Message from 'hew/Message';
 import Pagination from 'hew/Pagination';
 import Row from 'hew/Row';
@@ -31,7 +32,7 @@ import { useObservable } from 'micro-observables';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
-import { Error, NoExperiments } from 'components/exceptions';
+import { Error } from 'components/exceptions';
 import ExperimentActionDropdown from 'components/ExperimentActionDropdown';
 import { FilterFormStore, ROOT_ID } from 'components/FilterForm/components/FilterFormStore';
 import {
@@ -55,6 +56,7 @@ import useMobile from 'hooks/useMobile';
 import usePolling from 'hooks/usePolling';
 import { useSettings } from 'hooks/useSettings';
 import { useTypedParams } from 'hooks/useTypedParams';
+import { paths } from 'routes/utils';
 import { getProjectColumns, searchExperiments } from 'services/api';
 import {
   V1BulkExperimentFilters,
@@ -873,7 +875,16 @@ const Searches: React.FC<Props> = ({ project }) => {
       <div className={css.content} ref={contentRef}>
         {!isLoading && experiments.length === 0 ? (
           numFilters === 0 ? (
-            <NoExperiments />
+            <Message
+              action={
+                <Link external href={paths.docs('/get-started/webui-qs.html')}>
+                  Quick Start Guide
+                </Link>
+              }
+              description="Keep track of searches in a project by connecting up your code."
+              icon="experiment"
+              title="No Searches"
+            />
           ) : (
             <Message description="No results matching your filters" icon="search" />
           )