function AdditionalSssdOptions()

in frontend/src/old-pages/Configure/MultiUser.tsx [65:141]
73 lines of code
9 McCabe index (conditional complexity)

function AdditionalSssdOptions() {
  const {t} = useTranslation()
  let additionalSssdConfigsErrors = useState([
    ...errorsPath,
    'additionalSssdConfigs',
  ])
  let additionalSssdConfigs =
    useState([...dsPath, 'AdditionalSssdConfigs']) || {}

  let key = useState(['app', 'wizard', 'multiUser', 'key'])
  let value = useState(['app', 'wizard', 'multiUser', 'value'])

  const addConfig = () => {
    if (!key || !value || key === '' || value === '') {
      setState(
        [...errorsPath, 'additionalSssdConfigs'],
        t('wizard.cluster.multiUser.sssdParameters.validation'),
      )
    } else {
      setState([...dsPath, 'AdditionalSssdConfigs', key || ''], value || '')
      clearState([...errorsPath, 'additionalSssdConfigs'])
    }
  }

  const removeConfig = (key: any) => {
    let config = {...additionalSssdConfigs}
    delete config[key]
    if (Object.keys(config).length === 0)
      clearState([...dsPath, 'AdditionalSssdConfigs'])
    else setState([...dsPath, 'AdditionalSssdConfigs'], config)
  }

  return (
    <>
      <SpaceBetween direction="vertical" size="xs">
        <FormField
          errorText={additionalSssdConfigsErrors}
          label={t('wizard.cluster.multiUser.sssdParameters.name')}
          description={t('wizard.cluster.multiUser.sssdParameters.description')}
        >
          <SpaceBetween size="s">
            <Input
              value={key}
              onChange={({detail}) =>
                setState(['app', 'wizard', 'multiUser', 'key'], detail.value)
              }
            />
            <Input
              value={value}
              onChange={({detail}) =>
                setState(['app', 'wizard', 'multiUser', 'value'], detail.value)
              }
            />
            <Button onClick={addConfig}>
              {t('wizard.cluster.multiUser.sssdParameters.addButton')}
            </Button>
          </SpaceBetween>
        </FormField>
        <SpaceBetween direction="vertical" size="xs">
          {Object.keys(additionalSssdConfigs).map((key, index) => (
            <div
              key={key}
              style={{
                display: 'flex',
                flexDirection: 'row',
                gap: '16px',
                alignItems: 'center',
              }}
            >
              <div>
                {key}: {String(additionalSssdConfigs[key])}
              </div>
              <Button onClick={() => removeConfig(key)}>
                {t('wizard.cluster.multiUser.sssdParameters.removeButton')}
              </Button>
            </div>
          ))}