From dfd9d8ddb280cbbd95ad67f4b9ef6a94e135e9ab Mon Sep 17 00:00:00 2001
From: Alexandre Bourdin <abourdin@users.noreply.github.com>
Date: Fri, 25 Aug 2023 11:19:33 +0200
Subject: [PATCH] Merge pull request #14500 from
 overleaf/ab-hide-checkbox-managed-users

[web] Hide checkbox on the row of managed group members

GitOrigin-RevId: cda1c2be6374f69b4de43f7730e7fba734d75f0a
---
 .../managed-users/managed-user-row.tsx        | 26 ++++++++++-------
 .../managed-users/managed-users-list.tsx      |  4 ++-
 .../stylesheets/components/group-members.less | 18 ++++++++++--
 .../managed-group-members.spec.tsx            | 29 ++-----------------
 4 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx b/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx
index 53aad7b921..7b0b48f1ee 100644
--- a/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx
+++ b/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx
@@ -43,17 +43,23 @@ export default function ManagedUserRow({
       key={`user-${user.email}`}
       className={`managed-user-row ${user.invite ? 'text-muted' : ''}`}
     >
+      <td className="cell-checkbox">
+        {user.enrollment?.managedBy ? null : (
+          <>
+            <label htmlFor={`select-user-${user.email}`} className="sr-only">
+              {t('select_user')}
+            </label>
+            <input
+              className="select-item"
+              id={`select-user-${user.email}`}
+              type="checkbox"
+              checked={selected}
+              onChange={e => handleSelectUser(e, user)}
+            />
+          </>
+        )}
+      </td>
       <td className="cell-email">
-        <label htmlFor={`select-user-${user.email}`} className="sr-only">
-          {t('select_user')}
-        </label>
-        <input
-          className="select-item"
-          id={`select-user-${user.email}`}
-          type="checkbox"
-          checked={selected}
-          onChange={e => handleSelectUser(e, user)}
-        />
         <span>
           {user.email}
           {user.invite ? (
diff --git a/services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx b/services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx
index 08d8679552..d0dcab9811 100644
--- a/services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx
+++ b/services/web/frontend/js/features/group-management/components/managed-users/managed-users-list.tsx
@@ -42,7 +42,7 @@ export default function ManagedUsersList({
               <table className="managed-users-table">
                 <thead>
                   <tr>
-                    <td className="cell-email">
+                    <td className="cell-checkbox">
                       <label htmlFor="select-all" className="sr-only">
                         {t('select_all')}
                       </label>
@@ -53,6 +53,8 @@ export default function ManagedUsersList({
                         onChange={handleSelectAllClick}
                         checked={selectedUsers.length === users.length}
                       />
+                    </td>
+                    <td className="cell-email">
                       <span className="header">{t('email')}</span>
                     </td>
                     <td className="cell-name">
diff --git a/services/web/frontend/stylesheets/components/group-members.less b/services/web/frontend/stylesheets/components/group-members.less
index 62d89245c6..e4a8bb381a 100644
--- a/services/web/frontend/stylesheets/components/group-members.less
+++ b/services/web/frontend/stylesheets/components/group-members.less
@@ -103,8 +103,12 @@
     }
   }
 
+  .cell-checkbox {
+    width: 5%;
+  }
+
   .cell-email {
-    width: 50%;
+    width: 45%;
   }
 
   .cell-name {
@@ -134,8 +138,12 @@
   }
 
   @media (min-width: @screen-xs) {
+    .cell-checkbox {
+      width: 5%;
+    }
+
     .cell-email {
-      width: 40%;
+      width: 35%;
     }
 
     .cell-name {
@@ -160,8 +168,12 @@
   }
 
   @media (min-width: @screen-lg) {
+    .cell-checkbox {
+      width: 5%;
+    }
+
     .cell-email {
-      width: 50%;
+      width: 45%;
     }
 
     .cell-name {
diff --git a/services/web/test/frontend/features/group-management/components/managed-users/managed-group-members.spec.tsx b/services/web/test/frontend/features/group-management/components/managed-users/managed-group-members.spec.tsx
index 008c9e6b9a..8ce8d5b86a 100644
--- a/services/web/test/frontend/features/group-management/components/managed-users/managed-group-members.spec.tsx
+++ b/services/web/test/frontend/features/group-management/components/managed-users/managed-group-members.spec.tsx
@@ -183,36 +183,11 @@ describe('group members, with managed users', function () {
     })
 
     cy.get('ul.managed-users-list table > tbody').within(() => {
-      // Select 'Claire Jennings', a managed user
+      // no checkbox should be shown for 'Claire Jennings', a managed user
       cy.get('tr:nth-child(3)').within(() => {
-        cy.get('.select-item').check()
+        cy.get('.select-item').should('not.exist')
       })
     })
-
-    cy.get('.page-header').within(() => {
-      cy.findByRole('button', { name: 'Remove from group' }).should('not.exist')
-    })
-  })
-
-  it('does not show the remove-member button if any of the selected users are managed', function () {
-    cy.intercept('DELETE', `${PATHS.removeMember}/abc123def456`, {
-      statusCode: 200,
-    })
-
-    cy.get('ul.managed-users-list table > tbody').within(() => {
-      // Select 'Claire Jennings', a managed user
-      cy.get('tr:nth-child(3)').within(() => {
-        cy.get('.select-item').check()
-      })
-      // Select another user
-      cy.get('tr:nth-child(2)').within(() => {
-        cy.get('.select-item').check()
-      })
-    })
-
-    cy.get('.page-header').within(() => {
-      cy.findByRole('button', { name: 'Remove from group' }).should('not.exist')
-    })
   })
 
   it('tries to remove a user and displays the error', function () {