Sort matrix TaskRuns by display name on the PipelineRun details page

To ensure a stable order when showing the matrix TaskRuns in the UI,
sort by display name. This should also work for custom tasks that
produce multiple TaskRuns.

If there is no display name we maintain the source order, so there is
no change to the user experience in that case.

packages/utils/src/utils/index.js

@@ -511,17 +511,34 @@ export function getTaskRunsWithPlaceholders({
       }
       return acc;
     }, {});
+    const taskRunsToSort = [];
     realTaskRuns.forEach(taskRun => {
-      taskRunsToDisplay.push(
+      taskRunsToSort.push(
         addDashboardLabels({
           displayName: displayNames[taskRun.metadata.name],
           pipelineTask,
           taskRun
         })
       );
     });
-
-    if (!realTaskRuns.length) {
+    if (taskRunsToSort.length) {
+      // sort by display name to provide a stable order in the UI
+      // if there's no display name stick with the source order
+      if (
+        taskRunsToSort[0].metadata.labels[labelConstants.DASHBOARD_DISPLAY_NAME]
+      ) {
+        // sort only if at least one of the TaskRuns has a display name,
+        // it's likely they all do in that case (e.g. matrix TaskRuns)
+        taskRunsToSort.sort((taskRunA, taskRunB) => {
+          const displayNameA =
+            taskRunA.metadata.labels[labelConstants.DASHBOARD_DISPLAY_NAME];
+          const displayNameB =
+            taskRunB.metadata.labels[labelConstants.DASHBOARD_DISPLAY_NAME];
+          return displayNameA.localeCompare(displayNameB);
+        });
+      }
+      taskRunsToDisplay.push(...taskRunsToSort);
+    } else {
       taskRunsToDisplay.push(
         addDashboardLabels({
           pipelineTask,

packages/utils/src/utils/index.test.js

@@ -849,6 +849,11 @@ describe('getTaskRunsWithPlaceholders', () => {
     const displayName = 'aDisplayName';
     const pipelineTaskName = 'aPipelineTaskName';
     const taskRunName = 'aTaskRunName';
+    const matrixPipelineTaskName = 'aMatrixPipelineTaskName';
+    const matrixTaskRunName1 = 'matrixTaskRun1';
+    const matrixTaskRunName2 = 'matrixTaskRun2';
+    const matrixTaskRunDisplayName1 = 'matrixRunDisplayName1';
+    const matrixTaskRunDisplayName2 = 'matrixRunDisplayName2';
 
     const pipelineRun = {
       spec: {
@@ -858,16 +863,29 @@ describe('getTaskRunsWithPlaceholders', () => {
       },
       status: {
         childReferences: [
+          {
+            displayName: matrixTaskRunDisplayName2,
+            name: matrixTaskRunName2,
+            pipelineTaskName: matrixPipelineTaskName
+          },
           {
             displayName,
             name: taskRunName,
             pipelineTaskName
+          },
+          {
+            displayName: matrixTaskRunDisplayName1,
+            name: matrixTaskRunName1,
+            pipelineTaskName: matrixPipelineTaskName
           }
         ],
         pipelineSpec: {
           tasks: [
             {
               name: pipelineTaskName
+            },
+            {
+              name: matrixPipelineTaskName
             }
           ]
         }
@@ -881,13 +899,37 @@ describe('getTaskRunsWithPlaceholders', () => {
         name: taskRunName
       }
     };
+    const matrixTaskRun1 = {
+      metadata: {
+        labels: {
+          [labels.PIPELINE_TASK]: matrixPipelineTaskName
+        },
+        name: matrixTaskRunName1
+      }
+    };
+    const matrixTaskRun2 = {
+      metadata: {
+        labels: {
+          [labels.PIPELINE_TASK]: matrixPipelineTaskName
+        },
+        name: matrixTaskRunName2
+      }
+    };
+
     const runs = getTaskRunsWithPlaceholders({
       pipelineRun,
-      taskRuns: [taskRun]
+      taskRuns: [matrixTaskRun2, taskRun, matrixTaskRun1]
     });
+    // sorts matrix TaskRuns by display name
     expect(runs[0].metadata.labels[labels.DASHBOARD_DISPLAY_NAME]).toEqual(
       displayName
     );
+    expect(runs[1].metadata.labels[labels.DASHBOARD_DISPLAY_NAME]).toEqual(
+      matrixTaskRunDisplayName1
+    );
+    expect(runs[2].metadata.labels[labels.DASHBOARD_DISPLAY_NAME]).toEqual(
+      matrixTaskRunDisplayName2
+    );
   });
 });