function EfsSettings()

in frontend/src/pages/Configure/Storage.js [222:272]
46 lines of code
6 McCabe index (conditional complexity)

function EfsSettings({index}) {
  const efsPath = [...storagePath, index, 'EfsSettings'];
  const encryptedPath = [...efsPath, 'Encrypted'];
  const kmsPath = [...efsPath, 'KmsKeyId'];
  const performancePath = [...efsPath, 'PerformanceMode'];
  const performanceModes = ['generalPurpose', 'maxIO'];

  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);

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

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

  return (
    <SpaceBetween direction="vertical" size="s">
      <ColumnLayout columns={2} borders="vertical">
        <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 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 value={kmsId} onChange={(({detail}) => {setState(kmsPath, detail.value)})} />
              </div>
            </div>
            }