export default function WizardDialog()

in frontend/src/pages/Configure/WizardDialog.js [43:181]
118 lines of code
25 McCabe index (conditional complexity)

export default function WizardDialog(props) {
  const open = useState(['app', 'wizard', 'dialog']);
  const page = useState(['app', 'wizard', 'page']) || 'source';
  const clusterName = useState(['app', 'wizard', 'clusterName']);
  const [ refreshing, setRefreshing ] = React.useState(false);

  const clusterPath = ['clusters', 'index', clusterName];
  const fleetStatus = useState([...clusterPath, 'computeFleetStatus']);

  const editing = useState(['app', 'wizard', 'editing']);

  const pages = ['source', 'cluster', 'headNode', 'storage', 'queues', 'create'];

  const handleClose = (clear) => {
    if(clear)
    {
      clearState(['app', 'wizard', 'config']);
      clearState(['app', 'wizard', 'clusterConfigYaml']);
      clearState(['app', 'wizard', 'clusterName']);
      clearState(['app', 'wizard', 'loaded']);
      clearState(['app', 'wizard', 'page']);
      clearState(['app', 'wizard', 'vpc']);
    }
    setState(['app', 'wizard', 'dialog'], false);
    clearState(['app', 'wizard', 'errors']);
  };

  const validators = {
    source: sourceValidate,
    cluster: clusterValidate,
    headNode: headNodeValidate,
    storage: storageValidate,
    queues: queuesValidate,
    create: createValidate,
  }

  const handleNext = () => {
    let config = getState(['app', 'wizard', 'config']);
    let currentPage = getState(['app', 'wizard', 'page']);

    // Run the validators corresponding to the page we are on
    if(validators[currentPage] && !validators[currentPage]())
      return;

    if(currentPage === "create")
    {
      wizardHandleCreate(() => handleClose(true));
      return;
    }

    for(let i = 0; i < pages.length; i++)
      if(pages[i] === currentPage)
      {
        let nextPage = pages[i + 1];

        if(nextPage === "create")
        {
          console.log(jsyaml.dump(config));
          setState(['app', 'wizard', 'clusterConfigYaml'], jsyaml.dump(config));
        }
        setState(['app', 'wizard', 'page'], nextPage);
        return;
      }
  }

  const handlePrev = () => {
    setState(['app', 'wizard', 'errors'], null);
    let currentPage = getState(['app', 'wizard', 'page']);
    let source = getState(['app', 'wizard', 'source', 'type']);

    // Special case where the user uploaded a file, hitting "back"
    // goes back to the upload screen rather than through the wizard
    if(currentPage === "create" && source === "upload")
    {
      setState(['app', 'wizard', 'page'], "source");
      return;
    }

    for(let i = 1; i < pages.length; i++)
      if(pages[i] === currentPage)
      {
        let prevPage = pages[i - 1];
        setState(['app', 'wizard', 'page'], prevPage);
        return;
      }
  }

  const handleDryRun = () => {
    wizardHandleDryRun();
  }

  const handleRefresh = () => {
    setRefreshing(true);
    let region = getState(['wizard', 'region']);
    let chosenRegion = region === "Default" ? null : region;
    LoadAwsConfig(chosenRegion, () => setRefreshing(false));
  }

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

  React.useEffect(() => {
    const close = (e) => {
      if(e.key === 'Escape') {
        handleClose(true)
      }
    }
    window.addEventListener('keydown', close)
    return () => window.removeEventListener('keydown', close)
  },[])

  return (
      <Modal
        className="wizard-dialog"
        onDismiss={() => handleClose(false)}
        visible={open || false}
        closeAriaLabel="Close modal"
        size="large"
        footer={
          <Box float="right">
            <SpaceBetween direction="horizontal" size="xs">
              {editing && (fleetStatus === "RUNNING" || fleetStatus === "STOP_REQUESTED") && <Button className="action" variant="normal" loading={fleetStatus === "STOP_REQUESTED"} onClick={stopComputeFleet}>
                {fleetStatus !== "RUNNING" ? <span>Stop Compute Fleet</span>
                : <div className="container"><CancelIcon /> Stop Compute Fleet</div>}
              </Button>}
              <Button onClick={() => handleClose(true)} autoFocus>Cancel</Button>
              <Button disabled={page === pages[0]} onClick={handlePrev}>Back</Button>
              {page === "create" && <Button onClick={handleDryRun}>Dry Run</Button>}
              <Button onClick={handleNext}>{page === "create" ? (editing ? "Update" : "Create") : "Next"}</Button>
            </SpaceBetween>
          </Box>
        }