SONAR-12611 Fix badges alignment on QG page

4 files changed, 118 insertions, 16 deletions

diff --git a/server/sonar-web/src/main/js/app/styles/components/badges.css b/server/sonar-web/src/main/js/app/styles/components/badges.css
index af40a09aeb5..6a9a3c10d7c 100644
--- a/server/sonar-web/src/main/js/app/styles/components/badges.css
+++ b/server/sonar-web/src/main/js/app/styles/components/badges.css
@@ -42,12 +42,10 @@ a.badge {
   border-bottom: none;
 }
 
-.list-group-item > .badge,
 .list-group-item-heading > .badge {
   float: right;
   margin: 3px;
 }
-.list-group-item > .badge + .badge,
 .list-group-item-heading > .badge + .badge {
   margin-right: 5px;
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
index 7ada92f5d67..e773152c2d6 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
@@ -34,23 +34,15 @@ export default function List({ organization, qualityGates }: Props) {
       {qualityGates.map(qualityGate => (
         <Link
           activeClassName="active"
-          className="list-group-item"
+          className="list-group-item display-flex-center"
           data-id={qualityGate.id}
           key={qualityGate.id}
           to={getQualityGateUrl(String(qualityGate.id), organization)}>
-          <table>
-            <tbody>
-              <tr>
-                <td>{qualityGate.name}</td>
-                <td className="thin nowrap spacer-left text-right">
-                  {qualityGate.isDefault && <span className="badge">{translate('default')}</span>}
-                  {qualityGate.isBuiltIn && (
-                    <BuiltInQualityGateBadge className="little-spacer-left" />
-                  )}
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <span className="flex-1">{qualityGate.name}</span>
+          {qualityGate.isDefault && (
+            <span className="badge little-spacer-left">{translate('default')}</span>
+          )}
+          {qualityGate.isBuiltIn && <BuiltInQualityGateBadge className="little-spacer-left" />}
         </Link>
       ))}
     </div>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/List-test.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/List-test.tsx
new file mode 100644
index 00000000000..03de4e1e4b2
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/List-test.tsx
@@ -0,0 +1,39 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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 { mockQualityGate } from '../../../../helpers/testMocks';
+import List from '../List';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+function shallowRender() {
+  return shallow(
+    <List
+      qualityGates={[
+        mockQualityGate(),
+        mockQualityGate({ isBuiltIn: true }),
+        mockQualityGate({ isDefault: true })
+      ]}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/List-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/List-test.tsx.snap
new file mode 100644
index 00000000000..ab4398468dd
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/List-test.tsx.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<div
+  className="list-group"
+>
+  <Link
+    activeClassName="active"
+    className="list-group-item display-flex-center"
+    data-id={1}
+    key="1"
+    onlyActiveOnIndex={false}
+    style={Object {}}
+    to={
+      Object {
+        "pathname": "/quality_gates/show/1",
+      }
+    }
+  >
+    <span
+      className="flex-1"
+    >
+      qualitygate
+    </span>
+  </Link>
+  <Link
+    activeClassName="active"
+    className="list-group-item display-flex-center"
+    data-id={1}
+    key="1"
+    onlyActiveOnIndex={false}
+    style={Object {}}
+    to={
+      Object {
+        "pathname": "/quality_gates/show/1",
+      }
+    }
+  >
+    <span
+      className="flex-1"
+    >
+      qualitygate
+    </span>
+    <BuiltInQualityGateBadge
+      className="little-spacer-left"
+    />
+  </Link>
+  <Link
+    activeClassName="active"
+    className="list-group-item display-flex-center"
+    data-id={1}
+    key="1"
+    onlyActiveOnIndex={false}
+    style={Object {}}
+    to={
+      Object {
+        "pathname": "/quality_gates/show/1",
+      }
+    }
+  >
+    <span
+      className="flex-1"
+    >
+      qualitygate
+    </span>
+    <span
+      className="badge little-spacer-left"
+    >
+      default
+    </span>
+  </Link>
+</div>
+`;