Update components to support displaying new Cancelled status

TEP-0058 Graceful Termination deprecated the existing `PipelineRunCancelled`
status. Instead, runs have the status reason `Cancelled`.

The feature is still in alpha, so to test it out you can edit the `feature-flags`
ConfigMap to set `enable-api-fields: alpha`, then use one of the following values
when cancelling the PipelineRun:
- `Cancelled` replaces the existing `PipelineRunCancelled`, interrupts any
  executing tasks and does not run finally tasks
- `StoppedRunFinally` lets any executing tasks complete normally but does not
  start any new non-finally tasks, then runs finally tasks
- `CancelledRunFinally` interrupts any executing non-finally tasks, then executes
  finally tasks

In all 3 cases above, the PipelineRun status reason is `Cancelled`

Update tests and storybook to include 'Cancelled' variants.

The Dashboard API will still use `PipelineRunCancelled` to stop a PipelineRun.
A future change once the feature has been promoted to beta will switch to the
replacement `Cancelled` value. Some UI change may also be made to support the
alternative behaviours, tracking this in #2094

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -88,7 +88,6 @@ header.tkn--step-details-header {
   &[data-status='terminated'][data-reason='Error'],
   &[data-status='False'],
   &[data-status='cancelled'],
-  &[data-reason='PipelineRunCancelled'],
   &[data-reason='TaskRunCancelled'],
   &[data-reason='TaskRunTimeout'] {
     .tkn--status-label {

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -48,11 +48,12 @@ export default {
   title: 'Components/DetailsHeader'
 };
 
-export const Running = args => (
+export const Cancelled = args => (
   <DetailsHeader
-    status="running"
+    reason="TaskRunCancelled"
+    status="terminated"
     displayName="build"
-    taskRun={getTaskRun({ reason: 'Running', status: 'Unknown' })}
+    taskRun={getTaskRun({ reason: 'TaskRunCancelled', status: 'False' })}
     {...args}
   />
 );
@@ -96,3 +97,12 @@ export const Pending = args => (
     {...args}
   />
 );
+
+export const Running = args => (
+  <DetailsHeader
+    status="running"
+    displayName="build"
+    taskRun={getTaskRun({ reason: 'Running', status: 'Unknown' })}
+    {...args}
+  />
+);

packages/components/src/components/StatusIcon/StatusIcon.js

@@ -82,7 +82,9 @@ export default function StatusIcon({
     statusClass = hasWarning ? 'warning' : 'success';
   } else if (
     status === 'False' &&
-    (reason === 'PipelineRunCancelled' || reason === 'TaskRunCancelled')
+    (reason === 'PipelineRunCancelled' ||
+      reason === 'Cancelled' ||
+      reason === 'TaskRunCancelled')
   ) {
     statusClass = 'cancelled';
   } else if (

packages/components/src/components/StatusIcon/StatusIcon.stories.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -34,12 +34,18 @@ export default {
   title: 'Components/StatusIcon'
 };
 
-export const Queued = args => <StatusIcon {...args} />;
+export const Cancelled = args => (
+  <StatusIcon reason="TaskRunCancelled" status="False" {...args} />
+);
+
+export const Failed = args => <StatusIcon status="False" {...args} />;
 
 export const Pending = args => (
   <StatusIcon reason="Pending" status="Unknown" {...args} />
 );
 
+export const Queued = args => <StatusIcon {...args} />;
+
 export const Running = args => (
   <StatusIcon reason="Running" status="Unknown" {...args} />
 );
@@ -50,5 +56,3 @@ export const SucceededWithWarning = args => (
   <StatusIcon hasWarning status="True" {...args} />
 );
 SucceededWithWarning.storyName = 'Succeeded with warning';
-
-export const Failed = args => <StatusIcon status="False" {...args} />;

packages/components/src/components/StatusIcon/StatusIcon.test.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Tekton Authors
+Copyright 2021-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -28,6 +28,10 @@ describe('StatusIcon', () => {
     render(<StatusIcon reason="PipelineRunCancelled" status="False" />);
   });
 
+  it('renders Cancelled state', () => {
+    render(<StatusIcon reason="Cancelled" status="False" />);
+  });
+
   it('renders TaskRunCancelled state', () => {
     render(<StatusIcon reason="TaskRunCancelled" status="False" />);
   });

packages/utils/src/utils/index.js

@@ -316,13 +316,16 @@ export function runMatchesStatusFilter({ run, statusFilter }) {
       return (
         (status === 'False' &&
           reason !== 'PipelineRunCancelled' &&
+          reason !== 'Cancelled' &&
           reason !== 'TaskRunCancelled') ||
         (status === 'Unknown' && reason === 'PipelineRunCouldntCancel')
       );
     case 'cancelled':
       return (
         status === 'False' &&
-        (reason === 'PipelineRunCancelled' || reason === 'TaskRunCancelled')
+        (reason === 'PipelineRunCancelled' ||
+          reason === 'Cancelled' ||
+          reason === 'TaskRunCancelled')
       );
     case 'completed':
       return status === 'True';