@@ -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"> |
@@ -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> |
@@ -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}/> | |||
)) |
@@ -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', () => { |