feat: scim assume control UI - move scim into sso configs (#6929)

- Adds support for the configuration option for SCIM taking over control of users and groups - Moves SCIM settings into SSO config pages (OIDC and SAML). SCIM registers a callback to be invoked when saving in a parent SSO config page
Unleash · Apr 25, 2024 · d1bb65b · d1bb65b
1 parent 19055b1
commit d1bb65b
Show file tree

Hide file tree

Showing 6 changed files with 259 additions and 108 deletions.
diff --git a/frontend/src/component/admin/auth/AuthSettings.tsx b/frontend/src/component/admin/auth/AuthSettings.tsx
@@ -11,15 +11,11 @@ import { ADMIN } from '@server/types/permissions';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
 import { useState } from 'react';
 import { TabPanel } from 'component/common/TabNav/TabPanel/TabPanel';
-import { useUiFlag } from 'hooks/useUiFlag';
-import { ScimSettings } from './ScimSettings/ScimSettings';
 
 export const AuthSettings = () => {
     const { authenticationType } = useUiConfig().uiConfig;
     const { uiConfig } = useUiConfig();
 
-    const scimEnabled = useUiFlag('scimApi');
-
     const tabs = [
         {
             label: 'OpenID Connect',
@@ -41,13 +37,6 @@ export const AuthSettings = () => {
         (item) => uiConfig.flags?.googleAuthEnabled || item.label !== 'Google',
     );
 
-    if (scimEnabled) {
-        tabs.push({
-            label: 'Provisioning (SCIM)',
-            component: <ScimSettings />,
-        });
-    }
-
     const [activeTab, setActiveTab] = useState(0);
 
     return (

diff --git a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
@@ -21,6 +21,10 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 import { SsoGroupSettings } from '../SsoGroupSettings';
 import type { IRole } from 'interfaces/role';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useScim } from 'hooks/useScim';
+import { ScimConfigSettings } from '../ScimSettings/ScimSettings';
 
 const initialState = {
     enabled: false,
@@ -85,6 +89,22 @@ export const OidcAuth = () => {
         });
     };
 
+    const {
+        settings,
+        enabled,
+        setEnabled,
+        assumeControlOfExisting,
+        setAssumeControlOfExisting,
+        newToken,
+        tokenGenerationDialog,
+        setTokenGenerationDialog,
+        tokenDialog,
+        setTokenDialog,
+        loading: scimLoading,
+        saveScimSettings,
+        onGenerateNewTokenConfirm,
+    } = useScim();
+
     const onSubmit = async (event: React.SyntheticEvent) => {
         event.preventDefault();
 
@@ -94,11 +114,14 @@ export const OidcAuth = () => {
                 title: 'Settings stored',
                 type: 'success',
             });
+            saveScimSettings();
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
     };
 
+    const scimEnabled = useUiFlag('scimApi');
+
     return (
         <>
             <Grid container sx={{ mb: 3 }}>
@@ -255,6 +278,32 @@ export const OidcAuth = () => {
                     data={data}
                     setValue={setValue}
                 />
+
+                <ConditionallyRender
+                    condition={scimEnabled}
+                    show={
+                        <ScimConfigSettings
+                            disabled={!data.enabled}
+                            settings={settings}
+                            enabled={enabled}
+                            setEnabled={setEnabled}
+                            assumeControlOfExisting={assumeControlOfExisting}
+                            setAssumeControlOfExisting={
+                                setAssumeControlOfExisting
+                            }
+                            newToken={newToken}
+                            tokenGenerationDialog={tokenGenerationDialog}
+                            setTokenGenerationDialog={setTokenGenerationDialog}
+                            tokenDialog={tokenDialog}
+                            setTokenDialog={setTokenDialog}
+                            loading={scimLoading}
+                            onGenerateNewTokenConfirm={
+                                onGenerateNewTokenConfirm
+                            }
+                        />
+                    }
+                />
+
                 <AutoCreateForm
                     data={data}
                     setValue={setValue}
@@ -296,6 +345,7 @@ export const OidcAuth = () => {
                         </FormControl>
                     </Grid>
                 </Grid>
+
                 <Grid container spacing={3}>
                     <Grid item md={12}>
                         <Button

diff --git a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
@@ -17,6 +17,10 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
 import { SsoGroupSettings } from '../SsoGroupSettings';
 import type { IRole } from 'interfaces/role';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useScim } from 'hooks/useScim';
+import { ScimConfigSettings } from '../ScimSettings/ScimSettings';
 
 const initialState = {
     enabled: false,
@@ -76,6 +80,22 @@ export const SamlAuth = () => {
         });
     };
 
+    const {
+        settings,
+        enabled,
+        setEnabled,
+        assumeControlOfExisting,
+        setAssumeControlOfExisting,
+        newToken,
+        tokenGenerationDialog,
+        setTokenGenerationDialog,
+        tokenDialog,
+        setTokenDialog,
+        loading: scimLoading,
+        saveScimSettings,
+        onGenerateNewTokenConfirm,
+    } = useScim();
+
     const onSubmit = async (event: React.SyntheticEvent) => {
         event.preventDefault();
 
@@ -85,11 +105,14 @@ export const SamlAuth = () => {
                 title: 'Settings stored',
                 type: 'success',
             });
+            saveScimSettings();
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
     };
 
+    const scimEnabled = useUiFlag('scimApi');
+
     return (
         <>
             <Grid container sx={{ mb: 3 }}>
@@ -263,6 +286,31 @@ export const SamlAuth = () => {
                     setValue={setValue}
                 />
 
+                <ConditionallyRender
+                    condition={scimEnabled}
+                    show={
+                        <ScimConfigSettings
+                            disabled={!data.enabled}
+                            settings={settings}
+                            enabled={enabled}
+                            setEnabled={setEnabled}
+                            assumeControlOfExisting={assumeControlOfExisting}
+                            setAssumeControlOfExisting={
+                                setAssumeControlOfExisting
+                            }
+                            newToken={newToken}
+                            tokenGenerationDialog={tokenGenerationDialog}
+                            setTokenGenerationDialog={setTokenGenerationDialog}
+                            tokenDialog={tokenDialog}
+                            setTokenDialog={setTokenDialog}
+                            loading={scimLoading}
+                            onGenerateNewTokenConfirm={
+                                onGenerateNewTokenConfirm
+                            }
+                        />
+                    }
+                />
+
                 <AutoCreateForm
                     data={data}
                     setValue={setValue}