SSO LDAP: Adjust button behavior (#93173)

* Extract getSettings behaviour

* Replace string values format

* Reload settings

* Add new option to discad settings

* update i18n files

* run frontend linter

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

@@ -5,7 +5,21 @@ import { connect } from 'react-redux';
 
 import { AppEvents, GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { getBackendSrv, getAppEvents } from '@grafana/runtime';
-import { useStyles2, Alert, Box, Button, Field, Input, Stack, Text, TextLink } from '@grafana/ui';
+import {
+  useStyles2,
+  Alert,
+  Box,
+  Button,
+  Field,
+  IconButton,
+  Input,
+  LinkButton,
+  Menu,
+  Stack,
+  Text,
+  TextLink,
+  Dropdown,
+} from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import config from 'app/core/config';
 import { t, Trans } from 'app/core/internationalization';
@@ -90,21 +104,13 @@ export const LdapSettingsPage = () => {
   });
 
   const methods = useForm<LdapPayload>({ defaultValues: emptySettings });
-  const { getValues, handleSubmit, register, reset } = methods;
+  const { getValues, handleSubmit, register, reset, watch } = methods;
 
   const styles = useStyles2(getStyles);
 
   useEffect(() => {
     async function init() {
-      const payload = await getBackendSrv().get<LdapPayload>('/api/v1/sso-settings/ldap');
+      const payload = await getSettings();
-      if (!payload || !payload.settings || !payload.settings.config) {
-        appEvents.publish({
-          type: AppEvents.alertError.name,
-          payload: [t('ldap-settings-page.alert.error-fetching', 'Error fetching LDAP settings')],
-        });
-        return;
-      }
-
       const serverConfig = payload.settings.config.servers[0];
       setMapKeyCertConfigured({
         rootCaCertValue: serverConfig.root_ca_cert_value?.length > 0,
@@ -134,6 +140,30 @@ export const LdapSettingsPage = () => {
     );
   }
 
+  /**
+   * Fetches the settings from the backend
+   * @returns Promise<LdapPayload>
+   */
+  const getSettings = async () => {
+    try {
+      const payload = await getBackendSrv().get<LdapPayload>('/api/v1/sso-settings/ldap');
+      if (!payload || !payload.settings || !payload.settings.config) {
+        appEvents.publish({
+          type: AppEvents.alertError.name,
+          payload: [t('ldap-settings-page.alert.error-fetching', 'Error fetching LDAP settings')],
+        });
+        return emptySettings;
+      }
+      return payload;
+    } catch (error) {
+      appEvents.publish({
+        type: AppEvents.alertError.name,
+        payload: [t('ldap-settings-page.alert.error-fetching', 'Error fetching LDAP settings')],
+      });
+      return emptySettings;
+    }
+  };
+
   /**
    * Save payload to the backend
    * @param payload LdapPayload
@@ -151,6 +181,7 @@ export const LdapSettingsPage = () => {
         type: AppEvents.alertSuccess.name,
         payload: [t('ldap-settings-page.alert.saved', 'LDAP settings saved')],
       });
+      reset(await getSettings());
     } catch (error) {
       appEvents.publish({
         type: AppEvents.alertError.name,
@@ -180,14 +211,7 @@ export const LdapSettingsPage = () => {
     try {
       setIsLoading(true);
       await getBackendSrv().delete('/api/v1/sso-settings/ldap');
-      const payload = await getBackendSrv().get<LdapPayload>('/api/v1/sso-settings/ldap');
+      const payload = await getSettings();
-      if (!payload || !payload.settings || !payload.settings.config) {
-        appEvents.publish({
-          type: AppEvents.alertError.name,
-          payload: [t('ldap-settings-page.alert.error-update', 'Error updating LDAP settings')],
-        });
-        return;
-      }
       appEvents.publish({
         type: AppEvents.alertSuccess.name,
         payload: [t('ldap-settings-page.alert.discard-success', 'LDAP settings discarded')],
@@ -318,17 +342,34 @@ export const LdapSettingsPage = () => {
                     </Button>
                   </Stack>
                 </Box>
-                <Box display={'flex'} gap={2} marginTop={5}>
+                <Box display="flex" gap={2} marginTop={5}>
-                  <Stack alignItems={'center'} gap={2}>
+                  <Stack alignItems="center" gap={2}>
-                    <Button type={'submit'}>
+                    <Button type="submit">
                       <Trans i18nKey="ldap-settings-page.buttons-section.save-and-enable.button">Save and enable</Trans>
                     </Button>
                     <Button variant="secondary" onClick={saveForm}>
                       <Trans i18nKey="ldap-settings-page.buttons-section.save.button">Save</Trans>
                     </Button>
-                    <Button variant="secondary" onClick={discardForm}>
+                    <LinkButton href="/admin/authentication" variant="secondary">
                       <Trans i18nKey="ldap-settings-page.buttons-section.discard.button">Discard</Trans>
-                    </Button>
+                    </LinkButton>
+                    <Dropdown
+                      overlay={
+                        <Menu>
+                          <Menu.Item label="Reset to default values" icon="history-alt" onClick={discardForm} />
+                        </Menu>
+                      }
+                      placement="bottom-start"
+                    >
+                      <IconButton
+                        tooltip="More actions"
+                        title="More actions"
+                        size="md"
+                        variant="secondary"
+                        name="ellipsis-v"
+                        hidden={watch('source') === 'system'}
+                      />
+                    </Dropdown>
                   </Stack>
                 </Box>
               </section>

public/locales/en-US/grafana.json

@@ -1109,7 +1109,6 @@
       "discard-success": "LDAP settings discarded",
       "error-fetching": "Error fetching LDAP settings",
       "error-saving": "Error saving LDAP settings",
-      "error-update": "Error updating LDAP settings",
       "error-validate-form": "Error validating LDAP settings",
       "feature-flag-disabled": "This page is only accessible by enabling the <1>ssoSettingsLDAP</1> feature flag.",
       "saved": "LDAP settings saved"

public/locales/pseudo-LOCALE/grafana.json

@@ -1109,7 +1109,6 @@
       "discard-success": "ĿĐÅP şęŧŧįʼnģş đįşčäřđęđ",
       "error-fetching": "Ēřřőř ƒęŧčĥįʼnģ ĿĐÅP şęŧŧįʼnģş",
       "error-saving": "Ēřřőř şävįʼnģ ĿĐÅP şęŧŧįʼnģş",
-      "error-update": "Ēřřőř ūpđäŧįʼnģ ĿĐÅP şęŧŧįʼnģş",
       "error-validate-form": "Ēřřőř väľįđäŧįʼnģ ĿĐÅP şęŧŧįʼnģş",
       "feature-flag-disabled": "Ŧĥįş päģę įş őʼnľy äččęşşįþľę þy ęʼnäþľįʼnģ ŧĥę <1>şşőŜęŧŧįʼnģşĿĐÅP</1> ƒęäŧūřę ƒľäģ.",
       "saved": "ĿĐÅP şęŧŧįʼnģş şävęđ"