Group SSO - Display group SSO switch independently of managed users (#15423)

GitOrigin-RevId: 249a9b176404418da712eee9e29de931d9498887

services/web/frontend/extracted-translations.json

@@ -332,7 +332,6 @@
   "enable_single_sign_on": "",
   "enable_sso": "",
   "enable_stop_on_first_error_under_recompile_dropdown_menu": "",
-  "enabled_managed_users_set_up_sso": "",
   "enabling": "",
   "enabling_sso_will_make_this_the_only_sign_in_option": "",
   "end_of_document": "",
@@ -663,6 +662,8 @@
   "manage_group_members_subtext": "",
   "manage_group_settings": "",
   "manage_group_settings_subtext": "",
+  "manage_group_settings_subtext_group_sso": "",
+  "manage_group_settings_subtext_managed_users": "",
   "manage_institution_managers": "",
   "manage_labs_program_membership": "",
   "manage_managers_subtext": "",

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

@@ -1,5 +1,4 @@
 import { Trans, useTranslation } from 'react-i18next'
-import getMeta from '../../../../utils/meta'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
 import { RowLink } from './row-link'
 
@@ -11,71 +10,90 @@ export default function ManagedGroupSubscriptions() {
     return null
   }
 
-  const groupSettingsEnabledFor = getMeta(
-    'ol-groupSettingsEnabledFor',
-    []
-  ) as string[]
-
   return (
     <>
-      {managedGroupSubscriptions.map(subscription => (
-        <div key={`managed-group-${subscription._id}`}>
-          <p>
-            {subscription.userIsGroupMember ? (
-              <Trans
-                i18nKey="you_are_a_manager_and_member_of_x_plan_as_member_of_group_subscription_y_administered_by_z"
-                components={[<a href="/user/subscription/plans" />, <strong />]} // eslint-disable-line react/jsx-key, jsx-a11y/anchor-has-content
-                values={{
-                  planName: subscription.planLevelName,
-                  groupName: subscription.teamName || '',
-                  adminEmail: subscription.admin_id.email,
-                }}
-                shouldUnescape
-                tOptions={{ interpolation: { escapeValue: true } }}
-              />
-            ) : (
-              <Trans
-                i18nKey="you_are_a_manager_of_x_plan_as_member_of_group_subscription_y_administered_by_z"
-                components={[<a href="/user/subscription/plans" />, <strong />]} // eslint-disable-line react/jsx-key, jsx-a11y/anchor-has-content
-                values={{
-                  planName: subscription.planLevelName,
-                  groupName: subscription.teamName || '',
-                  adminEmail: subscription.admin_id.email,
-                }}
-                shouldUnescape
-                tOptions={{ interpolation: { escapeValue: true } }}
+      {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>
+              {subscription.userIsGroupMember ? (
+                <Trans
+                  i18nKey="you_are_a_manager_and_member_of_x_plan_as_member_of_group_subscription_y_administered_by_z"
+                  components={[
+                    // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
+                    <a href="/user/subscription/plans" />,
+                    // eslint-disable-next-line react/jsx-key
+                    <strong />,
+                  ]}
+                  values={{
+                    planName: subscription.planLevelName,
+                    groupName: subscription.teamName || '',
+                    adminEmail: subscription.admin_id.email,
+                  }}
+                  shouldUnescape
+                  tOptions={{ interpolation: { escapeValue: true } }}
+                />
+              ) : (
+                <Trans
+                  i18nKey="you_are_a_manager_of_x_plan_as_member_of_group_subscription_y_administered_by_z"
+                  components={[
+                    // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
+                    <a href="/user/subscription/plans" />,
+                    // eslint-disable-next-line react/jsx-key
+                    <strong />,
+                  ]}
+                  values={{
+                    planName: subscription.planLevelName,
+                    groupName: subscription.teamName || '',
+                    adminEmail: subscription.admin_id.email,
+                  }}
+                  shouldUnescape
+                  tOptions={{ interpolation: { escapeValue: true } }}
+                />
+              )}
+            </p>
+            <RowLink
+              href={`/manage/groups/${subscription._id}/members`}
+              heading={t('manage_members')}
+              subtext={t('manage_group_members_subtext')}
+              icon="groups"
+            />
+            <RowLink
+              href={`/manage/groups/${subscription._id}/managers`}
+              heading={t('manage_group_managers')}
+              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"
               />
             )}
-          </p>
-          <RowLink
-            href={`/manage/groups/${subscription._id}/members`}
-            heading={t('manage_members')}
-            subtext={t('manage_group_members_subtext')}
-            icon="groups"
-          />
-          <RowLink
-            href={`/manage/groups/${subscription._id}/managers`}
-            heading={t('manage_group_managers')}
-            subtext={t('manage_managers_subtext')}
-            icon="manage_accounts"
-          />
-          {groupSettingsEnabledFor?.includes(subscription._id) && (
             <RowLink
-              href={`/manage/groups/${subscription._id}/settings`}
-              heading={t('manage_group_settings')}
-              subtext={t('manage_group_settings_subtext')}
-              icon="settings"
+              href={`/metrics/groups/${subscription._id}`}
+              heading={t('view_metrics')}
+              subtext={t('view_metrics_group_subtext')}
+              icon="insights"
             />
-          )}
-          <RowLink
-            href={`/metrics/groups/${subscription._id}`}
-            heading={t('view_metrics')}
-            subtext={t('view_metrics_group_subtext')}
-            icon="insights"
-          />
-          <hr />
-        </div>
-      ))}
+            <hr />
+          </div>
+        )
+      })}
     </>
   )
 }

services/web/frontend/stylesheets/modules/managed-users.less

