export function EbsSettings()

in frontend/src/old-pages/Configure/Storage.tsx [686:863]
134 lines of code
11 McCabe index (conditional complexity)

export function EbsSettings({index}: any) {
  const {t} = useTranslation()
  const isDeletionPolicyEnabled = useFeatureFlag('ebs_deletion_policy')

  const ebsPath = useMemo(() => [...storagePath, index, 'EbsSettings'], [index])
  const volumeTypePath = [...ebsPath, 'VolumeType']
  const volumeTypes = ['gp3', 'gp2', 'io1', 'io2', 'sc1', 'st1', 'standard']
  const defaultVolumeType = 'gp3'
  const volumeSizePath = [...ebsPath, 'Size']
  const encryptedPath = [...ebsPath, 'Encrypted']
  const kmsPath = [...ebsPath, 'KmsKeyId']
  const snapshotIdPath = useMemo(() => [...ebsPath, 'SnapshotId'], [ebsPath])

  const deletionPolicyPath = [...ebsPath, 'DeletionPolicy']
  const supportedDeletionPolicies: EbsDeletionPolicy[] = [
    'Delete',
    'Retain',
    'Snapshot',
  ]

  const volumeErrors = useState([...errorsPath, index, 'EbsSettings', 'Size'])

  let volumeType = useState(volumeTypePath)
  let volumeSize = useState(volumeSizePath)
  let encrypted = useState(encryptedPath)
  let kmsId = useState(kmsPath)
  let snapshotId = useState(snapshotIdPath)
  const [snapshostVisible, setSnapshotVisible] = reactUseState(!!snapshotId)
  let deletionPolicy = useState(deletionPolicyPath)

  let validated = useState([...errorsPath, 'validated'])

  React.useEffect(() => {
    const volumeTypePath = [...ebsPath, 'VolumeType']
    const deletionPolicyPath = [...ebsPath, 'DeletionPolicy']
    const volumeSizePath = [...ebsPath, 'Size']
    if (volumeType === null) setState(volumeTypePath, defaultVolumeType)
    if (isDeletionPolicyEnabled && deletionPolicy === null)
      setState(deletionPolicyPath, DEFAULT_DELETION_POLICY)
    if (volumeSize === null) setState(volumeSizePath, 35)
  }, [volumeType, volumeSize, deletionPolicy, isDeletionPolicyEnabled, ebsPath])

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

  const toggleSnapshotVisibility = useCallback(() => {
    clearState(snapshotIdPath)
    setSnapshotVisible(!snapshostVisible)
  }, [setSnapshotVisible, snapshostVisible, snapshotIdPath])

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

  const snapshotFooterLinks = useMemo(
    () => [
      {
        title: t('wizard.storage.Ebs.snapshotId.snapshotLink.title'),
        href: t('wizard.storage.Ebs.snapshotId.snapshotLink.href'),
      },
    ],
    [t],
  )
  const onDeletionPolicyChange = useCallback(
    (selectedDeletionPolicy: DeletionPolicy) => {
      const deletionPolicyPath = [...ebsPath, 'DeletionPolicy']
      setState(deletionPolicyPath, selectedDeletionPolicy)
    },
    [ebsPath],
  )

  return (
    <SpaceBetween direction="vertical" size="m">
      <ColumnLayout columns={2}>
        <FormField label={t('wizard.storage.Ebs.volumeType.label')}>
          <Select
            placeholder={t('wizard.queues.validation.scriptWithArgs', {
              defaultVlumeType: defaultVolumeType,
            })}
            selectedOption={volumeType && strToOption(volumeType)}
            onChange={({detail}) => {
              setState(volumeTypePath, detail.selectedOption.value)
            }}
            options={volumeTypes.map(strToOption)}
          />
        </FormField>
      </ColumnLayout>
      <ColumnLayout columns={2}>
        <FormField
          label={t('wizard.storage.Ebs.volumeSize.label')}
          errorText={volumeErrors}
        >
          <Input
            inputMode={'decimal'}
            placeholder={t('wizard.storage.Ebs.volumeSize.placeholder')}
            type={'number' as InputProps.Type}
            value={volumeSize}
            onChange={({detail}) => {
              setState(volumeSizePath, detail.value)
              validated && storageValidate()
            }}
          />
        </FormField>
      </ColumnLayout>
      <ColumnLayout columns={2}>
        <SpaceBetween direction="vertical" size="xxs">
          <CheckboxWithHelpPanel
            checked={encrypted}
            onChange={toggleEncrypted}
            helpPanel={
              <TitleDescriptionHelpPanel
                title={t('wizard.storage.Ebs.encrypted.label')}
                description={t('wizard.storage.Ebs.encrypted.help')}
                footerLinks={encryptionFooterLinks}
              />
            }
          >
            {t('wizard.storage.Ebs.encrypted.label')}
          </CheckboxWithHelpPanel>

          {encrypted ? (
            <Input
              placeholder={t('wizard.storage.Ebs.encrypted.kmsId')}
              value={kmsId}
              onChange={({detail}) => {
                setState(kmsPath, detail.value)
              }}
            />
          ) : null}
        </SpaceBetween>
      </ColumnLayout>
      <ColumnLayout columns={2}>
        <SpaceBetween direction="vertical" size="xxs">
          <CheckboxWithHelpPanel
            checked={snapshostVisible}
            onChange={toggleSnapshotVisibility}
            helpPanel={
              <TitleDescriptionHelpPanel
                title={t('wizard.storage.Ebs.snapshotId.label')}
                description={t('wizard.storage.Ebs.snapshotId.help')}
                footerLinks={snapshotFooterLinks}
              />
            }
          >
            {t('wizard.storage.Ebs.snapshotId.label')}
          </CheckboxWithHelpPanel>
          {snapshostVisible && (
            <Input
              value={snapshotId}
              placeholder={t('wizard.storage.Ebs.snapshotId.placeholder')}
              onChange={({detail}) => {
                setState(snapshotIdPath, detail.value)
              }}
            />
          )}
        </SpaceBetween>
      </ColumnLayout>
      {isDeletionPolicyEnabled && (
        <ColumnLayout columns={2}>
          <DeletionPolicyFormField
            options={supportedDeletionPolicies}
            value={deletionPolicy}
            onDeletionPolicyChange={onDeletionPolicyChange}
          />
        </ColumnLayout>
      )}
    </SpaceBetween>
  )
}