From 98a73e20f4d0c2ceab346761a3075b76f5161e60 Mon Sep 17 00:00:00 2001
From: Dipanshu Gupta <dipanshug421@gmail.com>
Date: Wed, 29 May 2024 20:48:01 +0530
Subject: [PATCH] Pipeline task node details link to execution

---
 .../SelectedNodeInputOutputTab.tsx            | 31 +++++++++++++++++--
 .../SelectedNodeInputOutputTab.spec.tsx       | 28 +++++++++++++++++
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx
index 71b4b99d73..07835fca0d 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Grid, GridItem, Stack, StackItem } from '@patternfly/react-core';
 import { Value as ProtoValue } from 'google-protobuf/google/protobuf/struct_pb';
 
+import { Link } from 'react-router-dom';
 import { Execution } from '~/third_party/mlmd';
 import TaskDetailsInputOutput from '~/concepts/pipelines/content/pipelinesDetails/taskDetails/TaskDetailsInputOutput';
 import { PipelineTask, PipelineTaskParam } from '~/concepts/pipelines/topology';
 import { ExecutionDetailsPropertiesValueCode } from '~/pages/pipelines/global/experiments/executions/details/ExecutionDetailsPropertiesValue';
 import { InputDefinitionParameterType } from '~/concepts/pipelines/kfTypes';
 import { NoValue } from '~/components/NoValue';
+import { executionDetailsRoute } from '~/routes';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
 
 type SelectedNodeInputOutputTabProps = {
   task: PipelineTask;
@@ -19,6 +22,16 @@ const SelectedNodeInputOutputTab: React.FC<SelectedNodeInputOutputTabProps> = ({
   task,
   execution,
 }) => {
+  const { namespace } = usePipelinesAPI();
+
+  const getExecutionDisplayNameFromObject = React.useCallback(
+    () =>
+      execution?.customPropertiesMap.find(
+        ([customPropKey]) => customPropKey === 'display_name',
+      )?.[1].stringValue || '(No name)',
+    [execution?.customPropertiesMap],
+  );
+
   const getExecutionFieldsMap = React.useCallback(
     (key: string) =>
       execution?.customPropertiesMap.find(([customPropKey]) => customPropKey === key)?.[1]
@@ -88,12 +101,26 @@ const SelectedNodeInputOutputTab: React.FC<SelectedNodeInputOutputTabProps> = ({
     [getExecutionValueFromInputType],
   );
 
-  if (!task.inputs && !task.outputs) {
+  if (!task.inputs && !task.outputs && !execution) {
     return <>No content</>;
   }
 
   return (
     <Stack hasGutter>
+      {execution?.id && (
+        <StackItem data-testid="execution-name">
+          <Grid hasGutter>
+            <GridItem span={6}>
+              <b>Execution name</b>
+            </GridItem>
+            <GridItem span={6}>
+              <Link to={executionDetailsRoute(namespace, execution.id.toString())}>
+                {getExecutionDisplayNameFromObject()}
+              </Link>
+            </GridItem>
+          </Grid>
+        </StackItem>
+      )}
       {task.inputs && (
         <StackItem>
           <TaskDetailsInputOutput
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/__tests__/SelectedNodeInputOutputTab.spec.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/__tests__/SelectedNodeInputOutputTab.spec.tsx
index 0357f3cbf1..b2c287b6bc 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/__tests__/SelectedNodeInputOutputTab.spec.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/__tests__/SelectedNodeInputOutputTab.spec.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
+import { BrowserRouter } from 'react-router-dom';
 import SelectedNodeInputOutputTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab';
 import { InputDefinitionParameterType } from '~/concepts/pipelines/kfTypes';
 import { Execution } from '~/third_party/mlmd';
@@ -12,6 +13,33 @@ jest.mock('~/components/MaxHeightCodeEditor', () => ({
 }));
 
 describe('SelectedNodeInputOutputTab', () => {
+  it('renders execution name', async () => {
+    render(
+      <BrowserRouter>
+        <SelectedNodeInputOutputTab
+          task={{
+            type: 'groupTask',
+            name: 'task-1',
+          }}
+          execution={
+            {
+              id: 1,
+              customPropertiesMap: [
+                [
+                  'display_name',
+                  {
+                    stringValue: 'task-1',
+                  },
+                ],
+              ],
+            } as unknown as Execution.AsObject
+          }
+        />
+      </BrowserRouter>,
+    );
+    expect(screen.getByText('task-1')).toBeVisible();
+  });
+
   it('renders execution values for input parameters', async () => {
     render(
       <SelectedNodeInputOutputTab