export function EfsSettings()

in frontend/src/old-pages/Configure/Storage.tsx [516:684]
127 lines of code
12 McCabe index (conditional complexity)

export function EfsSettings({index}: any) {
  const efsPath = useMemo(() => [...storagePath, index, 'EfsSettings'], [index])
  const encryptedPath = [...efsPath, 'Encrypted']
  const kmsPath = [...efsPath, 'KmsKeyId']
  const performancePath = [...efsPath, 'PerformanceMode']
  const performanceModes = ['generalPurpose', 'maxIO']
  const deletionPolicyPath = [...efsPath, 'DeletionPolicy']
  const {t} = useTranslation()

  const throughputModePath = [...efsPath, 'ThroughputMode']
  const provisionedThroughputPath = [...efsPath, 'ProvisionedThroughput']

  let encrypted = useState(encryptedPath)
  let kmsId = useState(kmsPath)
  let performanceMode = useState(performancePath) || 'generalPurpose'
  let throughputMode = useState(throughputModePath)
  let provisionedThroughput = useState(provisionedThroughputPath)
  const deletionPolicy = useState(deletionPolicyPath)

  const isDeletionPolicyEnabled = useFeatureFlag('efs_deletion_policy')
  const supportedDeletionPolicies: EfsDeletionPolicy[] = ['Delete', 'Retain']

  const provisionedThroughputErrors = useState([
    ...errorsPath,
    index,
    'EfsSettings',
    'ProvisionedThroughput',
  ])

  React.useEffect(() => {
    const efsPath = [...storagePath, index, 'EfsSettings']
    const throughputModePath = [...efsPath, 'ThroughputMode']
    const provisionedThroughputPath = [...efsPath, 'ProvisionedThroughput']
    const deletionPolicyPath = [...efsPath, 'DeletionPolicy']
    if (throughputMode === null) setState(throughputModePath, 'bursting')
    else if (throughputMode === 'bursting')
      clearState([provisionedThroughputPath])
    if (isDeletionPolicyEnabled && deletionPolicy === null)
      setState(deletionPolicyPath, DEFAULT_DELETION_POLICY)
  }, [deletionPolicy, index, isDeletionPolicyEnabled, throughputMode])

  const toggleEncrypted = () => {
    const setEncrypted = !encrypted
    setState(encryptedPath, setEncrypted)
    if (!setEncrypted) clearState(kmsPath)
  }

  const encryptionFooterLinks = useMemo(
    () => [
      {
        title: t('wizard.storage.Efs.encrypted.encryptionLink.title'),
        href: t('wizard.storage.Efs.encrypted.encryptionLink.href'),
      },
    ],
    [t],
  )

  const provisionedFooterLinks = useMemo(
    () => [
      {
        title: t('wizard.storage.Efs.provisioned.throughputLink.title'),
        href: t('wizard.storage.Efs.provisioned.throughputLink.href'),
      },
    ],
    [t],
  )

  const onDeletionPolicyChange = useCallback(
    (selectedDeletionPolicy: DeletionPolicy) => {
      const deletionPolicyPath = [...efsPath, 'DeletionPolicy']
      setState(deletionPolicyPath, selectedDeletionPolicy)
    },
    [efsPath],
  )

  return (
    <SpaceBetween direction="vertical" size="m">
      <ColumnLayout columns={2}>
        <SpaceBetween direction="vertical" size="xxs">
          <CheckboxWithHelpPanel
            checked={encrypted}
            onChange={toggleEncrypted}
            helpPanel={
              <TitleDescriptionHelpPanel
                title={t('wizard.storage.Efs.encrypted.label')}
                description={t('wizard.storage.Efs.encrypted.help')}
                footerLinks={encryptionFooterLinks}
              />
            }
          >
            {t('wizard.storage.Efs.encrypted.label')}
          </CheckboxWithHelpPanel>
          {encrypted ? (
            <Input
              value={kmsId}
              placeholder={t('wizard.storage.Efs.encrypted.kmsId')}
              onChange={({detail}) => {
                setState(kmsPath, detail.value)
              }}
            />
          ) : null}
        </SpaceBetween>
      </ColumnLayout>
      <ColumnLayout columns={2}>
        <FormField label={t('wizard.storage.Efs.performanceMode.label')}>
          <Select
            selectedOption={strToOption(performanceMode)}
            onChange={({detail}) => {
              setState(performancePath, detail.selectedOption.value)
            }}
            options={performanceModes.map(strToOption)}
          />
        </FormField>
      </ColumnLayout>
      <ColumnLayout columns={2}>
        <SpaceBetween direction="vertical" size="xxs">
          <CheckboxWithHelpPanel
            helpPanel={
              <TitleDescriptionHelpPanel
                title={t('wizard.storage.Efs.provisioned.label')}
                description={t('wizard.storage.Efs.provisioned.help')}
                footerLinks={provisionedFooterLinks}
              />
            }
            checked={throughputMode !== 'bursting'}
            onChange={_event => {
              const newThroughputMode =
                throughputMode === 'bursting' ? 'provisioned' : 'bursting'
              setState(throughputModePath, newThroughputMode)
              newThroughputMode === 'provisioned'
                ? setState(provisionedThroughputPath, 128)
                : clearState(provisionedThroughputPath)
            }}
          >
            {t('wizard.storage.Efs.provisioned.label')}
          </CheckboxWithHelpPanel>
          {throughputMode === 'provisioned' && (
            <FormField errorText={provisionedThroughputErrors}>
              <Input
                type="number"
                placeholder={t('wizard.storage.Efs.provisioned.placeholder')}
                value={clamp(
                  parseInt(provisionedThroughput),
                  1,
                  1024,
                ).toString()}
                onChange={({detail}) => {
                  setState(
                    provisionedThroughputPath,
                    clamp(parseInt(detail.value), 1, 1024),
                  )
                }}
              />
            </FormField>
          )}
        </SpaceBetween>
      </ColumnLayout>
      {isDeletionPolicyEnabled && (
        <ColumnLayout columns={2}>
          <DeletionPolicyFormField
            options={supportedDeletionPolicies}
            value={deletionPolicy}
            onDeletionPolicyChange={onDeletionPolicyChange}
          />
        </ColumnLayout>
      )}
    </SpaceBetween>
  )
}