]> source.dussan.org Git - sonarqube.git/commitdiff
Do not display separators in the project activity page tooltips if there is no data
authorGrégoire Aubert <gregoire.aubert@sonarsource.com>
Fri, 4 Aug 2017 15:56:58 +0000 (17:56 +0200)
committerGrégoire Aubert <gregoire.aubert@sonarsource.com>
Wed, 9 Aug 2017 14:29:43 +0000 (16:29 +0200)
server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js
server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentCoverage.js
server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentDuplication.js
server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js
server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltips-test.js
server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentCoverage-test.js
server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentDuplication-test.js
server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentEvents-test.js
server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap

index 8a60dd4e0c904fb14665ecff62fc466a65bba764..a64755f5b6425e5e155d17e1dcf085902687cb64 100644 (file)
@@ -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>
index a9be3cdb64b2116f7fd3807695f424b9bf95be00..7ada640c64fe4d3c1f4d78593cc4795d5df50287 100644 (file)
@@ -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
index 9a8813fa2f70c15b01493ee58c54c7e7b73d08cb..ed61396919538668a08d67fbc14534090803d0fe 100644 (file)
@@ -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"
index 5cfe5bdce9bad9383a1046143d6c1cf2a40548a4..d23ac08368f713c24ae8fb85780e4eb65090495b 100644 (file)
@@ -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>
index ebb184701e7aac819fad0d4f0b6569cb1354e0f7..34f50c3911aeb4a958490f3b7e5d6f3e61a9e31e 100644 (file)
@@ -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();
+});
index 8d1893f4b9a9005b7d54ed468c91af676fbc1a42..ad85b484acfb2ff6834442c7bc5c558a8b29522c 100644 (file)
@@ -63,6 +63,7 @@ const MEASURES_COVERAGE = [
 ];
 
 const DEFAULT_PROPS = {
+  addSeparator: true,
   measuresHistory: MEASURES_COVERAGE,
   tooltipIdx: 1
 };
index 13aa88531926a1fa04cc685da79c72fb1e0ab361..c0a69de2a0636c3b47c1d0f1718fa7e24ad23594 100644 (file)
@@ -37,6 +37,7 @@ const MEASURES_DUPLICATION = [
 ];
 
 const DEFAULT_PROPS = {
+  addSeparator: true,
   measuresHistory: MEASURES_DUPLICATION,
   tooltipIdx: 1
 };
index 0dc9d74cdb6cb1b8d6974d9d3822ace763c6d03f..00157e5c3d8c828066132c46911c53f414ce4d9f 100644 (file)
@@ -35,5 +35,7 @@ const EVENTS = [
 ];
 
 it('should render correctly', () => {
-  expect(shallow(<GraphsTooltipsContentEvents events={EVENTS} />)).toMatchSnapshot();
+  expect(
+    shallow(<GraphsTooltipsContentEvents addSeparator={true} events={EVENTS} />)
+  ).toMatchSnapshot();
 });
index 4458586fc1a3507daaa864c6c1fe98d84aafc656..aea593d413e4d92f19471eb266882d78a0bc6076 100644 (file)
@@ -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"