function DcvSettings()

in frontend/src/old-pages/Configure/HeadNode.tsx [303:368]
62 lines of code
9 McCabe index (conditional complexity)

function DcvSettings() {
  const {t} = useTranslation()
  const dcvPath = [...headNodePath, 'Dcv', 'Enabled']

  let dcvEnabled = useState(dcvPath) || false
  let port = useState([...headNodePath, 'Dcv', 'Port']) || 8443
  let allowedIps =
    useState([...headNodePath, 'Dcv', 'AllowedIps']) || '0.0.0.0/0'
  const editing = useState(['app', 'wizard', 'editing'])
  const toggleDcv = (event: any) => {
    const value = !dcvEnabled
    if (value) {
      enableSsm(value)
      if (allowedIps === null)
        setState([...headNodePath, 'Dcv', 'AllowedIps'], '0.0.0.0/0')
      if (port === null) setState([...headNodePath, 'Dcv', 'Port'], 8443)
      setState(dcvPath, value)
    } else {
      clearState([...headNodePath, 'Dcv'])
    }
  }

  const allowedIPsOnChange = React.useCallback(({detail}) => {
    setState([...headNodePath, 'Dcv', 'AllowedIps'], detail.value)
  }, [])

  const allowedPortOnChange = React.useCallback(
    ({detail}) =>
      setState([...headNodePath, 'Dcv', 'Port'], parseInt(detail.value)),
    [],
  )

  return (
    <>
      <CheckboxWithHelpPanel
        disabled={editing}
        checked={dcvEnabled}
        onChange={toggleDcv}
        helpPanel={
          <TitleDescriptionHelpPanel
            title={t('wizard.headNode.Dcv.label')}
            description={t('wizard.headNode.Dcv.help')}
          />
        }
      >
        {t('wizard.headNode.Dcv.add')}
      </CheckboxWithHelpPanel>
      <SpaceBetween direction="vertical" size="xs">
        {dcvEnabled && (
          <FormField label="Allowed IPs">
            <Input value={allowedIps} onChange={allowedIPsOnChange} />
          </FormField>
        )}
        {dcvEnabled && (
          <FormField label="Port">
            <Input
              inputMode="decimal"
              value={port}
              onChange={allowedPortOnChange}
            />
          </FormField>
        )}
      </SpaceBetween>
    </>
  )
}