Fix styles and label for cancelled steps

Pipelines now updates the status of steps for cancelled or timed out
TaskRuns, see tektoncd/pipeline#3088

Update the styles and labels to display these as cancelled rather
than failed (which was the fallback for unknown status/reason combos)

Author: AlanGreene

packages/components/src/components/DetailsHeader/DetailsHeader.js

@@ -52,7 +52,11 @@ class DetailsHeader extends Component {
     const { intl, reason, status, taskRun } = this.props;
     const { reason: taskReason, status: taskStatus } = getStatus(taskRun);
 
-    if (status === 'cancelled') {
+    if (
+      status === 'cancelled' ||
+      (status === 'terminated' &&
+        (reason === 'TaskRunCancelled' || reason === 'TaskRunTimeout'))
+    ) {
       return intl.formatMessage({
         id: 'dashboard.taskRun.status.cancelled',
         defaultMessage: 'Cancelled'

packages/components/src/components/DetailsHeader/DetailsHeader.scss

@@ -98,7 +98,8 @@ limitations under the License.
   }
   &[data-status='cancelled'],
   &[data-reason='PipelineRunCancelled'],
-  &[data-reason='TaskRunCancelled'] {
+  &[data-reason='TaskRunCancelled'],
+  &[data-reason='TaskRunTimeout'] {
     .tkn--status-icon {
       fill: $failed;
     }

packages/components/src/components/DetailsHeader/DetailsHeader.test.js

@@ -45,6 +45,20 @@ it('DetailsHeader renders the cancelled state', () => {
   expect(queryByText(/Cancelled/i)).toBeTruthy();
 });
 
+it('DetailsHeader renders the cancelled state for TaskRunCancelled', () => {
+  const { queryByText } = renderWithIntl(
+    <DetailsHeader {...props} status="terminated" reason="TaskRunCancelled" />
+  );
+  expect(queryByText(/Cancelled/i)).toBeTruthy();
+});
+
+it('DetailsHeader renders the cancelled state for TaskRunTimeout', () => {
+  const { queryByText } = renderWithIntl(
+    <DetailsHeader {...props} status="terminated" reason="TaskRunTimeout" />
+  );
+  expect(queryByText(/Cancelled/i)).toBeTruthy();
+});
+
 it('DetailsHeader renders the failed state', () => {
   const { queryByText } = renderWithIntl(
     <DetailsHeader {...props} status="terminated" />

packages/components/src/components/Step/Step.js

@@ -57,7 +57,11 @@ class Step extends Component {
   statusLabel() {
     const { intl, reason, status } = this.props;
 
-    if (status === 'cancelled') {
+    if (
+      status === 'cancelled' ||
+      (status === 'terminated' &&
+        (reason === 'TaskRunCancelled' || reason === 'TaskRunTimeout'))
+    ) {
       return intl.formatMessage({
         id: 'dashboard.taskRun.status.cancelled',
         defaultMessage: 'Cancelled'

packages/components/src/components/Step/Step.scss

@@ -112,14 +112,18 @@ limitations under the License.
       font-weight: bold;
     }
   }
-  &[data-status='cancelled'] > a.tkn--step-link {
-    opacity: 1;
-    .tkn--step-icon {
-      fill: $failed;
-    }
-    .tkn--status-label {
-      color: $failed;
-      font-weight: bold;
+  &[data-status='cancelled'],
+  &[data-status='terminated'][data-reason='TaskRunCancelled'],
+  &[data-status='terminated'][data-reason='TaskRunTimeout'] {
+    > a.tkn--step-link {
+      opacity: 1;
+      .tkn--step-icon {
+        fill: $failed;
+      }
+      .tkn--status-label {
+        color: $failed;
+        font-weight: bold;
+      }
     }
   }
 }

packages/components/src/components/Step/Step.test.js

@@ -47,6 +47,20 @@ it('Step renders cancelled state', () => {
   expect(queryByText(/Cancelled/i)).toBeTruthy();
 });
 
+it('Step renders cancelled state for TaskRunCancelled', () => {
+  const { queryByText } = renderWithIntl(
+    <Step status="terminated" reason="TaskRunCancelled" />
+  );
+  expect(queryByText(/Cancelled/i)).toBeTruthy();
+});
+
+it('Step renders cancelled state for TaskRunTimeout', () => {
+  const { queryByText } = renderWithIntl(
+    <Step status="terminated" reason="TaskRunTimeout" />
+  );
+  expect(queryByText(/Cancelled/i)).toBeTruthy();
+});
+
 it('Step renders completed state', () => {
   const { queryByText } = renderWithIntl(
     <Step status="terminated" reason="Completed" />