export default function ImageBuildDialog()

in frontend/src/old-pages/Images/CustomImages/ImageBuildDialog.tsx [57:187]
119 lines of code
10 McCabe index (conditional complexity)

export default function ImageBuildDialog() {
  const {t} = useTranslation()
  const open = useState([...imageBuildPath, 'dialog'])
  const imageConfig = useState([...imageBuildPath, 'config']) || ''
  const errors = useState([...imageBuildPath, 'errors'])
  const imageId = useState([...imageBuildPath, 'imageId'])
  const pending = useState([...imageBuildPath, 'pending'])

  let validated = useState([...buildImageErrorsPath, 'validated'])

  let imageIdError = useState([...buildImageErrorsPath, 'imageId'])
  const missingImageIdError = t('customImages.dialogs.buildImage.imageIdError')

  React.useEffect(() => {
    setFlashbarItems(errorsToFlashbarItems(errors, setFlashbarItems))
  }, [errors])

  const [flashbarItems, setFlashbarItems] = React.useState<
    FlashbarProps.MessageDefinition[]
  >([])

  const handleClose = () => {
    setState([...imageBuildPath, 'dialog'], false)
    clearState([...imageBuildPath, 'errors'])
  }

  const handleBuild = async () => {
    clearState([...imageBuildPath, 'errors'])
    setState([...imageBuildPath, 'pending'], true)
    if (buildImageValidate(missingImageIdError)) {
      try {
        await BuildImage(imageId, imageConfig)
        handleClose()
      } catch (error: unknown) {
        if ((error as AxiosError).response) {
          setState(
            [...imageBuildPath, 'errors'],
            (error as AxiosError).response?.data,
          )
        }
      }
      setState([...imageBuildPath, 'pending'], false)
    }
  }

  const setImageId = (newImageId: any) => {
    if (newImageId !== imageId) {
      setState([...imageBuildPath, 'imageId'], newImageId)
      if (validated) buildImageValidate(missingImageIdError)
    }
  }

  const descriptionElementRef = React.useRef(null)
  React.useEffect(() => {
    if (open) {
      const {current: descriptionElement} = descriptionElementRef
      if (descriptionElement !== null) {
        ;(descriptionElement as any).focus()
      }
    }
  }, [open])

  return (
    <Modal
      visible={open || false}
      onDismiss={handleClose}
      closeAriaLabel={t('customImages.dialogs.buildImage.closeAriaLabel')}
      size="large"
      header={
        <Header
          variant="h2"
          actions={
            <FileUploadButton
              className="upload"
              handleData={(data: any) => {
                setState([...imageBuildPath, 'config'], data)
              }}
            />
          }
        >
          {t('customImages.dialogs.buildImage.title')}
        </Header>
      }
      footer={
        <Box float="right">
          <SpaceBetween direction="horizontal" size="xs">
            <Button onClick={handleClose}>
              {t('customImages.dialogs.buildImage.cancel')}
            </Button>
            <Button
              disabled={pending}
              loading={pending}
              variant="primary"
              onClick={() => {
                buildImageValidate(missingImageIdError) && handleBuild()
              }}
            >
              {t('customImages.dialogs.buildImage.build')}
            </Button>
          </SpaceBetween>
        </Box>
      }
    >
      <SpaceBetween direction="vertical" size="xs">
        <FormField
          errorText={imageIdError}
          label={t('customImages.dialogs.buildImage.imageIdLabel')}
        >
          <Input
            value={imageId}
            placeholder={t(
              'customImages.dialogs.buildImage.imageIdPlaceholder',
            )}
            onChange={({detail}) => {
              setImageId(detail.value)
            }}
          />
        </FormField>
        <Flashbar items={flashbarItems} />
        {
          <ConfigView
            config={imageConfig}
            onChange={({detail}: any) => {
              setState([...imageBuildPath, 'config'], detail.value)
            }}
          />
        }
      </SpaceBetween>
    </Modal>
  )
}