better rendering of long versions

8 files changed, 96 insertions, 25 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
index 43540593843..1a2b4bd1cd8 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
@@ -21,7 +21,9 @@ import * as React from 'react';
 import BranchStatus from '../../../../components/common/BranchStatus';
 import { Branch, Component } from '../../../types';
 import DateTimeFormatter from '../../../../components/intl/DateTimeFormatter';
+import Tooltip from '../../../../components/controls/Tooltip';
 import { isShortLivingBranch } from '../../../../helpers/branches';
+import { translate } from '../../../../helpers/l10n';
 
 interface Props {
   branch?: Branch;
@@ -41,7 +43,17 @@ export default function ComponentNavMeta(props: Props) {
   }
 
   if (props.component.version && !shortBranch) {
-    metaList.push(<li key="version">Version {props.component.version}</li>);
+    metaList.push(
+      <li key="version">
+        <Tooltip
+          overlay={`${translate('version')} ${props.component.version}`}
+          mouseEnterDelay={0.5}>
+          <span className="text-limited">
+            {translate('version')} {props.component.version}
+          </span>
+        </Tooltip>
+      </li>
+    );
   }
 
   return (
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
index 905f83959b1..a1dd339dfce 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
@@ -13,8 +13,19 @@ exports[`renders meta for long-living branch 1`] = `
       />
     </li>
     <li>
-      Version 
-      0.0.1
+      <Tooltip
+        mouseEnterDelay={0.5}
+        overlay="version 0.0.1"
+        placement="bottom"
+      >
+        <span
+          className="text-limited"
+        >
+          version
+           
+          0.0.1
+        </span>
+      </Tooltip>
     </li>
   </ul>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/events/Event.js b/server/sonar-web/src/main/js/apps/overview/events/Event.js
index becf8b33e56..fa1b09e0af3 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/Event.js
+++ b/server/sonar-web/src/main/js/apps/overview/events/Event.js
@@ -27,7 +27,11 @@ export default function Event(props /*: { event: EventType } */) {
   const { event } = props;
 
   if (event.category === 'VERSION') {
-    return <span className="overview-analysis-event badge">{props.event.name}</span>;
+    return (
+      <Tooltip overlay={`${translate('version')} ${props.event.name}`} mouseEnterDelay={0.5}>
+        <span className="overview-analysis-event badge">{props.event.name}</span>
+      </Tooltip>
+    );
   }
 
   return (
diff --git a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap
index b14322d6f2a..f6b5bdfc0e6 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap
@@ -1,11 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render a version correctly 1`] = `
-<span
-  className="overview-analysis-event badge"
+<Tooltip
+  mouseEnterDelay={0.5}
+  overlay="version 6.5-SNAPSHOT"
+  placement="bottom"
 >
-  6.5-SNAPSHOT
-</span>
+  <span
+    className="overview-analysis-event badge"
+  >
+    6.5-SNAPSHOT
+  </span>
+</Tooltip>
 `;
 
 exports[`should render an event correctly 1`] = `
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 10ee754e011..8dfefbd5d3c 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -397,11 +397,16 @@
 
 .overview-analysis-event.badge {
   vertical-align: middle;
+  /* 260px to match the sidebar width on project dashboard */
+  max-width: 260px;
   padding: 4px 14px;
+  box-sizing: border-box;
   border-radius: 2px;
   font-weight: bold;
   font-size: 12px;
   letter-spacing: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .overview-analysis-event + .overview-analysis-event {
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js
index 2b740b2004b..451abec9008 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js
@@ -23,6 +23,7 @@ import classNames from 'classnames';
 import { throttle } from 'lodash';
 import ProjectActivityAnalysis from './ProjectActivityAnalysis';
 import DateFormatter from '../../../components/intl/DateFormatter';
+import Tooltip from '../../../components/controls/Tooltip';
 import { translate } from '../../../helpers/l10n';
 import { toShortNotSoISOString } from '../../../helpers/dates';
 import {
@@ -187,7 +188,11 @@ export default class ProjectActivityAnalysesList extends React.PureComponent {
             <li key={version.key || 'noversion'}>
               {version.version && (
                 <div className={classNames('project-activity-version-badge', { first: idx === 0 })}>
-                  <span className="badge">{version.version}</span>
+                  <Tooltip
+                    overlay={`${translate('version')} ${version.version}`}
+                    mouseEnterDelay={0.5}>
+                    <span className="badge">{version.version}</span>
+                  </Tooltip>
                 </div>
               )}
               <ul className="project-activity-days-list">
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityAnalysesList-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityAnalysesList-test.js.snap
index 904f0c3a49d..f2a64234ead 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityAnalysesList-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityAnalysesList-test.js.snap
@@ -14,11 +14,17 @@ exports[`should correctly filter analyses by category 1`] = `
     <div
       className="project-activity-version-badge first"
     >
-      <span
-        className="badge"
+      <Tooltip
+        mouseEnterDelay={0.5}
+        overlay="version 6.4"
+        placement="bottom"
       >
-        6.4
-      </span>
+        <span
+          className="badge"
+        >
+          6.4
+        </span>
+      </Tooltip>
     </div>
     <ul
       className="project-activity-days-list"
@@ -84,11 +90,17 @@ exports[`should correctly filter analyses by date range 1`] = `
     <div
       className="project-activity-version-badge first"
     >
-      <span
-        className="badge"
+      <Tooltip
+        mouseEnterDelay={0.5}
+        overlay="version 6.5-SNAPSHOT"
+        placement="bottom"
       >
-        6.5-SNAPSHOT
-      </span>
+        <span
+          className="badge"
+        >
+          6.5-SNAPSHOT
+        </span>
+      </Tooltip>
     </div>
     <ul
       className="project-activity-days-list"
@@ -154,11 +166,17 @@ exports[`should render correctly 1`] = `
     <div
       className="project-activity-version-badge first"
     >
-      <span
-        className="badge"
+      <Tooltip
+        mouseEnterDelay={0.5}
+        overlay="version 6.5-SNAPSHOT"
+        placement="bottom"
       >
-        6.5-SNAPSHOT
-      </span>
+        <span
+          className="badge"
+        >
+          6.5-SNAPSHOT
+        </span>
+      </Tooltip>
     </div>
     <ul
       className="project-activity-days-list"
@@ -230,11 +248,17 @@ exports[`should render correctly 1`] = `
     <div
       className="project-activity-version-badge"
     >
-      <span
-        className="badge"
+      <Tooltip
+        mouseEnterDelay={0.5}
+        overlay="version 6.4"
+        placement="bottom"
       >
-        6.4
-      </span>
+        <span
+          className="badge"
+        >
+          6.4
+        </span>
+      </Tooltip>
     </div>
     <ul
       className="project-activity-days-list"
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
index a2327b5fb26..0df971b5158 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
@@ -273,10 +273,14 @@
 }
 
 .project-activity-version-badge .badge {
+  max-width: 385px;
   vertical-align: middle;
   padding: 4px 14px 4px 14px;
+  box-sizing: border-box;
   border-radius: 0 2px 2px 0;
   font-weight: bold;
   font-size: 12px;
   letter-spacing: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }