Merge pull request #2918 from jpuzz0/RHOAIENG-7717-pipeline-table-nam…

…e-link

[RHOAIENG-7717] Make pipeline table name cell be a clickable link to the latest pipeline version details

frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelinesTable.ts

@@ -24,6 +24,10 @@ class PipelinesTableRow extends TableRow {
         ]) as unknown as Cypress.Chainable<JQuery<HTMLTableRowElement>>,
     );
   }
+
+  findPipelineNameLink(value: string) {
+    return this.find().findByTestId('table-row-title').contains(value);
+  }
 }
 
 class PipelineVersionsTableRow extends TableRow {

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

@@ -866,6 +866,19 @@ describe('Pipelines', () => {
     );
   });
 
+  it('navigates to pipeline version details page via pipeline name', () => {
+    initIntercepts({});
+    pipelinesGlobal.visit(projectName);
+    pipelinesTable.find();
+
+    const pipelineRow = pipelinesTable.getRowById(initialMockPipeline.pipeline_id);
+    pipelineRow.findPipelineNameLink(initialMockPipeline.display_name).click();
+
+    verifyRelativeURL(
+      `/pipelines/${projectName}/pipeline/view/${initialMockPipeline.pipeline_id}/${initialMockPipelineVersion.pipeline_version_id}`,
+    );
+  });
+
   it('delete pipeline and versions', () => {
     initIntercepts({});
     pipelinesGlobal.visit(projectName);

frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableRow.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Td, Tbody, Tr, ActionsColumn, TableText } from '@patternfly/react-table';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Skeleton } from '@patternfly/react-core';
 import { PipelineKFv2 } from '~/concepts/pipelines/kfTypes';
 import { CheckboxTd, TableRowTitleDescription } from '~/components/table';
@@ -43,6 +43,7 @@ const PipelinesTableRow: React.FC<PipelinesTableRowProps> = ({
   const [isExpanded, setExpanded] = React.useState(false);
   const [importTarget, setImportTarget] = React.useState<PipelineKFv2 | null>(null);
   const {
+    version,
     totalSize,
     updatedDate,
     loading,
@@ -84,7 +85,23 @@ const PipelinesTableRow: React.FC<PipelinesTableRowProps> = ({
           />
           <Td>
             <TableRowTitleDescription
-              title={<TableText wrapModifier="truncate">{pipeline.display_name}</TableText>}
+              title={
+                loading ? (
+                  <Skeleton />
+                ) : version?.pipeline_version_id ? (
+                  <Link
+                    to={pipelineDetailsPath(
+                      namespace,
+                      pipeline.pipeline_id,
+                      version.pipeline_version_id,
+                    )}
+                  >
+                    <TableText wrapModifier="truncate">{pipeline.display_name}</TableText>
+                  </Link>
+                ) : (
+                  <TableText wrapModifier="truncate">{pipeline.display_name}</TableText>
+                )
+              }
               description={pipeline.description}
               descriptionAsMarkdown
             />

frontend/src/concepts/pipelines/content/tables/pipeline/usePipelineTableRowData.ts

@@ -6,6 +6,7 @@ import { FetchStateRefreshPromise } from '~/utilities/useFetchState';
 const usePipelineTableRowData = (
   pipeline: PipelineKFv2,
 ): {
+  version: PipelineVersionKFv2 | undefined;
   updatedDate: Date;
   totalSize: number;
   loading: boolean;
@@ -19,10 +20,10 @@ const usePipelineTableRowData = (
       sortDirection: 'desc',
     },
   );
+  const latestVersion = isLoaded ? items[0] : undefined;
+  const updatedDate = new Date(latestVersion?.created_at || pipeline.created_at);
 
-  const updatedDate = new Date(items[0]?.created_at || pipeline.created_at);
-
-  return { updatedDate, totalSize, loading: !isLoaded, refresh };
+  return { version: latestVersion, updatedDate, totalSize, loading: !isLoaded, refresh };
 };
 
 export default usePipelineTableRowData;