export default function ImageBuildDialog()

in frontend/src/pages/CustomImages/ImageBuildDialog.js [82:140]
52 lines of code
9 McCabe index (conditional complexity)

export default function ImageBuildDialog(props) {
  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 handleClose = () => {
    setState([...imageBuildPath, 'dialog'], false);
    clearState([...imageBuildPath, 'errors']);
  };

  const handleBuild = () => {
    var errHandler = (err) => {setState([...imageBuildPath, 'errors'], err); setState([...imageBuildPath, 'pending'], false);}
    var successHandler = (resp) => {setState([...imageBuildPath, 'pending'], false); handleClose();}
    clearState([...imageBuildPath, 'errors']);
    setState([...imageBuildPath, 'pending'], true)
    buildImageValidate && BuildImage(imageId, imageConfig, successHandler, errHandler);
  }

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

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

  return (
    <Modal
      className="wizard-dialog"
      visible={open || false}
      onDismiss={handleClose}
      closeAriaLabel="Close modal"
      size="large"
      header={<Header variant="h2">Image Configuration: {props.imageId}</Header>}
      footer={
        <Box float="right">
          <SpaceBetween direction="horizontal" size="xs">
            <Button onClick={handleClose}>Cancel</Button>
            <Button disabled={pending} onClick={() => {buildImageValidate() && handleBuild()}}>Build Image</Button>
          </SpaceBetween>
        </Box>
      }>