feat(autorag,automl): Updates AutoRAG and AutoML experiments UX so the main “create” action appears in the page header next to the project selector. (opendatahub-io#6929)

* fix(autorag): refresh AutoRAG marketing copy and create CTA label

- Replace configure/experiments intro with test-and-tune RAG quality messaging.
- Rename experiments list primary action to 'Create RAG optimization run'.
- Update AutoragConfigurePage unit tests for the new description text.

* fix(autorag): header create action and list status sync

- Move Create RAG optimization run beside project selector; show only when the
  runs list is loaded and non-empty (empty state unchanged).
- Propagate list status from AutoragExperiments via onExperimentsListStatus;
  re-notify on namespace changes so project switches keep the button in sync.
- Drop parent reset on namespace that ran after child effects and left the
  header action stuck hidden.
- Add regression test for re-notification when namespace changes with stable
  loaded/hasExperiments flags.

* feat(automl): header Create AutoML experiment and list status sync

- Move primary create action beside project selector; show only when runs list
  is loaded and non-empty (empty state CTA unchanged).
- Report list status from AutomlExperiments via onExperimentsListStatus with
  namespace in effect deps for correct project switches.
- Remove toolbar create button from AutomlRunsTable usage.
- Add unit tests for AutomlExperiments including list-status re-notification.

* fix(autorag,automl): namespace list-status reset and test mock isolation

- AutoragExperimentsPage: clear experimentsListStatus on namespace change via
  useLayoutEffect so the header CTA cannot reflect the prior project before
  paint, without reordering after the child useEffect.
- AutomlExperiments.spec: use resetAllMocks and default
  getGenericErrorCode to undefined between tests to avoid order-dependent
  error-code assertions.

* fix(autorag,automl): stabilize list-status effect deps and dedupe notify

- Use hasLoadError boolean instead of loadError in experiments list-status
  useEffect dependencies.
- Track last (namespace, hasLoadError, loaded, hasExperiments) in a ref to avoid
  redundant parent updates when identity churns on error objects.

Made-with: Cursor

* fix(automl): align experiments page with AutoRAG header state; add page tests

- AutomlExperimentsPage: useLayoutEffect to clear list status on namespace
  change (match AutoragExperimentsPage); document rationale.
- AutoragExperimentsPage & AutomlExperimentsPage: pass setExperimentsListStatus
  directly (redundant useCallback removal).
- Add AutoragExperimentsPage.spec and AutomlExperimentsPage.spec for header
  primary CTA visibility vs list status and empty/invalid project cases.

Made-with: Cursor

* test(autorag,automl): experiments page mocks useEffect + deps, namespace tests

- AutomlExperimentsPage.spec: mock AutomlExperiments with useEffect (prod)
  and [namespace, loaded, hasExperiments] deps to avoid notify spam.
- AutoragExperimentsPage.spec: same mock pattern, uiAtPath with route key,
  notify log, namespace-switch and layout-before-passive coverage.

Made-with: Cursor

* fix(automl,autorag): align empty-state CTA with optimization run wording

Update empty-state create buttons to use product-specific optimization run labels for AutoML and AutoRAG, and adjust tests to match the new UX copy.

Made-with: Cursor

* fix(autorag): update empty-state body copy

Replace the AutoRAG experiments empty-state description with copy that
emphasizes testing retrieval and model configurations.

Made-with: Cursor

* fix(automl,autorag): align empty-state and create-button copy

- AutoML: match empty-state body to optimization messaging; rename header
  create action to Create AutoML optimization run.
- AutoRAG: rename empty-state create action to Create RAG optimization run.

Made-with: Cursor

* fix(automl): refine experiments empty-state body copy

Describe AutoML as testing model configurations for classification,
regression, and time series instead of retrieval-focused wording.

Made-with: Cursor

Author: jkyaw

packages/automl/frontend/src/app/components/empty-states/EmptyExperimentsState.tsx

@@ -29,8 +29,8 @@ const EmptyExperimentsState: React.FC<EmptyExperimentsStateProps> = ({
       headingLevel="h2"
     >
       <EmptyStateBody>
-        To get started, create an AutoML experiment to configure and run your machine learning
-        workflow.
+        Test different model configurations to find the best-performing solution for classification,
+        regression, and time series problems.
       </EmptyStateBody>
 
       <EmptyStateFooter>
@@ -40,7 +40,7 @@ const EmptyExperimentsState: React.FC<EmptyExperimentsStateProps> = ({
             variant="primary"
             onClick={() => navigate(createExperimentRoute)}
           >
-            Create AutoML experiment
+            Create AutoML optimization run
           </Button>
         </EmptyStateActions>
       </EmptyStateFooter>

packages/automl/frontend/src/app/components/empty-states/__tests__/EmptyExperimentsState.spec.tsx

@@ -26,7 +26,7 @@ describe('EmptyExperimentsState', () => {
     expect(screen.getByText('No experiments yet')).toBeInTheDocument();
     expect(
       screen.getByText(
-        'To get started, create an AutoML experiment to configure and run your machine learning workflow.',
+        'Test different model configurations to find the best-performing solution for classification, regression, and time series problems.',
       ),
     ).toBeInTheDocument();
   });
@@ -39,7 +39,7 @@ describe('EmptyExperimentsState', () => {
     );
 
     expect(screen.getByTestId('create-experiment-button')).toHaveTextContent(
-      'Create AutoML experiment',
+      'Create AutoML optimization run',
     );
   });
 

packages/automl/frontend/src/app/components/experiments/AutomlExperiments.tsx

@@ -1,13 +1,6 @@
-import {
-  Alert,
-  Bullseye,
-  Button,
-  Spinner,
-  ToolbarGroup,
-  ToolbarItem,
-} from '@patternfly/react-core';
+import { Alert, Bullseye, Spinner } from '@patternfly/react-core';
 import React from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useParams } from 'react-router';
 import { getGenericErrorCode } from '@odh-dashboard/internal/api/errorUtils';
 import UnauthorizedError from '@odh-dashboard/internal/pages/UnauthorizedError';
 import { AutomlRunsTable } from '~/app/components/AutomlRunsTable';
@@ -18,6 +11,21 @@ import { usePipelineDefinitions } from '~/app/hooks/usePipelineDefinitions';
 import { usePipelineRuns } from '~/app/hooks/usePipelineRuns';
 import { automlCreatePathname } from '~/app/utilities/routes';
 
+export type AutomlExperimentsListStatus = {
+  /** True once pipeline definitions and runs have finished loading without a blocking list error. */
+  loaded: boolean;
+  /** True when at least one experiment (run) exists; false for empty state and error states. */
+  hasExperiments: boolean;
+};
+
+type AutomlExperimentsProps = {
+  /**
+   * Fired when list loading / emptiness changes so the host page can tune chrome (e.g. hide the
+   * header "Create AutoML optimization run" action while the centered empty state is shown).
+   */
+  onExperimentsListStatus?: (status: AutomlExperimentsListStatus) => void;
+};
+
 /**
  * Extracts HTTP status from Error.message when handleRestFailures (mod-arch-core)
  * has flattened AxiosError to a plain Error, so 403/404/503 branches can still run.
@@ -38,8 +46,7 @@ function parseErrorStatus(error: Error): number | undefined {
  * Main experiments list page for AutoML. Renders pipeline runs in a paginated table,
  * handles loading/error states (403, 404, 503), and shows empty state when no experiments exist.
  */
-function AutomlExperiments(): React.JSX.Element {
-  const navigate = useNavigate();
+function AutomlExperiments({ onExperimentsListStatus }: AutomlExperimentsProps): React.JSX.Element {
   const { namespace } = useParams();
 
   const effectiveNamespace = namespace ?? '';
@@ -58,18 +65,58 @@ function AutomlExperiments(): React.JSX.Element {
 
   const loaded = defsLoaded && runsLoaded;
   const loadError = defsError || runsError;
+  const hasLoadError = Boolean(loadError);
+
+  const hasExperiments = totalSize > 0;
 
-  const handleCreateClick = React.useCallback(() => {
-    navigate(`${automlCreatePathname}/${effectiveNamespace}`);
-  }, [navigate, effectiveNamespace]);
+  const onListStatusRef = React.useRef(onExperimentsListStatus);
+  onListStatusRef.current = onExperimentsListStatus;
 
-  const createButton = (
-    <Button variant="primary" onClick={handleCreateClick}>
-      Create AutoML experiment
-    </Button>
-  );
+  const prevListStatusRef = React.useRef<{
+    effectiveNamespace: string;
+    hasLoadError: boolean;
+    loaded: boolean;
+    hasExperiments: boolean;
+  } | null>(null);
 
-  const hasExperiments = totalSize > 0;
+  React.useEffect(() => {
+    const notify = onListStatusRef.current;
+    if (!notify) {
+      return;
+    }
+
+    let nextLoaded: boolean;
+    let nextHasExperiments: boolean;
+    if (hasLoadError) {
+      nextLoaded = true;
+      nextHasExperiments = false;
+    } else if (!loaded) {
+      nextLoaded = false;
+      nextHasExperiments = false;
+    } else {
+      nextLoaded = true;
+      nextHasExperiments = hasExperiments;
+    }
+
+    const prev = prevListStatusRef.current;
+    if (
+      prev &&
+      prev.effectiveNamespace === effectiveNamespace &&
+      prev.hasLoadError === hasLoadError &&
+      prev.loaded === loaded &&
+      prev.hasExperiments === hasExperiments
+    ) {
+      return;
+    }
+
+    notify({ loaded: nextLoaded, hasExperiments: nextHasExperiments });
+    prevListStatusRef.current = {
+      effectiveNamespace,
+      hasLoadError,
+      loaded,
+      hasExperiments,
+    };
+  }, [effectiveNamespace, hasLoadError, loaded, hasExperiments]);
 
   const errorCode = loadError
     ? (getGenericErrorCode(loadError) ??
@@ -119,11 +166,6 @@ function AutomlExperiments(): React.JSX.Element {
       pageSize={pageSize}
       onPageChange={setPage}
       onPerPageChange={setPageSize}
-      toolbarContent={
-        <ToolbarGroup align={{ default: 'alignEnd' }} style={{ flex: 1 }}>
-          <ToolbarItem>{createButton}</ToolbarItem>
-        </ToolbarGroup>
-      }
     />
   );
 }

packages/automl/frontend/src/app/components/experiments/__tests__/AutomlExperiments.spec.tsx

@@ -0,0 +1,218 @@
+/* eslint-disable camelcase -- PipelineRun type uses snake_case */
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { useParams } from 'react-router';
+import AutomlExperiments from '~/app/components/experiments/AutomlExperiments';
+import { usePipelineDefinitions } from '~/app/hooks/usePipelineDefinitions';
+import { usePipelineRuns } from '~/app/hooks/usePipelineRuns';
+import type { PipelineDefinition, PipelineRun } from '~/app/types';
+
+const mockGetGenericErrorCode = jest.fn();
+jest.mock('@odh-dashboard/internal/api/errorUtils', () => ({
+  getGenericErrorCode: (error: unknown) => mockGetGenericErrorCode(error),
+}));
+
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useParams: jest.fn(),
+}));
+
+jest.mock('~/app/hooks/usePipelineDefinitions', () => ({
+  usePipelineDefinitions: jest.fn(),
+}));
+
+jest.mock('~/app/hooks/usePipelineRuns', () => ({
+  usePipelineRuns: jest.fn(),
+}));
+
+jest.mock('@odh-dashboard/internal/pages/UnauthorizedError', () => ({
+  __esModule: true,
+  default: () => <div data-testid="unauthorized-error">Unauthorized</div>,
+}));
+
+jest.mock('~/app/components/AutomlRunsTable', () => {
+  const MockAutomlRunsTable = ({ runs }: { runs: { run_id: string; display_name: string }[] }) => (
+    <div data-testid="automl-runs-table">
+      {runs.map((r) => (
+        <div key={r.run_id} data-testid={`run-${r.run_id}`}>
+          {r.display_name}
+        </div>
+      ))}
+    </div>
+  );
+  return {
+    __esModule: true,
+    AutomlRunsTable: MockAutomlRunsTable,
+  };
+});
+
+const mockUseParams = jest.mocked(useParams);
+const mockUsePipelineDefinitions = jest.mocked(usePipelineDefinitions);
+const mockUsePipelineRuns = jest.mocked(usePipelineRuns);
+
+const mockPipelineDefinitions: PipelineDefinition[] = [
+  {
+    pipeline_id: 'p1',
+    display_name: 'Pipeline 1',
+    created_at: '2025-01-01',
+    description: 'Desc 1',
+  },
+];
+
+const mockRuns: PipelineRun[] = [
+  {
+    run_id: 'r1',
+    display_name: 'Run 1',
+    description: 'Run desc',
+    state: 'SUCCEEDED',
+    created_at: '2025-01-17',
+    pipeline_version_reference: { pipeline_id: 'p1', pipeline_version_id: 'v1' },
+  },
+];
+
+const defaultDefsState = {
+  pipelineDefinitions: mockPipelineDefinitions,
+  loaded: true,
+  error: undefined as Error | undefined,
+  refresh: jest.fn().mockResolvedValue(undefined),
+};
+
+const defaultRunsState = {
+  runs: mockRuns,
+  totalSize: mockRuns.length,
+  nextPageToken: '',
+  page: 1,
+  pageSize: 20,
+  setPage: jest.fn(),
+  setPageSize: jest.fn(),
+  loaded: true,
+  error: undefined as Error | undefined,
+  refresh: jest.fn().mockResolvedValue(undefined),
+};
+
+function renderAutoml(ui: React.ReactElement) {
+  return render(<MemoryRouter>{ui}</MemoryRouter>);
+}
+
+describe('AutomlExperiments', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    mockGetGenericErrorCode.mockReturnValue(undefined);
+    mockUseParams.mockReturnValue({ namespace: 'my-namespace' });
+    mockUsePipelineDefinitions.mockReturnValue(defaultDefsState);
+    mockUsePipelineRuns.mockReturnValue(defaultRunsState);
+  });
+
+  it('should show spinner when loading', () => {
+    mockUsePipelineDefinitions.mockReturnValue({
+      ...defaultDefsState,
+      loaded: false,
+    });
+    mockUsePipelineRuns.mockReturnValue({
+      ...defaultRunsState,
+      loaded: false,
+    });
+
+    renderAutoml(<AutomlExperiments />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should show EmptyExperimentsState when no experiments', () => {
+    mockUsePipelineRuns.mockReturnValue({
+      ...defaultRunsState,
+      runs: [],
+      totalSize: 0,
+    });
+
+    renderAutoml(<AutomlExperiments />);
+
+    expect(screen.getByTestId('empty-experiments-state')).toBeInTheDocument();
+    expect(screen.getByText('No experiments yet')).toBeInTheDocument();
+    expect(screen.getByTestId('create-experiment-button')).toHaveTextContent(
+      'Create AutoML optimization run',
+    );
+    expect(screen.queryByTestId('automl-runs-table')).not.toBeInTheDocument();
+  });
+
+  it('should show AutomlRunsTable when there are experiments', () => {
+    renderAutoml(<AutomlExperiments />);
+
+    expect(screen.getByTestId('automl-runs-table')).toBeInTheDocument();
+    expect(screen.getByTestId('run-r1')).toHaveTextContent('Run 1');
+    expect(screen.queryByTestId('empty-experiments-state')).not.toBeInTheDocument();
+  });
+
+  it('re-notifies onExperimentsListStatus when namespace changes even if loaded and hasExperiments stay true', async () => {
+    const onStatus = jest.fn();
+    mockUseParams.mockReturnValue({ namespace: 'ns-one' });
+    const { rerender } = renderAutoml(<AutomlExperiments onExperimentsListStatus={onStatus} />);
+
+    await waitFor(() => {
+      expect(onStatus).toHaveBeenCalledWith({ loaded: true, hasExperiments: true });
+    });
+    const callsAfterFirstNs = onStatus.mock.calls.length;
+
+    mockUseParams.mockReturnValue({ namespace: 'ns-two' });
+    rerender(
+      <MemoryRouter>
+        <AutomlExperiments onExperimentsListStatus={onStatus} />
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(onStatus.mock.calls.length).toBeGreaterThan(callsAfterFirstNs);
+    });
+    expect(onStatus).toHaveBeenLastCalledWith({ loaded: true, hasExperiments: true });
+  });
+
+  it('should show error alert on load error', () => {
+    mockUsePipelineRuns.mockReturnValue({
+      ...defaultRunsState,
+      error: new Error('Fetch failed'),
+    });
+
+    renderAutoml(<AutomlExperiments />);
+
+    expect(screen.getByText('Failed to load experiments')).toBeInTheDocument();
+    expect(screen.getByText('Fetch failed')).toBeInTheDocument();
+  });
+
+  it('should show NoPipelineServer for 404 error (no DSPA)', () => {
+    mockGetGenericErrorCode.mockReturnValue(404);
+    mockUsePipelineRuns.mockReturnValue({
+      ...defaultRunsState,
+      error: new Error('Not found'),
+    });
+
+    renderAutoml(<AutomlExperiments />);
+
+    expect(screen.getByText('No Pipeline Server in this namespace')).toBeInTheDocument();
+  });
+
+  it('should show UnauthorizedError for 403 error', () => {
+    mockGetGenericErrorCode.mockReturnValue(403);
+    mockUsePipelineRuns.mockReturnValue({
+      ...defaultRunsState,
+      error: new Error('Forbidden'),
+    });
+
+    renderAutoml(<AutomlExperiments />);
+
+    expect(screen.getByTestId('unauthorized-error')).toBeInTheDocument();
+  });
+
+  it('should show PipelineServerNotReady for 503 error (DSPA not ready)', () => {
+    mockGetGenericErrorCode.mockReturnValue(503);
+    mockUsePipelineRuns.mockReturnValue({
+      ...defaultRunsState,
+      error: new Error('Service Unavailable'),
+    });
+
+    renderAutoml(<AutomlExperiments />);
+
+    expect(screen.getByText('Pipeline Server is not ready')).toBeInTheDocument();
+  });
+});