Merge branch 'main' into RHOAIENG-51780-display-external-vector-stores-table-in-AAE-tab

Author: jharan1

frontend/src/concepts/mlflow/MlflowExperimentSelector.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import SearchSelector from '#~/components/searchSelector/SearchSelector';
+import useTableColumnSort from '#~/components/table/useTableColumnSort';
+import { MlflowExperiment, MlflowSelectorStatus } from './types';
+import { mlflowExperimentColumns } from './columns';
+import useMlflowExperiments from './useMlflowExperiments';
+import MlflowExperimentTable from './MlflowExperimentTable';
+
+type MlflowExperimentSelectorProps = {
+  workspace: string;
+  filter?: string;
+  selection?: string;
+  onSelect: (experiment: MlflowExperiment) => void;
+  onStatusChange?: (status: MlflowSelectorStatus) => void;
+};
+
+const MlflowExperimentSelector: React.FC<MlflowExperimentSelectorProps> = ({
+  workspace,
+  filter,
+  selection,
+  onSelect,
+  onStatusChange,
+}) => {
+  const { data: experiments, loaded, error } = useMlflowExperiments({ workspace, filter });
+  const [search, setSearch] = React.useState('');
+
+  const statusCallbackRef = React.useRef(onStatusChange);
+  statusCallbackRef.current = onStatusChange;
+
+  React.useEffect(() => {
+    statusCallbackRef.current?.({ loaded, error });
+  }, [loaded, error]);
+
+  const filtered = React.useMemo(() => {
+    if (!search) {
+      return experiments;
+    }
+    const lower = search.toLowerCase();
+    return experiments.filter((e) => e.name.toLowerCase().includes(lower));
+  }, [experiments, search]);
+
+  const { transformData, getColumnSort } = useTableColumnSort(mlflowExperimentColumns, [], 0);
+  const sorted = transformData(filtered);
+  const experimentCount = experiments.length;
+  const experimentLabel = experimentCount === 1 ? 'experiment' : 'experiments';
+
+  let toggleLabel = 'Select an experiment';
+  if (error) {
+    toggleLabel = 'Error loading experiments';
+  } else if (!loaded) {
+    toggleLabel = 'Loading experiments';
+  } else if (experiments.length === 0) {
+    toggleLabel = 'No experiments available';
+  } else if (selection) {
+    toggleLabel = selection;
+  }
+
+  return (
+    <SearchSelector
+      dataTestId="mlflow-experiment-selector"
+      onSearchChange={setSearch}
+      onSearchClear={() => setSearch('')}
+      searchValue={search}
+      isLoading={!loaded && !error}
+      isFullWidth
+      toggleContent={toggleLabel}
+      searchHelpText={`Type a name to search your ${experimentCount} ${experimentLabel}.`}
+      isDisabled={!loaded || !!error || experimentCount === 0}
+    >
+      {({ menuClose }) => (
+        <MlflowExperimentTable
+          data={sorted}
+          loaded={loaded}
+          onSelect={onSelect}
+          menuClose={menuClose}
+          onClearSearch={() => setSearch('')}
+          getColumnSort={getColumnSort}
+        />
+      )}
+    </SearchSelector>
+  );
+};
+
+export default MlflowExperimentSelector;

