Merge pull request #15639 from overleaf/ab-fix-group-settings-visibility

[web] Various fixes for Group SSO

GitOrigin-RevId: 0a98d7eed14b2878a6be5e28e54ab1f7ceb9be5f

services/web/app/src/Features/Subscription/SubscriptionController.js

@@ -240,20 +240,28 @@ async function userSubscriptionPage(req, res) {
 
   const groupPlansDataForDash = formatGroupPlansDataForDash()
 
-  // display the Group Settings button only to admins of group subscriptions with the Managed Users feature available
+  // display the Group Settings button only to admins of group subscriptions with either/or the Managed Users or Group SSO feature available
   let groupSettingsEnabledFor
   try {
     const managedGroups = await async.filter(
       managedGroupSubscriptions || [],
       async subscription => {
-        const results = await Modules.promises.hooks.fire(
+        const managedUsersResults = await Modules.promises.hooks.fire(
           'hasManagedUsersFeature',
           subscription
         )
+        const groupSSOResults = await Modules.promises.hooks.fire(
+          'hasGroupSSOFeature',
+          subscription
+        )
         const isGroupAdmin =
           (subscription.admin_id._id || subscription.admin_id).toString() ===
           user._id.toString()
-        return results?.[0] === true && isGroupAdmin
+        return (
+          (managedUsersResults?.[0] === true ||
+            groupSSOResults?.[0] === true) &&
+          isGroupAdmin
+        )
       }
     )
     groupSettingsEnabledFor = managedGroups.map(subscription =>

services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx

@@ -0,0 +1,32 @@
+import { RowLink } from '@/features/subscription/components/dashboard/row-link'
+import { useTranslation } from 'react-i18next'
+import { ManagedGroupSubscription } from '../../../../../../types/subscription/dashboard/subscription'
+
+export default function GroupSettingsButton({
+  subscription,
+}: {
+  subscription: ManagedGroupSubscription
+}) {
+  const { t } = useTranslation()
+
+  const subscriptionHasGroupSSO = subscription?.features?.groupSSO
+  const subscriptionHasManagedUsers = subscription?.features?.managedUsers
+
+  let groupSettingRowSubText = ''
+  if (subscriptionHasGroupSSO && subscriptionHasManagedUsers) {
+    groupSettingRowSubText = t('manage_group_settings_subtext')
+  } else if (subscriptionHasGroupSSO) {
+    groupSettingRowSubText = t('manage_group_settings_subtext_group_sso')
+  } else if (subscriptionHasManagedUsers) {
+    groupSettingRowSubText = t('manage_group_settings_subtext_managed_users')
+  }
+
+  return (
+    <RowLink
+      href={`/manage/groups/${subscription._id}/settings`}
+      heading={t('manage_group_settings')}
+      subtext={groupSettingRowSubText}
+      icon="settings"
+    />
+  )
+}

services/web/frontend/js/features/subscription/components/dashboard/managed-group-subscriptions.tsx

@@ -1,3 +1,5 @@
+import GroupSettingsButton from '@/features/subscription/components/dashboard/group-settings-button'
+import getMeta from '@/utils/meta'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
 import { RowLink } from './row-link'
@@ -10,21 +12,14 @@ export default function ManagedGroupSubscriptions() {
     return null
   }
 
+  const groupSettingsEnabledFor = getMeta(
+    'ol-groupSettingsEnabledFor',
+    []
+  ) as string[]
+
   return (
     <>
       {managedGroupSubscriptions.map(subscription => {
-        let groupSettingRowSubText = ''
-        const subscriptionHasGroupSSO = subscription?.features?.groupSSO
-        const subscriptionHasManagedUsers = subscription?.features?.managedUsers
-        if (subscriptionHasGroupSSO && subscriptionHasManagedUsers) {
-          groupSettingRowSubText = t('manage_group_settings_subtext')
-        } else if (subscriptionHasGroupSSO) {
-          groupSettingRowSubText = t('manage_group_settings_subtext_group_sso')
-        } else if (subscriptionHasManagedUsers) {
-          groupSettingRowSubText = t(
-            'manage_group_settings_subtext_managed_users'
-          )
-        }
         return (
           <div key={`managed-group-${subscription._id}`}>
             <p>
@@ -76,13 +71,8 @@ export default function ManagedGroupSubscriptions() {
               subtext={t('manage_managers_subtext')}
               icon="manage_accounts"
             />
-            {(subscriptionHasGroupSSO || subscriptionHasManagedUsers) && (
-              <RowLink
-                href={`/manage/groups/${subscription._id}/settings`}
-                heading={t('manage_group_settings')}
-                subtext={groupSettingRowSubText}
-                icon="settings"
-              />
+            {groupSettingsEnabledFor?.includes(subscription._id) && (
+              <GroupSettingsButton subscription={subscription} />
             )}
             <RowLink
               href={`/metrics/groups/${subscription._id}`}

services/web/test/frontend/features/subscription/components/dashboard/managed-group-subscriptions.test.tsx

@@ -101,11 +101,26 @@ describe('<ManagedGroupSubscriptions />', function () {
     })
     expect(elements.length).to.equal(0)
   })
-  it('does not render the Manage group settings row when feature is turned off', function () {
+
+  it('does not render the Manage group settings row when the user is not the group admin', function () {
+    renderWithSubscriptionDashContext(<ManagedGroupSubscriptions />, {
+      metaTags: [
+        {
+          name: 'ol-managedGroupSubscriptions',
+          value: managedGroupSubscriptions2,
+        },
+        {
+          name: 'ol-groupSettingsEnabledFor',
+          value: [],
+        },
+      ],
+    })
+
     expect(screen.queryByText('Manage group settings')).to.be.null
     expect(screen.queryByText('Configure and manage SSO and Managed Users')).to
       .be.null
   })
+
   it('renders the Manage group settings row when feature is turned on', async function () {
     renderWithSubscriptionDashContext(<ManagedGroupSubscriptions />, {
       metaTags: [
@@ -113,11 +128,16 @@ describe('<ManagedGroupSubscriptions />', function () {
           name: 'ol-managedGroupSubscriptions',
           value: managedGroupSubscriptions2,
         },
+        {
+          name: 'ol-groupSettingsEnabledFor',
+          value: [managedGroupSubscriptions2[0]._id],
+        },
       ],
     })
     await screen.findAllByText('Manage group settings')
     await screen.findAllByText('Configure and manage SSO and Managed Users')
   })
+
   it('renders the the correct subText for Manage Group settings row', async function () {
     renderWithSubscriptionDashContext(<ManagedGroupSubscriptions />, {
       metaTags: [
@@ -125,6 +145,10 @@ describe('<ManagedGroupSubscriptions />', function () {
           name: 'ol-managedGroupSubscriptions',
           value: managedGroupSubscriptions2,
         },
+        {
+          name: 'ol-groupSettingsEnabledFor',
+          value: [managedGroupSubscriptions2[0]._id],
+        },
       ],
     })
     await screen.findAllByText('Configure and manage SSO and Managed Users')
@@ -135,6 +159,10 @@ describe('<ManagedGroupSubscriptions />', function () {
           name: 'ol-managedGroupSubscriptions',
           value: managedGroupSubscriptions3,
         },
+        {
+          name: 'ol-groupSettingsEnabledFor',
+          value: [managedGroupSubscriptions3[0]._id],
+        },
       ],
     })
     await screen.findAllByText('Configure and manage SSO')
@@ -144,6 +172,10 @@ describe('<ManagedGroupSubscriptions />', function () {
           name: 'ol-managedGroupSubscriptions',
           value: managedGroupSubscriptions4,
         },
+        {
+          name: 'ol-groupSettingsEnabledFor',
+          value: [managedGroupSubscriptions4[0]._id],
+        },
       ],
     })
     await screen.findAllByText('Turn on Managed Users')