Show pending tasks count in Workflow History tab (#698)

* Add pending badge

* More changes

* Add tests

* Make the end enhancer a generic component

* Fix component type

Author: adhityamamallan

src/components/page-tabs/__tests__/page-tabs.test.tsx

@@ -1,18 +1,25 @@
 import { render, fireEvent } from '@/test-utils/rtl';
 
 import PageTabs from '../page-tabs';
+import { type PageTabsList } from '../page-tabs.types';
 
 // Mock props
 const getArtwork = (number: number) =>
   function Artwork() {
     return <div>{`Artwork${number}`}</div>;
   };
 
-const tabList = [
+const tabList: PageTabsList = [
   { key: 'tab1', title: 'Tab 1', artwork: getArtwork(1) },
   { key: 'tab2', title: 'Tab 2' },
   { key: 'tab3', title: 'Tab 3', artwork: getArtwork(3) },
+  {
+    key: 'tab4',
+    title: 'Tab 4',
+    endEnhancer: () => <div data-testid="mock-end-enhancer" />,
+  },
 ];
+
 const selectedTab = 'tab1';
 const setSelectedTab = jest.fn();
 
@@ -38,6 +45,18 @@ describe('PageTabs', () => {
     });
   });
 
+  it('renders tabs with correct end enhancer', () => {
+    const { getByTestId } = render(
+      <PageTabs
+        tabList={tabList}
+        selectedTab={selectedTab}
+        setSelectedTab={setSelectedTab}
+      />
+    );
+
+    expect(getByTestId('mock-end-enhancer')).toBeInTheDocument();
+  });
+
   it('calls setSelectedTab when a tab is clicked', () => {
     const { getByText } = render(
       <PageTabs

src/components/page-tabs/page-tabs.styles.ts

@@ -1,9 +1,18 @@
-import type { Theme } from 'baseui';
+import { styled as createStyled, type Theme } from 'baseui';
 import { type TabOverrides, type TabsOverrides } from 'baseui/tabs-motion';
 import type { StyleObject } from 'styletron-react';
 
 import { getMediaQueryMargins } from '@/utils/media-query/get-media-queries-margins';
 
+export const styled = {
+  TabTitleContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: $theme.sizing.scale400,
+  })),
+};
+
 export const overrides = {
   tabs: {
     Root: {

src/components/page-tabs/page-tabs.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Tabs, Tab } from 'baseui/tabs-motion';
 
-import { overrides } from './page-tabs.styles';
+import { overrides, styled } from './page-tabs.styles';
 import { type Props } from './page-tabs.types';
 
 export default function PageTabs({
@@ -18,12 +18,17 @@ export default function PageTabs({
       }}
       overrides={overrides.tabs}
     >
-      {tabList.map(({ key, title, artwork }) => (
+      {tabList.map((tab) => (
         <Tab
           overrides={overrides.tab}
-          key={key}
-          title={title}
-          artwork={artwork}
+          key={tab.key}
+          title={
+            <styled.TabTitleContainer>
+              {tab.title}
+              {tab.endEnhancer ? <tab.endEnhancer /> : null}
+            </styled.TabTitleContainer>
+          }
+          artwork={tab.artwork}
         />
       ))}
     </Tabs>

src/components/page-tabs/page-tabs.types.ts

@@ -5,6 +5,7 @@ import { type IconProps } from 'baseui/icon';
 export type PageTab = {
   key: string;
   title: string;
+  endEnhancer?: React.ComponentType<Record<string, never>>;
   artwork?: React.ComponentType<{
     size: IconProps['size'];
     color: IconProps['color'];

src/views/workflow-page/__fixtures__/describe-workflow-response.ts

@@ -0,0 +1,153 @@
+import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflow/describe-workflow.types';
+
+export const describeWorkflowResponse: DescribeWorkflowResponse = {
+  pendingActivities: [
+    {
+      activityId: 'test-activity-2',
+      activityType: {
+        name: 'activity.test.TestActivity',
+      },
+      state: 'PENDING_ACTIVITY_STATE_STARTED',
+      heartbeatDetails: null,
+      lastHeartbeatTime: {
+        seconds: '1729168753',
+        nanos: 969000000,
+      },
+      lastStartedTime: {
+        seconds: '1729168753',
+        nanos: 969000000,
+      },
+      attempt: 0,
+      maximumAttempts: 5,
+      scheduledTime: null,
+      expirationTime: {
+        seconds: '1729169113',
+        nanos: 969000000,
+      },
+      lastFailure: null,
+      lastWorkerIdentity: 'test-worker-identity-2',
+      startedWorkerIdentity: 'test-worker-identity-2',
+    },
+    {
+      activityId: 'test-activity-1',
+      activityType: {
+        name: 'activity.test.TestActivity',
+      },
+      state: 'PENDING_ACTIVITY_STATE_STARTED',
+      heartbeatDetails: null,
+      lastHeartbeatTime: {
+        seconds: '1729168753',
+        nanos: 969000000,
+      },
+      lastStartedTime: {
+        seconds: '1729168753',
+        nanos: 969000000,
+      },
+      attempt: 0,
+      maximumAttempts: 0,
+      scheduledTime: null,
+      expirationTime: null,
+      lastFailure: null,
+      lastWorkerIdentity: 'test-worker-identity-1',
+      startedWorkerIdentity: 'test-worker-identity-1',
+    },
+  ],
+  pendingChildren: [],
+  executionConfiguration: {
+    taskList: {
+      name: 'test-task-queue',
+      kind: 'TASK_LIST_KIND_INVALID',
+    },
+    executionStartToCloseTimeout: {
+      seconds: '360',
+      nanos: 0,
+    },
+    taskStartToCloseTimeout: {
+      seconds: '10',
+      nanos: 0,
+    },
+  },
+  workflowExecutionInfo: {
+    partitionConfig: {
+      'isolation-group': 'test-group',
+    },
+    workflowExecution: {
+      workflowId: 'test-workflow-id',
+      runId: 'test-run-id',
+    },
+    type: {
+      name: 'workflow.test.base',
+    },
+    startTime: {
+      seconds: '1729168753',
+      nanos: 919000000,
+    },
+    closeTime: {
+      seconds: '1729168756',
+      nanos: 76020275,
+    },
+    closeStatus: 'WORKFLOW_EXECUTION_CLOSE_STATUS_TERMINATED',
+    historyLength: '31',
+    parentExecutionInfo: {
+      domainId: 'test-domain-id',
+      domainName: 'test-domain-name',
+      workflowExecution: {
+        workflowId: 'test-parent-workflow-id',
+        runId: 'test-parent-run-id',
+      },
+      initiatedId: '7',
+    },
+    executionTime: {
+      seconds: '1729168753',
+      nanos: 919000000,
+    },
+    memo: {
+      fields: {},
+    },
+    searchAttributes: {
+      indexedFields: {
+        BinaryChecksums: {
+          data: 'test-binary-checksum',
+        },
+        CadenceChangeVersion: {
+          data: 'test-change-version',
+        },
+      },
+    },
+    autoResetPoints: {
+      points: [
+        {
+          binaryChecksum: 'test-binary-checksum',
+          runId: 'test-run-id',
+          firstDecisionCompletedId: '4',
+          createdTime: {
+            seconds: '1729168753',
+            nanos: 968806515,
+          },
+          expiringTime: null,
+          resettable: true,
+        },
+      ],
+    },
+    taskList: '',
+    isCron: false,
+    updateTime: null,
+    closeEvent: {
+      eventId: '31',
+      eventTime: {
+        seconds: '1729168756',
+        nanos: 76020275,
+      },
+      version: 'test-version',
+      taskId: 'test-task-id',
+      workflowExecutionTerminatedEventAttributes: {
+        reason: 'test-reason',
+        details: null,
+        identity: 'test-identity',
+      },
+      attributes: 'workflowExecutionTerminatedEventAttributes',
+    },
+    isArchived: false,
+  },
+  pendingDecision: null,
+};

src/views/workflow-page/config/workflow-page-status-refetch-interval.config.ts

@@ -0,0 +1,3 @@
+const WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL = 10000;
+
+export default WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL;

src/views/workflow-page/config/workflow-page-status-refresh-interval.config.ts

@@ -5,6 +5,7 @@ import {
   MdOutlineTerminal,
 } from 'react-icons/md';
 
+import WorkflowPagePendingEventsBadge from '../workflow-page-pending-events-badge/workflow-page-pending-events-badge';
 import type { WorkflowPageTabs } from '../workflow-page-tabs/workflow-page-tabs.types';
 
 const workflowPageTabsConfig = [
@@ -16,6 +17,7 @@ const workflowPageTabsConfig = [
   {
     key: 'history',
     title: 'History',
+    endEnhancer: WorkflowPagePendingEventsBadge,
     artwork: MdOutlineHistory,
   },
   {

src/views/workflow-page/config/workflow-page-tabs.config.ts

@@ -0,0 +1,45 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflow/describe-workflow.types';
+import request from '@/utils/request';
+import { type RequestError } from '@/utils/request/request-error';
+
+import WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL from '../config/workflow-page-status-refetch-interval.config';
+
+type Props = {
+  domain: string;
+  cluster: string;
+  workflowId: string;
+  runId: string;
+  refetchInterval?: number;
+};
+
+export default function useDescribeWorkflow({
+  refetchInterval = WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL,
+  ...params
+}: Props) {
+  return useSuspenseQuery<
+    DescribeWorkflowResponse,
+    RequestError,
+    DescribeWorkflowResponse,
+    [string, typeof params]
+  >({
+    queryKey: ['describe_workflow', params] as const,
+    queryFn: ({ queryKey: [_, p] }) =>
+      request(
+        `/api/domains/${p.domain}/${p.cluster}/workflows/${p.workflowId}/${p.runId}`
+      ).then((res) => res.json()),
+    refetchInterval: (query) => {
+      const { closeStatus } = query.state.data?.workflowExecutionInfo || {};
+      if (
+        !closeStatus ||
+        closeStatus === 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID'
+      )
+        return refetchInterval;
+
+      return false;
+    },
+  });
+}

src/views/workflow-page/hooks/use-describe-workflow.ts

@@ -0,0 +1,65 @@
+import React, { Suspense } from 'react';
+
+import { HttpResponse } from 'msw';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import { describeWorkflowResponse } from '../../__fixtures__/describe-workflow-response';
+import WorkflowPagePendingEventsBadge from '../workflow-page-pending-events-badge';
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useParams: () => ({
+    cluster: 'testCluster',
+    domain: 'testDomain',
+    workflowId: 'testWorkflowId',
+    runId: 'testRunId',
+    workflowTab: 'summary',
+  }),
+}));
+
+describe(WorkflowPagePendingEventsBadge.name, () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render pending activities count', async () => {
+    setup({});
+
+    expect(await screen.findByText('2 pending')).toBeInTheDocument();
+  });
+
+  it('should render nothing if the endpoint errors out', async () => {
+    const { container } = setup({ isError: true });
+
+    expect(container.firstChild).toBeEmptyDOMElement();
+  });
+});
+
+function setup({ isError }: { isError?: boolean }) {
+  return render(
+    <Suspense>
+      <WorkflowPagePendingEventsBadge />
+    </Suspense>,
+    {
+      endpointsMocks: [
+        {
+          path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId',
+          httpMethod: 'GET',
+          ...(isError
+            ? {
+                httpResolver: () => {
+                  return HttpResponse.json(
+                    { message: 'Failed to fetch workflow summary' },
+                    { status: 500 }
+                  );
+                },
+              }
+            : {
+                jsonResponse: describeWorkflowResponse,
+              }),
+        },
+      ],
+    }
+  );
+}