Add external routes to AppRoutes component

docs/external-redirects.md

@@ -0,0 +1,23 @@
+# External Redirects
+
+The supported external redirect paths in the application.
+
+## Supported Redirects
+
+### Pipeline SDK Redirects
+
+Redirecting from Pipeline SDK output URLs to internal dashboard routes.
+
+#### Supported URL Patterns
+
+1. **Experiment Details**
+   ```
+   /external/pipelinesSdk/{namespace}/#/experiments/details/{experimentId}
+   ```
+   Redirects to the internal experiment runs route for the specified experiment.
+
+2. **Run Details**
+   ```
+   /external/pipelinesSdk/{namespace}/#/runs/details/{runId}
+   ```
+   Redirects to the internal pipeline run details route for the specified run.

frontend/src/__tests__/cypress/cypress/pages/externalRedirect.ts

@@ -0,0 +1,32 @@
+class ExternalRedirect {
+  visit(path: string) {
+    cy.visitWithLogin(path);
+    this.wait();
+  }
+
+  private wait() {
+    cy.findByTestId('redirect-error').should('not.exist');
+    cy.testA11y();
+  }
+
+  findErrorState() {
+    return cy.findByTestId('redirect-error');
+  }
+
+  findHomeButton() {
+    return cy.findByRole('button', { name: 'Go to Home' });
+  }
+}
+
+class PipelinesSdkRedirect {
+  findPipelinesButton() {
+    return cy.findByRole('button', { name: 'Go to Pipelines' });
+  }
+
+  findExperimentsButton() {
+    return cy.findByRole('button', { name: 'Go to Experiments' });
+  }
+}
+
+export const externalRedirect = new ExternalRedirect();
+export const pipelinesSdkRedirect = new PipelinesSdkRedirect();

frontend/src/__tests__/cypress/cypress/tests/mocked/externalRedirects.cy.ts

@@ -0,0 +1,41 @@
+import {
+  externalRedirect,
+  pipelinesSdkRedirect,
+} from '~/__tests__/cypress/cypress/pages/externalRedirect';
+
+describe('External Redirects', () => {
+  describe('Pipeline SDK Redirects', () => {
+    it('should redirect experiment URLs correctly', () => {
+      // Test experiment URL redirect
+      externalRedirect.visit('/external/pipelinesSdk/test-namespace/#/experiments/details/123');
+      cy.url().should('include', '/experiments/test-namespace/123/runs');
+    });
+
+    it('should redirect run URLs correctly', () => {
+      // Test run URL redirect
+      externalRedirect.visit('/external/pipelinesSdk/test-namespace/#/runs/details/456');
+      cy.url().should('include', '/pipelineRuns/test-namespace/runs/456');
+    });
+
+    it('should handle invalid URL format', () => {
+      externalRedirect.visit('/external/pipelinesSdk/test-namespace/#/invalid');
+      externalRedirect.findErrorState().should('exist');
+      pipelinesSdkRedirect.findPipelinesButton().should('exist');
+      pipelinesSdkRedirect.findExperimentsButton().should('exist');
+    });
+  });
+
+  describe('External Redirect Not Found', () => {
+    it('should show not found page for invalid external routes', () => {
+      externalRedirect.visit('/external/invalid-path');
+      externalRedirect.findErrorState().should('exist');
+      externalRedirect.findHomeButton().should('exist');
+    });
+
+    it('should allow navigation back to home', () => {
+      externalRedirect.visit('/external/invalid-path');
+      externalRedirect.findHomeButton().click();
+      cy.url().should('include', '/');
+    });
+  });
+});

frontend/src/app/AppRoutes.tsx

