From 7d0151f2e2d715cbe6281c9f703016d9c568cbf5 Mon Sep 17 00:00:00 2001
From: Mistah J <26472282+mistahj67@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:33:16 -0700
Subject: [PATCH] feat: add sso config to sso info panel

---
 .../javascript/bh-shared-ui/rollup.config.js  |  1 +
 .../SSOProviderInfoPanel.tsx                  | 50 ++++++++++++++-----
 .../SSOConfiguration/SSOConfiguration.tsx     |  2 +-
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/packages/javascript/bh-shared-ui/rollup.config.js b/packages/javascript/bh-shared-ui/rollup.config.js
index b976f9ded5..c238461c10 100644
--- a/packages/javascript/bh-shared-ui/rollup.config.js
+++ b/packages/javascript/bh-shared-ui/rollup.config.js
@@ -57,6 +57,7 @@ export default {
         'notistack',
         'react-query',
         'js-client-library',
+        'js-file-download',
         'swagger-ui-react',
         'swagger-ui-react/swagger-ui.css',
         'prop-types',
diff --git a/packages/javascript/bh-shared-ui/src/components/SSOProviderInfoPanel/SSOProviderInfoPanel.tsx b/packages/javascript/bh-shared-ui/src/components/SSOProviderInfoPanel/SSOProviderInfoPanel.tsx
index 081c72750d..71a1c7351a 100644
--- a/packages/javascript/bh-shared-ui/src/components/SSOProviderInfoPanel/SSOProviderInfoPanel.tsx
+++ b/packages/javascript/bh-shared-ui/src/components/SSOProviderInfoPanel/SSOProviderInfoPanel.tsx
@@ -15,10 +15,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Paper, Box, Typography, useTheme } from '@mui/material';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import fileDownload from 'js-file-download';
-import { OIDCProviderInfo, SAMLProviderInfo, SSOProvider } from 'js-client-library';
-import { Button } from '@bloodhoundenterprise/doodleui';
+import { OIDCProviderInfo, SAMLProviderInfo, SSOProvider, Role } from 'js-client-library';
+import { Button, Label } from '@bloodhoundenterprise/doodleui';
 import { Field, FieldsContainer, usePaneStyles, useHeaderStyles } from '../../views/Explore';
 import LabelWithCopy from '../LabelWithCopy';
 import { apiClient } from '../../utils';
@@ -27,7 +27,7 @@ import { useNotifications } from '../../providers';
 const SAMLProviderInfoPanel: FC<{
     samlProviderDetails: SAMLProviderInfo;
 }> = ({ samlProviderDetails }) => (
-    <FieldsContainer>
+    <>
         <Field
             label={<LabelWithCopy label='IdP SSO URL' valueToCopy={samlProviderDetails.idp_sso_uri} hoverOnly />}
             value={samlProviderDetails.idp_sso_uri}
@@ -46,7 +46,7 @@ const SAMLProviderInfoPanel: FC<{
             }
             value={samlProviderDetails.sp_metadata_uri}
         />
-    </FieldsContainer>
+    </>
 );
 
 const OIDCProviderInfoPanel: FC<{
@@ -54,7 +54,7 @@ const OIDCProviderInfoPanel: FC<{
 }> = ({ ssoProvider }) => {
     const oidcProviderDetails = ssoProvider.details as OIDCProviderInfo;
     return (
-        <FieldsContainer>
+        <>
             <Field
                 label={<LabelWithCopy label='Client ID' valueToCopy={oidcProviderDetails.client_id} hoverOnly />}
                 value={oidcProviderDetails.client_id}
@@ -67,13 +67,14 @@ const OIDCProviderInfoPanel: FC<{
                 label={<LabelWithCopy label='Callback URL' valueToCopy={ssoProvider.callback_uri} hoverOnly />}
                 value={ssoProvider.callback_uri}
             />
-        </FieldsContainer>
+        </>
     );
 };
 
 const SSOProviderInfoPanel: FC<{
     ssoProvider: SSOProvider;
-}> = ({ ssoProvider }) => {
+    roles?: Role[];
+}> = ({ ssoProvider, roles }) => {
     const theme = useTheme();
     const paneStyles = usePaneStyles();
     const headerStyles = useHeaderStyles();
@@ -83,16 +84,21 @@ const SSOProviderInfoPanel: FC<{
         return null;
     }
 
-    let infoPanel;
+    const defaultRoleName = useMemo(
+        () => roles?.find((role) => role.id === ssoProvider.config?.auto_provision?.default_role)?.name,
+        [roles, ssoProvider.config?.auto_provision?.default_role]
+    );
+
+    let innerInfoPanel;
     switch (ssoProvider.type.toLowerCase()) {
         case 'saml':
-            infoPanel = <SAMLProviderInfoPanel samlProviderDetails={ssoProvider.details as SAMLProviderInfo} />;
+            innerInfoPanel = <SAMLProviderInfoPanel samlProviderDetails={ssoProvider.details as SAMLProviderInfo} />;
             break;
         case 'oidc':
-            infoPanel = <OIDCProviderInfoPanel ssoProvider={ssoProvider} />;
+            innerInfoPanel = <OIDCProviderInfoPanel ssoProvider={ssoProvider} />;
             break;
         default:
-            infoPanel = null;
+            innerInfoPanel = null;
     }
 
     const downloadSAMLSigningCertificate = () => {
@@ -157,7 +163,25 @@ const SSOProviderInfoPanel: FC<{
                         <Box flexShrink={0} flexGrow={1} fontWeight='bold' ml={theme.spacing(1)} fontSize={'small'}>
                             Provider Information:
                         </Box>
-                        {infoPanel}
+                        <FieldsContainer>
+                            {innerInfoPanel}
+                            <Field
+                                label={<Label>Automatically create new users on login</Label>}
+                                value={ssoProvider.config?.auto_provision?.enabled ? 'Yes' : 'No'}
+                            />
+                            {ssoProvider.config?.auto_provision?.enabled && (
+                                <>
+                                    <Field
+                                        label={<Label>Allow SSO provider to manage roles for new users</Label>}
+                                        value={ssoProvider.config?.auto_provision?.role_provision ? 'Yes' : 'No'}
+                                    />
+                                    <Field
+                                        label={<Label>Default role when creating new users</Label>}
+                                        value={defaultRoleName ?? 'Read-Only'}
+                                    />
+                                </>
+                            )}
+                        </FieldsContainer>
                     </Paper>
                 </Paper>
             </Box>
diff --git a/packages/javascript/bh-shared-ui/src/views/SSOConfiguration/SSOConfiguration.tsx b/packages/javascript/bh-shared-ui/src/views/SSOConfiguration/SSOConfiguration.tsx
index b7dc76cfb7..4180079330 100644
--- a/packages/javascript/bh-shared-ui/src/views/SSOConfiguration/SSOConfiguration.tsx
+++ b/packages/javascript/bh-shared-ui/src/views/SSOConfiguration/SSOConfiguration.tsx
@@ -295,7 +295,7 @@ const SSOConfiguration: FC = () => {
                     </Grid>
                     {selectedSSOProvider && (
                         <Grid item xs={6}>
-                            <SSOProviderInfoPanel ssoProvider={selectedSSOProvider} />
+                            <SSOProviderInfoPanel ssoProvider={selectedSSOProvider} roles={getRolesQuery.data} />
                         </Grid>
                     )}
                 </Grid>