Merge pull request #16053 from overleaf/jel-project-dash-sso-linked-alert

[web] Show group SSO linked notification

GitOrigin-RevId: f66f68dd647963f53b3978931088ba23bab78273

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

@@ -214,7 +214,8 @@ async function projectListPage(req, res, next) {
   }
 
   const notificationsInstitution = []
-  // Institution SSO Notifications
+  // Institution and group SSO Notifications
+  let groupSsoSetupSuccess
   let reconfirmedViaSAML
   if (Features.hasFeature('saml')) {
     reconfirmedViaSAML = _.get(req.session, ['saml', 'reconfirmed'])
@@ -240,7 +241,7 @@ async function projectListPage(req, res, next) {
     }
 
     if (samlSession) {
-      // Notification: After SSO Linked
+      // Notification institution SSO: After SSO Linked
       if (samlSession.linked) {
         notificationsInstitution.push({
           email: samlSession.institutionEmail,
@@ -251,7 +252,12 @@ async function projectListPage(req, res, next) {
         })
       }
 
-      // Notification: After SSO Linked or Logging in
+      // Notification group SSO: After SSO Linked
+      if (samlSession.linkedGroup) {
+        groupSsoSetupSuccess = true
+      }
+
+      // Notification institution SSO: After SSO Linked or Logging in
       // The requested email does not match primary email returned from
       // the institution
       if (
@@ -266,7 +272,7 @@ async function projectListPage(req, res, next) {
         })
       }
 
-      // Notification: Tried to register, but account already existed
+      // Notification institution SSO: Tried to register, but account already existed
       // registerIntercept is set before the institution callback.
       // institutionEmail is set after institution callback.
       // Check for both in case SSO flow was abandoned
@@ -500,6 +506,7 @@ async function projectListPage(req, res, next) {
     inrGeoBannerSplitTestName,
     projectDashboardReact: true, // used in navbar
     welcomePageRedesignVariant: welcomePageRedesignAssignment.variant,
+    groupSsoSetupSuccess,
     groupSubscriptionsPendingEnrollment:
       groupSubscriptionsPendingEnrollment.map(subscription => ({
         groupId: subscription._id,

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

@@ -37,6 +37,7 @@ block append meta
 	meta(name="ol-groupSubscriptionsPendingEnrollment" data-type="json" content=groupSubscriptionsPendingEnrollment)
 	meta(name="ol-hasIndividualRecurlySubscription" data-type="boolean" content=hasIndividualRecurlySubscription)
 	meta(name="ol-newNotificationStyle" data-type="boolean" content=newNotificationStyle)
+	meta(name="ol-groupSsoSetupSuccess" data-type="boolean" content=groupSsoSetupSuccess)
 
 block content
 	main.content.content-alt.project-list-react#project-list-root

services/web/frontend/extracted-translations.json

@@ -1180,6 +1180,7 @@
   "subscription_canceled_and_terminate_on_x": "",
   "subscription_will_remain_active_until_end_of_billing_period_x": "",
   "subscription_will_remain_active_until_end_of_trial_period_x": "",
+  "success_sso_set_up": "",
   "suggested": "",
   "sure_you_want_to_cancel_plan_change": "",
   "sure_you_want_to_change_plan": "",

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

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+import Notification from '../../../../../shared/components/notification'
+import getMeta from '../../../../../utils/meta'
+
+function GroupSsoSetupSuccess() {
+  const { t } = useTranslation()
+  const wasSuccess = getMeta('ol-groupSsoSetupSuccess')
+
+  if (!wasSuccess) {
+    return null
+  }
+
+  return (
+    <li className="notification-entry">
+      <Notification
+        type="success"
+        content={t('success_sso_set_up')}
+        isDismissible
+      />
+    </li>
+  )
+}
+
+export default GroupSsoSetupSuccess

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

@@ -5,6 +5,7 @@ import ConfirmEmail from './groups/confirm-email'
 import ReconfirmationInfo from './groups/affiliation/reconfirmation-info'
 import GroupsAndEnterpriseBanner from './groups-and-enterprise-banner'
 import WritefullPromoBanner from './writefull-promo-banner'
+import GroupSsoSetupSuccess from './groups/group-sso-setup-success'
 import INRBanner from './ads/inr-banner'
 import LATAMBanner from './ads/latam-banner'
 import getMeta from '../../../../utils/meta'
@@ -73,6 +74,7 @@ function UserNotifications() {
               key={subscription.groupId}
             />
           ))}
+        <GroupSsoSetupSuccess />
         <Common />
         <Institution />
         <ConfirmEmail />

services/web/frontend/stylesheets/app/project-list.less

@@ -240,6 +240,7 @@ input.project-list-table-select-item[type='checkbox'] {
   }
   .notification-entry {
     .alert {
+      // old alert style
       .box-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
       display: flex;
       flex-wrap: wrap;
@@ -247,6 +248,10 @@ input.project-list-table-select-item[type='checkbox'] {
         flex-wrap: nowrap;
       }
     }
+    .notification {
+      // new alert style. match the existing margin on .alert since there is a mix of old and new alert styles
+      margin-bottom: @line-height-computed;
+    }
     &.centered-alert .alert {
       align-items: center;
     }

services/web/locales/en.json

@@ -1752,6 +1752,7 @@
   "subscription_canceled_and_terminate_on_x": " Your subscription has been canceled and will terminate on <0>__terminateDate__</0>. No further payments will be taken.",
   "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.",
   "suggested": "Suggested",
   "suggestion": "Suggestion",
   "support_lots_of_features": "We support almost all LaTeX features, including inserting images, bibliographies, equations, and much more! Read about all the exciting things you can do with __appName__ in our <0>__help_guides_link__</0>",

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

@@ -34,6 +34,7 @@ import {
 import { DeepPartial } from '../../../../../types/utils'
 import { Project } from '../../../../../types/project/dashboard/api'
 import GroupsAndEnterpriseBanner from '../../../../../frontend/js/features/project-list/components/notifications/groups-and-enterprise-banner'
+import GroupSsoSetupSuccess from '../../../../../frontend/js/features/project-list/components/notifications/groups/group-sso-setup-success'
 import localStorage from '../../../../../frontend/js/infrastructure/local-storage'
 import * as useLocationModule from '../../../../../frontend/js/shared/hooks/use-location'
 import {
@@ -957,4 +958,28 @@ describe('<UserNotifications />', function () {
       })
     })
   })
+
+  describe('GroupSsoSetupSuccess', function () {
+    beforeEach(function () {
+      window.metaAttributesCache = window.metaAttributesCache || new Map()
+    })
+
+    afterEach(function () {
+      window.metaAttributesCache = window.metaAttributesCache || new Map()
+    })
+
+    it('shows group SSO linked notification', function () {
+      window.metaAttributesCache.set('ol-groupSsoSetupSuccess', true)
+      renderWithinProjectListProvider(GroupSsoSetupSuccess)
+      screen.getByText('Success! Single sign-on is all set up for you.')
+    })
+
+    it('does not show group SSO linked notification', function () {
+      window.metaAttributesCache.set('ol-groupSsoSetupSuccess', false)
+      renderWithinProjectListProvider(GroupSsoSetupSuccess)
+      expect(
+        screen.queryByText('Success! Single sign-on is all set up for you.')
+      ).to.be.null
+    })
+  })
 })