[v11.0.x] Auth Drawer: Use redux store to load settings (#85172)

Auth Drawer: Use redux store to load settings (#85110)

* use actions instead of importing the backend service

* Replace the test render for redux-rtl

(cherry picked from commit 4e5bff0)

Co-authored-by: linoman <2051016+linoman@users.noreply.github.com>

public/app/features/auth-config/AuthDrawer.test.tsx

@@ -1,17 +1,21 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import React from 'react';
+import { render } from 'test/redux-rtl';
 
-import { AuthDrawer, Props } from './AuthDrawer';
+import { AuthDrawerUnconnected, Props } from './AuthDrawer';
 
 const defaultProps: Props = {
   onClose: jest.fn(),
+  allowInsecureEmail: false,
+  loadSettings: jest.fn(),
+  saveSettings: jest.fn(),
 };
 
 async function getTestContext(overrides: Partial<Props> = {}) {
   jest.clearAllMocks();
 
   const props = { ...defaultProps, ...overrides };
-  const { rerender } = render(<AuthDrawer {...props} />);
+  const { rerender } = render(<AuthDrawerUnconnected {...props} />);
 
   return { rerender, props };
 }

public/app/features/auth-config/AuthDrawer.tsx

@@ -1,53 +1,71 @@
 import { css } from '@emotion/css';
-import React, { useState } from 'react';
+import React, { JSX } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { getBackendSrv } from '@grafana/runtime';
 import { Button, Drawer, Text, TextLink, Switch, useStyles2 } from '@grafana/ui';
+import { useAppNotification } from 'app/core/copy/appNotification';
+import { StoreState } from 'app/types';
 
-export interface Props {
+import { loadSettings, saveSettings } from './state/actions';
+
+interface OwnProps {
   onClose: () => void;
 }
 
-const SETTINGS_URL = '/api/admin/settings';
-
-export const AuthDrawer = ({ onClose }: Props) => {
-  const [isOauthAllowInsecureEmailLookup, setOauthAllowInsecureEmailLookup] = useState(false);
+export type Props = OwnProps & ConnectedProps<typeof connector>;
 
-  const getSettings = async () => {
-    try {
-      const response = await getBackendSrv().get(SETTINGS_URL);
-      setOauthAllowInsecureEmailLookup(response.auth.oauth_allow_insecure_email_lookup?.toLowerCase?.() === 'true');
-    } catch (error) {}
+const mapStateToProps = (state: StoreState) => {
+  const allowInsecureEmail =
+    state.authConfig.settings?.auth?.oauth_allow_insecure_email_lookup.toLowerCase() === 'true';
+  return {
+    allowInsecureEmail,
   };
-  const updateSettings = async (property: boolean) => {
+};
+
+const mapActionsToProps = {
+  loadSettings,
+  saveSettings,
+};
+
+const connector = connect(mapStateToProps, mapActionsToProps);
+
+export const AuthDrawerUnconnected = ({
+  allowInsecureEmail,
+  loadSettings,
+  onClose,
+  saveSettings,
+}: Props): JSX.Element => {
+  const notifyApp = useAppNotification();
+
+  const oauthAllowInsecureEmailLookupOnChange = async () => {
     try {
-      const body = {
+      await saveSettings({
         updates: {
           auth: {
-            oauth_allow_insecure_email_lookup: '' + property,
+            oauth_allow_insecure_email_lookup: '' + !allowInsecureEmail,
           },
         },
-      };
-      await getBackendSrv().put(SETTINGS_URL, body);
-    } catch (error) {}
+      });
+      await loadSettings(false);
+      notifyApp.success('Settings saved');
+    } catch (error) {
+      notifyApp.error('Failed to save settings');
+    }
   };
 
   const resetButtonOnClick = async () => {
     try {
-      const body = {
+      await saveSettings({
         removals: {
           auth: ['oauth_allow_insecure_email_lookup'],
         },
-      };
-      await getBackendSrv().put(SETTINGS_URL, body);
-      getSettings();
-    } catch (error) {}
-  };
-
-  const oauthAllowInsecureEmailLookupOnChange = async () => {
-    updateSettings(!isOauthAllowInsecureEmailLookup);
-    setOauthAllowInsecureEmailLookup(!isOauthAllowInsecureEmailLookup);
+      });
+      await loadSettings(false);
+      notifyApp.success('Settings saved');
+    } catch (error) {
+      notifyApp.error('Failed to save settings');
+    }
   };
 
   const subtitle = (
@@ -65,8 +83,6 @@ export const AuthDrawer = ({ onClose }: Props) => {
 
   const styles = useStyles2(getStyles);
 
-  getSettings();
-
   return (
     <Drawer title="Auth Settings" subtitle={subtitle} size="md" onClose={onClose}>
       <div className={styles.advancedAuth}>
@@ -75,7 +91,7 @@ export const AuthDrawer = ({ onClose }: Props) => {
         <Text variant="body" color="secondary">
           Allow users to use the same email address to log into Grafana with different identity providers.
         </Text>
-        <Switch value={isOauthAllowInsecureEmailLookup} onChange={oauthAllowInsecureEmailLookupOnChange} />
+        <Switch value={allowInsecureEmail} onChange={oauthAllowInsecureEmailLookupOnChange} />
       </div>
       <Button
         size="md"
@@ -90,6 +106,8 @@ export const AuthDrawer = ({ onClose }: Props) => {
   );
 };
 
+export default connector(AuthDrawerUnconnected);
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     advancedAuth: css({

public/app/features/auth-config/AuthProvidersListPage.tsx

@@ -8,7 +8,7 @@ import { Page } from 'app/core/components/Page/Page';
 import { config } from 'app/core/config';
 import { StoreState } from 'app/types';
 
-import { AuthDrawer } from './AuthDrawer';
+import AuthDrawer from './AuthDrawer';
 import ConfigureAuthCTA from './components/ConfigureAuthCTA';
 import { ProviderCard } from './components/ProviderCard';
 import { loadSettings } from './state/actions';

public/app/features/auth-config/state/actions.ts

@@ -17,15 +17,19 @@ import {
   settingsUpdated,
 } from './reducers';
 
-export function loadSettings(): ThunkResult<Promise<Settings>> {
+export function loadSettings(showSpinner = true): ThunkResult<Promise<Settings>> {
   return async (dispatch) => {
     if (contextSrv.hasPermission(AccessControlAction.SettingsRead)) {
-      dispatch(loadingBegin());
+      if (showSpinner) {
+        dispatch(loadingBegin());
+      }
       dispatch(loadProviders());
       const result = await getBackendSrv().get('/api/admin/settings');
       dispatch(settingsUpdated(result));
       await dispatch(loadProviderStatuses());
-      dispatch(loadingEnd());
+      if (showSpinner) {
+        dispatch(loadingEnd());
+      }
       return result;
     }
   };