SONAR-7143 fix tooltips, improve rendering of long names

diff --git a/server/sonar-web/src/main/js/apps/code/components/Component.js b/server/sonar-web/src/main/js/apps/code/components/Component.js
index 00a752cb591a41ba7ec324ba74fd474e5d0d0372..638088b5adacb889016242c62bc96192c15c171d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/components/Component.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Component.js
@@ -12,7 +12,7 @@ const Component = ({ component, coverageMetric, onBrowse }) => (
           <ComponentDetach component={component}/>
         </span>
       </td>
-      <td>
+      <td className="code-name-cell">
         <ComponentName
             component={component}
             onBrowse={onBrowse}/>

diff --git a/server/sonar-web/src/main/js/apps/code/components/Components.js b/server/sonar-web/src/main/js/apps/code/components/Components.js
index 79a83c3e51acd03250bc894ce1adfabc0ac9b512..d2dffb6786966ade8d1fcb5eb1b86db5d874699b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/components/Components.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Components.js
@@ -19,6 +19,7 @@ const Components = ({ baseComponent, components, coverageMetric, onBrowse }) =>
       </thead>
       <tbody>
         <Component
+            key={baseComponent.uuid}
             component={baseComponent}
             coverageMetric={coverageMetric}/>
         <tr className="blank">
@@ -29,7 +30,7 @@ const Components = ({ baseComponent, components, coverageMetric, onBrowse }) =>
         {components.length ? (
             components.map(component => (
                 <Component
-                    key={component.key}
+                    key={component.uuid}
                     component={component}
                     coverageMetric={coverageMetric}
                     onBrowse={onBrowse}/>

diff --git a/server/sonar-web/src/main/js/apps/code/components/Truncated.js b/server/sonar-web/src/main/js/apps/code/components/Truncated.js
index cc58a7b79ff2800c991f1af3df82773149b6f8f2..ecf7bb87904095dfb5d7ca9fcc4fde7f7320a9a4 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/components/Truncated.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Truncated.js
@@ -4,7 +4,7 @@ import React from 'react';
 const Truncated = ({ children, title }) => (
     <span
         className="code-truncated"
-        title={title}
+        data-title={title}
         data-toggle="tooltip">
       {children}
     </span>

diff --git a/server/sonar-web/src/main/less/pages/code.less b/server/sonar-web/src/main/less/pages/code.less
index 8fda47825e6437db037cbc85ce7d56990656fff7..ec50b00aeffec2db0191c685b57774601414286a 100644 (file)
--- a/server/sonar-web/src/main/less/pages/code.less
+++ b/server/sonar-web/src/main/less/pages/code.less
@@ -38,6 +38,14 @@
   .text-ellipsis;
 }
 
+.code-name-cell {
+  max-width: 0;
+}
+
+.code-name-cell .code-truncated {
+  max-width: 100%;
+}
+
 .code-source-viewer .source-viewer-header-component {
   visibility: hidden;
 }

diff --git a/server/sonar-web/tests/apps/code/components-test.js b/server/sonar-web/tests/apps/code/components-test.js
index 2469bf268702353d3cd1937670b42c06af8e95bf..5048b2fa8bc6c28307ed92cf7bd94a8c7205e219 100644 (file)
--- a/server/sonar-web/tests/apps/code/components-test.js
+++ b/server/sonar-web/tests/apps/code/components-test.js
@@ -278,7 +278,7 @@ describe('Code :: Components', () => {
           .to.equal('span');
       expect(output.text())
           .to.equal('123');
-      expect(output.prop('title'))
+      expect(output.prop('data-title'))
           .to.equal('ABC');
     });
   });