@@ -76,6 +76,8 @@ const StorageClassesPage = React.lazy(() => import('../pages/storageClasses/Stor
 
 const ModelRegistryRoutes = React.lazy(() => import('../pages/modelRegistry/ModelRegistryRoutes'));
 
+const ExternalRoutes = React.lazy(() => import('../pages/external/ExternalRoutes'));
+
 const AppRoutes: React.FC = () => {
   const { isAdmin, isAllowed } = useUser();
   const isJupyterEnabled = useCheckJupyterEnabled();
@@ -94,6 +96,7 @@ const AppRoutes: React.FC = () => {
     <React.Suspense fallback={<ApplicationsPage title="" description="" loaded={false} empty />}>
       <InvalidArgoDeploymentAlert />
       <Routes>
+        <Route path="/external/*" element={<ExternalRoutes />} />
         {isHomeAvailable ? (
           <>
             <Route path="/" element={<HomePage />} />

frontend/src/pages/ApplicationsPage.tsx

@@ -21,6 +21,7 @@ type ApplicationsPageProps = {
   loaded: boolean;
   empty: boolean;
   loadError?: Error;
+  loadErrorPage?: React.ReactNode;
   children?: React.ReactNode;
   errorMessage?: string;
   emptyMessage?: string;
@@ -41,6 +42,7 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
   loaded,
   empty,
   loadError,
+  loadErrorPage,
   children,
   errorMessage,
   emptyMessage,
@@ -77,7 +79,7 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
 
   const renderContents = () => {
     if (loadError) {
-      return (
+      return !loadErrorPage ? (
         <PageSection hasBodyWrapper={false} isFilled>
           <EmptyState
             headingLevel="h1"
@@ -89,6 +91,8 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
             <EmptyStateBody>{loadError.message}</EmptyStateBody>
           </EmptyState>
         </PageSection>
+      ) : (
+        loadErrorPage
       );
     }
 

frontend/src/pages/external/ExternalRoutes.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import PipelinesSdkRedirect from './redirectComponents/PipelinesSdkRedirects';
+import ExternalRedirectNotFound from './redirectComponents/ExternalRedirectNotFound';
+
+/**
+ * Be sure to keep this file in sync with the documentation in `docs/external-redirects.md`.
+ */
+const ExternalRoutes: React.FC = () => (
+  <Routes>
+    <Route path="/pipelinesSdk/:namespace/*" element={<PipelinesSdkRedirect />} />
+    <Route path="*" element={<ExternalRedirectNotFound />} />
+  </Routes>
+);
+
+export default ExternalRoutes;

frontend/src/pages/external/RedirectErrorState.tsx

@@ -0,0 +1,71 @@
+import {
+  PageSection,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateActions,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import React from 'react';
+
+type RedirectErrorStateProps = {
+  title?: string;
+  errorMessage?: string;
+  actions?: React.ReactNode | React.ReactNode[];
+};
+
+/**
+ * A component that displays an error state with optional title, message and actions
+ * Used for showing redirect/navigation errors with fallback options
+ *
+ * Props for the RedirectErrorState component
+ * @property {string} [title] - Optional title text to display in the error state
+ * @property {string} [errorMessage] - Optional error message to display
+ * @property {React.ReactNode | React.ReactNode[]} [actions] - Custom action buttons/elements to display
+ *
+ *
+ * @example
+ * ```tsx
+ * // With custom actions
+ * <RedirectErrorState
+ *   title="Error redirecting to pipelines"
+ *   errorMessage={error.message}
+ *   actions={
+ *     <>
+ *       <Button variant="link" onClick={() => navigate('/pipelines')}>
+ *         Go to pipelines
+ *       </Button>
+ *       <Button variant="link" onClick={() => navigate('/experiments')}>
+ *         Go to experiments
+ *       </Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+
+const RedirectErrorState: React.FC<RedirectErrorStateProps> = ({
+  title,
+  errorMessage,
+  actions,
+}) => (
+  <PageSection hasBodyWrapper={false} isFilled>
+    <EmptyState
+      headingLevel="h1"
+      icon={ExclamationCircleIcon}
+      titleText={title ?? 'Error redirecting'}
+      variant={EmptyStateVariant.lg}
+      data-testid="redirect-error"
+    >
+      {errorMessage && <EmptyStateBody>{errorMessage}</EmptyStateBody>}
+      {actions && (
+        <EmptyStateFooter>
+          <EmptyStateActions>{actions}</EmptyStateActions>
+        </EmptyStateFooter>
+      )}
+    </EmptyState>
+  </PageSection>
+);
+
+export default RedirectErrorState;

frontend/src/pages/external/redirectComponents/ExternalRedirectNotFound.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@patternfly/react-core';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import RedirectErrorState from '~/pages/external/RedirectErrorState';
+
+const ExternalRedirectNotFound: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <ApplicationsPage
+      loaded
+      empty={false}
+      loadError={new Error()}
+      loadErrorPage={
+        <RedirectErrorState
+          title="Page not found"
+          errorMessage="There is no external redirect for this URL."
+          actions={
+            <>
+              <Button variant="link" onClick={() => navigate('/')}>
+                Go to Home
+              </Button>
+            </>
+          }
+        />
+      }
+    />
+  );
+};
+
+export default ExternalRedirectNotFound;

frontend/src/pages/external/redirectComponents/PipelinesSdkRedirects.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
+import { Button } from '@patternfly/react-core';
+import { experimentRunsRoute, globalPipelineRunDetailsRoute } from '~/routes';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import { useRedirect } from '~/utilities/useRedirect';
+import RedirectErrorState from '~/pages/external/RedirectErrorState';
+
+/**
+ * Handles redirects from Pipeline SDK URLs to internal routes.
+ *
+ * Matches and redirects:
+ * - Experiment URL: /external/pipelinesSdk/{namespace}/#/experiments/details/{experimentId}
+ * - Run URL: /external/pipelinesSdk/{namespace}/#/runs/details/{runId}
+ */
+const PipelinesSdkRedirects: React.FC = () => {
+  const { namespace } = useParams<{ namespace: string }>();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const createRedirectPath = React.useCallback(() => {
+    if (!namespace) {
+      throw new Error('Missing namespace parameter');
+    }
+
+    // Extract experimentId from hash
+    const experimentMatch = location.hash.match(/\/experiments\/details\/([^/]+)$/);
+    if (experimentMatch) {
+      const experimentId = experimentMatch[1];
+      return experimentRunsRoute(namespace, experimentId);
+    }
+
+    // Extract runId from hash
+    const runMatch = location.hash.match(/\/runs\/details\/([^/]+)$/);
+    if (runMatch) {
+      const runId = runMatch[1];
+      return globalPipelineRunDetailsRoute(namespace, runId);
+    }
+
+    throw new Error('The URL format is invalid.');
+  }, [namespace, location.hash]);
+
+  const { error } = useRedirect(createRedirectPath);
+
+  return (
+    <ApplicationsPage
+      loaded
+      empty={false}
+      loadError={error}
+      loadErrorPage={
+        <RedirectErrorState
+          title="Error redirecting to pipelines"
+          errorMessage={error?.message}
+          actions={
+            <>
+              <Button variant="link" onClick={() => navigate('/pipelines')}>
+                Go to Pipelines
+              </Button>
+              <Button variant="link" onClick={() => navigate('/experiments')}>
+                Go to Experiments
+              </Button>
+            </>
+          }
+        />
+      }
+    />
+  );
+};
+
+export default PipelinesSdkRedirects;