frontend/src/concepts/mlflow/MlflowExperimentTable.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { EmptyStateVariant, MenuContent } from '@patternfly/react-core';
+import { TableVariant, Td, Tr } from '@patternfly/react-table';
+import { TableBase } from '#~/components/table';
+import DashboardEmptyTableView from '#~/concepts/dashboard/DashboardEmptyTableView';
+import { relativeTime } from '#~/utilities/time';
+import { MlflowExperiment } from './types';
+import { mlflowExperimentColumns } from './columns';
+import { EXPERIMENT_NAME_COLUMN_WIDTH, EXPERIMENT_UPDATED_COLUMN_WIDTH } from './const';
+
+type RowProps = {
+  experiment: MlflowExperiment;
+  onSelect: () => void;
+  menuClose: () => void;
+};
+
+const MlflowExperimentRow: React.FC<RowProps> = ({ experiment, onSelect, menuClose }) => {
+  const handleClick = React.useCallback(() => {
+    onSelect();
+    menuClose();
+  }, [onSelect, menuClose]);
+
+  return (
+    <Tr onRowClick={handleClick} isClickable>
+      <Td width={EXPERIMENT_NAME_COLUMN_WIDTH} modifier="truncate" tooltip={null}>
+        {experiment.name}
+      </Td>
+      <Td width={EXPERIMENT_UPDATED_COLUMN_WIDTH}>
+        {experiment.lastUpdateTime
+          ? relativeTime(Date.now(), new Date(experiment.lastUpdateTime).getTime())
+          : '-'}
+      </Td>
+    </Tr>
+  );
+};
+
+type MlflowExperimentTableProps = {
+  data: MlflowExperiment[];
+  loaded: boolean;
+  onSelect: (experiment: MlflowExperiment) => void;
+  menuClose: () => void;
+  onClearSearch: () => void;
+  getColumnSort: React.ComponentProps<typeof TableBase>['getColumnSort'];
+};
+
+const MlflowExperimentTable: React.FC<MlflowExperimentTableProps> = ({
+  data,
+  loaded,
+  onSelect,
+  menuClose,
+  onClearSearch,
+  getColumnSort,
+}) => {
+  const renderRow = React.useCallback(
+    (row: MlflowExperiment) => (
+      <MlflowExperimentRow
+        key={row.id}
+        experiment={row}
+        onSelect={() => onSelect(row)}
+        menuClose={menuClose}
+      />
+    ),
+    [onSelect, menuClose],
+  );
+
+  return (
+    <MenuContent>
+      <TableBase
+        itemCount={data.length}
+        loading={!loaded}
+        emptyTableView={
+          <DashboardEmptyTableView
+            hasIcon={false}
+            onClearFilters={onClearSearch}
+            variant={EmptyStateVariant.xs}
+          />
+        }
+        data-testid="mlflow-experiment-selector-table-list"
+        borders={false}
+        variant={TableVariant.compact}
+        columns={mlflowExperimentColumns}
+        data={data}
+        rowRenderer={renderRow}
+        getColumnSort={getColumnSort}
+      />
+    </MenuContent>
+  );
+};
+
+export default MlflowExperimentTable;

