function Storage()

in frontend/src/old-pages/Configure/Storage.tsx [1201:1317]
107 lines of code
15 McCabe index (conditional complexity)

function Storage() {
  const {t} = useTranslation()
  const storages = useState(storagePath)
  const uiStorageSettings = useState(['app', 'wizard', 'storage', 'ui'])
  const isFsxOnTapActive = useFeatureFlag('fsx_ontap')
  const isFsxOpenZsfActive = useFeatureFlag('fsx_openzsf')
  const isFileCacheActive = useFeatureFlag('amazon_file_cache')
  const canEditFilesystems = useDynamicStorage()

  const hasAddedStorage = storages?.length > 0

  useHelpPanel(<StorageHelpPanel />)

  const storageMaxes: Record<string, number> = {
    FsxLustre: 21,
    FsxOntap: 20,
    FsxOpenZfs: 20,
    FileCache: 20,
    Efs: 21,
    Ebs: 5,
  }

  const supportedStorages = ALL_STORAGES.filter(([storageType]) => {
    if (storageType === 'FsxOntap' && !isFsxOnTapActive) {
      return false
    }
    if (storageType === 'FsxOpenZfs' && !isFsxOpenZsfActive) {
      return false
    }
    if (storageType === 'FileCache' && !isFileCacheActive) {
      return false
    }
    return true
  })

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

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

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

  const onAddStorageSubmit = React.useCallback(
    (selectedStorageTypes: StorageType[]) => {
      const existingStorages = storages || []
      const existingUiStorageSettings = uiStorageSettings || []
      const [storageEntries, uiSettingsEntries] = buildStorageEntries(
        existingStorages,
        existingUiStorageSettings,
        selectedStorageTypes,
      )

      setState(storagePath, [...existingStorages, ...storageEntries])
      setState(uiSettingsPath, [
        ...existingUiStorageSettings,
        ...uiSettingsEntries,
      ])
    },
    [storages, uiStorageSettings],
  )

  return (
    <SpaceBetween direction="vertical" size="l">
      <Container
        header={
          <Header
            description={
              <Trans i18nKey="wizard.storage.container.description">
                <Link
                  variant="primary"
                  external
                  externalIconAriaLabel={t('global.openNewTab')}
                  href="https://docs.aws.amazon.com/parallelcluster/latest/ug/shared-storage-quotas-v3.html"
                />
              </Trans>
            }
          >
            {t('wizard.storage.container.title')}
          </Header>
        }
      >
        <SpaceBetween direction="vertical" size="m">
          {!hasAddedStorage && (
            <Alert statusIconAriaLabel="Info">
              {t('wizard.storage.container.noStorageSelected')}
            </Alert>
          )}
          {canEditFilesystems && storageTypes.length > 0 && (
            <AddStorageForm
              storageTypes={storageTypes}
              onSubmit={onAddStorageSubmit}
            />
          )}
        </SpaceBetween>
      </Container>
      {hasAddedStorage
        ? storages.map((_: any, i: any) => (
            <StorageInstance key={i} index={i} />
          ))
        : null}
    </SpaceBetween>
  )
}