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

6 files changed, 91 insertions, 6 deletions

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>
+`;