function Storage()

in frontend/src/pages/Configure/Storage.js [565:624]
51 lines of code
9 McCabe index (conditional complexity)

function Storage() {
  const storages = useState(storagePath);
  const editing = useState(['app', 'wizard', 'editing']);
  const storageType = useState(['app', 'wizard', 'storage', 'type']);

  const storageMaxes = {"FsxLustre": 1, "Efs": 1, "Ebs": 5}

  const storageTypesSource = [
    ["FsxLustre", "Amazon FSx for Lustre (FSX)", "/img/fsx.svg"],
    ["Efs", "Amazon Elastic File System (EFS)", "/img/efs.svg"],
    ["Ebs", "Amazon Elastic Block Store (EBS)", "/img/ebs.svg"],
  ];

  const defaultCounts = {"FsxLustre": 0, "Efs": 0, "Ebs": 0}

  const storageReducer = (eax, item) => {
    let ret = {...eax}
    ret[item.StorageType] += 1
    return ret;
  }
  const storageCounts = storages ? storages.reduce(storageReducer, defaultCounts) : defaultCounts;

  const storageTypes = storageTypesSource.reduce((newStorages, storageType) => {
    const st = storageType[0];
    return storageCounts[st] >= storageMaxes[st] ? newStorages : [...newStorages, storageType];
  }, [])

  const addStorage = () => {
    const newIndex = storages ? storages.length : 0;
    if(!storages)
      setState(storagePath, [{Name: `${storageType}${newIndex}`, StorageType: storageType, MountDir: '/shared'}]);
    else
      setState([...storagePath, newIndex], {Name: `${storageType}${newIndex}`, StorageType: storageType, MountDir: '/shared'});
    clearState(['app', 'wizard', 'storage', 'type']);
  }

  const setStorageType = (newStorageType) => {
    setState(['app', 'wizard', 'storage', 'type'], newStorageType);
  }

  return (
    <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
      {storages ? storages.map((_, i) => <StorageInstance key={i} index={i} />)
      : <div>No shared storage options selected.</div>}

      {!editing && storageTypes.length > 0 &&
        <div style={{display: "flex", flexDirection: "row", justifyContent: "flex-end"}}>
          <div style={{display: "flex", flexDirection: "row", gap: "16px", alignItems: "center", marginTop: "10px"}}>
            Storage Type:
            <Select
              disabled={editing}
              placeholder="Please Select a Filesystem Type"
              selectedOption={storageType && itemToDisplayIconOption(findFirst(storageTypes, s => {return s[0] === storageType}))}
              onChange={({detail}) => {setStorageType(detail.selectedOption.value)}}
              options={storageTypes.map(itemToIconOption)}
            />
            <Button onClick={addStorage} disabled={!storageType || (storages && storages.length >= 5)} iconName={"add-plus"}>Add Storage</Button>
          </div>
        </div>
      }