refactor breadcrumb for experiments to navigate to correct tabs

DaoDaoNoCode · Jun 19, 2024 · 9d4c189 · 9d4c189
1 parent a7e7bfa
commit 9d4c189
Show file tree

Hide file tree

Showing 13 changed files with 24 additions and 27 deletions.
diff --git a/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx
@@ -21,7 +21,7 @@ const CloneRunPage: React.FC<PathProps> = ({ breadcrumbPath, contextPath }) => {
       title={title}
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath(runType)}
           <BreadcrumbItem isActive>
             {run ? `Duplicate of ${run.display_name}` : 'Duplicate'}
           </BreadcrumbItem>

diff --git a/frontend/src/concepts/pipelines/content/createRun/CreateRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CreateRunPage.tsx
@@ -16,7 +16,9 @@ const CreateRunPage: React.FC<PathProps> = ({ breadcrumbPath, contextPath }) =>
       title={title}
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath(
+            runType === PipelineRunType.SCHEDULED ? PipelineRunType.SCHEDULED : undefined,
+          )}
           <BreadcrumbItem isActive>{title}</BreadcrumbItem>
         </Breadcrumb>
       }

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
@@ -69,7 +69,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
       <ApplicationsPage
         breadcrumb={
           <Breadcrumb>
-            {breadcrumbPath}
+            {breadcrumbPath()}
             <BreadcrumbItem isActive>{title}</BreadcrumbItem>
           </Breadcrumb>
         }
@@ -97,7 +97,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
             <ApplicationsPage
               breadcrumb={
                 <Breadcrumb>
-                  {breadcrumbPath}
+                  {breadcrumbPath()}
                   <BreadcrumbItem style={{ maxWidth: 300 }}>
                     <Truncate content={pipeline?.display_name || 'Loading...'} />
                   </BreadcrumbItem>

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
@@ -93,6 +93,9 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
     );
   }
 
