Merge pull request #13470 from vikram-raj/ocpbugs-25898

OCPBUGS-25898: Fix PipelineRun Logs tab navigation

Author: openshift-merge-bot[bot]

frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunDetailsPage.tsx

@@ -90,7 +90,6 @@ const PipelineRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
         },
         {
           href: 'logs',
-          path: 'logs/:name?',
           // t('pipelines-plugin~Logs')
           nameKey: 'pipelines-plugin~Logs',
           component: PipelineRunLogsWithActiveTask,

frontend/packages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunLogs.tsx

@@ -3,7 +3,7 @@ import { Nav, NavItem, NavList } from '@patternfly/react-core';
 import { TFunction } from 'i18next';
 import * as _ from 'lodash';
 import { withTranslation } from 'react-i18next';
-import { useParams, Link } from 'react-router-dom-v5-compat';
+import { Link, useLocation } from 'react-router-dom-v5-compat';
 import { WatchK8sResource } from '@console/dynamic-plugin-sdk';
 import { resourcePathFromModel } from '@console/internal/components/utils';
 import { PipelineRunModel } from '../../../models';
@@ -144,7 +144,7 @@ class PipelineRunLogsWithTranslation extends React.Component<
       PipelineRunModel,
       obj.metadata.name,
       obj.metadata.namespace,
-    )}/logs/`;
+    )}/logs`;
 
     return (
       <div className="odc-pipeline-run-logs">
@@ -162,10 +162,9 @@ class PipelineRunLogsWithTranslation extends React.Component<
                       className="odc-pipeline-run-logs__navitem"
                     >
                       <Link
-                        to={
-                          logsPath +
-                          (taskRun?.metadata?.labels?.[TektonResourceLabel.pipelineTask] || '-')
-                        }
+                        to={`${logsPath}?taskName=${
+                          taskRun?.metadata?.labels?.[TektonResourceLabel.pipelineTask] || '-'
+                        }`}
                       >
                         <ColoredStatusIcon status={taskRunStatus(taskRun)} />
                         <span
@@ -227,7 +226,9 @@ const PipelineRunLogs = withTranslation()(PipelineRunLogsWithTranslation);
 export const PipelineRunLogsWithActiveTask: React.FC<PipelineRunLogsWithActiveTaskProps> = ({
   obj,
 }) => {
-  const { name: activeTask } = useParams();
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const activeTask = params?.get('taskName');
   const [taskRuns, taskRunsLoaded] = useTaskRuns(obj?.metadata?.namespace, obj?.metadata?.name);
 
   return (

frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-topology/PipelineTaskNode.tsx

@@ -133,7 +133,11 @@ const PipelineTaskNode: React.FunctionComponent<PipelineTaskNodeProps> = ({
 
   const { name: plrName, namespace } = pipelineRun?.metadata;
   const path = plrName
-    ? `${resourcePathFromModel(PipelineRunModel, plrName, namespace)}/logs/${element.getLabel()}`
+    ? `${resourcePathFromModel(
+        PipelineRunModel,
+        plrName,
+        namespace,
+      )}/logs?taskName=${element.getLabel()}`
     : undefined;
 
   const enableLogLink =