From aa9e39294e44b5d69365264407c6a442ac76a23d Mon Sep 17 00:00:00 2001
From: Grégoire Aubert <gregoire.aubert@sonarsource.com>
Date: Fri, 4 Aug 2017 17:56:58 +0200
Subject: Do not display separators in the project activity page tooltips if
 there is no data

---
 .../projectActivity/components/GraphsTooltips.js   | 72 +++++++++++++---------
 .../components/GraphsTooltipsContentCoverage.js    | 18 ++++--
 .../components/GraphsTooltipsContentDuplication.js | 18 ++++--
 .../components/GraphsTooltipsContentEvents.js      | 14 +++--
 .../components/__tests__/GraphsTooltips-test.js    |  6 ++
 .../GraphsTooltipsContentCoverage-test.js          |  1 +
 .../GraphsTooltipsContentDuplication-test.js       |  1 +
 .../__tests__/GraphsTooltipsContentEvents-test.js  |  4 +-
 .../__snapshots__/GraphsTooltips-test.js.snap      | 36 +++++++++++
 9 files changed, 121 insertions(+), 49 deletions(-)

(limited to 'server/sonar-web/src/main/js/apps')

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js
index 8a60dd4e0c9..a64755f5b64 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js
@@ -47,6 +47,40 @@ const TOOLTIP_WIDTH = 250;
 export default class GraphsTooltips extends React.PureComponent {
   props: Props;
 
+  renderContent() {
+    const { tooltipIdx } = this.props;
+
+    return this.props.series.map((serie, idx) => {
+      const point = serie.data[tooltipIdx];
+      if (!point || (!point.y && point.y !== 0)) {
+        return null;
+      }
+      if (this.props.graph === DEFAULT_GRAPH) {
+        return (
+          <GraphsTooltipsContentIssues
+            key={serie.name}
+            measuresHistory={this.props.measuresHistory}
+            name={serie.name}
+            style={idx.toString()}
+            tooltipIdx={tooltipIdx}
+            translatedName={serie.translatedName}
+            value={this.props.formatValue(point.y)}
+          />
+        );
+      } else {
+        return (
+          <GraphsTooltipsContent
+            key={serie.name}
+            name={serie.name}
+            style={idx.toString()}
+            translatedName={serie.translatedName}
+            value={this.props.formatValue(point.y)}
+          />
+        );
+      }
+    });
+  }
+
   render() {
     const { events, measuresHistory, tooltipIdx } = this.props;
     const top = 30;
@@ -56,6 +90,8 @@ export default class GraphsTooltips extends React.PureComponent {
       left -= TOOLTIP_WIDTH;
       customClass = 'bubble-popup-right';
     }
+    const tooltipContent = this.renderContent().filter(Boolean);
+    const addSeparator = tooltipContent.length > 0;
     return (
       <BubblePopup customClass={customClass} position={{ top, left, width: TOOLTIP_WIDTH }}>
         <div className="project-activity-graph-tooltip">
@@ -64,47 +100,23 @@ export default class GraphsTooltips extends React.PureComponent {
           </div>
           <table className="width-100">
             <tbody>
-              {this.props.series.map((serie, idx) => {
-                const point = serie.data[tooltipIdx];
-                if (!point || (!point.y && point.y !== 0)) {
-                  return null;
-                }
-                if (this.props.graph === DEFAULT_GRAPH) {
-                  return (
-                    <GraphsTooltipsContentIssues
-                      key={serie.name}
-                      measuresHistory={measuresHistory}
-                      name={serie.name}
-                      style={idx.toString()}
-                      tooltipIdx={tooltipIdx}
-                      translatedName={serie.translatedName}
-                      value={this.props.formatValue(point.y)}
-                    />
-                  );
-                } else {
-                  return (
-                    <GraphsTooltipsContent
-                      key={serie.name}
-                      name={serie.name}
-                      style={idx.toString()}
-                      translatedName={serie.translatedName}
-                      value={this.props.formatValue(point.y)}
-                    />
-                  );
-                }
-              })}
+              {tooltipContent}
             </tbody>
             {this.props.graph === 'coverage' &&
               <GraphsTooltipsContentCoverage
+                addSeparator={addSeparator}
                 measuresHistory={measuresHistory}
                 tooltipIdx={tooltipIdx}
               />}
             {this.props.graph === 'duplications' &&
               <GraphsTooltipsContentDuplication
+                addSeparator={addSeparator}
                 measuresHistory={measuresHistory}
                 tooltipIdx={tooltipIdx}
               />}
-            {events && events.length > 0 && <GraphsTooltipsContentEvents events={events} />}
+            {events &&
+              events.length > 0 &&
+              <GraphsTooltipsContentEvents addSeparator={addSeparator} events={events} />}
           </table>
         </div>
       </BubblePopup>
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentCoverage.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentCoverage.js
index a9be3cdb64b..7ada640c64f 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentCoverage.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentCoverage.js
@@ -24,11 +24,16 @@ import { translate } from '../../../helpers/l10n';
 import type { MeasureHistory } from '../types';
 
 type Props = {
+  addSeparator: boolean,
   measuresHistory: Array<MeasureHistory>,
   tooltipIdx: number
 };
 
-export default function GraphsTooltipsContentCoverage({ measuresHistory, tooltipIdx }: Props) {
+export default function GraphsTooltipsContentCoverage({
+  addSeparator,
+  measuresHistory,
+  tooltipIdx
+}: Props) {
   const uncovered = measuresHistory.find(measure => measure.metric === 'uncovered_lines');
   const coverage = measuresHistory.find(measure => measure.metric === 'coverage');
   if (!uncovered || !uncovered.history[tooltipIdx] || !coverage || !coverage.history[tooltipIdx]) {
@@ -38,11 +43,12 @@ export default function GraphsTooltipsContentCoverage({ measuresHistory, tooltip
   const coverageValue = coverage.history[tooltipIdx].value;
   return (
     <tbody>
-      <tr>
-        <td className="project-activity-graph-tooltip-separator" colSpan="3">
-          <hr />
-        </td>
-      </tr>
+      {addSeparator &&
+        <tr>
+          <td className="project-activity-graph-tooltip-separator" colSpan="3">
+            <hr />
+          </td>
+        </tr>}
       {uncoveredValue &&
         <tr className="project-activity-graph-tooltip-line">
           <td
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentDuplication.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentDuplication.js
index 9a8813fa2f7..ed613969195 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentDuplication.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentDuplication.js
@@ -24,11 +24,16 @@ import { translate } from '../../../helpers/l10n';
 import type { MeasureHistory } from '../types';
 
 type Props = {
+  addSeparator: boolean,
   measuresHistory: Array<MeasureHistory>,
   tooltipIdx: number
 };
 
-export default function GraphsTooltipsContentDuplication({ measuresHistory, tooltipIdx }: Props) {
+export default function GraphsTooltipsContentDuplication({
+  addSeparator,
+  measuresHistory,
+  tooltipIdx
+}: Props) {
   const duplicationDensity = measuresHistory.find(
     measure => measure.metric === 'duplicated_lines_density'
   );
@@ -41,11 +46,12 @@ export default function GraphsTooltipsContentDuplication({ measuresHistory, tool
   }
   return (
     <tbody>
-      <tr>
-        <td className="project-activity-graph-tooltip-separator" colSpan="3">
-          <hr />
-        </td>
-      </tr>
+      {addSeparator &&
+        <tr>
+          <td className="project-activity-graph-tooltip-separator" colSpan="3">
+            <hr />
+          </td>
+        </tr>}
       <tr className="project-activity-graph-tooltip-line">
         <td
           colSpan="2"
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js
index 5cfe5bdce9b..d23ac08368f 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js
@@ -24,17 +24,19 @@ import { translate } from '../../../helpers/l10n';
 import type { Event } from '../types';
 
 type Props = {
+  addSeparator: boolean,
   events: Array<Event>
 };
 
-export default function GraphsTooltipsContentEvents({ events }: Props) {
+export default function GraphsTooltipsContentEvents({ addSeparator, events }: Props) {
   return (
     <tbody>
-      <tr>
-        <td className="project-activity-graph-tooltip-separator" colSpan="3">
-          <hr />
-        </td>
-      </tr>
+      {addSeparator &&
+        <tr>
+          <td className="project-activity-graph-tooltip-separator" colSpan="3">
+            <hr />
+          </td>
+        </tr>}
       <tr className="project-activity-graph-tooltip-line">
         <td colSpan="3">
           <span>
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltips-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltips-test.js
index ebb184701e7..34f50c3911a 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltips-test.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltips-test.js
@@ -94,3 +94,9 @@ it('should render correctly for random graphs', () => {
     )
   ).toMatchSnapshot();
 });
+
+it('should not add separators if not needed', () => {
+  expect(
+    shallow(<GraphsTooltips {...DEFAULT_PROPS} graph="coverage" series={[]} />)
+  ).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentCoverage-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentCoverage-test.js
index 8d1893f4b9a..ad85b484acf 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentCoverage-test.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentCoverage-test.js
@@ -63,6 +63,7 @@ const MEASURES_COVERAGE = [
 ];
 
 const DEFAULT_PROPS = {
+  addSeparator: true,
   measuresHistory: MEASURES_COVERAGE,
   tooltipIdx: 1
 };
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentDuplication-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentDuplication-test.js
index 13aa8853192..c0a69de2a06 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentDuplication-test.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentDuplication-test.js
@@ -37,6 +37,7 @@ const MEASURES_DUPLICATION = [
 ];
 
 const DEFAULT_PROPS = {
+  addSeparator: true,
   measuresHistory: MEASURES_DUPLICATION,
   tooltipIdx: 1
 };
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentEvents-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentEvents-test.js
index 0dc9d74cdb6..00157e5c3d8 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentEvents-test.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentEvents-test.js
@@ -35,5 +35,7 @@ const EVENTS = [
 ];
 
 it('should render correctly', () => {
-  expect(shallow(<GraphsTooltipsContentEvents events={EVENTS} />)).toMatchSnapshot();
+  expect(
+    shallow(<GraphsTooltipsContentEvents addSeparator={true} events={EVENTS} />)
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap
index 4458586fc1a..aea593d413e 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap
@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should not add separators if not needed 1`] = `
+<BubblePopup
+  customClass="bubble-popup-right"
+  position={
+    Object {
+      "left": 476,
+      "top": 30,
+      "width": 250,
+    }
+  }
+>
+  <div
+    className="project-activity-graph-tooltip"
+  >
+    <div
+      className="project-activity-graph-tooltip-title spacer-bottom"
+    >
+      <FormattedDate
+        date={2011-10-01T22:01:00.000Z}
+        format="LL"
+      />
+    </div>
+    <table
+      className="width-100"
+    >
+      <tbody />
+      <GraphsTooltipsContentCoverage
+        addSeparator={false}
+        measuresHistory={Array []}
+        tooltipIdx={0}
+      />
+    </table>
+  </div>
+</BubblePopup>
+`;
+
 exports[`should render correctly for issues graphs 1`] = `
 <BubblePopup
   customClass="bubble-popup-right"
-- 
cgit v1.2.3