Bug 1828703: Task listing improvements on Pipeline detail page

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineDetails.tsx

@@ -4,7 +4,6 @@ import {
   getResourceModelFromTaskKind,
   Pipeline,
   PipelineTask,
-  PipelineTaskRef,
 } from '../../../../utils/pipeline-augment';
 import { TriggerTemplateModel } from '../../../../models';
 import { usePipelineTriggerTemplateNames, RouteTemplate } from '../../utils/triggers';
@@ -19,11 +18,11 @@ interface PipelineDetailsProps {
 const PipelineDetails: React.FC<PipelineDetailsProps> = ({ obj: pipeline }) => {
   const routeTemplates: RouteTemplate[] = usePipelineTriggerTemplateNames(pipeline) || [];
   const taskLinks = pipeline.spec.tasks
-    .map((task: PipelineTask) => task.taskRef)
-    .filter((ref) => !!ref)
-    .map((taskRef: PipelineTaskRef) => ({
-      model: getResourceModelFromTaskKind(taskRef.kind),
-      name: taskRef.name,
+    .filter((pipelineTask: PipelineTask) => !!pipelineTask.taskRef)
+    .map((task) => ({
+      model: getResourceModelFromTaskKind(task.taskRef.kind),
+      name: task.taskRef.name,
+      displayName: task.name,
     }));
   return (
     <div className="co-m-pane__body">

frontend/packages/dev-console/src/components/pipelines/resource-overview/DynamicResourceLinkList.tsx

@@ -7,6 +7,7 @@ import './DynamicResourceLinkList.scss';
 export type ResourceModelLink = {
   model: K8sKind;
   name: string;
+  displayName?: string;
 };
 
 type DynamicResourceLinkListProps = {
@@ -28,11 +29,22 @@ const DynamicResourceLinkList: React.FC<DynamicResourceLinkListProps> = ({
       <dl>
         <dt>{title}</dt>
         <dd>
-          {links.map(({ name, model }) => {
+          {links.map(({ name, model, displayName = '' }) => {
             const kind = referenceForModel(model);
+            let linkName = name;
+            if (displayName.length > 0 && name !== displayName) {
+              linkName += ` (${displayName})`;
+            }
             return (
               <div key={`${kind}/${name}`}>
-                <ResourceLink kind={kind} name={name} namespace={namespace} title={name} inline />
+                <ResourceLink
+                  kind={kind}
+                  name={name}
+                  displayName={linkName}
+                  namespace={namespace}
+                  title={name}
+                  inline
+                />
               </div>
             );
           })}

frontend/packages/dev-console/src/components/pipelines/resource-overview/__tests__/DynamicResourceLinkList.spec.tsx

@@ -32,4 +32,29 @@ describe('DynamicResourceLinkList component', () => {
   it('should render proper title based on the model', () => {
     expect(wrapper.find('dt').text()).toBe(props.title);
   });
+
+  it('should render only the name when displayName is not passed', () => {
+    wrapper.setProps({
+      links: [{ model: TaskModel, name: 'custom-task-name' }],
+    });
+    expect(wrapper.find(ResourceLink).props().displayName).toBe('custom-task-name');
+  });
+
+  it('should render the custom name and displayName when displayName is passed', () => {
+    wrapper.setProps({
+      links: [{ model: TaskModel, name: 'custom-task-name', displayName: 'original-task-name' }],
+    });
+    expect(wrapper.find(ResourceLink).props().displayName).toBe(
+      'custom-task-name (original-task-name)',
+    );
+  });
+
+  it('should not render the custom name and displayName when displayName is matched', () => {
+    wrapper.setProps({
+      links: [{ model: TaskModel, name: 'custom-task-name', displayName: 'custom-task-name' }],
+    });
+    const { displayName } = wrapper.find(ResourceLink).props();
+    expect(displayName).not.toBe('custom-task-name (custom-task-name)');
+    expect(displayName).toBe('custom-task-name');
+  });
 });