Add external routes to AppRoutes component

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/external/ExternalRoutes.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import PipelinesSdkRedirect from './redirectComponents/PipelinesSdkRedirects';
+import ExternalRedirectNotFound from './redirectComponents/ExternalRedirectNotFound';
+
+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,106 @@
+import {
+  PageSection,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateActions,
+  Button,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { EitherOrNone } from '~/typeHelpers';
+
+type RedirectErrorStateProps = {
+  title?: string;
+  errorMessage?: string;
+} & EitherOrNone<
+  {
+    fallbackUrl: string;
+    fallbackText: 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 {string} [fallbackUrl] - URL to navigate to when fallback button is clicked
+ * @property {React.ReactNode | React.ReactNode[]} [actions] - Custom action buttons/elements to display
+ *
+ * Note: The component accepts either fallbackUrl OR actions prop, but not both.
+ * This is enforced by the EitherOrNone type helper.
+ *
+ * @example
+ * ```tsx
+ * // With fallback URL
+ * <RedirectErrorState
+ *   title="Error redirecting to pipelines"
+ *   errorMessage={error.message}
+ *   fallbackUrl="/pipelines"
+ * />
+ *
+ * // 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,
+  fallbackUrl,
+  fallbackText,
+  actions,
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <PageSection hasBodyWrapper={false} isFilled>
+      <EmptyState
+        headingLevel="h1"
+        icon={ExclamationCircleIcon}
+        titleText={title ?? 'Error redirecting'}
+        variant={EmptyStateVariant.lg}
+        data-testid="redirect-error"
+      >
+        {errorMessage && <EmptyStateBody>{errorMessage}</EmptyStateBody>}
+        {fallbackUrl && (
+          <EmptyStateFooter>
+            <EmptyStateActions>
+              <Button variant="link" onClick={() => navigate(fallbackUrl)}>
+                {fallbackText}
+              </Button>
+            </EmptyStateActions>
+          </EmptyStateFooter>
+        )}
+        {actions && (
+          <EmptyStateFooter>
+            <EmptyStateActions>{actions}</EmptyStateActions>
+          </EmptyStateFooter>
+        )}
+      </EmptyState>
+    </PageSection>
+  );
+};
+
+export default RedirectErrorState;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import RedirectErrorState from '~/pages/external/RedirectErrorState';
+
+const ExternalRedirectNotFound: React.FC = () => (
+  <ApplicationsPage
+    loaded
+    empty
+    emptyStatePage={
+      <RedirectErrorState
+        title="Page not found"
+        errorMessage="There is no external redirect for this URL."
+        fallbackText="Go to Home"
+        fallbackUrl="/"
+      />
+    }
+  />
+);
+
+export default ExternalRedirectNotFound;

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

@@ -0,0 +1,73 @@
+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 [redirect, { loaded, error }] = useRedirect(createRedirectPath);
+
+  React.useEffect(() => {
+    redirect();
+  }, [redirect]);
+
+  return (
+    <ApplicationsPage
+      loaded={loaded}
+      empty={!!error}
+      emptyStatePage={
+        <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;