SONAR-9389 Better highlight uncovered code in leak period

5 files changed, 35 insertions, 57 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/CodeView.js b/server/sonar-web/src/main/js/apps/component-measures/drilldown/CodeView.js
index 8fcc29caadd..a5a09dbba0a 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/CodeView.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/CodeView.js
@@ -21,8 +21,6 @@
 import React from 'react';
 import key from 'keymaster';
 import SourceViewer from '../../../components/SourceViewer/SourceViewer';
-import { isDiffMetric } from '../../../helpers/measures';
-import { parseDate } from '../../../helpers/dates';
 /*:: import type { ComponentEnhanced, Paging, Period } from '../types'; */
 /*:: import type { Metric } from '../../../store/metrics/actions'; */
 
@@ -83,21 +81,7 @@ export default class CodeView extends React.PureComponent {
   };
 
   render() {
-    const { branch, component, leakPeriod } = this.props;
-    const leakPeriodDate =
-      isDiffMetric(this.props.metric.key) && leakPeriod != null ? parseDate(leakPeriod.date) : null;
-
-    let filterLine;
-    if (leakPeriodDate != null) {
-      filterLine = line => {
-        if (line.scmDate) {
-          const scmDate = parseDate(line.scmDate);
-          return scmDate >= leakPeriodDate;
-        } else {
-          return false;
-        }
-      };
-    }
-    return <SourceViewer branch={branch} component={component.key} filterLine={filterLine} />;
+    const { branch, component } = this.props;
+    return <SourceViewer branch={branch} component={component.key} />;
   }
 }
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.js b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.js
index c4c0cfc0c80..08311dfc7b3 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.js
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerBase.js
@@ -39,10 +39,12 @@ import {
 /*:: import type { LinearIssueLocation } from './helpers/indexing'; */
 import {
   getComponentForSourceViewer,
+  getComponentData,
   getSources,
   getDuplications,
   getTests
 } from '../../api/components';
+import { parseDate } from '../../helpers/dates';
 import { translate } from '../../helpers/l10n';
 import { scrollToElement } from '../../helpers/scrolling';
 /*:: import type { SourceLine } from './types'; */
@@ -59,7 +61,6 @@ type Props = {
   displayAllIssues: boolean,
   displayIssueLocationsCount?: boolean;
   displayIssueLocationsLink?: boolean;
-  filterLine?: (line: SourceLine) => boolean,
   highlightedLine?: number,
   highlightedLocations?: Array<FlowLocation>,
   highlightedLocationMessage?: { index: number, text: string },
@@ -116,7 +117,13 @@ type State = {
 const LINES = 500;
 
 function loadComponent(key /*: string */, branch /*: string | void */) /*: Promise<*> */ {
-  return getComponentForSourceViewer(key, branch);
+  return Promise.all([
+    getComponentForSourceViewer(key, branch),
+    getComponentData(key, branch)
+  ]).then(([component, data]) => ({
+    ...component,
+    leakPeriodDate: data.leakPeriodDate && parseDate(data.leakPeriodDate)
+  }));
 }
 
 function loadSources(
@@ -580,6 +587,14 @@ export default class SourceViewerBase extends React.PureComponent {
     }
   };
 
+  handleFilterLine = (line /*: SourceLine */) => {
+    const { component } = this.state;
+    const leakPeriodDate = component && component.leakPeriodDate;
+    return leakPeriodDate
+      ? line.scmDate != null && parseDate(line.scmDate) >= leakPeriodDate
+      : false;
+  };
+
   renderCode(sources /*: Array<SourceLine> */) {
     const hasSourcesBefore = sources.length > 0 && sources[0].line > 1;
     return (
@@ -592,7 +607,7 @@ export default class SourceViewerBase extends React.PureComponent {
         duplicatedFiles={this.state.duplicatedFiles}
         hasSourcesBefore={hasSourcesBefore}
         hasSourcesAfter={this.state.hasSourcesAfter}
-        filterLine={this.props.filterLine}
+        filterLine={this.handleFilterLine}
         highlightedLine={this.state.highlightedLine}
         highlightedLocations={this.props.highlightedLocations}
         highlightedLocationMessage={this.props.highlightedLocationMessage}
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.js b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.js
index 617e45710cb..779b7a685a9 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.js
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.js
@@ -111,7 +111,6 @@ export default class SourceViewerCode extends React.PureComponent {
     index /*: number */,
     displayCoverage /*: boolean */,
     displayDuplications /*: boolean */,
-    displayFiltered /*: boolean */,
     displayIssues /*: boolean */
   ) => {
     const { filterLine, highlightedLocationMessage, selectedIssue, sources } = this.props;
@@ -152,7 +151,6 @@ export default class SourceViewerCode extends React.PureComponent {
         displayAllIssues={this.props.displayAllIssues}
         displayCoverage={displayCoverage}
         displayDuplications={displayDuplications}
-        displayFiltered={displayFiltered}
         displayIssues={displayIssues}
         displayIssueLocationsCount={this.props.displayIssueLocationsCount}
         displayIssueLocationsLink={this.props.displayIssueLocationsLink}
@@ -195,7 +193,6 @@ export default class SourceViewerCode extends React.PureComponent {
 
     const hasCoverage = sources.some(s => s.coverageStatus != null);
     const hasDuplications = sources.some(s => s.duplicated);
-    const displayFiltered = this.props.filterLine != null;
     const hasIssues = this.props.issues.length > 0;
 
     const hasFileIssues = hasIssues && this.props.issues.some(issue => !issue.textRange);
@@ -224,16 +221,9 @@ export default class SourceViewerCode extends React.PureComponent {
         <table className="source-table">
           <tbody>
             {hasFileIssues &&
-              this.renderLine(
-                ZERO_LINE,
-                -1,
-                hasCoverage,
-                hasDuplications,
-                displayFiltered,
-                hasIssues
-              )}
+              this.renderLine(ZERO_LINE, -1, hasCoverage, hasDuplications, hasIssues)}
             {sources.map((line, index) =>
-              this.renderLine(line, index, hasCoverage, hasDuplications, displayFiltered, hasIssues)
+              this.renderLine(line, index, hasCoverage, hasDuplications, hasIssues)
             )}
           </tbody>
         </table>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/Line.js b/server/sonar-web/src/main/js/components/SourceViewer/components/Line.js
index 73906c1ff2e..216f6ef65c1 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/Line.js
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/Line.js
@@ -37,7 +37,6 @@ type Props = {|
   displayAllIssues: boolean,
   displayCoverage: boolean,
   displayDuplications: boolean,
-  displayFiltered: boolean,
   displayIssues: boolean,
   displayIssueLocationsCount?: boolean;
   displayIssueLocationsLink?: boolean;
@@ -97,11 +96,13 @@ export default class Line extends React.PureComponent {
   };
 
   render() {
-    const { line, duplications, duplicationsCount, filtered } = this.props;
+    const { line, duplications, displayCoverage, duplicationsCount, filtered } = this.props;
     const className = classNames('source-line', {
       'source-line-highlighted': this.props.highlighted,
-      'source-line-shadowed': filtered === false,
       'source-line-filtered': filtered === true,
+      'source-line-filtered-dark':
+        displayCoverage &&
+        (line.coverageStatus === 'uncovered' || line.coverageStatus === 'partially-covered'),
       'source-line-last': this.props.last
     });
 
@@ -142,12 +143,6 @@ export default class Line extends React.PureComponent {
           />
         )}
 
-        {this.props.displayFiltered && (
-          <td className="source-meta source-line-filtered-container" data-line-number={line.line}>
-            <div className="source-line-bar" />
-          </td>
-        )}
-
         <LineCode
           displayIssueLocationsCount={this.props.displayIssueLocationsCount}
           displayIssueLocationsLink={this.props.displayIssueLocationsLink}
diff --git a/server/sonar-web/src/main/less/components/source.less b/server/sonar-web/src/main/less/components/source.less
index c9a952d2a16..99a7a91cc08 100644
--- a/server/sonar-web/src/main/less/components/source.less
+++ b/server/sonar-web/src/main/less/components/source.less
@@ -48,7 +48,6 @@
   .source-line-coverage,
   .source-line-duplications,
   .source-line-duplications-extra,
-  .source-line-filtered-container,
   .source-line-scm {
     border-color: darken(@barBackgroundColor, 4%);
     background-color: darken(@barBackgroundColor, 4%);
@@ -66,26 +65,25 @@
   .source-line-coverage,
   .source-line-duplications,
   .source-line-duplications-extra,
-  .source-line-filtered-container,
   .source-line-scm {
-    border-color: #fdf190 !important;
-    background-color: #fdf190;
+    border-color: #c4dfec !important;
+    background-color: #c4dfec;
   }
 
   .source-line-code {
-    background-color: #fff8c2;
+    background-color: #d9edf7;
   }
 }
 
-.source-line-shadowed {
+.source-line-filtered {
   .source-line-code {
-    background-color: #f9f9f9;
+    background-color: #fbf3d5 !important;
   }
-}
 
-.source-line-filtered {
-  .source-line-filtered-container {
-    background-color: @blue !important;
+  &.source-line-filtered-dark {
+    .source-line-code {
+      background-color: #f9ebb7 !important;
+    }
   }
 }
 
@@ -199,10 +197,6 @@
   }
 }
 
-.source-line-filtered-container {
-  background-color: @barBackgroundColor;
-}
-
 .source-line-scm {
   padding: 0 5px;
   background-color: @barBackgroundColor;