diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 62da017cce..c5f0158527 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -1051,6 +1051,7 @@ "sort_by_x": "", "source": "", "spell_check": "", + "sso": "", "sso_config_prop_help_certificate": "", "sso_config_prop_help_first_name": "", "sso_config_prop_help_last_name": "", @@ -1068,7 +1069,9 @@ "sso_is_enabled_explanation_1": "", "sso_is_enabled_explanation_2": "", "sso_link_error": "", + "sso_linked": "", "sso_logs": "", + "sso_unlinked": "", "start_a_free_trial": "", "start_by_adding_your_email": "", "start_free_trial": "", diff --git a/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx b/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx index 374067278c..bd567e5ceb 100644 --- a/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx +++ b/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx @@ -6,6 +6,7 @@ import Badge from '../../../../shared/components/badge' import Tooltip from '../../../../shared/components/tooltip' import type { ManagedUserAlert } from '../../utils/types' import ManagedUserStatus from './managed-user-status' +import SSOStatus from './sso-status' import ManagedUserDropdownButton from './managed-user-dropdown-button' import ManagedUsersSelectUserCheckbox from './managed-users-select-user-checkbox' @@ -74,6 +75,11 @@ export default function ManagedUserRow({ : 'N/A'} +
+ +
+ +
diff --git a/services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx b/services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx index 1086dad7b2..447d598406 100644 --- a/services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx +++ b/services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx @@ -63,6 +63,9 @@ export default function ManagedUsersList({ groupId }: ManagedUsersListProps) { {t('security')} + + {t('managed')} + diff --git a/services/web/frontend/js/features/group-management/components/managed-users/sso-status.tsx b/services/web/frontend/js/features/group-management/components/managed-users/sso-status.tsx new file mode 100644 index 0000000000..328f1af3d5 --- /dev/null +++ b/services/web/frontend/js/features/group-management/components/managed-users/sso-status.tsx @@ -0,0 +1,41 @@ +import { useTranslation } from 'react-i18next' +import { User } from '../../../../../../types/group-management/user' +import MaterialIcon from '@/shared/components/material-icon' + +type SSOStatusProps = { + user: User +} +export default function SSOStatus({ user }: SSOStatusProps) { + const { t } = useTranslation() + return ( + + {user.invite ? ( + + +   {t('sso')} + + ) : ( + <> + {user.enrollment?.sso ? ( + + +   {t('sso')} + + ) : ( + + +   {t('sso')} + + )} + + )} + + ) +} diff --git a/services/web/frontend/stylesheets/components/group-members.less b/services/web/frontend/stylesheets/components/group-members.less index 488e74ce9c..7a3f6ebca9 100644 --- a/services/web/frontend/stylesheets/components/group-members.less +++ b/services/web/frontend/stylesheets/components/group-members.less @@ -104,11 +104,11 @@ } .cell-checkbox { - width: 5%; + width: 2.5%; } .cell-email { - width: 45%; + width: 37%; } .cell-name { @@ -126,6 +126,13 @@ } .cell-security { + width: 10%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .cell-managed { width: 15%; overflow-x: hidden; text-overflow: ellipsis; @@ -139,11 +146,11 @@ @media (min-width: @screen-xs) { .cell-checkbox { - width: 5%; + width: 2.5%; } .cell-email { - width: 34%; + width: 29%; } .cell-name { @@ -155,6 +162,10 @@ } .cell-security { + width: 12%; + } + + .cell-managed { width: 15%; } @@ -166,11 +177,11 @@ @media (min-width: @screen-lg) { .cell-checkbox { - width: 5%; + width: 2.5%; } .cell-email { - width: 43%; + width: 37%; } .cell-name { @@ -182,6 +193,10 @@ } .cell-security { + width: 10%; + } + + .cell-managed { width: 12%; } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index a85d1910bf..6e3bbfda7e 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1624,6 +1624,7 @@ "source": "Source", "spell_check": "Spell check", "spread_the_word_and_fill_bar": "Spread the word and fill this bar up", + "sso": "SSO", "sso_account_already_linked": "Account already linked to another __appName__ user", "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", @@ -1644,8 +1645,10 @@ "sso_is_enabled_explanation_1": "Group members will <0>only be able to sign in via SSO", "sso_is_enabled_explanation_2": "If there are any problems with the configuration, only you (as the group administrator) will be able to disable SSO.", "sso_link_error": "Error linking account", + "sso_linked": "SSO linked", "sso_logs": "SSO Logs", "sso_not_linked": "You have not linked your account to __provider__. Please log in to your account another way and link your __provider__ account via your account settings.", + "sso_unlinked": "SSO unlinked", "sso_user_denied_access": "Cannot log in because __appName__ was not granted access to your __provider__ account. Please try again.", "standard": "Standard", "start_a_free_trial": "Start a free trial", diff --git a/services/web/test/frontend/features/group-management/components/managed-users/managed-group-members.spec.tsx b/services/web/test/frontend/features/group-management/components/managed-users/managed-group-members.spec.tsx index c899cadea1..7b0bb2da2d 100644 --- a/services/web/test/frontend/features/group-management/components/managed-users/managed-group-members.spec.tsx +++ b/services/web/test/frontend/features/group-management/components/managed-users/managed-group-members.spec.tsx @@ -28,6 +28,10 @@ const CLAIRE_JENNINGS = { enrollment: { managedBy: GROUP_ID, enrolledAt: new Date('2023-01-03'), + sso: { + providerId: '123', + externalId: '123', + }, }, } const PATHS = { @@ -80,6 +84,7 @@ describe('group members, with managed users', function () { cy.contains('2nd Jan 2023') cy.get('.badge-new-comment').should('not.exist') cy.get('.sr-only').contains('Not managed') + cy.get('.sr-only').contains('SSO unlinked') }) cy.get('tr:nth-child(3)').within(() => { @@ -88,6 +93,7 @@ describe('group members, with managed users', function () { cy.contains('3rd Jan 2023') cy.get('.badge-new-comment').should('not.exist') cy.get('.sr-only').contains('Managed') + cy.get('.sr-only').contains('SSO linked') }) }) }) diff --git a/services/web/types/group-management/user.ts b/services/web/types/group-management/user.ts index 501044b850..c4cb92c9e9 100644 --- a/services/web/types/group-management/user.ts +++ b/services/web/types/group-management/user.ts @@ -1,6 +1,7 @@ export type UserEnrollment = { managedBy?: string enrolledAt?: Date + sso?: object } export type User = {