Merge pull request #15220 from overleaf/ds-bug-fix-group-sso-emails

Group SSO - Adding a bug fix for sending emails.

GitOrigin-RevId: 54d1d0a0ebcb1c0767ae9fc24d81a23e1568b7fb

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": "",

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'}
       </td>
       <td className="cell-security">
+        <div className="managed-user-security">
+          <SSOStatus user={user} />
+        </div>
+      </td>
+      <td className="cell-managed">
         <div className="managed-user-security">
           <ManagedUserStatus user={user} />
         </div>

services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx

@@ -63,6 +63,9 @@ export default function ManagedUsersList({ groupId }: ManagedUsersListProps) {
                     <td className="cell-security">
                       <span className="header">{t('security')}</span>
                     </td>
+                    <td className="cell-managed">
+                      <span className="header">{t('managed')}</span>
+                    </td>
                     <td />
                   </tr>
                 </thead>

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 (
+    <span>
+      {user.invite ? (
+        <span className="security-state-invite-pending">
+          <MaterialIcon
+            type="schedule"
+            category="outlined"
+            accessibilityLabel={t('pending_invite')}
+          />
+          &nbsp; {t('sso')}
+        </span>
+      ) : (
+        <>
+          {user.enrollment?.sso ? (
+            <span className="security-state-managed">
+              <MaterialIcon type="check" accessibilityLabel={t('sso_linked')} />
+              &nbsp; {t('sso')}
+            </span>
+          ) : (
+            <span className="security-state-not-managed">
+              <MaterialIcon
+                type="close"
+                accessibilityLabel={t('sso_unlinked')}
+              />
+              &nbsp; {t('sso')}
+            </span>
+          )}
+        </>
+      )}
+    </span>
+  )
+}

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%;
     }
 

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</0> 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",

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')
       })
     })
   })

services/web/types/group-management/user.ts

@@ -1,6 +1,7 @@
 export type UserEnrollment = {
   managedBy?: string
   enrolledAt?: Date
+  sso?: object
 }
 
 export type User = {