SONAR-12796: Fix alignment and scoll for permission template. In addition fix consitency in the user permission w.r.t. grobal permission.

12 files changed, 141 insertions, 27 deletions

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index f0d3ca414c5..9dd45c38a90 100644
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -152,6 +152,18 @@ th.hide-overflow {
   padding-top: calc(var(--gridSize) / 2) !important;
 }
 
+.little-padded-right {
+  padding-right: calc(var(--gridSize) / 2) !important;
+}
+
+.little-padded-bottom {
+  padding-bottom: calc(var(--gridSize) / 2) !important;
+}
+
+.little-padded-left {
+  padding-left: calc(var(--gridSize) / 2) !important;
+}
+
 .big-padded-top {
   padding-top: calc(2 * var(--gridSize));
 }
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.tsx
index 73a7e55c956..ae00435f1b4 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/ListHeader.tsx
@@ -44,7 +44,9 @@ export default class ListHeader extends React.PureComponent<Props> {
 
   render() {
     const cells = this.props.permissions.map(permission => (
-      <th className="permission-column" key={permission.key}>
+      <th
+        className="permission-column little-padding-left little-padding-right"
+        key={permission.key}>
         <div className="permission-column-inner">
           <span className="text-middle">{translate('projects_role', permission.key)}</span>
           <HelpTooltip className="spacer-left" overlay={this.renderTooltip(permission)} />
@@ -55,9 +57,11 @@ export default class ListHeader extends React.PureComponent<Props> {
     return (
       <thead>
         <tr>
-          <th>&nbsp;</th>
+          <th className="little-padding-left little-padding-right">&nbsp;</th>
           {cells}
-          <th className="thin nowrap text-right">&nbsp;</th>
+          <th className="thin nowrap text-right little-padding-left little-padding-right">
+            &nbsp;
+          </th>
         </tr>
       </thead>
     );
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/ListItem.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/ListItem.tsx
index e81d1cfc6c6..9a5012783a7 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/ListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/ListItem.tsx
@@ -40,7 +40,7 @@ export default function ListItem(props: Props) {
 
       {permissions}
 
-      <td className="nowrap thin text-right">
+      <td className="nowrap thin text-right text-top little-padding-left little-padding-right">
         <ActionsCell
           organization={props.organization}
           permissionTemplate={props.template}
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/NameCell.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/NameCell.tsx
index dd4b383a215..bb8c91e73f8 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/NameCell.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/NameCell.tsx
@@ -32,7 +32,7 @@ export default function NameCell({ template, organization }: Props) {
     : '/permission_templates';
 
   return (
-    <td>
+    <td className="little-padding-left little-padding-right">
       <Link to={{ pathname, query: { id: template.id } }}>
         <strong className="js-name">{template.name}</strong>
       </Link>
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.tsx
index 77612ab9caa..45867520958 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/PermissionCell.tsx
@@ -33,7 +33,7 @@ interface Props {
 
 export default function PermissionCell({ permission: p }: Props) {
   return (
-    <td className="permission-column" data-permission={p.key}>
+    <td className="permission-column little-padding-left little-padding-right">
       <div className="permission-column-inner">
         <ul>
           {p.withProjectCreator && (
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/ListItem-test.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/ListItem-test.tsx
new file mode 100644
index 00000000000..ee94600fb36
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/ListItem-test.tsx
@@ -0,0 +1,44 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import ListItem from '../ListItem';
+
+it('render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+function shallowRender() {
+  return shallow(
+    <ListItem
+      key="1"
+      organization={undefined}
+      refresh={async () => {}}
+      template={{
+        id: '1',
+        createdAt: '2020-01-01',
+        name: 'test',
+        defaultFor: [],
+        permissions: []
+      }}
+      topQualifiers={[]}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/__snapshots__/ListItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/__snapshots__/ListItem-test.tsx.snap
new file mode 100644
index 00000000000..cce4308092e
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/__snapshots__/ListItem-test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render correctly 1`] = `
+<tr
+  data-id="1"
+  data-name="test"
+>
+  <NameCell
+    template={
+      Object {
+        "createdAt": "2020-01-01",
+        "defaultFor": Array [],
+        "id": "1",
+        "name": "test",
+        "permissions": Array [],
+      }
+    }
+  />
+  <td
+    className="nowrap thin text-right text-top little-padding-left little-padding-right"
+  >
+    <withRouter(ActionsCell)
+      permissionTemplate={
+        Object {
+          "createdAt": "2020-01-01",
+          "defaultFor": Array [],
+          "id": "1",
+          "name": "test",
+          "permissions": Array [],
+        }
+      }
+      refresh={[Function]}
+      topQualifiers={Array []}
+    />
+  </td>
+</tr>
+`;
diff --git a/server/sonar-web/src/main/js/apps/permissions/styles.css b/server/sonar-web/src/main/js/apps/permissions/styles.css
index fca51c63b42..dc18e18cda4 100644
--- a/server/sonar-web/src/main/js/apps/permissions/styles.css
+++ b/server/sonar-web/src/main/js/apps/permissions/styles.css
@@ -22,7 +22,6 @@
 }
 
 .permissions-table .permission-column-inner {
-  display: inline-block;
   width: 100px;
 }
 
diff --git a/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx b/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
index 6bc2236c286..c54d7b1e9c2 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
@@ -53,22 +53,22 @@ export default class UserListItem extends React.PureComponent<Props, State> {
 
     return (
       <tr>
-        <td className="thin nowrap">
+        <td className="thin nowrap text-middle">
           <Avatar hash={user.avatar} name={user.name} size={36} />
         </td>
         <UserListItemIdentity identityProvider={identityProvider} user={user} />
-        <td>
+        <td className="thin nowrap text-middle">
           <UserScmAccounts scmAccounts={user.scmAccounts || []} />
         </td>
-        <td>
+        <td className="thin nowrap text-middle">
           <DateFromNowHourPrecision date={user.lastConnectionDate} />
         </td>
         {!organizationsEnabled && (
-          <td>
+          <td className="thin nowrap text-middle">
             <UserGroups groups={user.groups || []} onUpdateUsers={onUpdateUsers} user={user} />
           </td>
         )}
-        <td>
+        <td className="thin nowrap text-middle">
           {user.tokensCount}
           <ButtonIcon
             className="js-user-tokens spacer-left button-small"
@@ -77,7 +77,7 @@ export default class UserListItem extends React.PureComponent<Props, State> {
             <BulletListIcon />
           </ButtonIcon>
         </td>
-        <td className="thin nowrap text-right">
+        <td className="thin nowrap text-right text-middle">
           <UserActions
             isCurrentUser={this.props.isCurrentUser}
             onUpdateUsers={onUpdateUsers}
diff --git a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
index c1a17f834c7..27543ac8b02 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
@@ -29,7 +29,7 @@ export interface Props {
 
 export default function UserListItemIdentity({ identityProvider, user }: Props) {
   return (
-    <td>
+    <td className="text-middle">
       <div>
         <strong className="js-user-name">{user.name}</strong>
         <span className="js-user-login note little-spacer-left">{user.login}</span>
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItem-test.tsx.snap
index 8905a4b99af..e0649832c3e 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItem-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`should render correctly 1`] = `
 <tr>
   <td
-    className="thin nowrap"
+    className="thin nowrap text-middle"
   >
     <Connect(Avatar)
       name="One"
@@ -22,17 +22,23 @@ exports[`should render correctly 1`] = `
       }
     }
   />
-  <td>
+  <td
+    className="thin nowrap text-middle"
+  >
     <UserScmAccounts
       scmAccounts={Array []}
     />
   </td>
-  <td>
+  <td
+    className="thin nowrap text-middle"
+  >
     <DateFromNowHourPrecision
       date="2019-01-18T15:06:33+0100"
     />
   </td>
-  <td>
+  <td
+    className="thin nowrap text-middle"
+  >
     <UserGroups
       groups={Array []}
       onUpdateUsers={[MockFunction]}
@@ -48,7 +54,9 @@ exports[`should render correctly 1`] = `
       }
     />
   </td>
-  <td>
+  <td
+    className="thin nowrap text-middle"
+  >
     <ButtonIcon
       className="js-user-tokens spacer-left button-small"
       onClick={[Function]}
@@ -58,7 +66,7 @@ exports[`should render correctly 1`] = `
     </ButtonIcon>
   </td>
   <td
-    className="thin nowrap text-right"
+    className="thin nowrap text-right text-middle"
   >
     <UserActions
       isCurrentUser={false}
@@ -81,7 +89,7 @@ exports[`should render correctly 1`] = `
 exports[`should render correctly without last connection date 1`] = `
 <tr>
   <td
-    className="thin nowrap"
+    className="thin nowrap text-middle"
   >
     <Connect(Avatar)
       name="One"
@@ -100,17 +108,23 @@ exports[`should render correctly without last connection date 1`] = `
       }
     }
   />
-  <td>
+  <td
+    className="thin nowrap text-middle"
+  >
     <UserScmAccounts
       scmAccounts={Array []}
     />
   </td>
-  <td>
+  <td
+    className="thin nowrap text-middle"
+  >
     <DateFromNowHourPrecision
       date="2019-01-18T15:06:33+0100"
     />
   </td>
-  <td>
+  <td
+    className="thin nowrap text-middle"
+  >
     <UserGroups
       groups={Array []}
       onUpdateUsers={[MockFunction]}
@@ -126,7 +140,9 @@ exports[`should render correctly without last connection date 1`] = `
       }
     />
   </td>
-  <td>
+  <td
+    className="thin nowrap text-middle"
+  >
     <ButtonIcon
       className="js-user-tokens spacer-left button-small"
       onClick={[Function]}
@@ -136,7 +152,7 @@ exports[`should render correctly without last connection date 1`] = `
     </ButtonIcon>
   </td>
   <td
-    className="thin nowrap text-right"
+    className="thin nowrap text-right text-middle"
   >
     <UserActions
       isCurrentUser={false}
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItemIdentity-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItemIdentity-test.tsx.snap
index c9d65154d56..c6b01bdea01 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItemIdentity-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserListItemIdentity-test.tsx.snap
@@ -36,7 +36,9 @@ exports[`#ExternalProvider should render the user external provider and identity
 `;
 
 exports[`#UserListItemIdentity should render correctly 1`] = `
-<td>
+<td
+  className="text-middle"
+>
   <div>
     <strong
       className="js-user-name"