[web] SSO Config viewer (#14880)

* [web] SSO Config viewer

GitOrigin-RevId: 600f6279293958e9cf127e1d6fb0c6957403578d

services/web/frontend/extracted-translations.json

@@ -302,6 +302,7 @@
   "each_user_will_have_access_to": "",
   "easily_manage_your_project_files_everywhere": "",
   "edit": "",
+  "edit_configuration": "",
   "edit_dictionary": "",
   "edit_dictionary_empty": "",
   "edit_dictionary_remove": "",
@@ -321,6 +322,7 @@
   "email_or_password_wrong_try_again": "",
   "emails_and_affiliations_explanation": "",
   "emails_and_affiliations_title": "",
+  "empty": "",
   "enable_managed_users": "",
   "enable_single_sign_on": "",
   "enable_sso": "",
@@ -448,6 +450,7 @@
   "headers": "",
   "help": "",
   "help_improve_overleaf_fill_out_this_survey": "",
+  "hide_configuration": "",
   "hide_document_preamble": "",
   "hide_outline": "",
   "history": "",
@@ -1045,6 +1048,7 @@
   "sso_config_prop_help_certificate": "",
   "sso_config_prop_help_first_name": "",
   "sso_config_prop_help_last_name": "",
+  "sso_config_prop_help_signature_algorithm": "",
   "sso_config_prop_help_user_entry_point": "",
   "sso_config_prop_help_user_id": "",
   "sso_configuration": "",
@@ -1106,6 +1110,7 @@
   "template_title_taken_from_project_title": "",
   "templates": "",
   "terminated": "",
+  "test_configuration": "",
   "tex_live_version": "",
   "thank_you_exclamation": "",
   "thanks_for_subscribing": "",
@@ -1268,6 +1273,7 @@
   "verify_email_address_before_enabling_managed_users": "",
   "view_all": "",
   "view_code": "",
+  "view_configuration": "",
   "view_group_members": "",
   "view_hub": "",
   "view_hub_subtext": "",

services/web/frontend/stories/subscription/managed-users/manage-group-settings.stories.tsx

@@ -1,5 +1,6 @@
 import GroupSettings from '../../../../modules/managed-users/frontend/js/components/group-settings'
 import { useMeta } from '../../hooks/use-meta'
+import useFetchMock from '../../hooks/use-fetch-mock'
 
 export const GroupSettingsWithManagedUsersDisabledAndNoSSOFeature = () => {
   useMeta({
@@ -10,6 +11,9 @@ export const GroupSettingsWithManagedUsersDisabledAndNoSSOFeature = () => {
 }
 
 export const GroupSettingsWithManagedUsersDisabledAndSSOFeature = () => {
+  useFetchMock(fetchMock =>
+    fetchMock.get('express:/manage/groups/:id/settings/sso', {})
+  )
   useMeta({
     'ol-managedUsersEnabled': false,
     'ol-hasGroupSSOFeature': true,
@@ -25,13 +29,69 @@ export const GroupSettingsWithManagedUsersEnabledAndNoSSOFeature = () => {
   return <GroupSettings />
 }
 
-export const GroupSettingsWithManagedUsersEnabledAndSSOFeature = () => {
+export const GroupSettingsWithManagedUsersEnabledAndSSOFeatureNotConfigured =
+  () => {
+    useMeta({
+      'ol-managedUsersEnabled': true,
+      'ol-hasGroupSSOFeature': true,
+    })
+    useFetchMock(fetchMock => {
+      fetchMock.get(
+        'express:/manage/groups/:id/settings/sso',
+        {},
+        {
+          delay: 500,
+        }
+      )
+    })
+    return <GroupSettings />
+  }
+
+export const GroupSettingsWithManagedUsersEnabledAndSSOFeatureConfigured =
+  () => {
+    const config = {
+      entryPoint: 'http://idp.example.com/entry_point',
+      certificate:
+        'X1JQa2tWQmYzYlN1aUZORVhzZGpURVp3c0U4T3J3bWtjYVZsQ2h4MkRyRUpOVGtxV2hXcG9KbG1WZ2hYclB1YUVNeFVjM0pFZW5Zd1dQRzB5bldxWm5xYm5IdEJ5d1VGQlQ2RWJ1bHdQeJ0VmpoMkFUeHlIaE5KUVBqYm1iUlB1ckZjQnZzRzlZWW5RZVpYU3pKd3V3Z1l3cE5ZeE9XZkx5ZlVJZGVKQk5JkFUeHlIaE5KUV',
+      signatureAlgorithm: 'sha256',
+      userIdAttribute: 'email',
+      enabled: true,
+    }
+    useFetchMock(fetchMock => {
+      fetchMock.get('express:/manage/groups/:id/settings/sso', config, {
+        delay: 500,
+      })
+    })
+
     useMeta({
       'ol-managedUsersEnabled': true,
       'ol-hasGroupSSOFeature': true,
     })
     return <GroupSettings />
-}
+  }
+
+export const GroupSettingsWithManagedUsersDisabledAndSSOFeatureConfigured =
+  () => {
+    const config = {
+      entryPoint: 'http://idp.example.com/entry_point',
+      certificate:
+        'X1JQa2tWQmYzYlN1aUZORVhzZGpURVp3c0U4T3J3bWtjYVZsQ2h4MkRyRUpOVGtxV2hXcG9KbG1WZ2hYclB1YUVNeFVjM0pFZW5Zd1dQRzB5bldxWm5xYm5IdEJ5d1VGQlQ2RWJ1bHdQeJ0VmpoMkFUeHlIaE5KUVBqYm1iUlB1ckZjQnZzRzlZWW5RZVpYU3pKd3V3Z1l3cE5ZeE9XZkx5ZlVJZGVKQk5JkFUeHlIaE5KUV',
+      signatureAlgorithm: 'sha256',
+      userIdAttribute: 'email',
+      enabled: false,
+    }
+    useFetchMock(fetchMock => {
+      fetchMock.get('express:/manage/groups/:id/settings/sso', config, {
+        delay: 500,
+      })
+    })
+
+    useMeta({
+      'ol-managedUsersEnabled': true,
+      'ol-hasGroupSSOFeature': true,
+    })
+    return <GroupSettings />
+  }
 
 export default {
   title: 'Subscription / Managed Users',

services/web/frontend/stories/subscription/sso/configuration-modal.stories.tsx

@@ -1,88 +0,0 @@
-import useFetchMock from '../../hooks/use-fetch-mock'
-import { useMeta } from '../../hooks/use-meta'
-import SSOConfigurationModal, {
-  SSOConfigurationModalProps,
-} from '../../../../modules/managed-users/frontend/js/components/modals/sso-configuration-modal'
-
-const config = {
-  entryPoint: 'http://idp.example.com/entry_point',
-  certificate:
-    'MIIDXTCCAkWgAwIBAgIJAOvOeQ4xFTzsMA0GCSqGSIb3DQEBCwUAMEUxCzAJBgNVBAYTAkdCMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBXaWRnaXRzIFB0eSBMdGQwHhcNMTYxMTE1MTQxMjU5WhcNMjYxMTE1MTQxMjU5WjBFMQswCQYDVQQGEwJHQjETMBEGA1UECAwKU29tZS1TdGF0ZTEhMB8GA1UECgwYSW50ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxCT6MBe5G9VoLU8MfztOEbUhnwLp17ak8eFUqxqeXkkqtWB0b/cmIBU3xoQoO3dIF8PBzfqehqfYVhrNt/TFgcmDfmJnPJRL1RJWMW3VmiP5odJ3LwlkKbZpkeT3wZ8HEJIR1+zbpxiBNkbd2GbdR1iumcsHzMYX1A2CBj+ZMV5VijC+K4P0e9c05VsDEUtLmfeAasJAiumQoVVgAe/BpiXjICGGewa6EPFI7mKkifIRKOGxdRESwZZjxP30bI31oDN0cgKqIgSJtJ9nfCn9jgBMBkQHu42WMuaWD4jrGd7+vYdX+oIfArs9aKgAH5kUGhGdew2R9SpBefrhbNxG8QIDAQABo1AwTjAdBgNVHQ4EFgQU+aSojSyyLChP/IpZcafvSdhj7KkwHwYDVR0jBBgwFoAU+aSojSyyLChP/IpZcafvSdhj7KkwDAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEABl3+OOVLBWMKs6PjA8lPuloWDNzSr3v76oUcHqAb+cfbucjXrOVsS9RJ0X9yxvCQyfM9FfY43DbspnN3izYhdvbJD8kKLNf0LA5st+ZxLfy0ACyL2iyAwICaqndqxAjQYplFAHmpUiu1DiHckyBPekokDJd+ze95urHMOsaGS5RWPoKJVE0bkaAeZCmEu0NNpXRSBiuxXSTeSAJfv6kyE/rkdhzUKyUl/cGQFrsVYfAFQVA+W6CKOh74ErSEzSHQQYndl7nD33snD/YqdU1ROxV6aJzLKCg+sdj+wRXSP2u/UHnM4jW9TGJfhO42jzL6WVuEvr9q4l7zWzUQKKKhtQ==',
-  signatureAlgorithm: 'sha256',
-  userIdAttribute: 'email',
-}
-
-export const ConfigurationModalLoadingError = (
-  args: SSOConfigurationModalProps
-) => {
-  useMeta({ 'ol-groupId': '123' })
-  useFetchMock(fetchMock => {
-    fetchMock.get(
-      'express:/manage/groups/:id/settings/sso',
-      { status: 500 },
-      {
-        delay: 1000,
-      }
-    )
-    fetchMock.post('express:/manage/groups/:id/settings/sso', 200, {
-      delay: 500,
-    })
-  })
-  return <SSOConfigurationModal {...args} />
-}
-
-export const ConfigurationModalFilled = (args: SSOConfigurationModalProps) => {
-  useMeta({ 'ol-groupId': '123' })
-  useFetchMock(fetchMock => {
-    fetchMock.get('express:/manage/groups/:id/settings/sso', config, {
-      delay: 500,
-    })
-    fetchMock.post('express:/manage/groups/:id/settings/sso', 200, {
-      delay: 500,
-    })
-  })
-  return <SSOConfigurationModal {...args} />
-}
-
-export const ConfigurationModalEmpty = (args: SSOConfigurationModalProps) => {
-  useMeta({ 'ol-groupId': '123' })
-  useFetchMock(fetchMock => {
-    fetchMock.get(
-      'express:/manage/groups/:id/settings/sso',
-      {},
-      {
-        delay: 500,
-      }
-    )
-    fetchMock.post('express:/manage/groups/:id/settings/sso', 200, {
-      delay: 500,
-    })
-  })
-  return <SSOConfigurationModal {...args} />
-}
-
-export const ConfigurationModalSaveError = (
-  args: SSOConfigurationModalProps
-) => {
-  useMeta({ 'ol-groupId': '123' })
-  useFetchMock(fetchMock => {
-    fetchMock.get('express:/manage/groups/:id/settings/sso', config, {
-      delay: 500,
-    })
-    fetchMock.post('express:/manage/groups/:id/settings/sso', 500, {
-      delay: 1000,
-    })
-  })
-  return <SSOConfigurationModal {...args} />
-}
-
-export default {
-  title: 'Subscription / SSO / Configuration Modal',
-  component: SSOConfigurationModal,
-  args: {
-    show: true,
-  },
-  argTypes: {
-    handleHide: { action: 'close modal' },
-  },
-}

services/web/frontend/stylesheets/modules/managed-users.less

@@ -107,3 +107,29 @@ h3.group-settings-title {
     justify-content: space-between;
   }
 }
+
+.sso-config-info {
+  .sso-config-info-section {
+    margin-bottom: @margin-md;
+  }
+
+  .sso-config-info-label {
+    font-size: @font-size-small;
+    font-weight: bold;
+  }
+
+  .sso-config-info-content {
+    color: @gray-darker;
+    word-break: break-word;
+  }
+
+  .sso-config-info-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: @margin-xs;
+  }
+
+  p {
+    margin-bottom: @margin-xs;
+  }
+}

services/web/locales/en.json

@@ -459,6 +459,7 @@
   "ease_of_use": " Ease of Use",
   "easily_manage_your_project_files_everywhere": "Easily manage your project files, everywhere",
   "edit": "Edit",
+  "edit_configuration": "Edit configuration",
   "edit_dictionary": "Edit Dictionary",
   "edit_dictionary_empty": "Your custom dictionary is empty.",
   "edit_dictionary_remove": "Remove from dictionary",
@@ -494,6 +495,7 @@
   "emails": "Emails",
   "emails_and_affiliations_explanation": "Add additional email addresses to your account to access any upgrades your university or institution has, to make it easier for collaborators to find you, and to make sure you can recover your account.",
   "emails_and_affiliations_title": "Emails and Affiliations",
+  "empty": "Empty",
   "empty_zip_file": "Zip doesn’t contain any file",
   "en": "English",
   "enable_managed_users": "Enable Managed Users",
@@ -730,6 +732,7 @@
   "help_articles_matching": "Help articles matching your subject",
   "help_improve_overleaf_fill_out_this_survey": "If you would like to help us improve Overleaf, please take a moment to fill out <0>this survey</0>.",
   "help_us_spread_word": "Help us spread the word about __appName__",
+  "hide_configuration": "Hide configuration",
   "hide_document_preamble": "Hide document preamble",
   "hide_outline": "Hide File outline",
   "history": "History",
@@ -1628,6 +1631,7 @@
   "sso_config_prop_help_certificate": "Base64 encoded certificate without whitespace",
   "sso_config_prop_help_first_name": "Property in SAML assertion to use for first name",
   "sso_config_prop_help_last_name": "Property in SAML assertion to use for last name",
+  "sso_config_prop_help_signature_algorithm": "Base64 encoded certificate without whitespace",
   "sso_config_prop_help_user_entry_point": "URL for SAML SSO redirect flow",
   "sso_config_prop_help_user_id": "Property in SAML assertion to use for unique id",
   "sso_configuration": "SSO configuration",
@@ -1721,6 +1725,7 @@
   "templates_page_title": "Templates - Journals, CVs, Presentations, Reports and More",
   "terminated": "Compilation cancelled",
   "terms": "Terms",
+  "test_configuration": "Test configuration",
   "tex_live_version": "TeX Live version",
   "thank_you": "Thank you!",
   "thank_you_email_confirmed": "Thank you, your email is now confirmed",
@@ -1941,6 +1946,7 @@
   "view_all": "View All",
   "view_code": "View code",
   "view_collab_edits": "View collaborator edits ",
+  "view_configuration": "View configuration",
   "view_group_members": "View group members",
   "view_hub": "View Admin Hub",
   "view_hub_subtext": "Access and download subscription statistics and a list of users",

services/web/test/frontend/features/group-management/components/sso/group-settings-sso.spec.tsx

@@ -1,9 +1,9 @@
-import GroupSettingsSSO from '../../../../../../modules/managed-users/frontend/js/components/sso/group-settings-sso'
+import GroupSettingsSSORoot from '../../../../../../modules/managed-users/frontend/js/components/sso/group-settings-sso-root'
 
 function GroupSettingsSSOComponent() {
   return (
     <div style={{ padding: '25px', width: '600px' }}>
-      <GroupSettingsSSO managedUsersEnabled />
+      <GroupSettingsSSORoot managedUsersEnabled />
     </div>
   )
 }
@@ -24,8 +24,6 @@ describe('GroupSettingsSSO', function () {
     cy.get('.group-settings-sso').within(() => {
       cy.contains('Single Sign-On (SSO)')
       cy.contains('Enable SSO')
-      cy.contains('SSO configuration')
-      cy.findByRole('button', { name: 'Configure SSO' })
     })
   })
 
@@ -114,6 +112,17 @@ describe('GroupSettingsSSO', function () {
           statusCode: 200,
         }).as('enableSSO')
 
+        cy.intercept('GET', `/manage/groups/${GROUP_ID}/settings/sso`, {
+          statusCode: 200,
+          body: {
+            entryPoint: 'entrypoint',
+            certificate: 'cert',
+            signatureAlgorithm: 'sha1',
+            userIdAttribute: 'email',
+            enabled: true,
+          },
+        }).as('sso')
+
         cy.get('.modal-dialog').within(() => {
           cy.findByRole('button', { name: 'Enable SSO' }).click()
         })