Improve loading for workflow page (#873)

Assem-Uber · web-flow · commit 71c3aca6dc13 · 2025-04-14T16:58:52.000+02:00
improve loading for workflow page
diff --git a/src/views/workflow-actions/__tests__/workflow-actions.test.tsx b/src/views/workflow-actions/__tests__/workflow-actions.test.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 
 import { HttpResponse } from 'msw';
 
@@ -48,7 +48,7 @@ describe(WorkflowActions.name, () => {
   });
 
   it('renders the button with the correct text', async () => {
-    await setup({});
+    setup({});
 
     const actionsButton = await screen.findByRole('button');
     expect(actionsButton).toHaveAttribute(
@@ -67,7 +67,7 @@ describe(WorkflowActions.name, () => {
   });
 
   it('renders the menu when the button is clicked', async () => {
-    const { user } = await setup({});
+    const { user } = setup({});
 
     const actionsButton = await screen.findByRole('button');
     await user.click(actionsButton);
@@ -76,7 +76,7 @@ describe(WorkflowActions.name, () => {
   });
 
   it('renders the button with disabled configs if config fetching fails', async () => {
-    const { user } = await setup({ isConfigError: true });
+    const { user } = setup({ isConfigError: true });
 
     const actionsButton = await screen.findByRole('button');
     await user.click(actionsButton);
@@ -87,7 +87,7 @@ describe(WorkflowActions.name, () => {
   });
 
   it('shows the modal when a menu option is clicked', async () => {
-    const { user } = await setup({});
+    const { user } = setup({});
 
     const actionsButton = await screen.findByRole('button');
     await user.click(actionsButton);
@@ -97,22 +97,15 @@ describe(WorkflowActions.name, () => {
   });
 
   it('renders nothing if describeWorkflow fails', async () => {
-    let renderErrorMessage;
-    try {
-      await act(async () => {
-        await setup({ isError: true });
-      });
-    } catch (error) {
-      if (error instanceof Error) {
-        renderErrorMessage = error.message;
-      }
-    }
-
-    expect(renderErrorMessage).toEqual('Failed to fetch workflow summary');
+    setup({ isError: true });
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
   });
 });
 
-async function setup({
+function setup({
   isError,
   isConfigError,
 }: {
@@ -121,53 +114,48 @@ async function setup({
 }) {
   const user = userEvent.setup();
 
-  const renderResult = render(
-    <Suspense>
-      <WorkflowActions />
-    </Suspense>,
-    {
-      endpointsMocks: [
-        {
-          path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId',
-          httpMethod: 'GET',
-          httpResolver: () => {
-            if (isError) {
-              return HttpResponse.json(
-                { message: 'Failed to fetch workflow summary' },
-                { status: 500 }
-              );
-            } else {
-              return HttpResponse.json(describeWorkflowResponse, {
-                status: 200,
-              });
-            }
-          },
+  const renderResult = render(<WorkflowActions />, {
+    endpointsMocks: [
+      {
+        path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId',
+        httpMethod: 'GET',
+        httpResolver: () => {
+          if (isError) {
+            return HttpResponse.json(
+              { message: 'Failed to fetch workflow summary' },
+              { status: 500 }
+            );
+          } else {
+            return HttpResponse.json(describeWorkflowResponse, {
+              status: 200,
+            });
+          }
         },
-        {
-          path: '/api/config',
-          httpMethod: 'GET',
-          httpResolver: () => {
-            if (isConfigError) {
-              return HttpResponse.json(
-                { message: 'Failed to fetch config' },
-                { status: 500 }
-              );
-            } else {
-              return HttpResponse.json(
-                {
-                  terminate: true,
-                  cancel: true,
-                },
-                {
-                  status: 200,
-                }
-              );
-            }
-          },
+      },
+      {
+        path: '/api/config',
+        httpMethod: 'GET',
+        httpResolver: () => {
+          if (isConfigError) {
+            return HttpResponse.json(
+              { message: 'Failed to fetch config' },
+              { status: 500 }
+            );
+          } else {
+            return HttpResponse.json(
+              {
+                terminate: true,
+                cancel: true,
+              },
+              {
+                status: 200,
+              }
+            );
+          }
         },
-      ],
-    }
-  );
+      },
+    ],
+  });
 
   return { user, renderResult };
 }
diff --git a/src/views/workflow-actions/workflow-actions-menu/helpers/__tests__/get-action-disabled-reason.test.ts b/src/views/workflow-actions/workflow-actions-menu/helpers/__tests__/get-action-disabled-reason.test.ts
@@ -12,6 +12,15 @@ describe(getActionDisabledReason.name, () => {
     expect(result).toBeUndefined();
   });
 
+  it('returns undefined when workflow status is not loaded', () => {
+    const result = getActionDisabledReason({
+      actionEnabledConfig: 'ENABLED',
+      actionRunnableStatus: undefined,
+    });
+
+    expect(result).toBeUndefined();
+  });
+
   it('returns disabled message when config is not loaded', () => {
     const result = getActionDisabledReason({
       actionEnabledConfig: undefined,
diff --git a/src/views/workflow-actions/workflow-actions-menu/helpers/get-action-disabled-reason.ts b/src/views/workflow-actions/workflow-actions-menu/helpers/get-action-disabled-reason.ts
@@ -9,8 +9,12 @@ export default function getActionDisabledReason({
   actionRunnableStatus,
 }: {
   actionEnabledConfig?: WorkflowActionEnabledConfigValue;
-  actionRunnableStatus: WorkflowActionRunnableStatus;
+  actionRunnableStatus?: WorkflowActionRunnableStatus;
 }): string | undefined {
+  if (!actionRunnableStatus) {
+    return undefined;
+  }
+
   if (actionEnabledConfig !== 'ENABLED') {
     return WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG[
       actionEnabledConfig ?? 'DISABLED_DEFAULT'
diff --git a/src/views/workflow-actions/workflow-actions-menu/workflow-actions-menu.tsx b/src/views/workflow-actions/workflow-actions-menu/workflow-actions-menu.tsx
@@ -17,7 +17,9 @@ export default function WorkflowActionsMenu({
       {workflowActionsConfig.map((action) => {
         const actionDisabledReason = getActionDisabledReason({
           actionEnabledConfig: actionsEnabledConfig?.[action.id],
-          actionRunnableStatus: action.getRunnableStatus(workflow),
+          actionRunnableStatus: workflow
+            ? action.getRunnableStatus(workflow)
+            : undefined,
         });
 
         return (
diff --git a/src/views/workflow-actions/workflow-actions-menu/workflow-actions-menu.types.ts b/src/views/workflow-actions/workflow-actions-menu/workflow-actions-menu.types.ts
@@ -4,7 +4,7 @@ import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflo
 import { type WorkflowAction } from '../workflow-actions.types';
 
 export type Props = {
-  workflow: DescribeWorkflowResponse;
+  workflow?: DescribeWorkflowResponse;
   actionsEnabledConfig?: WorkflowActionsEnabledConfig;
   onActionSelect: (action: WorkflowAction<any, any, any>) => void;
 };
diff --git a/src/views/workflow-actions/workflow-actions.tsx b/src/views/workflow-actions/workflow-actions.tsx
@@ -16,7 +16,7 @@ import { useParams } from 'next/navigation';
 import { MdArrowDropDown } from 'react-icons/md';
 
 import useConfigValue from '@/hooks/use-config-value/use-config-value';
-import useDescribeWorkflow from '@/views/workflow-page/hooks/use-describe-workflow';
+import { useDescribeWorkflow } from '@/views/workflow-page/hooks/use-describe-workflow';
 import { type WorkflowPageParams } from '@/views/workflow-page/workflow-page.types';
 
 import WorkflowActionsMenu from './workflow-actions-menu/workflow-actions-menu';
@@ -34,22 +34,28 @@ export default function WorkflowActions() {
     'domain'
   );
 
-  const { data: workflow } = useDescribeWorkflow({
+  const {
+    data: workflow,
+    isLoading: isWorkflowLoading,
+    error: workflowError,
+  } = useDescribeWorkflow({
     ...workflowDetailsParams,
   });
 
-  const { data: actionsEnabledConfig, isLoading } = useConfigValue(
-    'WORKFLOW_ACTIONS_ENABLED',
-    {
+  const { data: actionsEnabledConfig, isLoading: isActionsEnabledLoading } =
+    useConfigValue('WORKFLOW_ACTIONS_ENABLED', {
       domain: params.domain,
       cluster: params.cluster,
-    }
-  );
+    });
 
   const [selectedAction, setSelectedAction] = useState<
     WorkflowAction<any, any, any> | undefined
   >(undefined);
 
+  if (workflowError) {
+    return null;
+  }
+
   return (
     <SnackbarProvider
       placement={SNACKBAR_PLACEMENT.bottom}
@@ -77,7 +83,7 @@ export default function WorkflowActions() {
           kind={KIND.secondary}
           overrides={overrides.button}
           endEnhancer={<MdArrowDropDown size={20} />}
-          isLoading={isLoading}
+          isLoading={isWorkflowLoading || isActionsEnabledLoading}
         >
           Workflow Actions
         </Button>
diff --git a/src/views/workflow-history/workflow-history.tsx b/src/views/workflow-history/workflow-history.tsx
@@ -25,7 +25,7 @@ import { type RequestError } from '@/utils/request/request-error';
 import sortBy from '@/utils/sort-by';
 
 import workflowPageQueryParamsConfig from '../workflow-page/config/workflow-page-query-params.config';
-import useDescribeWorkflow from '../workflow-page/hooks/use-describe-workflow';
+import { useSuspenseDescribeWorkflow } from '../workflow-page/hooks/use-describe-workflow';
 
 import workflowHistoryFiltersConfig from './config/workflow-history-filters.config';
 import getVisibleGroupsHasMissingEvents from './helpers/get-visible-groups-has-missing-events';
@@ -69,7 +69,9 @@ export default function WorkflowHistory({ params }: Props) {
     pageFiltersConfig: workflowHistoryFiltersConfig,
   });
 
-  const { data: wfExecutionDescription } = useDescribeWorkflow({ ...params });
+  const { data: wfExecutionDescription } = useSuspenseDescribeWorkflow({
+    ...params,
+  });
   const { workflowExecutionInfo } = wfExecutionDescription;
   const {
     data: result,
diff --git a/src/views/workflow-page/hooks/use-describe-workflow.ts b/src/views/workflow-page/hooks/use-describe-workflow.ts
@@ -1,45 +1,59 @@
 'use client';
 
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery, 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;
-};
+import {
+  type DescribeWorkflowQueryKey,
+  type UseDescribeWorkflowParams,
+} from './use-describe-workflow.types';
 
-export default function useDescribeWorkflow({
+const getDefaultConfigurations = ({
   refetchInterval = WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL,
   ...params
-}: Props) {
+}: UseDescribeWorkflowParams) => ({
+  queryKey: ['describe_workflow', params] as DescribeWorkflowQueryKey,
+  queryFn: ({ queryKey: [_, p] }: { queryKey: DescribeWorkflowQueryKey }) =>
+    request(
+      `/api/domains/${p.domain}/${p.cluster}/workflows/${p.workflowId}/${p.runId}`
+    ).then((res) => res.json()),
+  refetchInterval: (query: { state: { data?: DescribeWorkflowResponse } }) => {
+    const { closeStatus } = query.state.data?.workflowExecutionInfo || {};
+    if (
+      !closeStatus ||
+      closeStatus === 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID'
+    )
+      return refetchInterval;
+
+    return false;
+  },
+});
+
+export function useDescribeWorkflow({
+  refetchInterval = WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL,
+  ...params
+}: UseDescribeWorkflowParams) {
+  return useQuery<
+    DescribeWorkflowResponse,
+    RequestError,
+    DescribeWorkflowResponse,
+    DescribeWorkflowQueryKey
+  >(getDefaultConfigurations({ refetchInterval, ...params }));
+}
+
+export function useSuspenseDescribeWorkflow({
+  refetchInterval = WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL,
+  ...params
+}: UseDescribeWorkflowParams) {
   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;
-    },
-  });
+    DescribeWorkflowQueryKey
+  >(getDefaultConfigurations({ refetchInterval, ...params }));
 }
diff --git a/src/views/workflow-page/hooks/use-describe-workflow.types.ts b/src/views/workflow-page/hooks/use-describe-workflow.types.ts
@@ -0,0 +1,12 @@
+export type UseDescribeWorkflowParams = {
+  domain: string;
+  cluster: string;
+  workflowId: string;
+  runId: string;
+  refetchInterval?: number;
+};
+
+export type DescribeWorkflowQueryKey = [
+  'describe_workflow',
+  Omit<UseDescribeWorkflowParams, 'refetchInterval'>,
+];
diff --git a/src/views/workflow-page/workflow-page-header/workflow-page-header.tsx b/src/views/workflow-page/workflow-page-header/workflow-page-header.tsx
diff --git a/src/views/workflow-page/workflow-page-pending-events-badge/workflow-page-pending-events-badge.tsx b/src/views/workflow-page/workflow-page-pending-events-badge/workflow-page-pending-events-badge.tsx
diff --git a/src/views/workflow-page/workflow-page-status-tag/workflow-page-status-tag.tsx b/src/views/workflow-page/workflow-page-status-tag/workflow-page-status-tag.tsx
diff --git a/src/views/workflow-summary-tab/workflow-summary-tab.tsx b/src/views/workflow-summary-tab/workflow-summary-tab.tsx
