From 6cecda3b3aeb07e87be0c79675f9a8be31b2d802 Mon Sep 17 00:00:00 2001
From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Tue, 2 Aug 2022 15:09:25 +0200
Subject: [PATCH] SONAR-16885 [892385] [892390]

* [892385] Short text alternative is missing
* [892390] Detailed alternative description is missing
---
 .../components/MeasureOverview.tsx            |  2 +
 .../MeasureOverview-test.tsx.snap             | 10 +++++
 .../drilldown/BubbleChart.tsx                 | 19 ++++++++-
 .../drilldown/__tests__/BubbleChart-test.tsx  |  1 +
 .../__snapshots__/BubbleChart-test.tsx.snap   | 42 +++++++++++++++++++
 .../resources/org/sonar/l10n/core.properties  | 13 +++---
 6 files changed, 80 insertions(+), 7 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
index 8d04180dc07..73eb01ba3cf 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx
@@ -139,6 +139,8 @@ export default class MeasureOverview extends React.PureComponent<Props, State> {
 
     return (
       <BubbleChart
+        componentKey={component.key}
+        branchLike={branchLike}
         components={this.state.components}
         domain={domain}
         metrics={metrics}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap
index 4d30a972f61..fe6ecf9aee4 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureOverview-test.tsx.snap
@@ -70,6 +70,7 @@ exports[`should render correctly: default 1`] = `
       loading={false}
     />
     <BubbleChart
+      componentKey="foo"
       components={Array []}
       domain="Reliability"
       metrics={
@@ -209,6 +210,15 @@ exports[`should render correctly: has leak period 1`] = `
       loading={false}
     />
     <BubbleChart
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": false,
+          "name": "branch-6.7",
+        }
+      }
+      componentKey="foo"
       components={Array []}
       domain="Reliability"
       metrics={
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx
index 39be3005c63..dc5030c9208 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChart.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 import OriginalBubbleChart from '../../../components/charts/BubbleChart';
 import ColorRatingsLegend from '../../../components/charts/ColorRatingsLegend';
 import HelpTooltip from '../../../components/controls/HelpTooltip';
@@ -30,7 +31,10 @@ import {
 } from '../../../helpers/l10n';
 import { formatMeasure, isDiffMetric } from '../../../helpers/measures';
 import { isDefined } from '../../../helpers/types';
+import { getComponentDrilldownUrl } from '../../../helpers/urls';
+import { BranchLike } from '../../../types/branch-like';
 import { isProject } from '../../../types/component';
+import { MetricKey } from '../../../types/metrics';
 import {
   ComponentMeasureEnhanced,
   ComponentMeasureIntern,
@@ -49,7 +53,9 @@ import EmptyResult from './EmptyResult';
 const HEIGHT = 500;
 
 interface Props {
+  componentKey: string;
   components: ComponentMeasureEnhanced[];
+  branchLike?: BranchLike;
   domain: string;
   metrics: Dict<Metric>;
   paging?: Paging;
@@ -242,13 +248,24 @@ export default class BubbleChart extends React.PureComponent<Props, State> {
     if (this.props.components.length <= 0) {
       return <EmptyResult />;
     }
-    const { domain } = this.props;
+    const { domain, componentKey, branchLike } = this.props;
     const metrics = getBubbleMetrics(domain, this.props.metrics);
 
     return (
       <div className="measure-overview-bubble-chart">
         {this.renderChartHeader(domain, metrics.size, metrics.colors)}
         <div className="measure-overview-bubble-chart-content">
+          <div className="text-center small spacer-top spacer-bottom">
+            <Link
+              to={getComponentDrilldownUrl({
+                componentKey,
+                branchLike,
+                metric: isProjectOverview(domain) ? MetricKey.violations : metrics.size.key,
+                listView: true
+              })}>
+              {translate('component_measures.overview.see_data_as_list')}
+            </Link>
+          </div>
           {this.renderBubbleChart(metrics)}
         </div>
         <div className="measure-overview-bubble-chart-axis x">
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/BubbleChart-test.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/BubbleChart-test.tsx
index a52f882cf91..682b417074b 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/BubbleChart-test.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/BubbleChart-test.tsx
@@ -75,6 +75,7 @@ it('should handle filtering', () => {
 function shallowRender(overrides: Partial<BubbleChart['props']> = {}) {
   return shallow<BubbleChart>(
     <BubbleChart
+      componentKey="foo"
       components={[
         enhanceComponent(
           mockComponentMeasure(true, {
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
index e8c8d464e90..0a648d6f8a1 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/__tests__/__snapshots__/BubbleChart-test.tsx.snap
@@ -43,6 +43,20 @@ exports[`should render correctly: all on x=0 1`] = `
   <div
     className="measure-overview-bubble-chart-content"
   >
+    <div
+      className="text-center small spacer-top spacer-bottom"
+    >
+      <Link
+        to={
+          Object {
+            "pathname": "/component_measures",
+            "search": "?id=foo&metric=vulnerabilities&view=list",
+          }
+        }
+      >
+        component_measures.overview.see_data_as_list
+      </Link>
+    </div>
     <BubbleChart
       displayXGrid={true}
       displayXTicks={true}
@@ -237,6 +251,20 @@ exports[`should render correctly: default 1`] = `
   <div
     className="measure-overview-bubble-chart-content"
   >
+    <div
+      className="text-center small spacer-top spacer-bottom"
+    >
+      <Link
+        to={
+          Object {
+            "pathname": "/component_measures",
+            "search": "?id=foo&metric=vulnerabilities&view=list",
+          }
+        }
+      >
+        component_measures.overview.see_data_as_list
+      </Link>
+    </div>
     <BubbleChart
       displayXGrid={true}
       displayXTicks={true}
@@ -432,6 +460,20 @@ exports[`should render correctly: only showing first 500 files 1`] = `
   <div
     className="measure-overview-bubble-chart-content"
   >
+    <div
+      className="text-center small spacer-top spacer-bottom"
+    >
+      <Link
+        to={
+          Object {
+            "pathname": "/component_measures",
+            "search": "?id=foo&metric=vulnerabilities&view=list",
+          }
+        }
+      >
+        component_measures.overview.see_data_as_list
+      </Link>
+    </div>
     <BubbleChart
       displayXGrid={true}
       displayXTicks={true}
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 000590eb25e..7b55d519338 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3292,12 +3292,13 @@ component_measures.skip_to_filters=Skip to measure filters
 
 component_measures.overview.project_overview.facet=Project Overview
 component_measures.overview.project_overview.title=Risk
-component_measures.overview.project_overview.description=Get quick insights into the operational risks. Any color but green indicates immediate risks: Bugs or Vulnerabilities that should be examined. A position at the top or right of the graph means that the longer-term health may be at risk. Green bubbles at the bottom-left are best.
-component_measures.overview.Reliability.description=See bugs' operational risks. The closer a bubble's color is to red, the more severe the worst bugs are. Bubble size indicates bug volume, and each bubble's vertical position reflects the estimated time to address the bugs. Small green bubbles on the bottom edge are best.
-component_measures.overview.Security.description=See vulnerabilities' operational risks. The closer a bubble's color is to red, the more severe the worst vulnerabilities are. Bubble size indicates vulnerability volume, and each bubble's vertical position reflects the estimated time to address the vulnerabilities. Small green bubbles on the bottom edge are best.
-component_measures.overview.Maintainability.description=See code smells' long-term risks. The closer a bubble's color is to red, the higher the ratio of technical debt is. Bubble size indicates code smell volume, and each bubble's vertical position reflects the estimated time to address the code smells. Small green bubbles on the bottom edge are best.
-component_measures.overview.Coverage.description=See missing test coverage's long-term risks. Bubble size indicates the volume of uncovered lines, and each bubble's vertical position reflects the volume of missing coverage. Small bubbles on the bottom edge are best.
-component_measures.overview.Duplications.description=See duplications' long-term risks. Bubble size indicates the volume of duplicated blocks, and each bubble's vertical position reflects the volume of lines in those blocks. Small bubbles on the bottom edge are best.
+component_measures.overview.project_overview.description=Get quick insights into the operational risks. For users relying on their keyboard, elements are sorted by the number of lines of code for each file. Any color but green indicates immediate risks: Bugs or Vulnerabilities that should be examined. A position at the top or right of the graph means that the longer-term health may be at risk. Green bubbles at the bottom-left are best.
+component_measures.overview.Reliability.description=See bugs' operational risks. For users relying on their keyboard, elements are sorted by volume of bugs per file. The closer a bubble's color is to red, the more severe the worst bugs are. Bubble size indicates bug volume, and each bubble's vertical position reflects the estimated time to address the bugs. Small green bubbles on the bottom edge are best.
+component_measures.overview.Security.description=See vulnerabilities' operational risks. For users relying on their keyboard, elements are sorted by volume of vulnerabilities per file. The closer a bubble's color is to red, the more severe the worst vulnerabilities are. Bubble size indicates vulnerability volume, and each bubble's vertical position reflects the estimated time to address the vulnerabilities. Small green bubbles on the bottom edge are best.
+component_measures.overview.Maintainability.description=See code smells' long-term risks. For users relying on their keyboard, elements are sorted by the volume of code smells for each file. The closer a bubble's color is to red, the higher the ratio of technical debt is. Bubble size indicates code smell volume, and each bubble's vertical position reflects the estimated time to address the code smells. Small green bubbles on the bottom edge are best.
+component_measures.overview.Coverage.description=See missing test coverage's long-term risks. For users relying on their keyboard, elements are sorted by volume of uncovered lines per file. Bubble size indicates the volume of uncovered lines, and each bubble's vertical position reflects the volume of missing coverage. Small bubbles on the bottom edge are best.
+component_measures.overview.Duplications.description=See duplications' long-term risks. For users relying on their keyboard, elements are sorted by the number of duplicated blocks per file. Bubble size indicates the volume of duplicated blocks, and each bubble's vertical position reflects the volume of lines in those blocks. Small bubbles on the bottom edge are best.
+component_measures.overview.see_data_as_list=See the data presented on this chart as a list
 
 component_measures.domain_facets.Reliability.help=Issues in this domain mark code where you will get behavior other than what was expected.
 component_measures.domain_facets.Maintainability.help=Issues in this domain mark code that will be more difficult to update competently than it should.
-- 
2.39.5