fix execution and pipeline routing in the UI

web/src/RouteDefinitions.ts

@@ -73,8 +73,8 @@ export interface CODERoutes {
   toCODEWebhookDetails: (args: Required<Pick<CODEProps, 'repoPath' | 'webhookId'>>) => string
   toCODESettings: (args: Required<Pick<CODEProps, 'repoPath'>>) => string
 
-  toCODEExecutions: (args: Required<Pick<CODEProps, 'pipelinePath'>>) => string
+  toCODEExecutions: (args: Required<Pick<CODEProps, 'space' | 'pipeline'>>) => string
-  toCODEExecution: (args: Required<Pick<CODEProps, 'executionPath'>>) => string
+  toCODEExecution: (args: Required<Pick<CODEProps, 'space' | 'pipeline' | 'execution'>>) => string
 }
 
 export const routes: CODERoutes = {
@@ -116,6 +116,6 @@ export const routes: CODERoutes = {
   toCODEWebhookNew: ({ repoPath }) => `/${repoPath}/webhooks/new`,
   toCODEWebhookDetails: ({ repoPath, webhookId }) => `/${repoPath}/webhook/${webhookId}`,
 
-  toCODEExecutions: ({ pipelinePath }) => `/pipelines/${pipelinePath}`,
+  toCODEExecutions: ({ space, pipeline }) => `/pipelines/${space}/pipeline/${pipeline}`,
-  toCODEExecution: ({ executionPath }) => `/pipelines/${executionPath}`
+  toCODEExecution: ({ space, pipeline, execution }) => `/pipelines/${space}/pipeline/${pipeline}/execution/${execution}`
 }

web/src/RouteDestinations.tsx

@@ -34,8 +34,6 @@ import Execution from 'pages/Execution/Execution'
 export const RouteDestinations: React.FC = React.memo(function RouteDestinations() {
   const { getString } = useStrings()
   const repoPath = `${pathProps.space}/${pathProps.repoName}`
-  const pipelinePath = `${pathProps.space}/${pathProps.pipeline}`
-  const executionPath = `${pathProps.space}/${pathProps.pipeline}/${pathProps.execution}`
 
   const { OPEN_SOURCE_PIPELINES, OPEN_SOURCE_SECRETS } = useFeatureFlag()
 
@@ -159,15 +157,21 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
         </Route>
 
         {OPEN_SOURCE_PIPELINES && (
-          <Route path={routes.toCODEPipelines({ space: pathProps.space })} exact>
+          <Route
-            <LayoutWithSideNav title={getString('pageTitle.pipelines')}>
+            path={routes.toCODEExecution({
-              <PipelineList />
+              space: pathProps.space,
+              pipeline: pathProps.pipeline,
+              execution: pathProps.execution
+            })}
+            exact>
+            <LayoutWithSideNav title={getString('pageTitle.executions')}>
+              <Execution />
             </LayoutWithSideNav>
           </Route>
         )}
 
         {OPEN_SOURCE_PIPELINES && (
-          <Route path={routes.toCODEExecutions({ pipelinePath })} exact>
+          <Route path={routes.toCODEExecutions({ space: pathProps.space, pipeline: pathProps.pipeline })} exact>
             <LayoutWithSideNav title={getString('pageTitle.executions')}>
               <ExecutionList />
             </LayoutWithSideNav>
@@ -175,13 +179,9 @@ export const RouteDestinations: React.FC = React.memo(function RouteDestinations
         )}
 
         {OPEN_SOURCE_PIPELINES && (
-          <Route
+          <Route path={routes.toCODEPipelines({ space: pathProps.space })} exact>
-            path={routes.toCODEExecution({
+            <LayoutWithSideNav title={getString('pageTitle.pipelines')}>
-              executionPath
+              <PipelineList />
-            })}
-            exact>
-            <LayoutWithSideNav title={getString('pageTitle.executions')}>
-              <Execution />
             </LayoutWithSideNav>
           </Route>
         )}

web/src/layouts/menu/DefaultMenu.tsx

@@ -1,18 +1,20 @@
 import React, { useMemo, useState } from 'react'
 import { Container, Layout } from '@harness/uicore'
 import { Render } from 'react-jsx-match'
-import { useHistory, useRouteMatch } from 'react-router-dom'
+import { useHistory, useRouteMatch, useParams } from 'react-router-dom'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
 import { useStrings } from 'framework/strings'
 import { routes } from 'RouteDefinitions'
 import type { TypesSpace } from 'services/code'
 import { SpaceSelector } from 'components/SpaceSelector/SpaceSelector'
 import { useFeatureFlag } from 'hooks/useFeatureFlag'
+import type { CODEProps } from 'RouteDefinitions'
 import { NavMenuItem } from './NavMenuItem'
 import css from './DefaultMenu.module.scss'
 
 export const DefaultMenu: React.FC = () => {
   const history = useHistory()
+  const params = useParams<CODEProps>()
   const [selectedSpace, setSelectedSpace] = useState<TypesSpace | undefined>()
   const { repoMetadata, gitRef, commitRef } = useGetRepositoryMetadata()
   const { getString } = useStrings()
@@ -22,7 +24,7 @@ export const DefaultMenu: React.FC = () => {
     () => routeMatch.path === '/:space/:repoName' || routeMatch.path.startsWith('/:space/:repoName/edit'),
     [routeMatch]
   )
-  const isPipelineSelected = routeMatch.path.startsWith('/pipelines/:space/:pipeline')
+  const isPipelineSelected = routeMatch.path.startsWith('/pipelines/:space*/pipeline/:pipeline')
 
   const { OPEN_SOURCE_PIPELINES, OPEN_SOURCE_SECRETS } = useFeatureFlag()
 
@@ -161,7 +163,10 @@ export const DefaultMenu: React.FC = () => {
                   isSubLink
                   isSelected={isPipelineSelected}
                   label={getString('pageTitle.executions')}
-                  to={routes.toCODERepository({ repoPath, gitRef: commitRef || gitRef })}
+                  to={routes.toCODEExecutions({
+                    space: selectedSpace?.path as string,
+                    pipeline: params?.pipeline || ''
+                  })}
                 />
               </Layout.Vertical>
             </Container>

web/src/pages/ExecutionList/ExecutionList.tsx

@@ -149,12 +149,12 @@ const ExecutionList = () => {
                 className={css.table}
                 columns={columns}
                 data={executions || []}
-                onRowClick={pipelineInfo =>
+                onRowClick={executionInfo =>
                   history.push(
                     routes.toCODEExecution({
-                      space: pipelineInfo.spaceUid,
+                      space: executionInfo.spaceUid,
-                      pipeline: pipelineInfo.pipelineUid,
+                      pipeline: executionInfo.pipelineUid,
-                      execution: pipelineInfo.uid
+                      execution: executionInfo.uid
                     })
                   )
                 }

web/src/pages/PipelineList/PipelineList.tsx

@@ -32,6 +32,7 @@ interface Pipeline {
   updated: number
   description?: string
   isPublic?: boolean
+  spaceUid: string
 }
 
 const pipelines: Pipeline[] = [
@@ -41,7 +42,8 @@ const pipelines: Pipeline[] = [
     name: 'Pipeline 1',
     updated: 1687234800,
     description: 'This is a description',
-    isPublic: true
+    isPublic: true,
+    spaceUid: 'root'
   },
   {
     id: 2,
@@ -49,7 +51,8 @@ const pipelines: Pipeline[] = [
     name: 'Pipeline 2',
     updated: 1730275200,
     description: 'This is a description',
-    isPublic: true
+    isPublic: true,
+    spaceUid: 'root'
   },
   {
     id: 3,
@@ -57,7 +60,8 @@ const pipelines: Pipeline[] = [
     name: 'Pipeline 3',
     updated: 1773315600,
     description: 'This is a description',
-    isPublic: false
+    isPublic: false,
+    spaceUid: 'root'
   }
 ]
 
@@ -142,7 +146,7 @@ const PipelineList = () => {
                 columns={columns}
                 data={pipelines || []}
                 onRowClick={pipelineInfo =>
-                  history.push(routes.toCODEExecutions({ space: 'root', pipeline: pipelineInfo.uid as string }))
+                  history.push(routes.toCODEExecutions({ space: pipelineInfo.spaceUid, pipeline: pipelineInfo.uid }))
                 }
                 getRowClassName={row => cx(css.row, !row.original.description && css.noDesc)}
               />