SONAR-9608 Fix drilldown (shortcuts, treemap) for portfolios and applications

8 files changed, 44 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/App.js b/server/sonar-web/src/main/js/apps/component-measures/components/App.js
index c8738a43938..f68593c3277 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/App.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/App.js
@@ -166,6 +166,7 @@ export default class App extends React.PureComponent {
             leakPeriod={leakPeriod}
             metric={metric}
             metrics={metrics}
+            router={this.props.router}
             selected={query.selected}
             updateQuery={this.updateQuery}
             view={query.view}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.js
index 058d2e80f0d..22574bd9afe 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.js
@@ -32,7 +32,8 @@ import SourceViewer from '../../../components/SourceViewer/SourceViewer';
 import TreeMapView from '../drilldown/TreeMapView';
 import { getComponentTree } from '../../../api/components';
 import { complementary } from '../config/complementary';
-import { enhanceComponent, isFileType } from '../utils';
+import { enhanceComponent, isFileType, isViewType } from '../utils';
+import { getProjectUrl } from '../../../helpers/urls';
 import { isDiffMetric } from '../../../helpers/measures';
 import type { Component, ComponentEnhanced, Paging, Period } from '../types';
 import type { MeasureEnhanced } from '../../../components/measure/types';
@@ -48,6 +49,12 @@ type Props = {|
   metric: Metric,
   metrics: { [string]: Metric },
   rootComponent: Component,
+  router: Object /*
+  Switching to the following type will make flow crash with :
+  https://github.com/facebook/flow/issues/3147
+  {
+    push: ({ pathname: string, query?: RawQuery }) => void
+  }*/,
   secondaryMeasure: ?MeasureEnhanced,
   updateLoading: ({ [string]: boolean }) => void,
   updateSelected: string => void,
@@ -184,15 +191,26 @@ export default class MeasureContent extends React.PureComponent {
     );
   };
 
-  onOpenComponent = (component: string) => {
+  onOpenComponent = (componentKey: string) => {
+    if (isViewType(this.props.rootComponent)) {
+      const component = this.state.components.find(
+        component => component.refKey === componentKey || component.key === componentKey
+      );
+      if (component && component.qualifier === 'TRK') {
+        if (this.props.view === 'treemap') {
+          this.props.router.push(getProjectUrl(componentKey));
+        }
+        return;
+      }
+    }
     this.setState({ selected: this.props.component.key });
-    this.props.updateSelected(component);
+    this.props.updateSelected(componentKey);
     if (this.container) {
       this.container.focus();
     }
   };
 
-  onSelectComponent = (component: string) => this.setState({ selected: component });
+  onSelectComponent = (componentKey: string) => this.setState({ selected: componentKey });
 
   renderContent() {
     const { component, leakPeriod } = this.props;
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContentContainer.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContentContainer.js
index f9948e1028d..a8999c53cac 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContentContainer.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContentContainer.js
@@ -23,6 +23,7 @@ import MeasureContent from './MeasureContent';
 import type { Component, Period, Query } from '../types';
 import type { MeasureEnhanced } from '../../../components/measure/types';
 import type { Metric } from '../../../store/metrics/actions';
+import type { RawQuery } from '../../../helpers/query';
 
 type Props = {|
   className?: string,
@@ -35,6 +36,9 @@ type Props = {|
   leakPeriod?: Period,
   metric: Metric,
   metrics: { [string]: Metric },
+  router: {
+    push: ({ pathname: string, query?: RawQuery }) => void
+  },
   selected: ?string,
   updateQuery: Query => void,
   view: string
@@ -137,6 +141,7 @@ export default class MeasureContentContainer extends React.PureComponent {
         metric={this.props.metric}
         metrics={this.props.metrics}
         rootComponent={this.props.rootComponent}
+        router={this.props.router}
         secondaryMeasure={this.state.secondaryMeasure}
         updateLoading={this.updateLoading}
         updateSelected={this.updateSelected}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverviewContainer.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverviewContainer.js
index 517b34ad07f..0cfcd966fbb 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverviewContainer.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverviewContainer.js
@@ -21,7 +21,8 @@
 import React from 'react';
 import MeasureOverview from './MeasureOverview';
 import { getComponentShow } from '../../../api/components';
-import { getComponentUrl } from '../../../helpers/urls';
+import { getProjectUrl } from '../../../helpers/urls';
+import { isViewType } from '../utils';
 import type { Component, Period, Query } from '../types';
 import type { RawQuery } from '../../../helpers/query';
 import type { Metric } from '../../../store/metrics/actions';
@@ -104,8 +105,8 @@ export default class MeasureOverviewContainer extends React.PureComponent {
   };
 
   updateSelected = (component: string) => {
-    if (this.state.component && ['VW', 'SVW', 'APP'].includes(this.state.component.qualifier)) {
-      this.props.router.push(getComponentUrl(component));
+    if (this.state.component && isViewType(this.state.component)) {
+      this.props.router.push(getProjectUrl(component));
     } else {
       this.props.updateQuery({
         selected: component !== this.props.rootComponent.key ? component : null
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.js.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.js.snap
index e6c6e72a116..85d80ad9d74 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.js.snap
@@ -80,6 +80,11 @@ exports[`should render correctly 1`] = `
         "key": "foo",
       }
     }
+    router={
+      Object {
+        "push": [Function],
+      }
+    }
     selected=""
     updateQuery={[Function]}
     view="list"
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.js b/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.js
index ba2faa90162..3029c9a6263 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.js
@@ -92,7 +92,7 @@ export default class TreeMapView extends React.PureComponent {
             sizeValue
           ),
           label: component.name,
-          link: getComponentUrl(component.key)
+          link: getComponentUrl(component.refKey || component.key)
         };
       })
       .filter(Boolean);
diff --git a/server/sonar-web/src/main/js/apps/component-measures/utils.js b/server/sonar-web/src/main/js/apps/component-measures/utils.js
index 41b4186466d..0a3da4859fd 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/utils.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/utils.js
@@ -90,6 +90,9 @@ export const enhanceComponent = (
 export const isFileType = (component: Component): boolean =>
   ['FIL', 'UTS'].includes(component.qualifier);
 
+export const isViewType = (component: Component): boolean =>
+  ['VW', 'SVW', 'APP'].includes(component.qualifier);
+
 export const groupByDomains = memoize((measures: Array<MeasureEnhanced>): Array<{
   name: string,
   measures: Array<MeasureEnhanced>
diff --git a/server/sonar-web/src/main/js/components/charts/TreeMapRect.js b/server/sonar-web/src/main/js/components/charts/TreeMapRect.js
index 66bd0b9a984..498f4cb5976 100644
--- a/server/sonar-web/src/main/js/components/charts/TreeMapRect.js
+++ b/server/sonar-web/src/main/js/components/charts/TreeMapRect.js
@@ -19,6 +19,7 @@
  */
 // @flow
 import React from 'react';
+import { Link } from 'react-router';
 import classNames from 'classnames';
 import { scaleLinear } from 'd3-scale';
 import LinkIcon from '../icons-components/LinkIcon';
@@ -61,9 +62,9 @@ export default class TreeMapRect extends React.PureComponent {
 
     if (width >= 24 && height >= 24 && (width >= 48 || height >= 50)) {
       return (
-        <a className="treemap-link" href={link} onClick={this.handleLinkClick}>
+        <Link className="treemap-link" to={link} onClick={this.handleLinkClick}>
           <LinkIcon />
-        </a>
+        </Link>
       );
     }
   };