Show archived status (#707)

* Show archived status

* Allow icons with Archived

Author: Assem-Hafez

src/views/shared/workflow-status-tag/__tests__/workflow-status-tag.test.tsx

@@ -23,6 +23,7 @@ describe('WorkflowStatusTag', () => {
     workflowStatus: WorkflowStatus;
     text: string;
     link?: string;
+    isArchived?: boolean;
   }> = [
     {
       name: 'should render Running correctly',
@@ -65,17 +66,26 @@ describe('WorkflowStatusTag', () => {
       text: 'Continued As New',
       link: 'mock_continued_workflow_link',
     },
+    {
+      name: 'should render Archived correctly',
+      workflowStatus: 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID',
+      isArchived: true,
+      text: 'Archived',
+    },
   ];
 
   tests.forEach((test) => {
     it(test.name, () => {
       render(
-        <WorkflowStatusTag status={test.workflowStatus} link={test.link} />
+        <WorkflowStatusTag
+          status={test.workflowStatus}
+          link={test.link}
+          isArchived={test.isArchived}
+        />
       );
 
       const tag = screen.getByText(test.text);
       expect(tag).toBeInTheDocument();
-
       expect(screen.getByText('Mock icon start')).toBeInTheDocument();
       expect(screen.getByText('Mock icon end')).toBeInTheDocument();
 

src/views/shared/workflow-status-tag/workflow-status-tag-icon/workflow-status-tag-icon.tsx

@@ -8,6 +8,7 @@ import { type Props } from './workflow-status-tag-icon.types';
 export default function WorkflowStatusTagIcon(props: Props) {
   switch (props.kind) {
     case 'start':
+      if (props.isArchived) return null;
       if (props.status === WORKFLOW_STATUSES.running) {
         return <styled.Spinner aria-label="running-spinner" />;
       }

src/views/shared/workflow-status-tag/workflow-status-tag-icon/workflow-status-tag-icon.types.ts

@@ -6,4 +6,5 @@ export type Props = {
   kind: WorkflowStatusTagIconKind;
   status: WorkflowStatus;
   link?: string;
+  isArchived?: boolean;
 };

src/views/shared/workflow-status-tag/workflow-status-tag.styles.ts

@@ -11,27 +11,31 @@ export function overrides(args: OverridesArgs) {
       Root: {
         style: ({ $theme }: { $theme: Theme }): StyleObject => {
           let tagColor: string;
-          switch (args.status) {
-            case WORKFLOW_STATUSES.running:
-              tagColor = $theme.colors.accent100;
-              break;
-            case WORKFLOW_STATUSES.completed:
-              tagColor = $theme.colors.positive100;
-              break;
-            case WORKFLOW_STATUSES.failed:
-            case WORKFLOW_STATUSES.timedOut:
-              tagColor = $theme.colors.negative100;
-              break;
-            case WORKFLOW_STATUSES.canceled:
-            case WORKFLOW_STATUSES.terminated:
-              tagColor = $theme.colors.warning100;
-              break;
-            case WORKFLOW_STATUSES.continuedAsNew:
-              tagColor = $theme.colors.primary100;
-              break;
-            default:
-              tagColor = $theme.colors.negative100;
-              break;
+          if (args.isArchived) {
+            tagColor = $theme.colors.warning100;
+          } else {
+            switch (args.status) {
+              case WORKFLOW_STATUSES.running:
+                tagColor = $theme.colors.accent100;
+                break;
+              case WORKFLOW_STATUSES.completed:
+                tagColor = $theme.colors.positive100;
+                break;
+              case WORKFLOW_STATUSES.failed:
+              case WORKFLOW_STATUSES.timedOut:
+                tagColor = $theme.colors.negative100;
+                break;
+              case WORKFLOW_STATUSES.canceled:
+              case WORKFLOW_STATUSES.terminated:
+                tagColor = $theme.colors.warning100;
+                break;
+              case WORKFLOW_STATUSES.continuedAsNew:
+                tagColor = $theme.colors.primary100;
+                break;
+              default:
+                tagColor = $theme.colors.negative100;
+                break;
+            }
           }
 
           return {

src/views/shared/workflow-status-tag/workflow-status-tag.tsx

@@ -13,7 +13,13 @@ export default function WorkflowStatusTag(props: Props) {
     <Tag
       variant={VARIANT.solid}
       closeable={false}
-      overrides={overrides({ status: props.status, link: props.link }).tag}
+      overrides={
+        overrides({
+          status: props.status,
+          link: props.link,
+          isArchived: props.isArchived,
+        }).tag
+      }
       // To render hover & focus effects for the tag, we need to pass an onClick hander
       // However, since we are already passing a link through overrides, we pass a no-op here
       {...(props.link && {
@@ -24,12 +30,14 @@ export default function WorkflowStatusTag(props: Props) {
         kind="start"
         status={props.status}
         link={props.link}
+        isArchived={props.isArchived}
       />
-      {WORKFLOW_STATUS_NAMES[props.status]}
+      {props.isArchived ? 'Archived' : WORKFLOW_STATUS_NAMES[props.status]}
       <WorkflowStatusTagIcon
         kind="end"
         status={props.status}
         link={props.link}
+        isArchived={props.isArchived}
       />
     </Tag>
   );

src/views/shared/workflow-status-tag/workflow-status-tag.types.ts

@@ -5,9 +5,11 @@ export type WorkflowStatus = WorkflowExecutionCloseStatus;
 export type Props = {
   status: WorkflowStatus;
   link?: string;
+  isArchived?: boolean;
 };
 
 export type OverridesArgs = {
   status: WorkflowStatus;
   link?: string;
+  isArchived?: boolean;
 };

src/views/workflow-page/helpers/__tests__/get-workflow-status-tag-props.test.ts

@@ -133,4 +133,11 @@ describe('getWorkflowStatusTagProps', () => {
       status: 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID',
     });
   });
+
+  it('should return INVALID status and isArchived true for archived workflows', () => {
+    expect(getWorkflowStatusTagProps(undefined, undefined, true)).toEqual({
+      status: 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID',
+      isArchived: true,
+    });
+  });
 });

src/views/workflow-page/helpers/get-workflow-status-tag-props.ts

@@ -30,8 +30,15 @@ const getWorkflowStatusTagProps = (
     HistoryEvent,
     'attributes' | 'workflowExecutionContinuedAsNewEventAttributes'
   > | null,
-  workflowInfo?: { cluster: string; workflowId: string; domain: string }
-): Pick<WorkflowStatusTagProps, 'status' | 'link'> => {
+  workflowInfo?: { cluster: string; workflowId: string; domain: string },
+  isArchived?: boolean
+): Pick<WorkflowStatusTagProps, 'status' | 'link' | 'isArchived'> => {
+  if (isArchived)
+    return {
+      status: 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID',
+      isArchived: true,
+    };
+
   if (!lastEvent || !lastEvent.attributes)
     return { status: 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID' };
 

src/views/workflow-page/workflow-page-status-tag/workflow-page-status-tag.tsx

@@ -28,9 +28,12 @@ export default function WorkflowPageStatusTag() {
     return null;
   }
 
-  const closeEvent = workflowDetails.workflowExecutionInfo?.closeEvent;
+  const { closeEvent, isArchived } =
+    workflowDetails.workflowExecutionInfo || {};
 
   return (
-    <WorkflowStatusTag {...getWorkflowStatusTagProps(closeEvent, params)} />
+    <WorkflowStatusTag
+      {...getWorkflowStatusTagProps(closeEvent, params, isArchived)}
+    />
   );
 }

src/views/workflow-summary-tab/config/workflow-summary-tab-details.config.ts

@@ -11,14 +11,18 @@ const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
   {
     key: 'status',
     getLabel: () => 'Status',
-    valueComponent: ({ closeEvent, decodedPageUrlParams }) =>
+    valueComponent: ({ closeEvent, decodedPageUrlParams, workflowDetails }) =>
       createElement(
         WorkflowStatusTag,
-        getWorkflowStatusTagProps(closeEvent, {
-          cluster: decodedPageUrlParams.cluster,
-          workflowId: decodedPageUrlParams.workflowId,
-          domain: decodedPageUrlParams.domain,
-        })
+        getWorkflowStatusTagProps(
+          closeEvent,
+          {
+            cluster: decodedPageUrlParams.cluster,
+            workflowId: decodedPageUrlParams.workflowId,
+            domain: decodedPageUrlParams.domain,
+          },
+          workflowDetails.workflowExecutionInfo?.isArchived
+        )
       ),
   },
   {
@@ -80,6 +84,10 @@ const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
           : '-'
       );
     },
+    hide: ({ workflowDetails }) => {
+      //hide it on archived events as the value is not available
+      return Boolean(workflowDetails.workflowExecutionInfo?.isArchived);
+    },
   },
   {
     key: 'cronSchedule',
@@ -94,6 +102,10 @@ const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
     getLabel: () => 'History events',
     valueComponent: ({ workflowDetails }) =>
       workflowDetails.workflowExecutionInfo?.historyLength,
+    hide: ({ workflowDetails }) => {
+      //hide it on archived events as the value is not available
+      return Boolean(workflowDetails.workflowExecutionInfo?.isArchived);
+    },
   },
   {
     key: 'taskList',