SSO LDAP: Fix search base dns parsing (#93179)

* Fix parse of

* Add i18n files

* Add default value

* Replace input field with multiselect

* rename delete form function

* Use Controller for MultiSelect

public/app/features/admin/ldap/LdapDrawer.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { Dispatch, SetStateAction, useEffect, useId, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import {
@@ -49,7 +49,7 @@ export const LdapDrawerComponent = ({
   const [encryptionProvider, setEncryptionProvider] = useState(EncryptionProvider.Base64);
 
   const styles = useStyles2(getStyles);
-  const { getValues, register, setValue, watch } = useFormContext<LdapPayload>();
+  const { control, getValues, register, setValue, watch } = useFormContext<LdapPayload>();
 
   const nameId = useId();
   const surnameId = useId();
@@ -335,19 +335,17 @@ export const LdapDrawerComponent = ({
                     'Root CA certificate content'
                   )}
                 >
-                  <MultiSelect
-                    id="root-ca-cert"
-                    allowCustomValue
-                    onChange={(v) => {
-                      setValue(
-                        `${serverConfig}.root_ca_cert_value`,
-                        v.filter(({ v }) => typeof v === 'string')?.map(({ v }) => v)
-                      );
-                    }}
-                    value={watch(`${serverConfig}.root_ca_cert_value`)?.map((v) => ({
-                      label: renderMultiSelectLabel(v),
-                      value: v,
-                    }))}
+                  <Controller
+                    name={`${serverConfig}.root_ca_cert_value`}
+                    control={control}
+                    render={({ field: { onChange, value, ...field } }) => (
+                      <MultiSelect
+                        {...field}
+                        allowCustomValue
+                        onChange={(v) => onChange(v.map(({ value }) => String(value)))}
+                        value={value?.map((v) => ({ label: renderMultiSelectLabel(v), value: v }))}
+                      />
+                    )}
                   />
                 </Field>
                 <Field

public/app/features/admin/ldap/LdapSettingsPage.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { useEffect, useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { connect } from 'react-redux';
 
 import { AppEvents, GrafanaTheme2, NavModelItem } from '@grafana/data';
@@ -19,6 +19,7 @@ import {
   Text,
   TextLink,
   Dropdown,
+  MultiSelect,
 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import config from 'app/core/config';
@@ -44,6 +45,8 @@ const pageNav: NavModelItem = {
   id: 'LDAP',
 };
 
+const serverConfig = 'settings.config.servers.0';
+
 const emptySettings: LdapPayload = {
   id: '',
   provider: '',
@@ -104,7 +107,7 @@ export const LdapSettingsPage = () => {
   });
 
   const methods = useForm<LdapPayload>({ defaultValues: emptySettings });
-  const { getValues, handleSubmit, register, reset, watch } = methods;
+  const { control, getValues, handleSubmit, register, reset, watch } = methods;
 
   const styles = useStyles2(getStyles);
 
@@ -207,7 +210,7 @@ export const LdapSettingsPage = () => {
   const saveForm = () => {
     putPayload(getValues());
   };
-  const discardForm = async () => {
+  const deleteLDAPConfig = async () => {
     try {
       setIsLoading(true);
       await getBackendSrv().delete('/api/v1/sso-settings/ldap');
@@ -273,7 +276,7 @@ export const LdapSettingsPage = () => {
                     id="host"
                     placeholder={t('ldap-settings-page.host.placeholder', 'example: 127.0.0.1')}
                     type="text"
-                    {...register('settings.config.servers.0.host', { required: true })}
+                    {...register(`${serverConfig}.host`, { required: true })}
                   />
                 </Field>
                 <Field
@@ -287,14 +290,14 @@ export const LdapSettingsPage = () => {
                     id="bind-dn"
                     placeholder={t('ldap-settings-page.bind-dn.placeholder', 'example: cn=admin,dc=grafana,dc=org')}
                     type="text"
-                    {...register('settings.config.servers.0.bind_dn')}
+                    {...register(`${serverConfig}.bind_dn`)}
                   />
                 </Field>
                 <Field label={t('ldap-settings-page.bind-password.label', 'Bind password')}>
                   <Input
                     id="bind-password"
                     type="text"
-                    {...register('settings.config.servers.0.bind_password', { required: false })}
+                    {...register(`${serverConfig}.bind_password`, { required: false })}
                   />
                 </Field>
                 <Field
@@ -308,22 +311,27 @@ export const LdapSettingsPage = () => {
                     id="search_filter"
                     placeholder={t('ldap-settings-page.search_filter.placeholder', 'example: cn=%s')}
                     type="text"
-                    {...register('settings.config.servers.0.search_filter', { required: true })}
+                    {...register(`${serverConfig}.search_filter`, { required: true })}
                   />
                 </Field>
                 <Field
                   label={t('ldap-settings-page.search-base-dns.label', 'Search base DNS *')}
                   description={t(
                     'ldap-settings-page.search-base-dns.description',
-                    'An array of base dns to search through; separate by commas or spaces.'
+                    'An array of base dns to search through.'
                   )}
                 >
-                  <Input
-                    id="search-base-dns"
-                    placeholder={t('ldap-settings-page.search-base-dns.placeholder', 'example: "dc=grafana.dc=org"')}
-                    type="text"
-                    {...register('settings.config.servers.0.search_base_dns', { required: true })}
-                  />
+                  <Controller
+                    name={`${serverConfig}.search_base_dns`}
+                    control={control}
+                    render={({ field: { onChange, ...field } }) => (
+                      <MultiSelect
+                        {...field}
+                        allowCustomValue
+                        onChange={(v) => onChange(v.map(({ value }) => String(value)))}
+                      />
+                    )}
+                  ></Controller>
                 </Field>
                 <Box borderColor="strong" borderStyle="solid" padding={2} width={68}>
                   <Stack alignItems={'center'} direction={'row'} gap={2} justifyContent={'space-between'}>
@@ -356,7 +364,7 @@ export const LdapSettingsPage = () => {
                     <Dropdown
                       overlay={
                         <Menu>
-                          <Menu.Item label="Reset to default values" icon="history-alt" onClick={discardForm} />
+                          <Menu.Item label="Reset to default values" icon="history-alt" onClick={deleteLDAPConfig} />
                         </Menu>
                       }
                       placement="bottom-start"

public/locales/en-US/grafana.json

@@ -1178,9 +1178,8 @@
       "placeholder": "example: cn=%s"
     },
     "search-base-dns": {
-      "description": "An array of base dns to search through; separate by commas or spaces.",
-      "label": "Search base DNS *",
-      "placeholder": "example: \"dc=grafana.dc=org\""
+      "description": "An array of base dns to search through.",
+      "label": "Search base DNS *"
     },
     "subtitle": "The LDAP integration in Grafana allows your Grafana users to log in with their LDAP credentials. Find out more in our <2><0>documentation</0></2>.",
     "title": "Basic Settings"

public/locales/pseudo-LOCALE/grafana.json

@@ -1178,9 +1178,8 @@
       "placeholder": "ęχämpľę: čʼn=%ş"
     },
     "search-base-dns": {
-      "description": "Åʼn äřřäy őƒ þäşę đʼnş ŧő şęäřčĥ ŧĥřőūģĥ; şępäřäŧę þy čőmmäş őř şpäčęş.",
-      "label": "Ŝęäřčĥ þäşę ĐŃŜ *",
-      "placeholder": "ęχämpľę: \"đč=ģřäƒäʼnä.đč=őřģ\""
+      "description": "Åʼn äřřäy őƒ þäşę đʼnş ŧő şęäřčĥ ŧĥřőūģĥ.",
+      "label": "Ŝęäřčĥ þäşę ĐŃŜ *"
     },
     "subtitle": "Ŧĥę ĿĐÅP įʼnŧęģřäŧįőʼn įʼn Ğřäƒäʼnä äľľőŵş yőūř Ğřäƒäʼnä ūşęřş ŧő ľőģ įʼn ŵįŧĥ ŧĥęįř ĿĐÅP čřęđęʼnŧįäľş. Fįʼnđ őūŧ mőřę įʼn őūř <2><0>đőčūmęʼnŧäŧįőʼn</0></2>.",
     "title": "ßäşįč Ŝęŧŧįʼnģş"