Render summary tab on client side (#888)

* client render summary tab

Author: Assem-Uber

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

@@ -9,15 +9,25 @@ import { type RequestError } from '@/utils/request/request-error';
 import WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL from '../config/workflow-page-status-refetch-interval.config';
 
 import {
+  type UseSuspenseQueryDescribeWorkflowParams,
   type DescribeWorkflowQueryKey,
   type UseDescribeWorkflowParams,
+  type UseQueryDescribeWorkflowParams,
+  type UseDescribeWorkflowQueryOptions,
 } from './use-describe-workflow.types';
 
 const getDefaultConfigurations = ({
+  domain,
+  cluster,
+  workflowId,
+  runId,
   refetchInterval = WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL,
-  ...params
-}: UseDescribeWorkflowParams) => ({
-  queryKey: ['describe_workflow', params] as DescribeWorkflowQueryKey,
+  ...queryOptions
+}: UseDescribeWorkflowParams): UseDescribeWorkflowQueryOptions => ({
+  queryKey: [
+    'describe_workflow',
+    { domain, cluster, workflowId, runId },
+  ] as DescribeWorkflowQueryKey,
   queryFn: ({ queryKey: [_, p] }: { queryKey: DescribeWorkflowQueryKey }) =>
     request(
       `/api/domains/${p.domain}/${p.cluster}/workflows/${p.workflowId}/${p.runId}`
@@ -32,28 +42,25 @@ const getDefaultConfigurations = ({
 
     return false;
   },
+  ...queryOptions,
 });
 
-export function useDescribeWorkflow({
-  refetchInterval = WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL,
-  ...params
-}: UseDescribeWorkflowParams) {
+export function useDescribeWorkflow(params: UseQueryDescribeWorkflowParams) {
   return useQuery<
     DescribeWorkflowResponse,
     RequestError,
     DescribeWorkflowResponse,
     DescribeWorkflowQueryKey
-  >(getDefaultConfigurations({ refetchInterval, ...params }));
+  >(getDefaultConfigurations(params));
 }
 
-export function useSuspenseDescribeWorkflow({
-  refetchInterval = WORKFLOW_PAGE_STATUS_REFETCH_INTERVAL,
-  ...params
-}: UseDescribeWorkflowParams) {
+export function useSuspenseDescribeWorkflow(
+  params: UseSuspenseQueryDescribeWorkflowParams
+) {
   return useSuspenseQuery<
     DescribeWorkflowResponse,
     RequestError,
     DescribeWorkflowResponse,
     DescribeWorkflowQueryKey
-  >(getDefaultConfigurations({ refetchInterval, ...params }));
+  >(getDefaultConfigurations(params));
 }

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

@@ -1,3 +1,25 @@
+import {
+  type UseSuspenseQueryOptions,
+  type UseQueryOptions,
+} from '@tanstack/react-query';
+
+import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflow/describe-workflow.types';
+import { type RequestError } from '@/utils/request/request-error';
+
+export type UseDescribeWorkflowQueryOptions =
+  | UseSuspenseQueryOptions<
+      DescribeWorkflowResponse,
+      RequestError,
+      DescribeWorkflowResponse,
+      DescribeWorkflowQueryKey
+    >
+  | UseQueryOptions<
+      DescribeWorkflowResponse,
+      RequestError,
+      DescribeWorkflowResponse,
+      DescribeWorkflowQueryKey
+    >;
+
 export type UseDescribeWorkflowParams = {
   domain: string;
   cluster: string;
@@ -6,6 +28,26 @@ export type UseDescribeWorkflowParams = {
   refetchInterval?: number;
 };
 
+export type UseSuspenseQueryDescribeWorkflowParams = UseDescribeWorkflowParams &
+  Partial<
+    UseSuspenseQueryOptions<
+      DescribeWorkflowResponse,
+      RequestError,
+      DescribeWorkflowResponse,
+      DescribeWorkflowQueryKey
+    >
+  >;
+
+export type UseQueryDescribeWorkflowParams = UseDescribeWorkflowParams &
+  Partial<
+    UseQueryOptions<
+      DescribeWorkflowResponse,
+      RequestError,
+      DescribeWorkflowResponse,
+      DescribeWorkflowQueryKey
+    >
+  >;
+
 export type DescribeWorkflowQueryKey = [
   'describe_workflow',
   Omit<UseDescribeWorkflowParams, 'refetchInterval'>,

src/views/workflow-summary-tab/workflow-summary-tab.tsx

@@ -1,11 +1,12 @@
 'use client';
 import React from 'react';
 
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import queryString from 'query-string';
 
 import PageSection from '@/components/page-section/page-section';
 import { type PrettyJsonValue } from '@/components/pretty-json/pretty-json.types';
+import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 import { type GetWorkflowHistoryResponse } from '@/route-handlers/get-workflow-history/get-workflow-history.types';
 import formatWorkflowHistory from '@/utils/data-formatters/format-workflow-history';
@@ -17,7 +18,7 @@ import { type RequestError } from '@/utils/request/request-error';
 import type { WorkflowPageTabContentProps } from '@/views/workflow-page/workflow-page-tab-content/workflow-page-tab-content.types';
 
 import getWorkflowIsCompleted from '../workflow-page/helpers/get-workflow-is-completed';
-import { useSuspenseDescribeWorkflow } from '../workflow-page/hooks/use-describe-workflow';
+import { useDescribeWorkflow } from '../workflow-page/hooks/use-describe-workflow';
 
 import getWorkflowResultJson from './helpers/get-workflow-result-json';
 import WorkflowSummaryTabDetails from './workflow-summary-tab-details/workflow-summary-tab-details';
@@ -32,22 +33,34 @@ export default function WorkflowSummaryTab({
     decodeUrlParams<WorkflowPageTabContentProps['params']>(params);
   const { workflowTab, ...paramsWithoutTab } = params;
   const historyParams = { ...paramsWithoutTab, pageSize: 1 };
-  const { data: workflowHistory } = useSuspenseQuery<
-    GetWorkflowHistoryResponse,
-    RequestError,
-    GetWorkflowHistoryResponse,
-    [string, typeof historyParams]
-  >({
-    queryKey: ['workflow_history', historyParams] as const,
-    queryFn: ({ queryKey: [_, p] }) =>
-      request(
-        `/api/domains/${p.domain}/${p.cluster}/workflows/${p.workflowId}/${p.runId}/history?${queryString.stringify({ pageSize: p.pageSize })}`
-      ).then((res) => res.json()),
-  });
+  const { data: workflowHistory, isLoading: isWorkflowHistoryLoading } =
+    useQuery<
+      GetWorkflowHistoryResponse,
+      RequestError,
+      GetWorkflowHistoryResponse,
+      [string, typeof historyParams]
+    >({
+      queryKey: ['workflow_history', historyParams] as const,
+      queryFn: ({ queryKey: [_, p] }) =>
+        request(
+          `/api/domains/${p.domain}/${p.cluster}/workflows/${p.workflowId}/${p.runId}/history?${queryString.stringify({ pageSize: p.pageSize })}`
+        ).then((res) => res.json()),
+      throwOnError: true,
+    });
 
-  const { data: workflowDetails } = useSuspenseDescribeWorkflow({
-    ...paramsWithoutTab,
-  });
+  const { data: workflowDetails, isLoading: isWorkflowDetailsLoading } =
+    useDescribeWorkflow({
+      ...paramsWithoutTab,
+      throwOnError: true,
+    });
+
+  if (isWorkflowHistoryLoading || isWorkflowDetailsLoading) {
+    return <SectionLoadingIndicator />;
+  }
+  // Should never happen as we have throwOnError set to true but it is for better type safety below
+  if (!workflowDetails || !workflowHistory) {
+    throw new Error('Workflow details or history not found');
+  }
 
   const historyEvents = workflowHistory?.history?.events || [];
   const firstEvent = historyEvents[0];