From e6e07b4bf0546e73b8d5f9ae1d0460c7bed5df9b Mon Sep 17 00:00:00 2001
From: =?utf8?q?Gr=C3=A9goire=20Aubert?= <gregoire.aubert@sonarsource.com>
Date: Wed, 8 Aug 2018 12:34:05 +0200
Subject: [PATCH] SONAR-11098 Improve alignment of the documentation tooltip on
 the project branches admin page

---
 server/sonar-web/src/main/js/app/styles/init/misc.css    | 3 ++-
 server/sonar-web/src/main/js/app/styles/init/tables.css  | 3 +++
 .../src/main/js/apps/projectBranches/components/App.tsx  | 2 +-
 .../js/apps/projectBranches/components/BranchRow.tsx     | 4 ++--
 .../components/__tests__/__snapshots__/App-test.tsx.snap | 2 +-
 .../__tests__/__snapshots__/BranchRow-test.tsx.snap      | 9 ++++++---
 .../src/main/js/components/common/BranchStatus.tsx       | 6 ++++--
 7 files changed, 19 insertions(+), 10 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 0e70c8dba99..c0f7bd23abb 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
@@ -145,7 +145,8 @@ td.spacer-top {
   padding-top: 8px !important;
 }
 
-td.big-spacer-left {
+td.big-spacer-left,
+th.big-spacer-left {
   padding-left: 16px !important;
 }
 
diff --git a/server/sonar-web/src/main/js/app/styles/init/tables.css b/server/sonar-web/src/main/js/app/styles/init/tables.css
index 880cfc80bb1..19d4d93e8c3 100644
--- a/server/sonar-web/src/main/js/app/styles/init/tables.css
+++ b/server/sonar-web/src/main/js/app/styles/init/tables.css
@@ -275,6 +275,9 @@ table#project-history tr > td {
   position: absolute;
   z-index: var(--aboveNormalZIndex);
   right: -8px;
+}
+
+th > .table-cell-doc {
   top: 50%;
   margin-top: -6px;
 }
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx
index f0ec4ed6f3c..f73a5e17ecd 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx
@@ -138,7 +138,7 @@ export default class App extends React.PureComponent<Props, State> {
               <tr>
                 <th>{translate('branch')}</th>
                 <th className="thin nowrap text-right">{translate('status')}</th>
-                <th className="thin nowrap text-right">
+                <th className="thin nowrap text-right big-spacer-left">
                   {translate('branches.last_analysis_date')}
                 </th>
                 <th className="thin nowrap text-right">{translate('actions')}</th>
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchRow.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchRow.tsx
index 0d5e440a372..d1f6efa3ba1 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchRow.tsx
@@ -174,9 +174,9 @@ export default class BranchRow extends React.PureComponent<Props, State> {
           )}
         </td>
         <td className="thin nowrap text-right">
-          <BranchStatus branchLike={branchLike} />
+          <BranchStatus branchLike={branchLike} helpTooltipClassName="table-cell-doc" />
         </td>
-        <td className="thin nowrap text-right">
+        <td className="thin nowrap text-right big-spacer-left">
           {branchLike.analysisDate && <DateFromNow date={branchLike.analysisDate} />}
         </td>
         {this.renderActions()}
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap
index 2770b226fdc..9353a778e90 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -69,7 +69,7 @@ exports[`renders sorted list of branches 1`] = `
             status
           </th>
           <th
-            className="thin nowrap text-right"
+            className="thin nowrap text-right big-spacer-left"
           >
             branches.last_analysis_date
           </th>
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/BranchRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/BranchRow-test.tsx.snap
index d7e94ca3b2e..c3f9bb716f9 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/BranchRow-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/BranchRow-test.tsx.snap
@@ -29,10 +29,11 @@ exports[`renders main branch 1`] = `
           "name": "master",
         }
       }
+      helpTooltipClassName="table-cell-doc"
     />
   </td>
   <td
-    className="thin nowrap text-right"
+    className="thin nowrap text-right big-spacer-left"
   />
   <td
     className="thin nowrap text-right"
@@ -79,10 +80,11 @@ exports[`renders pull request 1`] = `
           "title": "Feature PR",
         }
       }
+      helpTooltipClassName="table-cell-doc"
     />
   </td>
   <td
-    className="thin nowrap text-right"
+    className="thin nowrap text-right big-spacer-left"
   />
   <td
     className="thin nowrap text-right"
@@ -132,10 +134,11 @@ exports[`renders short-living branch 1`] = `
           "type": "SHORT",
         }
       }
+      helpTooltipClassName="table-cell-doc"
     />
   </td>
   <td
-    className="thin nowrap text-right"
+    className="thin nowrap text-right big-spacer-left"
   >
     <DateFromNow
       date="2017-09-27T00:05:19+0000"
diff --git a/server/sonar-web/src/main/js/components/common/BranchStatus.tsx b/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
index 266d56ae238..8fc097af87f 100644
--- a/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
+++ b/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as classNames from 'classnames';
 import StatusIndicator from './StatusIndicator';
 import Level from '../ui/Level';
 import BugIcon from '../icons-components/BugIcon';
@@ -40,9 +41,10 @@ import './BranchStatus.css';
 interface Props {
   branchLike: BranchLike;
   concise?: boolean;
+  helpTooltipClassName?: string;
 }
 
-export default function BranchStatus({ branchLike, concise = false }: Props) {
+export default function BranchStatus({ branchLike, concise = false, helpTooltipClassName }: Props) {
   if (isShortLivingBranch(branchLike) || isPullRequest(branchLike)) {
     if (!branchLike.status) {
       return null;
@@ -88,7 +90,7 @@ export default function BranchStatus({ branchLike, concise = false }: Props) {
         </li>
         {shouldDisplayHelper && (
           <HelpTooltip
-            className="spacer-left"
+            className={classNames('spacer-left', helpTooltipClassName)}
             overlay={translateWithParameters(
               'branches.short_lived.quality_gate.description',
               totalIssues
-- 
2.39.5