fix(automl+autorag): use Link instead of useNavigate for pipeline run link

Replace imperative useNavigate with declarative <Link> for the empty
state CTA, improving accessibility (right-click, Cmd+click, screen
readers). Fix test routes to include :runId param and verify href.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: nickmazzi

packages/automl/frontend/src/app/components/run-results/AutomlLeaderboard.tsx

@@ -21,7 +21,7 @@ import {
   type ThProps,
 } from '@patternfly/react-table';
 import React from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { Link, useParams } from 'react-router';
 import AutomlRunInProgress from '~/app/components/empty-states/AutomlRunInProgress';
 import { useAutomlResultsContext, type AutomlModel } from '~/app/context/AutomlResultsContext';
 import { RuntimeStateKF } from '~/app/types/pipeline';
@@ -51,7 +51,6 @@ function AutomlLeaderboard({
   onClickSaveNotebook,
   onRegisterModel,
 }: AutomlLeaderboardProps): React.JSX.Element | null {
-  const navigate = useNavigate();
   const { namespace, runId } = useParams<{ namespace: string; runId: string }>();
   const { models, parameters, modelsLoading, pipelineRun, pipelineRunLoading } =
     useAutomlResultsContext();
@@ -303,12 +302,14 @@ function AutomlLeaderboard({
         >
           <EmptyStateBody>
             <span>
-              The pipeline run completed but did not generate any models. Please check the{' '}
+              The pipeline run completed but did not generate any models. Please check the&nbsp;
             </span>
             <Button
               variant="link"
               isInline
-              onClick={() => navigate(`/develop-train/pipelines/runs/${namespace}/runs/${runId}`)}
+              component={(props) => (
+                <Link {...props} to={`/develop-train/pipelines/runs/${namespace}/runs/${runId}`} />
+              )}
             >
               pipeline configuration and logs
             </Button>

packages/automl/frontend/src/app/components/run-results/__tests__/AutomlLeaderboard.spec.tsx

@@ -204,10 +204,10 @@ const renderWithContext = ({
   };
 
   return render(
-    <MemoryRouter initialEntries={[`/automl/${namespace}/results`]}>
+    <MemoryRouter initialEntries={[`/automl/${namespace}/results/test-run-123`]}>
       <Routes>
         <Route
-          path="/automl/:namespace/results"
+          path="/automl/:namespace/results/:runId"
           element={
             <AutomlResultsContext.Provider value={contextValue}>
               <AutomlLeaderboard
@@ -374,10 +374,15 @@ describe('AutomlLeaderboard component', () => {
       expect(emptyState).toHaveTextContent(
         'The pipeline run completed but did not generate any models. Please check the pipeline configuration and logs.',
       );
-      // Verify the interactive CTA button exists and is accessible
-      expect(
-        within(emptyState).getByRole('button', { name: /pipeline configuration and logs/i }),
-      ).toBeInTheDocument();
+      // Verify the interactive CTA link exists and navigates to the pipeline run page
+      const link = within(emptyState).getByRole('link', {
+        name: /pipeline configuration and logs/i,
+      });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute(
+        'href',
+        '/develop-train/pipelines/runs/test-namespace/runs/test-run-123',
+      );
     });
 
     it('should render loading skeleton with correct structure', () => {

packages/autorag/frontend/src/app/components/run-results/AutoragLeaderboard.tsx

@@ -21,7 +21,7 @@ import {
   type ThProps,
 } from '@patternfly/react-table';
 import React from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { Link, useParams } from 'react-router';
 import AutoragRunInProgress from '~/app/components/empty-states/AutoragRunInProgress';
 import { useAutoragResultsContext } from '~/app/context/AutoragResultsContext';
 import type { AutoragPattern } from '~/app/types/autoragPattern';
@@ -68,7 +68,6 @@ function AutoragLeaderboard({
   onViewDetails,
   onSaveNotebook,
 }: AutoragLeaderboardProps): React.JSX.Element | null {
-  const navigate = useNavigate();
   const { namespace, runId } = useParams<{ namespace: string; runId: string }>();
   const { patterns, patternsLoading, pipelineRun, pipelineRunLoading } = useAutoragResultsContext();
   const optimizedMetric = getOptimizedMetricForRAG(pipelineRun);
@@ -362,12 +361,14 @@ function AutoragLeaderboard({
         >
           <EmptyStateBody>
             <span>
-              The pipeline run completed but did not generate any patterns. Please check the{' '}
+              The pipeline run completed but did not generate any patterns. Please check the&nbsp;
             </span>
             <Button
               variant="link"
               isInline
-              onClick={() => navigate(`/develop-train/pipelines/runs/${namespace}/runs/${runId}`)}
+              component={(props) => (
+                <Link {...props} to={`/develop-train/pipelines/runs/${namespace}/runs/${runId}`} />
+              )}
             >
               pipeline configuration and logs
             </Button>

packages/autorag/frontend/src/app/components/run-results/__tests__/AutoragLeaderboard.spec.tsx

@@ -227,10 +227,10 @@ const renderWithContext = ({
   };
 
   return render(
-    <MemoryRouter initialEntries={[`/autorag/${namespace}/results`]}>
+    <MemoryRouter initialEntries={[`/autorag/${namespace}/results/test-run-123`]}>
       <Routes>
         <Route
-          path="/autorag/:namespace/results"
+          path="/autorag/:namespace/results/:runId"
           element={
             <AutoragResultsContext.Provider value={contextValue}>
               <AutoragLeaderboard />
@@ -374,10 +374,15 @@ describe('AutoragLeaderboard component', () => {
       expect(emptyState).toHaveTextContent(
         'The pipeline run completed but did not generate any patterns. Please check the pipeline configuration and logs.',
       );
-      // Verify the interactive CTA button exists and is accessible
-      expect(
-        within(emptyState).getByRole('button', { name: /pipeline configuration and logs/i }),
-      ).toBeInTheDocument();
+      // Verify the interactive CTA link exists and navigates to the pipeline run page
+      const link = within(emptyState).getByRole('link', {
+        name: /pipeline configuration and logs/i,
+      });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute(
+        'href',
+        '/develop-train/pipelines/runs/test-namespace/runs/test-run-123',
+      );
     });
 
     it('should render loading skeleton with correct structure', () => {