function ActionEditor()

in frontend/src/old-pages/Configure/Components.tsx [361:428]

• 64 lines of code
• 7 McCabe index (conditional complexity)

function ActionEditor({
  label,
  error,
  path,
}: {
  label: string
  error: string
  path: string[]
}) {
  const script = useState([...path, 'Script']) || ''
  const {t} = useTranslation()
  const args = useState([...path, 'Args']) || []
  const [enabled, setEnabled] = useStateReact(!!script)

  const addArg = (path: any) => {
    updateState(path, (old: any) => [...(old || []), ''])
  }

  const editScript = (path: any, val: any) => {
    if (val !== '') setState(path, val)
    else clearState(path)
    clearEmptyNest(path, 3)
  }

  const toggleCheckbox = useCallback(() => {
    clearState(path)
    setEnabled(!enabled)
  }, [enabled, setEnabled, path])

  return (
    <SpaceBetween direction="vertical" size="xs">
      <Checkbox checked={enabled} onChange={toggleCheckbox}>
        {label}
      </Checkbox>
      {enabled ? (
        <>
          <ColumnLayout columns={2}>
            <FormField errorText={error}>
              <Input
                placeholder="/home/ec2-user/start.sh"
                value={script}
                onChange={({detail}) =>
                  editScript([...path, 'Script'], detail.value)
                }
              />
            </FormField>
            <Button onClick={() => addArg([...path, 'Args'])}>
              {t('wizard.components.actionsEditor.addArgument')}
            </Button>
          </ColumnLayout>
          {args.length > 0 ? (
            <SpaceBetween direction="vertical" size="xs">
              {/* The title is styled as an empty FormField because the shortest heading is an h3, too big for this case */}
              <FormField
                label={t('wizard.components.actionsEditor.argument.label')}
              />
              {args.map((a: any, i: any) => (
                <ArgEditor
                  key={`osa${i}`}
                  arg={a}
                  i={i}
                  path={[...path, 'Args']}
                />
              ))}
            </SpaceBetween>
          ) : null}
        </>
      ) : null}