export function App()

in aws-core-ui/src/App/App.tsx [96:221]
116 lines of code
13 McCabe index (conditional complexity)

export function App({
  doReset = undefined,
  mode = Mode.DEFAULT,
}: {
  doReset?: (ind: number, label: string) => void;
  mode?: Mode;
}) {
  const { config } = useApplicationContext();
  const formMethods = useAwsConnectionForm(config);
  const { handleSubmit, setError, setValue } = formMethods;
  const { showErrorsOnForm, showErrorAlert } = useErrorService({
    setError,
    errorKeyToFieldNameConvertor,
  });

  const genericError = React.useCallback(
    (err: unknown) => {
      showErrorAlert(errorMessage(err));
    },
    [showErrorAlert]
  );

  const doClose = React.useCallback(() => {
    if (config.onClose) {
      config.onClose();
    } else {
      redirectToDefaultPage(config.projectId);
    }
  }, [config]);

  const onSubmit = React.useCallback(
    async (data: FormFields, event?: React.BaseSyntheticEvent) => {
      let response: Document | undefined;
      let isError = false;

      try {
        //if connectionId is set in config, then connection exists (hence we're not creating a new one)
        //otherwise put the value from connection id into the id field and nil the connection id field (to be safe)
        //awsConnectionId value is an entirely different thing, for the IAM connection mode
        if (config.connectionId === null || config.connectionId === '') {
          data[FormFieldsNames.ID] = data[FormFieldsNames.CONNECTION_ID];
          data[FormFieldsNames.CONNECTION_ID] = undefined;
        }

        const resp = await postConnection(config, data);
        response = new DOMParser().parseFromString(resp, 'text/xml');
        const errors = getErrorsFromResponseIfAny(response);

        if (errors) {
          isError = true;
          showErrorsOnForm(errors);
        }
      } catch (e) {
        isError = true;
        genericError(e);
      } finally {
        if (config.afterSubmit) {
          config.afterSubmit(data, isError, response, event);
        } else if (!isError) {
          doClose();
        }
      }
    },
    [config, doClose, genericError, showErrorsOnForm]
  );

  React.useEffect(() => {
    const dialog = document.getElementById('OAuthConnectionDialog');

    if (dialog) {
      dialog.style.top = '5%';
      dialog.style.position = 'fixed';
    }
  }, []); // fire once

  const providerDisplayed = mode === Mode.DEFAULT;

  const handleRegionChange = React.useCallback(
    (selected: SelectItem | null) => {
      if (selected!) {
        const key = selected?.key;
        let newValue;
        if (key.toString().startsWith('cn')) {
          newValue = `https://sts.${key}.amazonaws.com.cn`;
        } else {
          newValue = `https://sts.${key}.amazonaws.com`;
        }
        setValue(FormFieldsNames.AWS_STS_ENDPOINT, newValue);
      }
    },
    [setValue]
  );
  return (
    <SupportedProvidersContextProvider>
      <ControlsHeightContext.Provider value={ControlsHeight.S}>
        <FormProvider {...formMethods}>
          <form
            onSubmit={handleSubmit(onSubmit)}
            autoComplete="off"
            className={styles.App}
            id={formId}
          >
            <section>
              {providerDisplayed && <SupportedProviders reset={doReset} />}
              <AwsConnectionNote />
              <AwsDisplayName genericErrorHandler={genericError} />
              <AwsConnectionId />
              <AwsRegion onChangeCallback={handleRegionChange} />
              <AwsType />
            </section>
            <SwitchTypeContent config={config} />
            <section>
              <OptionalSectionHeader>{'Security'}</OptionalSectionHeader>
              <ConnectionAvailabilitySettings />
            </section>
            <ButtonControlPanel
              onClose={doClose}
              genericErrorHandler={genericError}
              mode={mode}
            />
          </form>
        </FormProvider>
      </ControlsHeightContext.Provider>
    </SupportedProvidersContextProvider>
  );
}