This repository has been archived by the owner on Jul 3, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MGDOBR-985: Display the Error Handling configuration of a bridge (#145)
* Prepare handler to manage error handler configuration data * Error handling methods - hardcoded and types * Selector for the error handling method * Error handling configuration: happy path * Validation + disabling form while submitting * Testing error handling config * Refactoring * Renaming id * Fixing tests after renaming * Setting error handling strategy for a couple of mocked instances (+ removing endpoint url for not-ready instances) * Adding error handling method tab to instance page * Managing conflict after rebase * Validate both name and params * Scrolling to the error, also in case of nameError triggered by API response * Updating test case * Fixing conflicts * Externalizing processors tab content from InstancePage * Externalizing error handling tab content from InstancePage * Load tab content only when accessing to it. Detaching DOM element related to left tab * Each tab should have a specific route * Merging main conflicts * Fixing mocked data * Fixing page layout * Remove usage of `location.pathname` * Listening to tab parameter changes for updating active tab * Fixing white space below tab content * Giving min height to the EH section * Skeleton for tab titles while loading * Renaming useMemo function
- Loading branch information
Valentino Pellegrino
authored
Sep 5, 2022
1 parent
11367d7
commit ad15c45
Showing
9 changed files
with
601 additions
and
362 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
153 changes: 153 additions & 0 deletions
153
src/app/Instance/InstancePage/ErrorHandlingTabContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| import { | ||
| Alert, | ||
| DescriptionList, | ||
| DescriptionListDescription, | ||
| DescriptionListGroup, | ||
| DescriptionListTerm, | ||
| PageSection, | ||
| PageSectionVariants, | ||
| Skeleton, | ||
| Stack, | ||
| StackItem, | ||
| Text, | ||
| TextContent, | ||
| TextVariants, | ||
| } from "@patternfly/react-core"; | ||
| import { | ||
| ERROR_HANDLING_METHODS, | ||
| getErrorHandlingMethodByType, | ||
| } from "../../../types/ErrorHandlingMethods"; | ||
| import ProcessorDetailConfigParameters from "@app/Processor/ProcessorDetail/ProcessorDetailConfigParameters"; | ||
| import React, { useEffect, useMemo, useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useGetSchemaApi } from "../../../hooks/useSchemasApi/useGetSchemaApi"; | ||
| import { ProcessorSchemaType } from "../../../types/Processor"; | ||
| import axios from "axios"; | ||
| import { | ||
| getErrorCode, | ||
| isServiceApiError, | ||
| } from "@openapi/generated/errorHelpers"; | ||
| import { APIErrorCodes } from "@openapi/generated/errors"; | ||
|
|
||
| interface ErrorHandlingTabContentProps { | ||
| errorHandlingType?: string; | ||
| errorHandlingParameters?: { [p: string]: unknown }; | ||
| isBridgeLoading: boolean; | ||
| } | ||
|
|
||
| export const ErrorHandlingTabContent = ({ | ||
| errorHandlingType, | ||
| errorHandlingParameters, | ||
| isBridgeLoading, | ||
| }: ErrorHandlingTabContentProps): JSX.Element => { | ||
| const { t } = useTranslation(["openbridgeTempDictionary"]); | ||
|
|
||
| const [schema, setSchema] = useState<object>(); | ||
| const [schemaError, setSchemaError] = useState<string | undefined>(); | ||
| const [schemaLoading, setSchemaLoading] = useState(false); | ||
|
|
||
| const { getSchema } = useGetSchemaApi(); | ||
|
|
||
| useEffect(() => { | ||
| if (errorHandlingType) { | ||
| setSchemaLoading(true); | ||
| setSchema(undefined); | ||
| setSchemaError(undefined); | ||
| getSchema(errorHandlingType, ProcessorSchemaType.ACTION) | ||
| .then((data) => setSchema(data)) | ||
| .catch((error) => { | ||
| if (error && axios.isAxiosError(error)) { | ||
| if ( | ||
| isServiceApiError(error) && | ||
| getErrorCode(error) === APIErrorCodes.ERROR_4 | ||
| ) { | ||
| setSchemaError(t("errorHandling.errors.cantFindSchema")); | ||
| } else { | ||
| setSchemaError(t("errorHandling.errors.schemaGenericError")); | ||
| } | ||
| } | ||
| }) | ||
| .finally(() => setSchemaLoading(false)); | ||
| } | ||
| }, [errorHandlingType, getSchema, t]); | ||
|
|
||
| const errorHandlingParametersSkeleton = useMemo(() => { | ||
| const parametersLength = errorHandlingParameters | ||
| ? Object.keys(errorHandlingParameters).length | ||
| : 1; | ||
| return ( | ||
| <DescriptionListGroup key="error-handling-loading-skeletons"> | ||
| {[...(Array(parametersLength) as unknown[])].map((_, index) => ( | ||
| <React.Fragment key={index}> | ||
| <DescriptionListTerm> | ||
| <Skeleton fontSize="2xl" width={"60px"} /> | ||
| </DescriptionListTerm> | ||
| <DescriptionListDescription> | ||
| <Skeleton fontSize="2xl" width={"100px"} /> | ||
| </DescriptionListDescription> | ||
| </React.Fragment> | ||
| ))} | ||
| </DescriptionListGroup> | ||
| ); | ||
| }, [errorHandlingParameters]); | ||
|
|
||
| const errorHandlingMethodLabel = useMemo(() => { | ||
| if (errorHandlingType) { | ||
| return getErrorHandlingMethodByType(errorHandlingType).label; | ||
| } | ||
| if (isBridgeLoading) { | ||
| return <Skeleton fontSize="2xl" width={"60px"} />; | ||
| } | ||
| return ERROR_HANDLING_METHODS.default.label; | ||
| }, [errorHandlingType, isBridgeLoading]); | ||
|
|
||
| return ( | ||
| <PageSection | ||
| className="instance-page__tabs-error-handling__section" | ||
| variant={PageSectionVariants.light} | ||
| isFilled | ||
| > | ||
| <Stack hasGutter> | ||
| <StackItem> | ||
| <TextContent> | ||
| <Text component={TextVariants.h2} ouiaId="error-handling-section"> | ||
| {t("common.errorHandlingMethod")} | ||
| </Text> | ||
| </TextContent> | ||
| </StackItem> | ||
| <StackItem> | ||
| <DescriptionList> | ||
| <DescriptionListGroup key="error-handling-method"> | ||
| <DescriptionListTerm> | ||
| {t("common.errorHandlingMethod")} | ||
| </DescriptionListTerm> | ||
| <DescriptionListDescription> | ||
| {errorHandlingMethodLabel} | ||
| </DescriptionListDescription> | ||
| </DescriptionListGroup> | ||
| {errorHandlingParameters && | ||
| schema && | ||
| !schemaLoading && | ||
| !schemaError && ( | ||
| <ProcessorDetailConfigParameters | ||
| schema={schema} | ||
| parameters={errorHandlingParameters} | ||
| /> | ||
| )} | ||
| {schemaLoading && errorHandlingParametersSkeleton} | ||
| {schemaError && ( | ||
| <Alert | ||
| className="instance-page__tabs-error-handling__alert" | ||
| ouiaId="error-schema" | ||
| variant="danger" | ||
| title={schemaError} | ||
| aria-live="polite" | ||
| isInline | ||
| /> | ||
| )} | ||
| </DescriptionList> | ||
| </StackItem> | ||
| </Stack> | ||
| </PageSection> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.