[web] SSO Config viewer (#14880)

* [web] SSO Config viewer

GitOrigin-RevId: 600f6279293958e9cf127e1d6fb0c6957403578d
This commit is contained in:
Miguel Serrano
2023-10-02 08:04:23 +00:00
committed by Copybot
parent d94eaa19cc
commit 5126940084
6 changed files with 118 additions and 99 deletions
@@ -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": "",
@@ -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 = () => {
useMeta({
'ol-managedUsersEnabled': true,
'ol-hasGroupSSOFeature': true,
})
return <GroupSettings />
}
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',
@@ -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' },
},
}
@@ -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;
}
}