SONAR-11098 Improve alignment of the documentation tooltip on the project branches...

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 0e70c8dba9905e8689c047313c9659114065ec3c..c0f7bd23abb49a4d0bc4f8c52a0a40e77a23db41 100644 (file)
--- 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 880cfc80bb1d9811e71b126893761782c4bb58df..19d4d93e8c31ebcae7be3c18a0640b1706c7048d 100644 (file)
--- 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 f0ec4ed6f3cb33bfc66d54404b305630095fff4e..f73a5e17ecd9c7e7e99a817a96b1e81602906b6a 100644 (file)
--- 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 0d5e440a37216ddca91d227264c1a98b85cad07d..d1f6efa3ba1dd8947e74d2b9fa2f3415c00be29b 100644 (file)
--- 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 2770b226fdcc23ecff7db552434e3d57f6d47257..9353a778e904c91eb3519e861cfd0e3bdbab0d2e 100644 (file)
--- 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 d7e94ca3b2ecc02232107a4a58a2df5b0645a0e1..c3f9bb716f977aca9670ae63402d8fdf7f7e112a 100644 (file)
--- 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 266d56ae238ff07a6875af232803891df455332f..8fc097af87f17b4430a4188bdee48ccb6ff42f19 100644 (file)
--- 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