refactor: port auth admin to TS/SWR (#675)

* refactor: format files

* refactor: add missing RE UI config flag

* refactor: port admin auth index to TS/SWR

* refactor: port GoogleAuth to TS/SWR

* refactor: port OidcAuth to TS/SWR

* refactor: port SamlAuth to TS/SWR

* refactor: remove unused e-admin-auth store

* refactor: make AutoCreateForm an explicit export

* refactor: improve auth settings dir structure

* refactor: destructure authenticationType from uiConfig

* refactor: use setToastApiError to show errors

* refactor: format files

* refactor: remove invalid string fields from requests

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

frontend/src/component/admin/auth/AuthSettings.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import AdminMenu from '../menu/AdminMenu';
 import { Alert } from '@material-ui/lab';
-import GoogleAuth from './google-auth-container';
-import SamlAuth from './saml-auth-container';
-import OidcAuth from './oidc-auth-container';
-import PasswordAuthSettings from './PasswordAuthSettings';
 import TabNav from '../../common/TabNav/TabNav';
 import PageContent from '../../common/PageContent/PageContent';
 import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
+import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
+import { OidcAuth } from './OidcAuth/OidcAuth';
+import { SamlAuth } from './SamlAuth/SamlAuth';
+import { PasswordAuth } from './PasswordAuth/PasswordAuth';
+import { GoogleAuth } from './GoogleAuth/GoogleAuth';
+
+export const AuthSettings = () => {
+    const { authenticationType } = useUiConfig().uiConfig;
 
-function AdminAuthPage({ authenticationType, history }) {
     const tabs = [
         {
             label: 'OpenID Connect',
@@ -22,7 +24,7 @@ function AdminAuthPage({ authenticationType, history }) {
         },
         {
             label: 'Password',
-            component: <PasswordAuthSettings />,
+            component: <PasswordAuth />,
         },
         {
             label: 'Google',
@@ -32,7 +34,7 @@ function AdminAuthPage({ authenticationType, history }) {
 
     return (
         <div>
-            <AdminMenu history={history} />
+            <AdminMenu />
             <PageContent headerContent="Single Sign-On">
                 <ConditionallyRender
                     condition={authenticationType === 'enterprise'}
@@ -80,12 +82,4 @@ function AdminAuthPage({ authenticationType, history }) {
             </PageContent>
         </div>
     );
-}
-
-AdminAuthPage.propTypes = {
-    match: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired,
-    authenticationType: PropTypes.string,
 };
-
-export default AdminAuthPage;

frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx

@@ -1,5 +1,14 @@
 import React, { ChangeEvent, Fragment } from 'react';
-import { FormControl, Grid, MenuItem, Switch, TextField, Select, InputLabel, FormControlLabel } from '@material-ui/core';
+import {
+    FormControl,
+    FormControlLabel,
+    Grid,
+    InputLabel,
+    MenuItem,
+    Select,
+    Switch,
+    TextField,
+} from '@material-ui/core';
 
 interface Props {
     data?: {
@@ -7,25 +16,29 @@ interface Props {
         autoCreate: boolean;
         defaultRootRole?: string;
         emailDomains?: string;
-
     };
     setValue: (name: string, value: string | boolean) => void;
 }
 
-function AutoCreateForm({ data = { enabled: false, autoCreate: false }, setValue }: Props) {
+export const AutoCreateForm = ({
+    data = { enabled: false, autoCreate: false },
+    setValue,
+}: Props) => {
     const updateAutoCreate = () => {
         setValue('autoCreate', !data.autoCreate);
-    }
+    };
 
-    const updateDefaultRootRole = (evt: ChangeEvent<{ name?: string; value: unknown }>) => {
+    const updateDefaultRootRole = (
+        evt: ChangeEvent<{ name?: string; value: unknown }>
+    ) => {
         setValue('defaultRootRole', evt.target.value as string);
-    }
+    };
 
     const updateField = (e: ChangeEvent<HTMLInputElement>) => {
         setValue(e.target.name, e.target.value);
-    }
+    };
 
-return (
+    return (
         <Fragment>
             <Grid container spacing={3}>
                 <Grid item md={5}>
@@ -35,14 +48,15 @@ return (
                     </p>
                 </Grid>
                 <Grid item md={6} style={{ padding: '20px' }}>
-
                     <FormControlLabel
-                control={ <Switch
+                        control={
+                            <Switch
                                 onChange={updateAutoCreate}
                                 name="enabled"
                                 checked={data.autoCreate}
                                 disabled={!data.enabled}
-                />}
+                            />
+                        }
                         label="Auto-create users"
                     />
                 </Grid>
@@ -51,12 +65,15 @@ return (
                 <Grid item md={5}>
                     <strong>Default Root Role</strong>
                     <p>
-                    Choose which root role the user should get when no explicit role mapping exists.
+                        Choose which root role the user should get when no
+                        explicit role mapping exists.
                     </p>
                 </Grid>
                 <Grid item md={6}>
-            <FormControl style={{minWidth: '200px'}}>
+                    <FormControl style={{ minWidth: '200px' }}>
-                <InputLabel id="defaultRootRole-label">Default Role</InputLabel>
+                        <InputLabel id="defaultRootRole-label">
+                            Default Role
+                        </InputLabel>
                         <Select
                             labelId="defaultRootRole-label"
                             id="defaultRootRole"
@@ -66,9 +83,9 @@ return (
                             onChange={updateDefaultRootRole}
                         >
                             {/*consider these from API or constants. */}
-                    <MenuItem value='Viewer'>Viewer</MenuItem>
+                            <MenuItem value="Viewer">Viewer</MenuItem>
-                    <MenuItem value='Editor'>Editor</MenuItem>
+                            <MenuItem value="Editor">Editor</MenuItem>
-                    <MenuItem value='Admin'>Admin</MenuItem>
+                            <MenuItem value="Admin">Admin</MenuItem>
                         </Select>
                     </FormControl>
                 </Grid>
@@ -77,8 +94,8 @@ return (
                 <Grid item md={5}>
                     <strong>Email domains</strong>
                     <p>
-                    Comma separated list of email domains
+                        Comma separated list of email domains that should be
-                    that should be allowed to sign in.
+                        allowed to sign in.
                     </p>
                 </Grid>
                 <Grid item md={6}>
@@ -97,6 +114,6 @@ return (
                     />
                 </Grid>
             </Grid>
-    </Fragment>);
+        </Fragment>
-}
+    );
-export default AutoCreateForm;
+};

frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import {
     Button,
     FormControlLabel,
@@ -8,30 +7,32 @@ import {
     TextField,
 } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
-import PageContent from '../../common/PageContent/PageContent';
+import PageContent from '../../../common/PageContent/PageContent';
-import AccessContext from '../../../contexts/AccessContext';
+import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
+import { ADMIN } from '../../../providers/AccessProvider/permissions';
+import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
+import useAuthSettings from '../../../../hooks/api/getters/useAuthSettings/useAuthSettings';
+import useAuthSettingsApi from '../../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useToast from '../../../../hooks/useToast';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
+import { removeEmptyStringFields } from '../../../../utils/remove-empty-string-fields';
 
 const initialState = {
     enabled: false,
     autoCreate: false,
     unleashHostname: location.hostname,
+    clientId: '',
+    clientSecret: '',
+    emailDomains: '',
 };
 
-function GoogleAuth({
+export const GoogleAuth = () => {
-    config,
+    const { setToastData, setToastApiError } = useToast();
-    getGoogleConfig,
+    const { uiConfig } = useUiConfig();
-    updateGoogleConfig,
-    unleashUrl,
-}) {
     const [data, setData] = useState(initialState);
-    const [info, setInfo] = useState();
     const { hasAccess } = useContext(AccessContext);
-
+    const { config } = useAuthSettings('google');
-    useEffect(() => {
+    const { updateSettings, errors, loading } = useAuthSettingsApi('google');
-        getGoogleConfig();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
 
     useEffect(() => {
         if (config.clientId) {
@@ -43,10 +44,10 @@ function GoogleAuth({
         return <span>You need admin privileges to access this section.</span>;
     }
 
-    const updateField = e => {
+    const updateField = (event: React.ChangeEvent<HTMLInputElement>) => {
         setData({
             ...data,
-            [e.target.name]: e.target.value,
+            [event.target.name]: event.target.value,
         });
     };
 
@@ -58,19 +59,22 @@ function GoogleAuth({
         setData({ ...data, autoCreate: !data.autoCreate });
     };
 
-    const onSubmit = async e => {
+    const onSubmit = async (event: React.SyntheticEvent) => {
-        e.preventDefault();
+        event.preventDefault();
-        setInfo('...saving');
+
         try {
-            await updateGoogleConfig(data);
+            await updateSettings(removeEmptyStringFields(data));
-            setInfo('Settings stored');
+            setToastData({
-            setTimeout(() => setInfo(''), 2000);
+                title: 'Settings stored',
-        } catch (e) {
+                type: 'success',
-            setInfo(e.message);
+            });
+        } catch (err) {
+            setToastApiError(formatUnknownError(err));
         }
     };
+
     return (
-        <PageContent>
+        <PageContent headerContent="">
             <Grid container style={{ marginBottom: '1rem' }}>
                 <Grid item xs={12}>
                     <Alert severity="info">
@@ -84,7 +88,7 @@ function GoogleAuth({
                         </a>{' '}
                         to learn how to integrate with Google OAuth 2.0. <br />
                         Callback URL:{' '}
-                        <code>{unleashUrl}/auth/google/callback</code>
+                        <code>{uiConfig.unleashUrl}/auth/google/callback</code>
                     </Alert>
                 </Grid>
             </Grid>
@@ -125,7 +129,7 @@ function GoogleAuth({
                             label="Client ID"
                             name="clientId"
                             placeholder=""
-                            value={data.clientId || ''}
+                            value={data.clientId}
                             style={{ width: '400px' }}
                             variant="outlined"
                             size="small"
@@ -146,7 +150,7 @@ function GoogleAuth({
                             onChange={updateField}
                             label="Client Secret"
                             name="clientSecret"
-                            value={data.clientSecret || ''}
+                            value={data.clientSecret}
                             placeholder=""
                             style={{ width: '400px' }}
                             variant="outlined"
@@ -195,9 +199,7 @@ function GoogleAuth({
                             onChange={updateAutoCreate}
                             name="enabled"
                             checked={data.autoCreate}
-                        >
+                        />
-                            Auto-create users
-                        </Switch>
                     </Grid>
                 </Grid>
                 <Grid container spacing={3}>
@@ -229,22 +231,18 @@ function GoogleAuth({
                             variant="contained"
                             color="primary"
                             type="submit"
+                            disabled={loading}
                         >
                             Save
                         </Button>{' '}
-                        <small>{info}</small>
+                        <p>
+                            <small style={{ color: 'red' }}>
+                                {errors?.message}
+                            </small>
+                        </p>
                     </Grid>
                 </Grid>
             </form>
         </PageContent>
     );
-}
-
-GoogleAuth.propTypes = {
-    config: PropTypes.object,
-    unleashUrl: PropTypes.string,
-    getGoogleConfig: PropTypes.func.isRequired,
-    updateGoogleConfig: PropTypes.func.isRequired,
 };
-
-export default GoogleAuth;

frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import {
     Button,
     FormControlLabel,
@@ -8,34 +7,40 @@ import {
     TextField,
 } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
-import PageContent from '../../common/PageContent/PageContent';
+import PageContent from '../../../common/PageContent/PageContent';
-import AccessContext from '../../../contexts/AccessContext';
+import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
+import { ADMIN } from '../../../providers/AccessProvider/permissions';
-import AutoCreateForm from './AutoCreateForm/AutoCreateForm';
+import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm';
+import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
+import useAuthSettingsApi from '../../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useAuthSettings from '../../../../hooks/api/getters/useAuthSettings/useAuthSettings';
+import useToast from '../../../../hooks/useToast';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
+import { removeEmptyStringFields } from '../../../../utils/remove-empty-string-fields';
 
 const initialState = {
     enabled: false,
     enableSingleSignOut: false,
     autoCreate: false,
     unleashHostname: location.hostname,
+    clientId: '',
+    discoverUrl: '',
+    secret: '',
+    acrValues: '',
 };
 
-function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
+export const OidcAuth = () => {
+    const { setToastData, setToastApiError } = useToast();
+    const { uiConfig } = useUiConfig();
     const [data, setData] = useState(initialState);
-    const [info, setInfo] = useState();
-    const [error, setError] = useState();
     const { hasAccess } = useContext(AccessContext);
-
+    const { config } = useAuthSettings('oidc');
-    useEffect(() => {
+    const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
-        getOidcConfig();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
 
     useEffect(() => {
         if (config.discoverUrl) {
             setData(config);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [config]);
 
     if (!hasAccess(ADMIN)) {
@@ -46,8 +51,8 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
         );
     }
 
-    const updateField = e => {
+    const updateField = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setValue(e.target.name, e.target.value);
+        setValue(event.target.name, event.target.value);
     };
 
     const updateEnabled = () => {
@@ -58,28 +63,29 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
         setData({ ...data, enableSingleSignOut: !data.enableSingleSignOut });
     };
 
-    const setValue = (field, value) => {
+    const setValue = (name: string, value: string | boolean) => {
         setData({
             ...data,
-            [field]: value,
+            [name]: value,
         });
     };
 
-    const onSubmit = async e => {
+    const onSubmit = async (event: React.SyntheticEvent) => {
-        e.preventDefault();
+        event.preventDefault();
-        setInfo('...saving');
+
-        setError('');
         try {
-            await updateOidcConfig(data);
+            await updateSettings(removeEmptyStringFields(data));
-            setInfo('Settings stored');
+            setToastData({
-            setTimeout(() => setInfo(''), 2000);
+                title: 'Settings stored',
-        } catch (e) {
+                type: 'success',
-            setInfo('');
+            });
-            setError(e.message);
+        } catch (err) {
+            setToastApiError(formatUnknownError(err));
         }
     };
+
     return (
-        <PageContent>
+        <PageContent headerContent="">
             <Grid container style={{ marginBottom: '1rem' }}>
                 <Grid item md={12}>
                     <Alert severity="info">
@@ -94,7 +100,7 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
                         to learn how to integrate with specific Open Id Connect
                         providers (Okta, Keycloak, Google, etc). <br />
                         Callback URL:{' '}
-                        <code>{unleashUrl}/auth/oidc/callback</code>
+                        <code>{uiConfig.unleashUrl}/auth/oidc/callback</code>
                     </Alert>
                 </Grid>
             </Grid>
@@ -128,7 +134,7 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
                             onChange={updateField}
                             label="Discover URL"
                             name="discoverUrl"
-                            value={data.discoverUrl || ''}
+                            value={data.discoverUrl}
                             disabled={!data.enabled}
                             style={{ width: '400px' }}
                             variant="outlined"
@@ -146,7 +152,7 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
                             onChange={updateField}
                             label="Client ID"
                             name="clientId"
-                            value={data.clientId || ''}
+                            value={data.clientId}
                             disabled={!data.enabled}
                             style={{ width: '400px' }}
                             variant="outlined"
@@ -167,7 +173,7 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
                             onChange={updateField}
                             label="Client Secret"
                             name="secret"
-                            value={data.secret || ''}
+                            value={data.secret}
                             disabled={!data.enabled}
                             style={{ width: '400px' }}
                             variant="outlined"
@@ -180,7 +186,10 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
                 <Grid container spacing={3}>
                     <Grid item md={5}>
                         <strong>Enable Single Sign-Out</strong>
-                        <p>If you enable Single Sign-Out Unleash will redirect the user to the IDP as part of the Sign-out process.</p>
+                        <p>
+                            If you enable Single Sign-Out Unleash will redirect
+                            the user to the IDP as part of the Sign-out process.
+                        </p>
                     </Grid>
                     <Grid item md={6} style={{ padding: '20px' }}>
                         <FormControlLabel
@@ -204,15 +213,21 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
                 <Grid container spacing={3}>
                     <Grid item md={5}>
                         <strong>ACR Values</strong>
-                        <p>Requested Authentication Context Class Reference values. If multiple values are specified they should be "space" separated. Will be sent as "acr_values" as 
+                        <p>
-                            part of the authentication request. Unleash will validate the acr value in the id token claims against the list of acr values.</p>
+                            Requested Authentication Context Class Reference
+                            values. If multiple values are specified they should
+                            be "space" separated. Will be sent as "acr_values"
+                            as part of the authentication request. Unleash will
+                            validate the acr value in the id token claims
+                            against the list of acr values.
+                        </p>
                     </Grid>
                     <Grid item md={6}>
                         <TextField
                             onChange={updateField}
                             label="ACR Values"
                             name="acrValues"
-                            value={data.acrValues || ''}
+                            value={data.acrValues}
                             disabled={!data.enabled}
                             style={{ width: '400px' }}
                             variant="outlined"
@@ -229,23 +244,18 @@ function OidcAuth({ config, getOidcConfig, updateOidcConfig, unleashUrl }) {
                             variant="contained"
                             color="primary"
                             type="submit"
+                            disabled={loading}
                         >
                             Save
                         </Button>{' '}
-                        <small>{info}</small>
+                        <p>
-                        <small style={{ color: 'red' }}>{error}</small>
+                            <small style={{ color: 'red' }}>
+                                {errors?.message}
+                            </small>
+                        </p>
                     </Grid>
                 </Grid>
             </form>
         </PageContent>
     );
-}
-
-OidcAuth.propTypes = {
-    config: PropTypes.object,
-    unleash: PropTypes.string,
-    getOidcConfig: PropTypes.func.isRequired,
-    updateOidcConfig: PropTypes.func.isRequired,
 };
-
-export default OidcAuth;

frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx

@@ -1,30 +1,28 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import {
+import { Button, FormControlLabel, Grid, Switch } from '@material-ui/core';
-    Button,
-    FormControlLabel,
-    Grid,
-    Switch,
-} from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
-import PageContent from '../../common/PageContent/PageContent';
+import PageContent from '../../../common/PageContent/PageContent';
-import AccessContext from '../../../contexts/AccessContext';
+import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
+import { ADMIN } from '../../../providers/AccessProvider/permissions';
-import useAuthSettings from '../../../hooks/api/getters/useAuthSettings/useAuthSettings';
+import useAuthSettings from '../../../../hooks/api/getters/useAuthSettings/useAuthSettings';
-import useAuthSettingsApi, {ISimpleAuthSettings } from '../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useAuthSettingsApi, {
-import useToast from '../../../hooks/useToast';
+    ISimpleAuthSettings,
+} from '../../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useToast from '../../../../hooks/useToast';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
 
-const PasswordAuthSettings = () => {
+export const PasswordAuth = () => {
-
+    const { setToastData, setToastApiError } = useToast();
-    const { setToastData } = useToast();
     const { config } = useAuthSettings('simple');
-    const [disablePasswordAuth, setDisablePasswordAuth] = useState<boolean>(false);
+    const [disablePasswordAuth, setDisablePasswordAuth] =
-    const { updateSettings, errors, loading } = useAuthSettingsApi<ISimpleAuthSettings>('simple')
+        useState<boolean>(false);
+    const { updateSettings, errors, loading } =
+        useAuthSettingsApi<ISimpleAuthSettings>('simple');
     const { hasAccess } = useContext(AccessContext);
 
-
     useEffect(() => {
         setDisablePasswordAuth(!!config.disabled);
-    }, [ config.disabled ]);
+    }, [config.disabled]);
 
     if (!hasAccess(ADMIN)) {
         return (
@@ -38,12 +36,13 @@ const PasswordAuthSettings = () => {
         setDisablePasswordAuth(!disablePasswordAuth);
     };
 
-
+    const onSubmit = async (event: React.SyntheticEvent) => {
-    const onSubmit = async evt => {
+        event.preventDefault();
-        evt.preventDefault();
 
         try {
-            const settings: ISimpleAuthSettings = { disabled: disablePasswordAuth };
+            const settings: ISimpleAuthSettings = {
+                disabled: disablePasswordAuth,
+            };
             await updateSettings(settings);
             setToastData({
                 title: 'Successfully saved',
@@ -52,20 +51,13 @@ const PasswordAuthSettings = () => {
                 type: 'success',
                 show: true,
             });
-        } catch (err: any) {
+        } catch (err) {
-            setToastData({
+            setToastApiError(formatUnknownError(err));
-                title: 'Could not store settings',
+            setDisablePasswordAuth(config.disabled);
-                text: err?.message,
-                autoHideDuration: 4000,
-                type: 'error',
-                show: true,
-            });
-            setDisablePasswordAuth(config.disabled)
         }
-
     };
     return (
-        <PageContent headerContent=''>
+        <PageContent headerContent="">
             <form onSubmit={onSubmit}>
                 <Grid container spacing={3}>
                     <Grid item md={5}>
@@ -82,7 +74,9 @@ const PasswordAuthSettings = () => {
                                     checked={!disablePasswordAuth}
                                 />
                             }
-                            label={!disablePasswordAuth ? 'Enabled' : 'Disabled'}
+                            label={
+                                !disablePasswordAuth ? 'Enabled' : 'Disabled'
+                            }
                         />
                     </Grid>
                 </Grid>
@@ -96,12 +90,14 @@ const PasswordAuthSettings = () => {
                         >
                             Save
                         </Button>{' '}
-                        <p><small style={{ color: 'red' }}>{errors?.message}</small></p>
+                        <p>
+                            <small style={{ color: 'red' }}>
+                                {errors?.message}
+                            </small>
+                        </p>
                     </Grid>
                 </Grid>
             </form>
         </PageContent>
     );
-}
+};
-
-export default PasswordAuthSettings;

frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import {
     Button,
     FormControlLabel,
@@ -8,32 +7,40 @@ import {
     TextField,
 } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
-import PageContent from '../../common/PageContent/PageContent';
+import PageContent from '../../../common/PageContent/PageContent';
-import AccessContext from '../../../contexts/AccessContext';
+import AccessContext from '../../../../contexts/AccessContext';
-import { ADMIN } from '../../providers/AccessProvider/permissions';
+import { ADMIN } from '../../../providers/AccessProvider/permissions';
-import AutoCreateForm from './AutoCreateForm/AutoCreateForm';
+import { AutoCreateForm } from '../AutoCreateForm/AutoCreateForm';
+import useToast from '../../../../hooks/useToast';
+import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
+import useAuthSettings from '../../../../hooks/api/getters/useAuthSettings/useAuthSettings';
+import useAuthSettingsApi from '../../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import { formatUnknownError } from '../../../../utils/format-unknown-error';
+import { removeEmptyStringFields } from '../../../../utils/remove-empty-string-fields';
 
 const initialState = {
     enabled: false,
     autoCreate: false,
     unleashHostname: location.hostname,
+    entityId: '',
+    signOnUrl: '',
+    certificate: '',
+    signOutUrl: '',
+    spCertificate: '',
 };
 
-function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
+export const SamlAuth = () => {
+    const { setToastData, setToastApiError } = useToast();
+    const { uiConfig } = useUiConfig();
     const [data, setData] = useState(initialState);
-    const [info, setInfo] = useState();
     const { hasAccess } = useContext(AccessContext);
-
+    const { config } = useAuthSettings('saml');
-    useEffect(() => {
+    const { updateSettings, errors, loading } = useAuthSettingsApi('saml');
-        getSamlConfig();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
 
     useEffect(() => {
         if (config.entityId) {
             setData(config);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [config]);
 
     if (!hasAccess(ADMIN)) {
@@ -44,34 +51,37 @@ function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
         );
     }
 
-    const updateField = e => {
+    const updateField = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setValue(e.target.name, e.target.value);
+        setValue(event.target.name, event.target.value);
     };
 
     const updateEnabled = () => {
         setData({ ...data, enabled: !data.enabled });
     };
 
-    const setValue = (field, value) => {
+    const setValue = (name: string, value: string | boolean) => {
         setData({
             ...data,
-            [field]: value,
+            [name]: value,
         });
     };
 
-    const onSubmit = async e => {
+    const onSubmit = async (event: React.SyntheticEvent) => {
-        e.preventDefault();
+        event.preventDefault();
-        setInfo('...saving');
+
         try {
-            await updateSamlConfig(data);
+            await updateSettings(removeEmptyStringFields(data));
-            setInfo('Settings stored');
+            setToastData({
-            setTimeout(() => setInfo(''), 2000);
+                title: 'Settings stored',
-        } catch (e) {
+                type: 'success',
-            setInfo(e.message);
+            });
+        } catch (err) {
+            setToastApiError(formatUnknownError(err));
         }
     };
+
     return (
-        <PageContent>
+        <PageContent headerContent="">
             <Grid container style={{ marginBottom: '1rem' }}>
                 <Grid item md={12}>
                     <Alert severity="info">
@@ -86,7 +96,7 @@ function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
                         to learn how to integrate with specific SAML 2.0
                         providers (Okta, Keycloak, etc). <br />
                         Callback URL:{' '}
-                        <code>{unleashUrl}/auth/saml/callback</code>
+                        <code>{uiConfig.unleashUrl}/auth/saml/callback</code>
                     </Alert>
                 </Grid>
             </Grid>
@@ -120,7 +130,7 @@ function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
                             onChange={updateField}
                             label="Entity ID"
                             name="entityId"
-                            value={data.entityId || ''}
+                            value={data.entityId}
                             disabled={!data.enabled}
                             style={{ width: '400px' }}
                             variant="outlined"
@@ -142,7 +152,7 @@ function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
                             onChange={updateField}
                             label="Single Sign-On URL"
                             name="signOnUrl"
-                            value={data.signOnUrl || ''}
+                            value={data.signOnUrl}
                             disabled={!data.enabled}
                             style={{ width: '400px' }}
                             variant="outlined"
@@ -164,7 +174,7 @@ function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
                             onChange={updateField}
                             label="X.509 Certificate"
                             name="certificate"
-                            value={data.certificate || ''}
+                            value={data.certificate}
                             disabled={!data.enabled}
                             style={{ width: '100%' }}
                             InputProps={{
@@ -196,7 +206,7 @@ function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
                             onChange={updateField}
                             label="Single Sign-out URL"
                             name="signOutUrl"
-                            value={data.signOutUrl || ''}
+                            value={data.signOutUrl}
                             disabled={!data.enabled}
                             style={{ width: '400px' }}
                             variant="outlined"
@@ -219,7 +229,7 @@ function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
                             onChange={updateField}
                             label="X.509 Certificate"
                             name="spCertificate"
-                            value={data.spCertificate || ''}
+                            value={data.spCertificate}
                             disabled={!data.enabled}
                             style={{ width: '100%' }}
                             InputProps={{
@@ -243,22 +253,18 @@ function SamlAuth({ config, getSamlConfig, updateSamlConfig, unleashUrl }) {
                             variant="contained"
                             color="primary"
                             type="submit"
+                            disabled={loading}
                         >
                             Save
                         </Button>{' '}
-                        <small>{info}</small>
+                        <p>
+                            <small style={{ color: 'red' }}>
+                                {errors?.message}
+                            </small>
+                        </p>
                     </Grid>
                 </Grid>
             </form>
         </PageContent>
     );
-}
-
-SamlAuth.propTypes = {
-    config: PropTypes.object,
-    unleash: PropTypes.string,
-    getSamlConfig: PropTypes.func.isRequired,
-    updateSamlConfig: PropTypes.func.isRequired,
 };
-
-export default SamlAuth;

frontend/src/component/admin/auth/google-auth-container.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import GoogleAuth from './google-auth';
-import { getGoogleConfig, updateGoogleConfig } from '../../../store/e-admin-auth/actions';
-
-const mapStateToProps = state => ({
-    config: state.authAdmin.get('google'),
-    unleashUrl: state.uiConfig.toJS().unleashUrl,
-});
-
-const Container = connect(mapStateToProps, { getGoogleConfig, updateGoogleConfig })(GoogleAuth);
-
-export default Container;

frontend/src/component/admin/auth/index.js

@@ -1,10 +0,0 @@
-import { connect } from 'react-redux';
-import component from './authentication';
-
-const mapStateToProps = state => ({
-    authenticationType: state.uiConfig.toJS().authenticationType,
-});
-
-const Container = connect(mapStateToProps, { })(component);
-
-export default Container;

frontend/src/component/admin/auth/oidc-auth-container.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import OidcAuth from './oidc-auth';
-import { getOidcConfig, updateOidcConfig } from '../../../store/e-admin-auth/actions';
-
-const mapStateToProps = state => ({
-    config: state.authAdmin.get('oidc'),
-    unleashUrl: state.uiConfig.toJS().unleashUrl,
-});
-
-const OidcContainer = connect(mapStateToProps, { getOidcConfig, updateOidcConfig })(OidcAuth);
-
-export default OidcContainer;

frontend/src/component/admin/auth/saml-auth-container.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import SamlAuth from './saml-auth';
-import { getSamlConfig, updateSamlConfig } from '../../../store/e-admin-auth/actions';
-
-const mapStateToProps = state => ({
-    config: state.authAdmin.get('saml'),
-    unleashUrl: state.uiConfig.toJS().unleashUrl,
-});
-
-const Container = connect(mapStateToProps, { getSamlConfig, updateSamlConfig })(SamlAuth);
-
-export default Container;

frontend/src/component/admin/menu/AdminMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
-import { Paper, Tabs, Tab } from '@material-ui/core';
+import { Paper, Tab, Tabs } from '@material-ui/core';
 import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
 
 const navLinkStyle = {
@@ -13,18 +13,17 @@ const navLinkStyle = {
     padding: '0.8rem 1.5rem',
 };
 
-const activeNavLinkStyle = {
+const activeNavLinkStyle: React.CSSProperties = {
     fontWeight: 'bold',
     borderRadius: '3px',
     padding: '0.8rem 1.5rem',
 };
 
-function AdminMenu({ history }) {
+function AdminMenu() {
     const { uiConfig } = useUiConfig();
+    const { pathname } = useLocation();
     const { flags } = uiConfig;
 
-    const { location } = history;
-    const { pathname } = location;
     return (
         <Paper
             style={{
@@ -45,7 +44,7 @@ function AdminMenu({ history }) {
                             <span>Users</span>
                         </NavLink>
                     }
-                ></Tab>
+                />
                 {flags.RE && (
                     <Tab
                         value="/admin/roles"
@@ -58,7 +57,7 @@ function AdminMenu({ history }) {
                                 <span>PROJECT ROLES</span>
                             </NavLink>
                         }
-                    ></Tab>
+                    />
                 )}
 
                 <Tab
@@ -72,7 +71,7 @@ function AdminMenu({ history }) {
                             API Access
                         </NavLink>
                     }
-                ></Tab>
+                />
                 <Tab
                     value="/admin/auth"
                     label={
@@ -84,7 +83,7 @@ function AdminMenu({ history }) {
                             Single Sign-On
                         </NavLink>
                     }
-                ></Tab>
+                />
             </Tabs>
         </Paper>
     );

frontend/src/component/common/TabNav/TabNav.jsx

@@ -61,6 +61,7 @@ const TabNav = ({ tabData, className, navClass, startingTab = 0 }) => {
 
 TabNav.propTypes = {
     tabData: PropTypes.array.isRequired,
+    navClass: PropTypes.string,
     className: PropTypes.string,
     startingTab: PropTypes.number,
 };

frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap

@@ -398,12 +398,7 @@ Array [
     "type": "protected",
   },
   Object {
-    "component": Object {
+    "component": [Function],
-      "$$typeof": Symbol(react.memo),
-      "WrappedComponent": [Function],
-      "compare": null,
-      "type": [Function],
-    },
     "layout": "main",
     "menu": Object {
       "adminSettings": true,

frontend/src/component/menu/routes.js

@@ -16,7 +16,7 @@ import Admin from '../admin';
 import AdminApi from '../admin/api';
 import AdminInvoice from '../admin/invoice/InvoiceAdminPage';
 import AdminUsers from '../admin/users/UsersAdmin';
-import AdminAuth from '../admin/auth';
+import { AuthSettings } from '../admin/auth/AuthSettings';
 import Login from '../user/Login/Login';
 import { P, C, E, EEA, RE } from '../common/flags';
 import NewUser from '../user/NewUser';
@@ -446,7 +446,7 @@ export const routes = [
         path: '/admin/auth',
         parent: '/admin',
         title: 'Single Sign-On',
-        component: AdminAuth,
+        component: AuthSettings,
         type: 'protected',
         layout: 'main',
         menu: { adminSettings: true },

frontend/src/hooks/api/actions/useApi/useApi.ts

@@ -46,7 +46,7 @@ const useAPI = ({
     handleUnauthorized,
     propagateErrors = false,
 }: IUseAPI) => {
-    const [errors, setErrors] = useState({});
+    const [errors, setErrors] = useState<Record<string, string>>({});
     const [loading, setLoading] = useState(false);
 
     const defaultOptions: RequestInit = {

frontend/src/hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi.ts

@@ -12,7 +12,6 @@ export const handleBadRequest = async (
     if (!setErrors) return;
     if (res) {
         const data = await res.json();
-
         setErrors({message: data.message});
         throw new Error(data.message);
     }

frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts

@@ -5,7 +5,7 @@ export const defaultValue = {
     version: '3.x',
     environment: '',
     slogan: 'The enterprise ready feature toggle service.',
-    flags: { P: false, C: false, E: false },
+    flags: { P: false, C: false, E: false, RE: false },
     links: [
         {
             value: 'Documentation',

frontend/src/interfaces/uiConfig.ts

@@ -15,6 +15,7 @@ export interface IFlags {
     C: boolean;
     P: boolean;
     E: boolean;
+    RE: boolean;
 }
 
 export interface IVersionInfo {

frontend/src/store/e-admin-auth/actions.js

@@ -1,91 +0,0 @@
-import api from './api';
-import { dispatchError } from '../util';
-export const RECIEVE_GOOGLE_CONFIG = 'RECIEVE_GOOGLE_CONFIG';
-export const RECIEVE_GOOGLE_CONFIG_ERROR = 'RECIEVE_GOOGLE_CONFIG_ERROR';
-export const UPDATE_GOOGLE_AUTH = 'UPDATE_GOOGLE_AUTH';
-export const UPDATE_GOOGLE_AUTH_ERROR = 'UPDATE_GOOGLE_AUTH_ERROR';
-export const RECIEVE_SAML_CONFIG = 'RECIEVE_SAML_CONFIG';
-export const RECIEVE_SAML_CONFIG_ERROR = 'RECIEVE_SAML_CONFIG_ERROR';
-export const UPDATE_SAML_AUTH = 'UPDATE_SAML_AUTH';
-export const UPDATE_SAML_AUTH_ERROR = 'UPDATE_SAML_AUTH_ERROR';
-export const RECIEVE_OIDC_CONFIG = 'RECIEVE_OIDC_CONFIG';
-export const RECIEVE_OIDC_CONFIG_ERROR = 'RECIEVE_OIDC_CONFIG_ERROR';
-export const UPDATE_OIDC_AUTH = 'UPDATE_OIDC_AUTH';
-export const UPDATE_OIDC_AUTH_ERROR = 'UPDATE_OIDC_AUTH_ERROR';
-
-const debug = require('debug')('unleash:e-admin-auth-actions');
-
-export function getGoogleConfig() {
-    debug('Start fetching google-auth config');
-    return dispatch =>
-        api
-            .getGoogleConfig()
-            .then(config =>
-                dispatch({
-                    type: RECIEVE_GOOGLE_CONFIG,
-                    config,
-                })
-            )
-            .catch(dispatchError(dispatch, RECIEVE_GOOGLE_CONFIG_ERROR));
-}
-
-export function updateGoogleConfig(data) {
-    return dispatch =>
-        api
-            .updateGoogleConfig(data)
-            .then(config => dispatch({ type: UPDATE_GOOGLE_AUTH, config }))
-            .catch(e => {
-                dispatchError(dispatch, UPDATE_GOOGLE_AUTH_ERROR)(e);
-                throw e;
-            });
-}
-
-export function getSamlConfig() {
-    debug('Start fetching Saml-auth config');
-    return dispatch =>
-        api
-            .getSamlConfig()
-            .then(config =>
-                dispatch({
-                    type: RECIEVE_SAML_CONFIG,
-                    config,
-                })
-            )
-            .catch(dispatchError(dispatch, RECIEVE_SAML_CONFIG_ERROR));
-}
-
-export function updateSamlConfig(data) {
-    return dispatch =>
-        api
-            .updateSamlConfig(data)
-            .then(config => dispatch({ type: UPDATE_SAML_AUTH, config }))
-            .catch(e => {
-                dispatchError(dispatch, UPDATE_SAML_AUTH_ERROR)(e);
-                throw e;
-            });
-}
-
-export function getOidcConfig() {
-    debug('Start fetching OIDC-auth config');
-    return dispatch =>
-        api
-            .getOidcConfig()
-            .then(config =>
-                dispatch({
-                    type: RECIEVE_OIDC_CONFIG,
-                    config,
-                })
-            )
-            .catch(dispatchError(dispatch, RECIEVE_OIDC_CONFIG_ERROR));
-}
-
-export function updateOidcConfig(data) {
-    return dispatch =>
-        api
-            .updateOidcConfig(data)
-            .then(config => dispatch({ type: UPDATE_OIDC_AUTH, config }))
-            .catch(e => {
-                dispatchError(dispatch, UPDATE_OIDC_AUTH_ERROR)(e);
-                throw e;
-            });
-}

frontend/src/store/e-admin-auth/api.js

@@ -1,66 +0,0 @@
-import { throwIfNotSuccess, headers } from '../api-helper';
-import { formatApiPath } from '../../utils/format-path';
-
-const GOOGLE_URI = formatApiPath('api/admin/auth/google/settings');
-const SAML_URI = formatApiPath('api/admin/auth/saml/settings');
-const OIDC_URI = formatApiPath('api/admin/auth/oidc/settings');
-
-function getGoogleConfig() {
-    return fetch(GOOGLE_URI, { headers, credentials: 'include' })
-        .then(throwIfNotSuccess)
-        .then(response => response.json());
-}
-
-function updateGoogleConfig(data) {
-    return fetch(GOOGLE_URI, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(data),
-        credentials: 'include',
-    })
-        .then(throwIfNotSuccess)
-        .then(response => response.json());
-}
-
-function getSamlConfig() {
-    return fetch(SAML_URI, { headers, credentials: 'include' })
-        .then(throwIfNotSuccess)
-        .then(response => response.json());
-}
-
-function updateSamlConfig(data) {
-    return fetch(SAML_URI, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(data),
-        credentials: 'include',
-    })
-        .then(throwIfNotSuccess)
-        .then(response => response.json());
-}
-
-function getOidcConfig() {
-    return fetch(OIDC_URI, { headers, credentials: 'include' })
-        .then(throwIfNotSuccess)
-        .then(response => response.json());
-}
-
-function updateOidcConfig(data) {
-    return fetch(OIDC_URI, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(data),
-        credentials: 'include',
-    })
-        .then(throwIfNotSuccess)
-        .then(response => response.json());
-}
-
-export default {
-    getGoogleConfig,
-    updateGoogleConfig,
-    getSamlConfig,
-    updateSamlConfig,
-    getOidcConfig,
-    updateOidcConfig,
-};

frontend/src/store/e-admin-auth/index.js

@@ -1,20 +0,0 @@
-import { Map as $Map } from 'immutable';
-import { RECIEVE_GOOGLE_CONFIG, UPDATE_GOOGLE_AUTH, RECIEVE_SAML_CONFIG, UPDATE_SAML_AUTH, UPDATE_OIDC_AUTH, RECIEVE_OIDC_CONFIG } from './actions';
-
-const store = (state = new $Map({ google: {}, saml: {}, oidc: {} }), action) => {
-    switch (action.type) {
-        case UPDATE_GOOGLE_AUTH:
-        case RECIEVE_GOOGLE_CONFIG:
-            return state.set('google', action.config);
-        case UPDATE_SAML_AUTH:
-        case RECIEVE_SAML_CONFIG:
-            return state.set('saml', action.config);
-        case UPDATE_OIDC_AUTH:
-        case RECIEVE_OIDC_CONFIG:
-            return state.set('oidc', action.config);
-        default:
-            return state;
-    }
-};
-
-export default store;

frontend/src/store/index.js

@@ -15,7 +15,6 @@ import uiConfig from './ui-config';
 import context from './context';
 import projects from './project';
 import addons from './addons';
-import authAdmin from './e-admin-auth';
 import apiCalls from './api-calls';
 import invoiceAdmin from './e-admin-invoice';
 import feedback from './feedback';
@@ -37,7 +36,6 @@ const unleashStore = combineReducers({
     context,
     projects,
     addons,
-    authAdmin,
     apiCalls,
     invoiceAdmin,
     feedback,

frontend/src/utils/format-unknown-error.test.ts

@@ -0,0 +1,8 @@
+import { formatUnknownError } from './format-unknown-error';
+
+test('formatUnknownError', () => {
+    expect(formatUnknownError(1)).toEqual('Unknown error');
+    expect(formatUnknownError('1')).toEqual('1');
+    expect(formatUnknownError(new Error('1'))).toEqual('1');
+    expect(formatUnknownError(new Error())).toEqual('Error');
+});

frontend/src/utils/format-unknown-error.ts

@@ -0,0 +1,10 @@
+// Get a human-readable error message string from a caught value.
+export const formatUnknownError = (error: unknown): string => {
+    if (error instanceof Error) {
+        return error.message || error.toString();
+    } else if (typeof error === 'string') {
+        return error;
+    } else {
+        return 'Unknown error';
+    }
+};

frontend/src/utils/remove-empty-string-fields.test.ts

@@ -0,0 +1,11 @@
+import { removeEmptyStringFields } from './remove-empty-string-fields';
+
+test('removeEmptyStringFields', () => {
+    expect(removeEmptyStringFields({})).toEqual({});
+    expect(removeEmptyStringFields({ a: undefined })).toEqual({ a: undefined });
+    expect(removeEmptyStringFields({ a: 0 })).toEqual({ a: 0 });
+    expect(removeEmptyStringFields({ a: 1 })).toEqual({ a: 1 });
+    expect(removeEmptyStringFields({ a: '1' })).toEqual({ a: '1' });
+    expect(removeEmptyStringFields({ a: '' })).toEqual({});
+    expect(removeEmptyStringFields({ a: '', b: '2' })).toEqual({ b: '2' });
+});

frontend/src/utils/remove-empty-string-fields.ts

@@ -0,0 +1,9 @@
+// Remove fields from an object if their value is the empty string.
+export const removeEmptyStringFields = (object: {
+    [key: string]: unknown;
+}): { [key: string]: unknown } => {
+    const entries = Object.entries(object);
+    const filtered = entries.filter(([, v]) => v !== '');
+
+    return Object.fromEntries(filtered);
+};