@orchestrator-ui/orchestrator-ui-components 0.3.0 → 0.3.1

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -9,7 +9,6 @@ import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
-    WfoLoading,
 } from '../../components';
 import {
     WfoProductBlockBadge,
@@ -179,28 +178,24 @@ export const WfoProductBlocksPage = () => {
     };
 
     const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
-    const { data, isFetching } = useQueryWithGraphql(
+    const { data, isLoading, isError } = useQueryWithGraphql(
         GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY,
         {
             first: pageSize,
             after: pageIndex * pageSize,
             sortBy: sortBy,
-            query: queryString,
+            query: queryString || undefined,
         },
         'productBlocks',
     );
 
-    if (!data) {
-        return <WfoLoading />;
-    }
-
     const dataSorting: WfoDataSorting<ProductBlockDefinition> = {
         field: sortBy?.field ?? PRODUCT_BLOCK_FIELD_NAME,
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
     const { totalItems, sortFields, filterFields } =
-        data.productBlocks.pageInfo;
+        data?.productBlocks?.pageInfo ?? {};
 
     const pagination: Pagination = {
         pageSize: pageSize,
@@ -212,7 +207,7 @@ export const WfoProductBlocksPage = () => {
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ProductBlockDefinition>
-                data={data.productBlocks.page}
+                data={data?.productBlocks.page || []}
                 tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
@@ -230,7 +225,8 @@ export const WfoProductBlocksPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isFetching}
+                isLoading={isLoading}
+                hasError={isError}
                 queryString={queryString}
                 localStorageKey={
                     METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY

package/src/pages/metadata/WfoProductsPage.tsx

@@ -11,7 +11,6 @@ import {
     METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY,
     StoredTableConfig,
     WfoDateTime,
-    WfoLoading,
     WfoProductBlockBadge,
     WfoProductStatusBadge,
     WfoTableWithFilter,
@@ -21,7 +20,7 @@ import {
 } from '@/components';
 import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
-import { GET_PRODUCTS_GRAPHQL_QUERY } from '@/graphqlQueries';
+import { getProductsQuery } from '@/graphqlQueries';
 import {
     useDataDisplayParams,
     useQueryWithGraphql,
@@ -153,8 +152,8 @@ export const WfoProductsPage = () => {
     };
 
     const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
-    const { data, isFetching } = useQueryWithGraphql(
-        GET_PRODUCTS_GRAPHQL_QUERY,
+    const { data, isLoading, isError } = useQueryWithGraphql(
+        getProductsQuery(),
         {
             first: pageSize,
             after: pageIndex * pageSize,
@@ -164,11 +163,8 @@ export const WfoProductsPage = () => {
         'products',
     );
 
-    if (!data) {
-        return <WfoLoading />;
-    }
-
-    const { totalItems, sortFields, filterFields } = data.products.pageInfo;
+    const { totalItems, sortFields, filterFields } =
+        data?.products?.pageInfo ?? {};
 
     const pagination: Pagination = {
         pageSize: pageSize,
@@ -203,7 +199,8 @@ export const WfoProductsPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isFetching}
+                isLoading={isLoading}
+                hasError={isError}
                 queryString={queryString}
                 localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}
             />

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -9,7 +9,6 @@ import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
-    WfoLoading,
     WfoProductBlockBadge,
 } from '../../components';
 import type { WfoDataSorting, WfoTableColumns } from '../../components';
@@ -125,28 +124,24 @@ export const WfoResourceTypesPage = () => {
     };
 
     const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
-    const { data, isFetching } = useQueryWithGraphql(
+    const { data, isLoading, isError } = useQueryWithGraphql(
         GET_RESOURCE_TYPES_GRAPHQL_QUERY,
         {
             first: pageSize,
             after: pageIndex * pageSize,
             sortBy: sortBy,
-            query: queryString,
+            query: queryString || undefined,
         },
         'resourceTypes',
     );
 
-    if (!data) {
-        return <WfoLoading />;
-    }
-
     const dataSorting: WfoDataSorting<ResourceTypeDefinition> = {
         field: sortBy?.field ?? RESOURCE_TYPE_FIELD_TYPE,
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
     const { totalItems, sortFields, filterFields } =
-        data.resourceTypes.pageInfo;
+        data?.resourceTypes?.pageInfo || {};
 
     const pagination: Pagination = {
         pageSize: pageSize,
@@ -176,7 +171,8 @@ export const WfoResourceTypesPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isFetching}
+                isLoading={isLoading}
+                hasError={isError}
                 queryString={queryString}
                 localStorageKey={
                     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -9,7 +9,6 @@ import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY,
-    WfoLoading,
     WfoProductBlockBadge,
 } from '../../components';
 import { WfoTableWithFilter } from '../../components';
@@ -137,27 +136,24 @@ export const WfoWorkflowsPage = () => {
     };
 
     const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
-    const { data, isFetching } = useQueryWithGraphql(
+    const { data, isLoading, isError } = useQueryWithGraphql(
         GET_WORKFLOWS_GRAPHQL_QUERY,
         {
             first: pageSize,
             after: pageIndex * pageSize,
             sortBy: graphQlWorkflowListMapper(sortBy),
-            query: queryString,
+            query: queryString || undefined,
         },
         'workflows',
     );
 
-    if (!data) {
-        return <WfoLoading />;
-    }
-
     const dataSorting: WfoDataSorting<WorkflowListItem> = {
         field: sortBy?.field ?? 'name',
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
-    const { totalItems, sortFields, filterFields } = data.workflows.pageInfo;
+    const { totalItems, sortFields, filterFields } =
+        data?.workflows?.pageInfo || {};
 
     const pagination: Pagination = {
         pageSize: pageSize,
@@ -169,7 +165,7 @@ export const WfoWorkflowsPage = () => {
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<WorkflowListItem>
-                data={mapWorkflowDefinitionToWorkflowListItem(data)}
+                data={data ? mapWorkflowDefinitionToWorkflowListItem(data) : []}
                 tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
@@ -187,7 +183,8 @@ export const WfoWorkflowsPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isFetching}
+                isLoading={isLoading}
+                hasError={isError}
                 queryString={queryString}
                 localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}
             />

package/src/pages/processes/WfoProcessDetail.tsx

@@ -80,6 +80,8 @@ interface ProcessDetailProps {
     processDetail: Partial<ProcessDetail> | undefined;
     timelineItems: TimelineItem[];
     onTimelineItemClick?: (id: string) => void;
+    isLoading?: boolean;
+    hasError?: boolean;
 }
 
 export const WfoProcessDetail = ({
@@ -90,6 +92,8 @@ export const WfoProcessDetail = ({
     buttonsAreDisabled,
     timelineItems,
     onTimelineItemClick,
+    isLoading = false,
+    hasError = false,
 }: ProcessDetailProps) => {
     const t = useTranslations('processes.detail');
     const { theme } = useOrchestratorTheme();
@@ -243,7 +247,7 @@ export const WfoProcessDetail = ({
                 color="subdued"
                 element="div"
             >
-                {(processDetail === undefined && <WfoLoading />) ||
+                {(isLoading && !hasError && <WfoLoading />) ||
                     (processDetail !== undefined && (
                         <EuiFlexGroup direction="row" gutterSize="m">
                             <ProcessHeaderValue

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -1,14 +1,14 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { TimelineItem, WfoError, WfoLoading } from '@/components';
 
-import { TimelineItem, WfoLoading } from '../../components';
 import {
     WfoStepListRef,
     WfoWorkflowStepList,
 } from '../../components/WfoWorkflowSteps';
-import { OrchestratorConfigContext } from '../../contexts';
 import { GET_PROCESS_DETAIL_GRAPHQL_QUERY } from '../../graphqlQueries';
 import { useQueryWithGraphql } from '../../hooks';
-import { ProcessDoneStatuses, Step } from '../../types';
+import { ProcessDoneStatuses, ProcessStatus, Step } from '../../types';
 import { getProductNamesFromProcess } from '../../utils';
 import { WfoProcessDetail } from './WfoProcessDetail';
 import {
@@ -20,36 +20,49 @@ export type GroupedStep = {
     steps: Step[];
 };
 
+const PROCESS_DETAIL_DEFAULT_REFETCH_INTERVAL = 3000;
+
 interface WfoProcessDetailPageProps {
     processId: string;
+    processDetailRefetchInterval?: number;
 }
 
 export const WfoProcessDetailPage = ({
     processId,
+    processDetailRefetchInterval = PROCESS_DETAIL_DEFAULT_REFETCH_INTERVAL,
 }: WfoProcessDetailPageProps) => {
-    const { dataRefetchInterval } = useContext(OrchestratorConfigContext);
     const stepListRef = useRef<WfoStepListRef>(null);
-    const [fetchInterval, setFetchInterval] = useState<number | undefined>(
-        dataRefetchInterval.processDetail,
-    );
-    const { data, isFetching } = useQueryWithGraphql(
+    const [fetchInterval, setFetchInterval] = useState<number | undefined>();
+    const { data, isLoading, isError } = useQueryWithGraphql(
         GET_PROCESS_DETAIL_GRAPHQL_QUERY,
         {
             processId,
         },
         'processDetail',
-        fetchInterval,
+        { refetchInterval: fetchInterval, refetchOnWindowFocus: false },
     );
 
+    if (isError) {
+        if (fetchInterval) {
+            setFetchInterval(undefined);
+        }
+    }
+
     useEffect(() => {
-        const lastStatus = data?.processes?.page[0]?.lastStatus;
+        const process = data?.processes.page[0];
+        // We need to cast here because the backend might return the string in upperCase and
+        // toLowerCase() will converts the value type to string
+        const lastStatus =
+            process?.lastStatus.toLocaleLowerCase() as ProcessStatus;
+
         const isInProgress = !(
             lastStatus && ProcessDoneStatuses.includes(lastStatus)
         );
+
         setFetchInterval(
-            isInProgress ? dataRefetchInterval.processDetail : undefined,
+            isInProgress ? processDetailRefetchInterval : undefined,
         );
-    }, [data, dataRefetchInterval.processDetail]);
+    }, [data, processDetailRefetchInterval]);
 
     const process = data?.processes.page[0];
     const steps = process?.steps ?? [];
@@ -65,14 +78,17 @@ export const WfoProcessDetailPage = ({
         <WfoProcessDetail
             pageTitle={pageTitle}
             productNames={productNames}
-            buttonsAreDisabled={isFetching && !process}
+            buttonsAreDisabled={isLoading || isError}
             processDetail={process}
             timelineItems={timelineItems}
             onTimelineItemClick={(id: string) =>
                 stepListRef.current?.scrollToStep(id)
             }
+            isLoading={isLoading}
+            hasError={isError}
         >
-            {(isFetching && !process && <WfoLoading />) ||
+            {(isError && <WfoError />) ||
+                (isLoading && <WfoLoading />) ||
                 (process !== undefined && (
                     <WfoWorkflowStepList
                         ref={stepListRef}

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { AxiosError } from 'axios';
 import { JSONSchema6 } from 'json-schema';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
-import { ParsedUrlQuery } from 'querystring';
 
 import {
     EuiFlexGroup,
@@ -13,7 +13,7 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { PATH_TASKS, TimelineItem, WfoLoading } from '@/components';
+import { PATH_TASKS, TimelineItem, WfoError, WfoLoading } from '@/components';
 import { PATH_WORKFLOWS } from '@/components';
 import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
 import { WfoStepStatusIcon } from '@/components/WfoWorkflowSteps';
@@ -43,7 +43,7 @@ type StartWorkflowPayload =
     | StartCreateWorkflowPayload
     | StartModifyWorkflowPayload;
 
-interface StartProcessPageQuery extends ParsedUrlQuery {
+interface StartProcessPageQuery {
     productId?: string;
     subscriptionId?: string;
 }
@@ -82,6 +82,7 @@ export const WfoStartProcessPage = ({
     const apiClient = useAxiosApiClient();
     const t = useTranslations('processes.steps');
     const router = useRouter();
+    const [hasError, setHasError] = useState<boolean>(false);
     const { theme } = useOrchestratorTheme();
     const [form, setForm] = useState<UserInputForm>({});
     const { productId, subscriptionId } = router.query as StartProcessPageQuery;
@@ -92,10 +93,11 @@ export const WfoStartProcessPage = ({
     );
 
     const { stepUserInput, hasNext } = form;
+
     const { getStepHeaderStyle, stepListContentBoldTextStyle } =
         getStyles(theme);
 
-    const { data, isFetched } = useQueryWithGraphql(
+    const { data, isLoading, isError } = useQueryWithGraphql(
         GET_PROCESS_STEPS_GRAPHQL_QUERY,
         {
             processName,
@@ -103,8 +105,14 @@ export const WfoStartProcessPage = ({
         `processSteps={processName}`,
     );
 
+    if (isError) {
+        if (!hasError) {
+            setHasError(true);
+        }
+    }
+
     const timeLineItems: TimelineItem[] =
-        data?.workflows?.page[0]?.steps && isFetched
+        data?.workflows?.page[0]?.steps && !isLoading
             ? data.workflows.page[0].steps.map(({ name }: StartProcessStep) => {
                   return {
                       processStepStatus: StepStatus.PENDING,
@@ -143,7 +151,20 @@ export const WfoStartProcessPage = ({
                     (e) => {
                         throw e;
                     },
-                );
+                )
+                .catch((error: AxiosError) => {
+                    if (error?.response?.status !== 510) {
+                        if (error?.response?.status === 400) {
+                            // Rethrow the error so userInputForm can catch it and display validation errors
+                            throw error;
+                        }
+
+                        console.error(error);
+                        setHasError(true);
+                    } else {
+                        throw error;
+                    }
+                });
 
             // Catch a 503: Service unavailable error indicating the engine is down. This rethrows other errors
             // if it's not 503 so we can catch the special 510 error in the catchErrorStatus call in the useEffect hook
@@ -210,17 +231,20 @@ export const WfoStartProcessPage = ({
                     </EuiFlexItem>
                 </EuiFlexGroup>
                 <EuiHorizontalRule />
-                {(stepUserInput && (
-                    <UserInputFormWizard
-                        stepUserInput={stepUserInput}
-                        validSubmit={submit}
-                        cancel={() =>
-                            router.push(isTask ? PATH_TASKS : PATH_WORKFLOWS)
-                        }
-                        hasNext={hasNext}
-                        isTask={isTask}
-                    />
-                )) || <WfoLoading />}
+                {(hasError && <WfoError />) ||
+                    (stepUserInput && (
+                        <UserInputFormWizard
+                            stepUserInput={stepUserInput}
+                            validSubmit={submit}
+                            cancel={() =>
+                                router.push(
+                                    isTask ? PATH_TASKS : PATH_WORKFLOWS,
+                                )
+                            }
+                            hasNext={hasNext}
+                            isTask={isTask}
+                        />
+                    )) || <WfoLoading />}
             </EuiPanel>
         </WfoProcessDetail>
     );