SONAR-7143 improve display of directories list

server/sonar-web/src/main/js/apps/code/components/Component.js

@@ -24,7 +24,7 @@ import ComponentMeasure from './ComponentMeasure';
 import ComponentDetach from './ComponentDetach';
 
 
-const Component = ({ component, coverageMetric, onBrowse }) => (
+const Component = ({ component, previous, coverageMetric, onBrowse }) => (
     <tr>
       <td className="thin nowrap">
         <span className="spacer-right">
@@ -34,6 +34,7 @@ const Component = ({ component, coverageMetric, onBrowse }) => (
       <td className="code-name-cell">
         <ComponentName
             component={component}
+            previous={previous}
             onBrowse={onBrowse}/>
       </td>
       <td className="thin nowrap text-right">

server/sonar-web/src/main/js/apps/code/components/ComponentName.js

@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import _ from 'underscore';
 import React from 'react';
 
 import Truncated from './Truncated';
@@ -32,13 +33,36 @@ function getTooltip (component) {
   }
 }
 
+function mostCommitPrefix (strings) {
+  var sortedStrings = strings.slice(0).sort(),
+      firstString = sortedStrings[0],
+      firstStringLength = firstString.length,
+      lastString = sortedStrings[sortedStrings.length - 1],
+      i = 0;
+  while (i < firstStringLength && firstString.charAt(i) === lastString.charAt(i)) {
+    i++;
+  }
+  var prefix = firstString.substr(0, i),
+      lastPrefixPart = _.last(prefix.split(/[\s\\\/]/));
+  return prefix.substr(0, prefix.length - lastPrefixPart.length);
+}
 
-const Component = ({ component, onBrowse }) => {
+
+const Component = ({ component, previous, onBrowse }) => {
   const handleClick = (e) => {
     e.preventDefault();
     onBrowse(component);
   };
 
+  const areBothDirs = component.qualifier === 'DIR' && previous && previous.qualifier === 'DIR';
+  const prefix = areBothDirs ? mostCommitPrefix([component.name + '/', previous.name + '/']) : '';
+  const name = prefix ? (
+      <span>
+        <span style={{ color: '#777' }}>{prefix}</span>
+        <span>{component.name.substr(prefix.length)}</span>
+      </span>
+  ) : component.name;
+
   return (
       <Truncated title={getTooltip(component)}>
         <QualifierIcon qualifier={component.qualifier}/>
@@ -47,11 +71,11 @@ const Component = ({ component, onBrowse }) => {
             <a
                 onClick={handleClick}
                 href="#">
-              {component.name}
+              {name}
             </a>
         ) : (
             <span>
-              {component.name}
+              {name}
             </span>
         )}
       </Truncated>

server/sonar-web/src/main/js/apps/code/components/Components.js

@@ -22,7 +22,6 @@ import React from 'react';
 import Component from './Component';
 import ComponentsEmpty from './ComponentsEmpty';
 import ComponentsHeader from './ComponentsHeader';
-import { translate } from '../../../helpers/l10n';
 
 
 const Components = ({ baseComponent, components, coverageMetric, onBrowse }) => (
@@ -41,10 +40,11 @@ const Components = ({ baseComponent, components, coverageMetric, onBrowse }) =>
       )}
       <tbody>
         {components.length ? (
-            components.map(component => (
+            components.map((component, index, list) => (
                 <Component
                     key={component.key}
                     component={component}
+                    previous={index > 0 ? list[index - 1] : null}
                     coverageMetric={coverageMetric}
                     onBrowse={onBrowse}/>
             ))

server/sonar-web/tests/apps/code/components-test.js

@@ -103,7 +103,7 @@ describe('Code :: Components', () => {
       expect(findings)
           .to.have.length(1);
       expect(findings.first().props())
-          .to.deep.equal({ component: exampleComponent, onBrowse: exampleOnBrowse });
+          .to.deep.equal({ component: exampleComponent, previous: undefined, onBrowse: exampleOnBrowse });
     });
 
     it('should render <ComponentMeasure/>s', () => {