@@ -95,10 +95,6 @@ h3.group-settings-title {
 }
 
 .group-settings-sso {
-  border-top: 1px solid @gray-lighter;
-  padding-top: 25px;
-  margin-top: 25px;
-
   .group-settings-sso-enable,
   .group-settings-sso-configure {
     margin-top: @margin-md;
@@ -108,6 +104,12 @@ h3.group-settings-title {
   }
 }
 
+.below-managed-users {
+  border-top: 1px solid @gray-lighter;
+  padding-top: 25px;
+  margin-top: 25px;
+}
+
 .sso-config-info {
   .sso-config-info-section {
     margin-bottom: @margin-md;

services/web/locales/en.json

@@ -504,7 +504,6 @@
   "enable_single_sign_on": "Enable single sign-on",
   "enable_sso": "Enable SSO",
   "enable_stop_on_first_error_under_recompile_dropdown_menu": "Enable <0>“Stop on first error”</0> under the <1>Recompile</1> drop-down menu to help you find and fix errors right away.",
-  "enabled_managed_users_set_up_sso": "You need to enable Managed Users to set up SSO.",
   "enabling": "Enabling",
   "enabling_sso_will_make_this_the_only_sign_in_option": "Enabling SSO will make this the <0>only</0> sign-in option for members.",
   "end_of_document": "End of document",
@@ -1036,7 +1035,9 @@
   "manage_group_managers": "Manage group managers",
   "manage_group_members_subtext": "Add or remove members from your group subscription",
   "manage_group_settings": "Manage group settings",
-  "manage_group_settings_subtext": "Turn on Managed Users",
+  "manage_group_settings_subtext": "Configure and manage SSO and Managed Users",
+  "manage_group_settings_subtext_group_sso": "Configure and manage SSO",
+  "manage_group_settings_subtext_managed_users": "Turn on Managed Users",
   "manage_institution_managers": "Manage institution managers",
   "manage_labs_program_membership": "Manage Labs Program Membership",
   "manage_managers_subtext": "Assign or remove manager privileges",

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

@@ -11,8 +11,8 @@ import {
   renderWithSubscriptionDashContext,
 } from '../../helpers/render-with-subscription-dash-context'
 
-const managedGroupSubscriptions: ManagedGroupSubscription[] = [
-  {
+function getManagedGroupSubscription(groupSSO: boolean, managedUsers: boolean) {
+  const subscriptionOne = {
     ...groupActiveSubscription,
     userIsGroupMember: true,
     planLevelName: 'Professional',
@@ -20,8 +20,13 @@ const managedGroupSubscriptions: ManagedGroupSubscription[] = [
       id: 'abc123abc123',
       email: 'you@example.com',
     },
-  },
-  {
+    features: {
+      groupSSO,
+      managedUsers,
+    },
+  }
+
+  const subscriptionTwo = {
     ...groupActiveSubscriptionWithPendingLicenseChange,
     userIsGroupMember: false,
     planLevelName: 'Collaborator',
@@ -29,8 +34,22 @@ const managedGroupSubscriptions: ManagedGroupSubscription[] = [
       id: 'bcd456bcd456',
       email: 'someone@example.com',
     },
-  },
-]
+    features: {
+      groupSSO,
+      managedUsers,
+    },
+  }
+  return [subscriptionOne, subscriptionTwo]
+}
+
+const managedGroupSubscriptions: ManagedGroupSubscription[] =
+  getManagedGroupSubscription(false, false)
+const managedGroupSubscriptions2: ManagedGroupSubscription[] =
+  getManagedGroupSubscription(true, true)
+const managedGroupSubscriptions3: ManagedGroupSubscription[] =
+  getManagedGroupSubscription(true, false)
+const managedGroupSubscriptions4: ManagedGroupSubscription[] =
+  getManagedGroupSubscription(false, true)
 
 describe('<ManagedGroupSubscriptions />', function () {
   afterEach(function () {
@@ -82,4 +101,51 @@ describe('<ManagedGroupSubscriptions />', function () {
     })
     expect(elements.length).to.equal(0)
   })
+  it('does not render the Manage group settings row when feature is turned off', function () {
+    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: [
+        {
+          name: 'ol-managedGroupSubscriptions',
+          value: managedGroupSubscriptions2,
+        },
+      ],
+    })
+    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: [
+        {
+          name: 'ol-managedGroupSubscriptions',
+          value: managedGroupSubscriptions2,
+        },
+      ],
+    })
+    await screen.findAllByText('Configure and manage SSO and Managed Users')
+
+    renderWithSubscriptionDashContext(<ManagedGroupSubscriptions />, {
+      metaTags: [
+        {
+          name: 'ol-managedGroupSubscriptions',
+          value: managedGroupSubscriptions3,
+        },
+      ],
+    })
+    await screen.findAllByText('Configure and manage SSO')
+    renderWithSubscriptionDashContext(<ManagedGroupSubscriptions />, {
+      metaTags: [
+        {
+          name: 'ol-managedGroupSubscriptions',
+          value: managedGroupSubscriptions4,
+        },
+      ],
+    })
+    await screen.findAllByText('Turn on Managed Users')
+  })
 })

services/web/types/subscription/dashboard/subscription.ts

@@ -77,6 +77,10 @@ export type ManagedGroupSubscription = Omit<GroupSubscription, 'admin_id'> & {
   userIsGroupMember: boolean
   planLevelName: string
   admin_id: User
+  features: {
+    groupSSO: boolean
+    managedUsers: boolean
+  }
 }
 
 export type MemberGroupSubscription = Omit<GroupSubscription, 'admin_id'> & {