SONAR-7402 highlight new code in source viewer

4 files changed, 23 insertions, 6 deletions

diff --git a/server/sonar-web/src/main/js/apps/code/components/SourceViewer.js b/server/sonar-web/src/main/js/apps/code/components/SourceViewer.js
index ddedbf2617d..0f0431a9e3d 100644
--- a/server/sonar-web/src/main/js/apps/code/components/SourceViewer.js
+++ b/server/sonar-web/src/main/js/apps/code/components/SourceViewer.js
@@ -20,7 +20,7 @@
 import React, { Component } from 'react';
 
 import BaseSourceViewer from '../../../components/source-viewer/main';
-
+import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
 
 export default class SourceViewer extends Component {
   componentDidMount () {
@@ -39,7 +39,7 @@ export default class SourceViewer extends Component {
     this.renderSourceViewer();
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     this.destroySourceViewer();
   }
 
@@ -47,12 +47,24 @@ export default class SourceViewer extends Component {
     this.sourceViewer = new BaseSourceViewer();
     this.sourceViewer.render().$el.appendTo(this.refs.container);
     this.sourceViewer.open(this.props.component.id);
+    this.sourceViewer.on('loaded', this.handleLoad.bind(this));
   }
 
   destroySourceViewer () {
     this.sourceViewer.destroy();
   }
 
+  handleLoad () {
+    const { period } = this.props;
+
+    if (period) {
+      const periodDate = getPeriodDate(period);
+      const periodLabel = getPeriodLabel(period);
+      console.log(periodDate, periodLabel);
+      this.sourceViewer.filterLinesByDate(periodDate, periodLabel);
+    }
+  }
+
   render () {
     return <div ref="container" className="code-source-viewer"></div>;
   }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDetails.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDetails.js
index 2bdc9143f20..e4e738870ed 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDetails.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDetails.js
@@ -133,6 +133,7 @@ export default class MeasureDetails extends React.Component {
               <MeasureDrilldown
                   metric={metric}
                   tab={tab}
+                  leakPeriod={leakPeriod}
                   leakPeriodDate={leakPeriodDate}>
                 {this.props.children}
               </MeasureDrilldown>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js
index 78872e291a7..d0f68256d3c 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js
@@ -89,13 +89,15 @@ export default class MeasureDrilldownList extends React.Component {
   }
 
   render () {
-    const { metric, store } = this.props;
+    const { metric, store, leakPeriod } = this.props;
     const { components, selected, fetching } = store.list;
 
     if (fetching) {
       return <Spinner/>;
     }
 
+    const sourceViewerPeriod = metric.key.indexOf('new_') === 0 && !!leakPeriod ? leakPeriod : null;
+
     return (
         <div className="measure-details-plain-list">
           <MeasureDrilldownComponents
@@ -106,7 +108,7 @@ export default class MeasureDrilldownList extends React.Component {
 
           {selected && (
               <div className="measure-details-viewer">
-                <SourceViewer component={selected}/>
+                <SourceViewer component={selected} period={sourceViewerPeriod}/>
               </div>
           )}
         </div>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js
index 0f925cc2f42..f6da317ad5b 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js
@@ -97,7 +97,7 @@ export default class MeasureDrilldownTree extends React.Component {
   }
 
   render () {
-    const { metric, store } = this.props;
+    const { metric, store, leakPeriod } = this.props;
     const { components, selected, breadcrumbs, fetching } = store.tree;
     const parent = breadcrumbs.length > 1 ? breadcrumbs[breadcrumbs.length - 2] : null;
 
@@ -105,6 +105,8 @@ export default class MeasureDrilldownTree extends React.Component {
       return <Spinner/>;
     }
 
+    const sourceViewerPeriod = metric.key.indexOf('new_') === 0 && !!leakPeriod ? leakPeriod : null;
+
     return (
         <div className="measure-details-tree">
           <MeasureDrilldownComponents
@@ -116,7 +118,7 @@ export default class MeasureDrilldownTree extends React.Component {
 
           {selected && (
               <div className="measure-details-viewer">
-                <SourceViewer component={selected}/>
+                <SourceViewer component={selected} period={sourceViewerPeriod}/>
               </div>
           )}
         </div>