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,10 @@ 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')
+    ) {
       return intl.formatMessage({
         id: 'dashboard.taskRun.status.cancelled',
         defaultMessage: 'Cancelled'

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

@@ -45,6 +45,13 @@ it('DetailsHeader renders the cancelled state', () => {
   expect(queryByText(/Cancelled/i)).toBeTruthy();
 });
 
+it('DetailsHeader renders the cancelled state with status terminated', () => {
+  const { queryByText } = renderWithIntl(
+    <DetailsHeader {...props} status="terminated" reason="TaskRunCancelled" />
+  );
+  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,10 @@ class Step extends Component {
   statusLabel() {
     const { intl, reason, status } = this.props;
 
-    if (status === 'cancelled') {
+    if (
+      status === 'cancelled' ||
+      (status === 'terminated' && reason === 'TaskRunCancelled')
+    ) {
       return intl.formatMessage({
         id: 'dashboard.taskRun.status.cancelled',
         defaultMessage: 'Cancelled'

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

@@ -112,14 +112,17 @@ 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'] {
+    > 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,13 @@ it('Step renders cancelled state', () => {
   expect(queryByText(/Cancelled/i)).toBeTruthy();
 });
 
+it('Step renders cancelled state with status terminated', () => {
+  const { queryByText } = renderWithIntl(
+    <Step status="terminated" reason="TaskRunCancelled" />
+  );
+  expect(queryByText(/Cancelled/i)).toBeTruthy();
+});
+
 it('Step renders completed state', () => {
   const { queryByText } = renderWithIntl(
     <Step status="terminated" reason="Completed" />