frontend/src/concepts/mlflow/__tests__/MlflowExperimentSelector.spec.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MlflowExperimentSelector from '#~/concepts/mlflow/MlflowExperimentSelector';
+import useMlflowExperiments from '#~/concepts/mlflow/useMlflowExperiments';
+import useTableColumnSort from '#~/components/table/useTableColumnSort';
+
+jest.mock('#~/concepts/mlflow/useMlflowExperiments');
+jest.mock('#~/components/table/useTableColumnSort');
+jest.mock('#~/concepts/mlflow/MlflowExperimentTable', () => {
+  const MockMlflowExperimentTable = (props: { data: unknown[] }) => (
+    <div data-testid="mlflow-experiment-table">{props.data.length}</div>
+  );
+  MockMlflowExperimentTable.displayName = 'MockMlflowExperimentTable';
+  return MockMlflowExperimentTable;
+});
+jest.mock('#~/components/searchSelector/SearchSelector', () => {
+  const MockSearchSelector = ({
+    toggleContent,
+    searchHelpText,
+    isLoading,
+    isDisabled,
+    children,
+  }: {
+    toggleContent: string;
+    searchHelpText: string;
+    isLoading: boolean;
+    isDisabled: boolean;
+    children: (args: { menuClose: () => void }) => React.ReactNode;
+  }) => (
+    <div
+      data-testid="mlflow-search-selector"
+      data-loading={String(isLoading)}
+      data-disabled={String(isDisabled)}
+    >
+      <div data-testid="selector-toggle-content">{toggleContent}</div>
+      <div data-testid="selector-help-text">{searchHelpText}</div>
+      {children({ menuClose: () => undefined })}
+    </div>
+  );
+  MockSearchSelector.displayName = 'MockSearchSelector';
+  return MockSearchSelector;
+});
+
+const useMlflowExperimentsMock = jest.mocked(useMlflowExperiments);
+const useTableColumnSortMock = jest.mocked(useTableColumnSort);
+
+const defaultExperiments = [
+  {
+    id: 'exp-1',
+    name: 'Experiment A',
+  },
+  {
+    id: 'exp-2',
+    name: 'Experiment B',
+  },
+];
+
+const renderSelector = (props?: Partial<React.ComponentProps<typeof MlflowExperimentSelector>>) =>
+  render(
+    <MlflowExperimentSelector
+      workspace="test-workspace"
+      onSelect={jest.fn()}
+      selection={undefined}
+      {...props}
+    />,
+  );
+
+describe('MlflowExperimentSelector', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useMlflowExperimentsMock.mockReturnValue({
+      data: defaultExperiments,
+      loaded: true,
+      error: undefined,
+      refresh: jest.fn(),
+    });
+    useTableColumnSortMock.mockReturnValue({
+      transformData: (data) => data,
+      getColumnSort: jest.fn(),
+      isCustomOrder: false,
+    });
+  });
+
+  it('should show loading toggle content while experiments are loading', () => {
+    useMlflowExperimentsMock.mockReturnValue({
+      data: [],
+      loaded: false,
+      error: undefined,
+      refresh: jest.fn(),
+    });
+
+    renderSelector();
+
+    expect(screen.getByTestId('selector-toggle-content')).toHaveTextContent('Loading experiments');
+    expect(screen.getByTestId('mlflow-search-selector')).toHaveAttribute('data-loading', 'true');
+    expect(screen.getByTestId('mlflow-search-selector')).toHaveAttribute('data-disabled', 'true');
+  });
+
+  it('should show error toggle content when experiments fail to load', () => {
+    useMlflowExperimentsMock.mockReturnValue({
+      data: [],
+      loaded: false,
+      error: new Error('failed to load'),
+      refresh: jest.fn(),
+    });
+
+    renderSelector();
+
+    expect(screen.getByTestId('selector-toggle-content')).toHaveTextContent(
+      'Error loading experiments',
+    );
+    expect(screen.getByTestId('mlflow-search-selector')).toHaveAttribute('data-loading', 'false');
+    expect(screen.getByTestId('mlflow-search-selector')).toHaveAttribute('data-disabled', 'true');
+  });
+
+  it('should show empty-state toggle content when no experiments are available', () => {
+    useMlflowExperimentsMock.mockReturnValue({
+      data: [],
+      loaded: true,
+      error: undefined,
+      refresh: jest.fn(),
+    });
+
+    renderSelector();
+
+    expect(screen.getByTestId('selector-toggle-content')).toHaveTextContent(
+      'No experiments available',
+    );
+    expect(screen.getByTestId('selector-help-text')).toHaveTextContent(
+      'Type a name to search your 0 experiments.',
+    );
+  });
+
+  it('should show selected experiment when provided', () => {
+    renderSelector({ selection: 'Experiment B' });
+
+    expect(screen.getByTestId('selector-toggle-content')).toHaveTextContent('Experiment B');
+  });
+
+  it('should use singular search help text when there is one experiment', () => {
+    useMlflowExperimentsMock.mockReturnValue({
+      data: [{ id: 'exp-1', name: 'Experiment A' }],
+      loaded: true,
+      error: undefined,
+      refresh: jest.fn(),
+    });
+
+    renderSelector();
+
+    expect(screen.getByTestId('selector-help-text')).toHaveTextContent(
+      'Type a name to search your 1 experiment.',
+    );
+  });
+
+  it('should emit status changes to parent through onStatusChange', () => {
+    const onStatusChange = jest.fn();
+    const error = new Error('api error');
+    useMlflowExperimentsMock.mockReturnValue({
+      data: [],
+      loaded: true,
+      error,
+      refresh: jest.fn(),
+    });
+
+    renderSelector({ onStatusChange });
+
+    expect(onStatusChange).toHaveBeenCalledTimes(1);
+    expect(onStatusChange).toHaveBeenCalledWith({ loaded: true, error });
+  });
+});