Merge pull request #22479 from overleaf/ii-manage-members-add-more-users-link

[web] Members management flexible licensing

GitOrigin-RevId: 8b0283db95c83c2ae1c0dd4e1e756980c168f152

services/web/app/src/Features/UserMembership/UserMembershipController.mjs

@@ -12,6 +12,7 @@ import { SSOConfig } from '../../models/SSOConfig.js'
 import { Parser as CSVParser } from 'json2csv'
 import { expressify } from '@overleaf/promise-utils'
 import SplitTestHandler from '../SplitTests/SplitTestHandler.js'
+import PlansLocator from '../Subscription/PlansLocator.js'
 
 async function manageGroupMembers(req, res, next) {
   const { entity: subscription, entityConfig } = req
@@ -36,6 +37,8 @@ async function manageGroupMembers(req, res, next) {
     'flexible-group-licensing'
   )
 
+  const plan = PlansLocator.findLocalPlanInSettings(subscription.planCode)
+
   res.render('user_membership/group-members-react', {
     name: entityName,
     groupId: entityPrimaryKey,
@@ -43,6 +46,7 @@ async function manageGroupMembers(req, res, next) {
     groupSize: subscription.membersLimit,
     managedUsersActive: subscription.managedUsersEnabled,
     groupSSOActive: ssoConfig?.enabled,
+    canUseFlexibleLicensing: plan?.canUseFlexibleLicensing,
   })
 }
 

services/web/app/views/user_membership/group-members-react.pug

@@ -10,6 +10,7 @@ block append meta
 	meta(name="ol-groupSize", data-type="json", content=groupSize)
 	meta(name="ol-managedUsersActive", data-type="boolean", content=managedUsersActive)
 	meta(name="ol-groupSSOActive", data-type="boolean", content=groupSSOActive)
+	meta(name="ol-canUseFlexibleLicensing", data-type="boolean", content=canUseFlexibleLicensing)
 
 block content
 	main.content.content-alt#subscription-manage-group-root

services/web/frontend/js/features/group-management/components/group-members.tsx

@@ -24,13 +24,16 @@ export default function GroupMembers() {
     paths,
   } = useGroupMembersContext()
   const [emailString, setEmailString] = useState<string>('')
-  const flexibleGroupLicensingEnabled = useFeatureFlag(
+  const isFlexibleGroupLicensingFeatureFlagEnabled = useFeatureFlag(
     'flexible-group-licensing'
   )
 
   const groupId = getMeta('ol-groupId')
   const groupName = getMeta('ol-groupName')
   const groupSize = getMeta('ol-groupSize')
+  const canUseFlexibleLicensing = getMeta('ol-canUseFlexibleLicensing')
+  const isFlexibleGroupLicensing =
+    canUseFlexibleLicensing && isFlexibleGroupLicensingFeatureFlagEnabled
 
   const handleEmailsChange = useCallback(
     e => {
@@ -49,7 +52,7 @@ export default function GroupMembers() {
   }
 
   const groupSizeDetails = () => {
-    if (flexibleGroupLicensingEnabled) {
+    if (isFlexibleGroupLicensing) {
       return (
         <small data-testid="group-size-details">
           <strong>
@@ -129,7 +132,7 @@ export default function GroupMembers() {
                 data-testid="add-more-members-form"
               >
                 <p className="small">
-                  {flexibleGroupLicensingEnabled
+                  {isFlexibleGroupLicensing
                     ? t('invite_more_members')
                     : t('add_more_members')}
                 </p>
@@ -148,16 +151,14 @@ export default function GroupMembers() {
                     <Col xs={4}>
                       {inviteMemberLoading ? (
                         <Button bsStyle="primary" disabled>
-                          {flexibleGroupLicensingEnabled
+                          {isFlexibleGroupLicensing
                             ? t('inviting')
                             : t('adding')}
                           &hellip;
                         </Button>
                       ) : (
                         <Button bsStyle="primary" onClick={onAddMembersSubmit}>
-                          {flexibleGroupLicensingEnabled
-                            ? t('invite')
-                            : t('add')}
+                          {isFlexibleGroupLicensing ? t('invite') : t('add')}
                         </Button>
                       )}
                     </Col>

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

@@ -61,6 +61,7 @@ export interface Meta {
   'ol-brandVariation': Record<string, any>
 
   // dynamic keys based on permissions
+  'ol-canUseFlexibleLicensing': boolean
   'ol-cannot-add-secondary-email': boolean
   'ol-cannot-change-password': boolean
   'ol-cannot-delete-own-account': boolean

services/web/test/frontend/features/group-management/components/group-members.spec.tsx

@@ -463,32 +463,40 @@ describe('GroupMembers', function () {
   })
 
   describe('with flexible group licensing enabled', function () {
-    const JOHN_DOE = {
-      _id: 'abc123def456',
-      first_name: 'John',
-      last_name: 'Doe',
-      email: 'john.doe@test.com',
-      last_active_at: new Date('2023-01-15'),
-      invite: false,
-    }
-    const BOBBY_LAPOINTE = {
-      _id: 'bcd234efa567',
-      first_name: 'Bobby',
-      last_name: 'Lapointe',
-      email: 'bobby.lapointe@test.com',
-      last_active_at: new Date('2023-01-02'),
-      invite: false,
-    }
-
-    it('renders the group members page with the new text', function () {
+    beforeEach(function () {
+      this.JOHN_DOE = {
+        _id: 'abc123def456',
+        first_name: 'John',
+        last_name: 'Doe',
+        email: 'john.doe@test.com',
+        last_active_at: new Date('2023-01-15'),
+        invite: false,
+      }
+      this.BOBBY_LAPOINTE = {
+        _id: 'bcd234efa567',
+        first_name: 'Bobby',
+        last_name: 'Lapointe',
+        email: 'bobby.lapointe@test.com',
+        last_active_at: new Date('2023-01-02'),
+        invite: false,
+      }
       cy.window().then(win => {
         win.metaAttributesCache.set('ol-groupId', GROUP_ID)
         win.metaAttributesCache.set('ol-groupName', 'My Awesome Team')
         win.metaAttributesCache.set('ol-groupSize', 10)
-        win.metaAttributesCache.set('ol-users', [JOHN_DOE, BOBBY_LAPOINTE])
         win.metaAttributesCache.set('ol-splitTestVariants', {
           'flexible-group-licensing': 'enabled',
         })
+        win.metaAttributesCache.set('ol-canUseFlexibleLicensing', true)
+      })
+    })
+
+    it('renders the group members page with the new text', function () {
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-users', [
+          this.JOHN_DOE,
+          this.BOBBY_LAPOINTE,
+        ])
       })
 
       cy.mount(
@@ -510,13 +518,7 @@ describe('GroupMembers', function () {
 
     it('renders the group members page with new text when only has one group member', function () {
       cy.window().then(win => {
-        win.metaAttributesCache.set('ol-groupId', GROUP_ID)
-        win.metaAttributesCache.set('ol-groupName', 'My Awesome Team')
-        win.metaAttributesCache.set('ol-groupSize', 10)
-        win.metaAttributesCache.set('ol-users', [JOHN_DOE])
-        win.metaAttributesCache.set('ol-splitTestVariants', {
-          'flexible-group-licensing': 'enabled',
-        })
+        win.metaAttributesCache.set('ol-users', [this.JOHN_DOE])
       })
 
       cy.mount(