Merge pull request #28126 from overleaf/ii-domain-capture-join-success-message

[web] Notification message for joining group via domain capture

GitOrigin-RevId: 67ef924b2d80afb5e1de75fb6aab147263c0f33c

services/web/app/src/Features/Project/ProjectListController.mjs

@@ -285,6 +285,8 @@ async function projectListPage(req, res, next) {
   const notificationsInstitution = []
   // Institution and group SSO Notifications
   let groupSsoSetupSuccess
+  let viaDomainCapture
+  let joinedGroupName = ''
   let reconfirmedViaSAML
   if (Features.hasFeature('saml')) {
     reconfirmedViaSAML = _.get(req.session, ['saml', 'reconfirmed'])
@@ -324,6 +326,8 @@ async function projectListPage(req, res, next) {
       // Notification group SSO: After SSO Linked
       if (samlSession.linkedGroup) {
         groupSsoSetupSuccess = true
+        viaDomainCapture = samlSession.domainCaptureJoin
+        joinedGroupName = samlSession.universityName
       }
 
       // Notification institution SSO: After SSO Linked or Logging in
@@ -517,6 +521,8 @@ async function projectListPage(req, res, next) {
     showBrlGeoBanner,
     projectDashboardReact: true, // used in navbar
     groupSsoSetupSuccess,
+    joinedGroupName,
+    viaDomainCapture,
     groupSubscriptionsPendingEnrollment:
       groupSubscriptionsPendingEnrollment.map(subscription => ({
         groupId: subscription._id,

services/web/app/views/project/list-react.pug

@@ -81,6 +81,8 @@ block append meta
 		data-type='boolean'
 		content=groupSsoSetupSuccess
 	)
+	meta(name='ol-joinedGroupName' data-type='string' content=joinedGroupName)
+	meta(name='ol-viaDomainCapture' data-type='boolean' content=viaDomainCapture)
 	meta(name='ol-showUSGovBanner' data-type='boolean' content=showUSGovBanner)
 	meta(
 		name='ol-usGovBannerVariant'

services/web/frontend/extracted-translations.json

@@ -1722,6 +1722,7 @@
   "subscription_will_remain_active_until_end_of_billing_period_x": "",
   "subscription_will_remain_active_until_end_of_trial_period_x": "",
   "success_sso_set_up": "",
+  "success_youve_successfully_join_group": "",
   "suggest_a_different_fix": "",
   "suggest_fix": "",
   "suggested": "",

services/web/frontend/js/features/project-list/components/notifications/groups/group-sso-setup-success.tsx

@@ -1,24 +1,46 @@
-import { useTranslation } from 'react-i18next'
+import { useTranslation, Trans } from 'react-i18next'
 import Notification from '../../../../../shared/components/notification'
 import getMeta from '../../../../../utils/meta'
 
 function GroupSsoSetupSuccess() {
   const { t } = useTranslation()
   const wasSuccess = getMeta('ol-groupSsoSetupSuccess')
+  const joinedGroupName = getMeta('ol-joinedGroupName')
+  const viaDomainCapture = getMeta('ol-viaDomainCapture')
 
   if (!wasSuccess) {
     return null
   }
 
-  return (
+  if (!viaDomainCapture) {
+    return (
+      <li className="notification-entry">
+        <Notification
+          type="success"
+          content={t('success_sso_set_up')}
+          isDismissible
+        />
+      </li>
+    )
+  }
+
+  return joinedGroupName ? (
     <li className="notification-entry">
       <Notification
         type="success"
-        content={t('success_sso_set_up')}
+        content={
+          <Trans
+            i18nKey="success_youve_successfully_join_group"
+            components={[<b />]} // eslint-disable-line react/jsx-key
+            values={{ groupName: joinedGroupName }}
+            shouldUnescape
+            tOptions={{ interpolation: { escapeValue: true } }}
+          />
+        }
         isDismissible
       />
     </li>
-  )
+  ) : null
 }
 
 export default GroupSsoSetupSuccess

services/web/frontend/js/utils/meta.ts

@@ -168,6 +168,7 @@ export interface Meta {
   'ol-itm_campaign': string
   'ol-itm_content': string
   'ol-itm_referrer': string
+  'ol-joinedGroupName': string
   'ol-labs': boolean
   'ol-labsExperiments': ActiveExperiment[] | undefined
   'ol-languages': SpellCheckLanguage[]
@@ -298,6 +299,7 @@ export interface Meta {
   'ol-usersEmail': string | undefined
   'ol-usersSubscription': { personal: boolean; group: boolean }
   'ol-validationStatus': ValidationStatus
+  'ol-viaDomainCapture': boolean
   'ol-wikiEnabled': boolean
   'ol-writefullCssUrl': string
   'ol-writefullEnabled': boolean

services/web/locales/en.json

@@ -2219,6 +2219,7 @@
   "subscription_will_remain_active_until_end_of_billing_period_x": "Your subscription will remain active until the end of your billing period, <0>__terminationDate__</0>.",
   "subscription_will_remain_active_until_end_of_trial_period_x": "Your subscription will remain active until the end of your trial period, <0>__terminationDate__</0>.",
   "success_sso_set_up": "Success! Single sign-on is all set up for you.",
+  "success_youve_successfully_join_group": "Success! You’ve joined the <0>__groupName__</0> group subscription. Your group has SSO enabled so you can log in without needing to remember a password.",
   "suggest_a_different_fix": "Suggest a different fix",
   "suggest_fix": "Suggest fix",
   "suggested": "Suggested",

services/web/test/frontend/features/project-list/components/notifications.test.tsx

@@ -1045,5 +1045,17 @@ describe('<UserNotifications />', function () {
         screen.queryByText('Success! Single sign-on is all set up for you.')
       ).to.be.null
     })
+
+    it('shows group SSO linked notification when joining via domain capture', function () {
+      const groupName = 'Group Name'
+      window.metaAttributesCache.set('ol-groupSsoSetupSuccess', true)
+      window.metaAttributesCache.set('ol-viaDomainCapture', true)
+      window.metaAttributesCache.set('ol-joinedGroupName', groupName)
+      renderWithinProjectListProvider(GroupSsoSetupSuccess)
+      const alert = screen.getByRole('alert')
+      expect(alert.textContent).to.contain(
+        `Success! You’ve joined the ${groupName} group subscription. Your group has SSO enabled so you can log in without needing to remember a password.`
+      )
+    })
   })
 })

services/web/test/unit/src/Project/ProjectListController.test.mjs

@@ -569,6 +569,21 @@ describe('ProjectListController', function () {
         }
         ctx.ProjectListController.projectListPage(ctx.req, ctx.res)
       })
+      it('should show a linked group notification via domain capture', function (ctx) {
+        ctx.req.session.saml = {
+          linkedGroup: true,
+          universityName: ctx.institutionName,
+          domainCaptureJoin: true,
+        }
+        ctx.res.render = (pageName, opts) => {
+          expect(opts).to.deep.include({
+            groupSsoSetupSuccess: true,
+            joinedGroupName: ctx.institutionName,
+            viaDomainCapture: true,
+          })
+        }
+        ctx.ProjectListController.projectListPage(ctx.req, ctx.res)
+      })
       it('should show a linked another email notification', function (ctx) {
         // when they request to link an email but the institution returns
         // a different email