+  const runType =
+    run?.storage_state === StorageStateKF.ARCHIVED ? PipelineRunType.ARCHIVED : undefined;
+
   return (
     <>
       <Drawer isExpanded={!!selectedNode}>
@@ -129,17 +132,15 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
             loadError={error}
             breadcrumb={
               <Breadcrumb>
-                {breadcrumbPath}
+                {breadcrumbPath(runType)}
                 <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
                   {version ? (
                     <Link
                       to={routePipelineVersionRunsNamespace(
                         namespace,
                         version.pipeline_id,
                         version.pipeline_version_id,
-                        run?.storage_state === StorageStateKF.ARCHIVED
-                          ? PipelineRunType.ARCHIVED
-                          : undefined,
+                        runType,
                       )}
                     >
                       <Truncate content={version.display_name} />

diff --git a/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx b/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx
@@ -94,7 +94,7 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
             loadError={error}
             breadcrumb={
               <Breadcrumb>
-                {breadcrumbPath}
+                {breadcrumbPath(PipelineRunType.SCHEDULED)}
                 <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
                   {version ? (
                     <Link

diff --git a/frontend/src/concepts/pipelines/content/types.ts b/frontend/src/concepts/pipelines/content/types.ts
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { BreadcrumbItem } from '@patternfly/react-core';
+import { PipelineRunType } from '~/pages/pipelines/global/runs';
 
 export type PathProps = {
-  breadcrumbPath: React.ReactElement<typeof BreadcrumbItem>[];
+  breadcrumbPath: (runType?: PipelineRunType | null) => React.ReactElement<typeof BreadcrumbItem>[];
   contextPath?: string;
 };
 

diff --git a/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx b/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx
@@ -8,7 +8,6 @@ import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability';
 import { experimentRunsRoute, experimentSchedulesRoute, experimentsBaseRoute } from '~/routes';
 import EnsureCompatiblePipelineServer from '~/concepts/pipelines/EnsureCompatiblePipelineServer';
 import { ExperimentRunsContext } from '~/pages/pipelines/global/experiments/ExperimentRunsContext';
-import { PipelineRunType } from '~/pages/pipelines/global/runs';
 
 type GlobalPipelineCoreDetailsProps = {
   pageName: string;
@@ -27,7 +26,7 @@ const GlobalPipelineCoreDetails: React.FC<GlobalPipelineCoreDetailsProps> = ({
     <EnsureAPIAvailability>
       <EnsureCompatiblePipelineServer>
         <BreadcrumbDetailsComponent
-          breadcrumbPath={[
+          breadcrumbPath={() => [
             <BreadcrumbItem
               key="home"
               render={() => (
@@ -57,21 +56,15 @@ export const GlobalExperimentDetails: React.FC<
     <EnsureAPIAvailability>
       <EnsureCompatiblePipelineServer>
         <BreadcrumbDetailsComponent
-          breadcrumbPath={[
+          breadcrumbPath={(runType) => [
             <BreadcrumbItem key="experiments">
               <Link to={experimentsBaseRoute(namespace)}>
                 Experiments - {getProjectDisplayName(project)}
               </Link>
             </BreadcrumbItem>,
             <BreadcrumbItem key="experiment">
               {experiment?.display_name ? (
-                <Link
-                  to={experimentRunsRoute(
-                    namespace,
-                    experimentId,
-                    isSchedule ? PipelineRunType.SCHEDULED : undefined,
-                  )}
-                >
+                <Link to={experimentRunsRoute(namespace, experimentId, runType)}>
                   {experiment.display_name}
                 </Link>
               ) : (

diff --git a/...tend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx b/...tend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx
@@ -61,7 +61,7 @@ export const ArtifactDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPa
       loadError={artifactError}
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath()}
           <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
             <Truncate content={artifactName} />
           </BreadcrumbItem>

diff --git a/frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunsPage.tsx b/frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunsPage.tsx
@@ -21,7 +21,7 @@ const CompareRunsPage: React.FC<PathProps> = ({ breadcrumbPath }) => {
       title=""
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath()}
           <BreadcrumbItem isActive>Compare runs</BreadcrumbItem>
         </Breadcrumb>
       }

diff --git a/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetails.tsx b/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetails.tsx
@@ -96,7 +96,7 @@ const ExecutionDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath, co
       loaded
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath()}
           <BreadcrumbItem isActive>{displayName}</BreadcrumbItem>
         </Breadcrumb>
       }

diff --git a/frontend/src/pages/pipelines/global/runs/GlobalPipelineVersionRuns.tsx b/frontend/src/pages/pipelines/global/runs/GlobalPipelineVersionRuns.tsx
@@ -29,7 +29,7 @@ const GlobalPipelineVersionRuns: PipelineCoreDetailsPageComponent = ({ breadcrum
       <ApplicationsPage
         breadcrumb={
           <Breadcrumb>
-            {breadcrumbPath}
+            {breadcrumbPath()}
             <BreadcrumbItem isActive>{title}</BreadcrumbItem>
           </Breadcrumb>
         }
@@ -46,7 +46,7 @@ const GlobalPipelineVersionRuns: PipelineCoreDetailsPageComponent = ({ breadcrum
     <ApplicationsPage
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath()}
           <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
             <Link to={routePipelineDetailsNamespace(namespace, pipelineId, pipelineVersionId)}>
               <Truncate content={pipelineVersion?.display_name || 'Loading...'} />

diff --git a/frontend/src/pages/projects/screens/detail/pipelines/ProjectPipelineBreadcrumbPage.tsx b/frontend/src/pages/projects/screens/detail/pipelines/ProjectPipelineBreadcrumbPage.tsx
@@ -19,7 +19,7 @@ const ProjectPipelineBreadcrumbPage: React.FC<ProjectPipelineDetailsProps> = ({
   return (
     <EnsureAPIAvailability>
       <BreadcrumbDetailsComponent
-        breadcrumbPath={[
+        breadcrumbPath={() => [
           <BreadcrumbItem
             key="project-home"
             render={() => <Link to="/projects">Data Science Projects</Link>}

diff --git a/frontend/src/routes/pipelines/experiments.ts b/frontend/src/routes/pipelines/experiments.ts
@@ -36,7 +36,7 @@ export const experimentsCloneScheduleRoute = (
 export const experimentRunsRoute = (
   namespace: string | undefined,
   experimentId: string | undefined,
-  runType?: PipelineRunType,
+  runType?: PipelineRunType | null,
 ): string =>
   !experimentId
     ? experimentsBaseRoute(namespace)