function EbsSettings()

in frontend/src/pages/Configure/Storage.js [318:406]
75 lines of code
8 McCabe index (conditional complexity)

function EbsSettings({index}) {
  const ebsPath = [...storagePath, index, 'EbsSettings'];
  const volumeTypePath = [...ebsPath, 'VolumeType'];
  const volumeTypes = ['gp2', 'gp3', 'io1', 'io2', 'sc1', 'stl', 'standard']
  const volumeSizePath = [...ebsPath, 'Size'];
  const encryptedPath = [...ebsPath, 'Encrypted'];
  const kmsPath = [...ebsPath, 'KmsKeyId'];
  const snapshotIdPath = [...ebsPath, 'SnapshotId'];
  const editing = useState(['app', 'wizard', 'editing']);

  const deletionPolicyPath = [...ebsPath, 'DeletionPolicy'];
  const deletionPolicies = ['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);
  let deletionPolicy = useState(deletionPolicyPath);

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

  React.useEffect(() => {
    const ebsPath = [...storagePath, index, 'EbsSettings'];
    const volumeTypePath = [...ebsPath, 'VolumeType'];
    const deletionPolicyPath = [...ebsPath, 'DeletionPolicy']
    const volumeSizePath = [...ebsPath, 'Size'];
    if(volumeType === null)
      setState(volumeTypePath, 'gp2');
    if(deletionPolicy === null)
      setState(deletionPolicyPath, 'Delete');
    if(volumeSize === null)
      setState(volumeSizePath, 35);
  }, [volumeType, volumeSize, deletionPolicy, index]);

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

  return (
    <SpaceBetween direction="vertical" size="m">
      <ColumnLayout columns={2} borders="vertical">
        <div style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "16px"}}>
          Volume Type:
          <Select
            disabled={editing}
            placeholder="Default (gp2)"
            selectedOption={volumeType && strToOption(volumeType)} label="Volume Type" onChange={({detail}) => {setState(volumeTypePath, detail.selectedOption.value)}}
            options={volumeTypes.map(strToOption)}
          />
        </div>
        <div style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "16px"}}>
          <div style={{display: "flex", flexGrow: 1, flexShrink: 0}}>
            Volume Size (35-2048 in GB):
          </div>
          <div style={{display: "flex", flexShrink: 1}}>
            <FormField errorText = {volumeErrors}>
              <Input
                disabled={editing}
                style={{marginTop: 10}}
                type="decimal"
                value={volumeSize}
                onChange={({detail}) => {setState(volumeSizePath, detail.value); validated && storageValidate()}} />
            </FormField>
          </div>
        </div>

      <div style={{display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
        <div style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "16px"}}>
          <div style={{display: "flex", flexGrow: 1, flexShrink: 0}}>
            <Toggle
              disabled={editing}
              checked={encrypted} onChange={toggleEncrypted}>Encrypted</Toggle>
          </div>
          { encrypted &&
          <div style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "16px"}}>
            <div style={{display: "flex", flexGrow: 1, flexShrink: 0}}>
              KMS ID:
            </div>
            <div style={{display: "flex", flexShrink: 1}}>
              <Input disabled={editing} value={kmsId} onChange={(({detail}) => {setState(kmsPath, detail.value)})} />
            </div>
          </div>
          }