SONAR-20366 Adjust quality profile permission list to match latest figma design

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissions.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissions.tsx
index f9cadf77ec0e616bafcaabde827bbf7ae3045561..3f6f9aa31f501d914618e5df9e56d4ba60070fa2 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissions.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissions.tsx
@@ -17,7 +17,15 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { ButtonSecondary, Note, Spinner, SubTitle } from 'design-system';
+import {
+  ButtonSecondary,
+  CellComponent,
+  Note,
+  Spinner,
+  SubTitle,
+  Table,
+  TableRow,
+} from 'design-system';
 import { sortBy, uniqBy } from 'lodash';
 import * as React from 'react';
 import {
@@ -143,30 +151,40 @@ export default class ProfilePermissions extends React.PureComponent<Props, State
       <section aria-label={translate('permissions.page')}>
         <div className="sw-mb-6">
           <SubTitle className="sw-mb-0">{translate('permissions.page')}</SubTitle>
-          <Note as="p">{translate('quality_profiles.default_permissions')}</Note>
+          <Note className="sw-mt-6" as="p">
+            {translate('quality_profiles.default_permissions')}
+          </Note>
         </div>
 
         <Spinner loading={loading}>
-          <ul className="sw-flex sw-flex-col sw-gap-4 sw-max-w-[238px]">
+          <Table columnCount={2} columnWidths={['100%', '0%']}>
             {this.state.users &&
               sortBy(this.state.users, 'name').map((user) => (
-                <ProfilePermissionsUser
-                  key={user.login}
-                  onDelete={this.handleUserDelete}
-                  profile={this.props.profile}
-                  user={user}
-                />
+                <TableRow key={user.login}>
+                  <CellComponent>
+                    <ProfilePermissionsUser
+                      key={user.login}
+                      onDelete={this.handleUserDelete}
+                      profile={this.props.profile}
+                      user={user}
+                    />
+                  </CellComponent>
+                </TableRow>
               ))}
             {this.state.groups &&
               sortBy(this.state.groups, 'name').map((group) => (
-                <ProfilePermissionsGroup
-                  group={group}
-                  key={group.name}
-                  onDelete={this.handleGroupDelete}
-                  profile={this.props.profile}
-                />
+                <TableRow key={group.name}>
+                  <CellComponent>
+                    <ProfilePermissionsGroup
+                      group={group}
+                      key={group.name}
+                      onDelete={this.handleGroupDelete}
+                      profile={this.props.profile}
+                    />
+                  </CellComponent>
+                </TableRow>
               ))}
-          </ul>
+          </Table>
           <div className="sw-mt-6">
             <ButtonSecondary onClick={this.handleAddUserButtonClick}>
               {translate('quality_profiles.grant_permissions_to_more_users')}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
index 96e4b46b076b429cbefdf72eda52bf648bdfb8e5..85dd7fbf67a7f991428892efc36ad52d076ae85d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
@@ -101,12 +101,13 @@ export default class ProfilePermissionsGroup extends React.PureComponent<Props,
     const { group } = this.props;
 
     return (
-      <li className="sw-flex sw-items-center sw-justify-between sw-mb-4">
-        <div className="sw-flex sw-items-center sw-truncate">
+      <div className="sw-flex sw-items-center sw-justify-between">
+        <div className="sw-flex sw-truncate">
           <GenericAvatar
             Icon={UserGroupIcon}
-            className="sw-mr-3 sw-grow-0 sw-shrink-0"
+            className="sw-mt-1/2 sw-mr-3 sw-grow-0 sw-shrink-0"
             name={group.name}
+            size="xs"
           />
           <strong className="sw-body-sm-highlight sw-truncate fs-mask">{group.name}</strong>
         </div>
@@ -128,7 +129,7 @@ export default class ProfilePermissionsGroup extends React.PureComponent<Props,
             {this.renderDeleteModal}
           </SimpleModal>
         )}
-      </li>
+      </div>
     );
   }
 }

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
index 7b351b4a7868407b04b26b56342294a97a80b5d4..23f67fb5366abd65d7acde6a91cc6fe5b3558502 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
@@ -105,9 +105,14 @@ export default class ProfilePermissionsUser extends React.PureComponent<Props, S
     const { user } = this.props;
 
     return (
-      <li className="sw-flex sw-items-center sw-justify-between sw-mb-4">
-        <div className="sw-flex sw-items-center sw-truncate">
-          <Avatar className="sw-mr-3 sw-grow-0 sw-shrink-0" hash={user.avatar} name={user.name} />
+      <div className="sw-flex sw-items-center sw-justify-between">
+        <div className="sw-flex sw-truncate">
+          <Avatar
+            className="sw-mt-1/2 sw-mr-3 sw-grow-0 sw-shrink-0"
+            hash={user.avatar}
+            name={user.name}
+            size="xs"
+          />
           <div className="sw-truncate fs-mask">
             <strong className="sw-body-sm-highlight">{user.name}</strong>
             <Note className="sw-block">{user.login}</Note>
@@ -131,7 +136,7 @@ export default class ProfilePermissionsUser extends React.PureComponent<Props, S
             {this.renderDeleteModal}
           </SimpleModal>
         )}
-      </li>
+      </div>
     );
   }
 }