Pipeline task node details link to execution

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab.tsx

@@ -1,14 +1,18 @@
 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';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 
 type SelectedNodeInputOutputTabProps = {
   task: PipelineTask;
@@ -19,6 +23,17 @@ const SelectedNodeInputOutputTab: React.FC<SelectedNodeInputOutputTabProps> = ({
   task,
   execution,
 }) => {
+  const { namespace } = usePipelinesAPI();
+  const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;
+
+  const executionDisplayName = React.useMemo(
+    () =>
+      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]
@@ -94,6 +109,20 @@ const SelectedNodeInputOutputTab: React.FC<SelectedNodeInputOutputTabProps> = ({
 
   return (
     <Stack hasGutter>
+      {isExperimentsAvailable && 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())}>
+                {executionDisplayName}
+              </Link>
+            </GridItem>
+          </Grid>
+        </StackItem>
+      )}
       {task.inputs && (
         <StackItem>
           <TaskDetailsInputOutput

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';
@@ -11,7 +12,52 @@ jest.mock('~/components/MaxHeightCodeEditor', () => ({
   MaxHeightCodeEditor: ({ code }: { code: string }) => JSON.stringify(JSON.parse(code)),
 }));
 
+jest.mock('~/concepts/areas/useIsAreaAvailable', () => () => ({
+  status: true,
+  featureFlags: {},
+  reliantAreas: {},
+  requiredComponents: {},
+  requiredCapabilities: {},
+  customCondition: jest.fn(),
+}));
+
 describe('SelectedNodeInputOutputTab', () => {
+  it('renders execution name', async () => {
+    render(
+      <BrowserRouter>
+        <SelectedNodeInputOutputTab
+          task={{
+            type: 'groupTask',
+            name: 'task-1',
+            inputs: {
+              params: [],
+            },
+          }}
+          execution={
+            {
+              id: 1,
+              customPropertiesMap: [
+                [
+                  'display_name',
+                  {
+                    stringValue: 'task-1',
+                  },
+                  'inputs',
+                  {
+                    structValue: {
+                      fieldsMap: [],
+                    },
+                  },
+                ],
+              ],
+            } as unknown as Execution.AsObject
+          }
+        />
+      </BrowserRouter>,
+    );
+    expect(screen.getByText('task-1')).toBeVisible();
+  });
+
   it('renders execution values for input parameters', async () => {
     render(
       <SelectedNodeInputOutputTab