Apply review

* Fix typo
* Change ProjectOverviewFacet to be a function
* Fix fetchBreadcrumbs
* Change PageActions to be a function
* Little fix for MeasureHeader
* Little improvement on FilesView
* Little improvement on ListFooter
* Fix scroll when showing more files in measures page list view
* Return to the root parent when using back shortcut in the list view and bubble charts
* When using back shortcut select the previously opened component in the file view
* Fix bubble chart style on project measures page

10 files changed, 99 insertions, 104 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 91c55657df4..c8738a43938 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
@@ -99,10 +99,10 @@ export default class App extends React.PureComponent {
 
   fetchMeasures = ({ component, fetchMeasures, metrics, metricsKey }: Props) => {
     this.setState({ loading: true });
-    const filterdKeys = metricsKey.filter(
+    const filteredKeys = metricsKey.filter(
       key => !metrics[key].hidden && !['DATA', 'DISTRIB'].includes(metrics[key].type)
     );
-    fetchMeasures(component.key, filterdKeys).then(
+    fetchMeasures(component.key, filteredKeys).then(
       ({ measures, leakPeriod }) => {
         if (this.mounted) {
           this.setState({
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/Breadcrumbs.js b/server/sonar-web/src/main/js/apps/component-measures/components/Breadcrumbs.js
index 6edb170b06e..cf42bbd29a3 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/Breadcrumbs.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/Breadcrumbs.js
@@ -25,6 +25,7 @@ import { getBreadcrumbs } from '../../../api/components';
 import type { Component } from '../types';
 
 type Props = {|
+  backToFirst: boolean,
   className?: string,
   component: Component,
   handleSelect: string => void,
@@ -63,7 +64,8 @@ export default class Breadcrumbs extends React.PureComponent {
     key('left', 'measures-files', () => {
       const { breadcrumbs } = this.state;
       if (breadcrumbs.length > 1) {
-        this.props.handleSelect(breadcrumbs[breadcrumbs.length - 2].key);
+        const idx = this.props.backToFirst ? 0 : breadcrumbs.length - 2;
+        this.props.handleSelect(breadcrumbs[idx].key);
       }
       return false;
     });
@@ -77,7 +79,7 @@ export default class Breadcrumbs extends React.PureComponent {
     const isRoot = component.key === rootComponent.key;
     if (isRoot) {
       if (this.mounted) {
-        this.setState({ breadcrumbs: isRoot ? [component] : [rootComponent, component] });
+        this.setState({ breadcrumbs: [component] });
       }
       return;
     }
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 8cde6abfd8e..84b429306f1 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
@@ -131,15 +131,18 @@ export default class MeasureContent extends React.PureComponent {
       r => {
         if (metric === this.props.metric) {
           if (this.mounted) {
-            this.setState({
+            this.setState(({ selected }: State) => ({
               components: r.components.map(component =>
                 enhanceComponent(component, metric, metrics)
               ),
               metric,
               paging: r.paging,
-              selected: r.components.length > 0 ? r.components[0].key : null,
+              selected:
+                r.components.length > 0 && !r.components.find(c => c.key === selected)
+                  ? r.components[0].key
+                  : selected,
               view
-            });
+            }));
           }
           this.props.updateLoading({ components: false });
         }
@@ -179,6 +182,11 @@ export default class MeasureContent extends React.PureComponent {
     );
   };
 
+  onOpenComponent = (component: string) => {
+    this.setState({ selected: this.props.component.key });
+    this.props.updateSelected(component);
+  };
+
   onSelectComponent = (component: string) => this.setState({ selected: component });
 
   renderContent() {
@@ -219,7 +227,7 @@ export default class MeasureContent extends React.PureComponent {
         <FilesView
           components={this.state.components}
           fetchMore={this.fetchMoreComponents}
-          handleOpen={this.props.updateSelected}
+          handleOpen={this.onOpenComponent}
           handleSelect={this.onSelectComponent}
           metric={metric}
           metrics={this.props.metrics}
@@ -234,7 +242,7 @@ export default class MeasureContent extends React.PureComponent {
       return (
         <TreeMapView
           components={this.state.components}
-          handleSelect={this.props.updateSelected}
+          handleSelect={this.onOpenComponent}
           metric={metric}
         />
       );
@@ -252,9 +260,10 @@ export default class MeasureContent extends React.PureComponent {
           <div className="layout-page-header-panel-inner layout-page-main-header-inner">
             <div className="layout-page-main-inner clearfix">
               <Breadcrumbs
+                backToFirst={view === 'list'}
                 className="measure-breadcrumbs spacer-right text-ellipsis"
                 component={component}
-                handleSelect={this.props.updateSelected}
+                handleSelect={this.onOpenComponent}
                 rootComponent={rootComponent}
               />
               {component.key !== rootComponent.key &&
@@ -271,7 +280,7 @@ export default class MeasureContent extends React.PureComponent {
                   view={view}
                 />}
               <PageActions
-                current={selectedIdx + 1}
+                current={selectedIdx && selectedIdx + 1}
                 loading={this.props.loading}
                 isFile={isFile}
                 paging={this.state.paging}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.js
index 5c3a3a18282..d3b4d6af7d1 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.js
@@ -96,7 +96,7 @@ export default class MeasureHeader extends React.PureComponent {
     const { component, components, leakPeriod, measure, secondaryMeasure } = this.props;
     const metric = measure.metric;
     const isDiff = isDiffMetric(metric.key);
-    const hasHistory = ['TRK', 'VW', 'SVW', 'APP'].includes(component.qualifier);
+    const hasHistory = !isDiff && ['TRK', 'VW', 'SVW', 'APP'].includes(component.qualifier);
     const hasComponents = components && components.length > 1;
     return (
       <div className="measure-details-header big-spacer-bottom">
@@ -111,8 +111,7 @@ export default class MeasureHeader extends React.PureComponent {
                   : <Measure measure={measure} metric={metric} />}
               </strong>
             </span>
-            {!isDiff &&
-              hasHistory &&
+            {hasHistory &&
               <Tooltip
                 placement="right"
                 overlay={translate('component_measures.show_metric_history')}>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.js
index e970dfb308b..5ce4d695124 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.js
@@ -142,6 +142,7 @@ export default class MeasureOverview extends React.PureComponent {
           <div className="layout-page-header-panel-inner layout-page-main-header-inner">
             <div className="layout-page-main-inner clearfix">
               <Breadcrumbs
+                backToFirst={true}
                 className="measure-breadcrumbs spacer-right text-ellipsis"
                 component={component}
                 handleSelect={this.props.updateSelected}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/PageActions.js b/server/sonar-web/src/main/js/apps/component-measures/components/PageActions.js
index a0f5a69634e..eb1f1bf1038 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/PageActions.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/PageActions.js
@@ -32,57 +32,49 @@ type Props = {|
   view?: string
 |};
 
-export default class PageActions extends React.PureComponent {
-  props: Props;
-
-  renderShortcuts() {
-    return (
-      <span className="note big-spacer-right">
-        <span className="big-spacer-right">
-          <span className="shortcut-button little-spacer-right">↑</span>
-          <span className="shortcut-button little-spacer-right">↓</span>
-          {translate('component_measures.to_select_files')}
-        </span>
+export default function PageActions(props: Props) {
+  const { isFile, paging } = props;
+  const showShortcuts = ['list', 'tree'].includes(props.view);
+  return (
+    <div className="pull-right">
+      {!isFile && showShortcuts && renderShortcuts()}
+      {isFile && renderFileShortcuts()}
+      <div className="measure-details-page-actions">
+        <DeferredSpinner loading={props.loading}>
+          <i className="spinner-placeholder" />
+        </DeferredSpinner>
+        {paging != null &&
+          <FilesCounter className="spacer-left" current={props.current} total={paging.total} />}
+      </div>
+    </div>
+  );
+}
 
-        <span>
-          <span className="shortcut-button little-spacer-right">←</span>
-          <span className="shortcut-button little-spacer-right">→</span>
-          {translate('component_measures.to_navigate')}
-        </span>
+function renderShortcuts() {
+  return (
+    <span className="note big-spacer-right">
+      <span className="big-spacer-right">
+        <span className="shortcut-button little-spacer-right">↑</span>
+        <span className="shortcut-button little-spacer-right">↓</span>
+        {translate('component_measures.to_select_files')}
       </span>
-    );
-  }
 
-  renderFileShortcuts() {
-    return (
-      <span className="note spacer-right">
-        <span>
-          <span className="shortcut-button little-spacer-right">←</span>
-          {translate('component_measures.to_navigate_back')}
-        </span>
+      <span>
+        <span className="shortcut-button little-spacer-right">←</span>
+        <span className="shortcut-button little-spacer-right">→</span>
+        {translate('component_measures.to_navigate')}
       </span>
-    );
-  }
+    </span>
+  );
+}
 
-  render() {
-    const { isFile, paging, view } = this.props;
-    const showShortcuts = ['list', 'tree'].includes(view);
-    return (
-      <div className="pull-right">
-        {!isFile && showShortcuts && this.renderShortcuts()}
-        {isFile && this.renderFileShortcuts()}
-        <div className="measure-details-page-actions">
-          <DeferredSpinner loading={this.props.loading}>
-            <i className="spinner-placeholder" />
-          </DeferredSpinner>
-          {paging != null &&
-            <FilesCounter
-              className="spacer-left"
-              current={this.props.current}
-              total={paging.total}
-            />}
-        </div>
-      </div>
-    );
-  }
+function renderFileShortcuts() {
+  return (
+    <span className="note spacer-right">
+      <span>
+        <span className="shortcut-button little-spacer-right">←</span>
+        {translate('component_measures.to_navigate_back')}
+      </span>
+    </span>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.js b/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.js
index c6d5c826fb5..aa8bafa94f2 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/FilesView.js
@@ -53,8 +53,12 @@ export default class ListView extends React.PureComponent {
     this.attachShortcuts();
   }
 
-  componentDidUpdate() {
-    if (this.listContainer && this.props.selectedIdx != null) {
+  componentDidUpdate(prevProps: Props) {
+    if (
+      this.listContainer &&
+      this.props.selectedKey != null &&
+      prevProps.selectedKey !== this.props.selectedKey
+    ) {
       const elem = this.listContainer.getElementsByClassName('selected')[0];
       if (elem) {
         scrollToElement(elem, { topOffset: 215, bottomOffset: 100 });
@@ -111,10 +115,7 @@ export default class ListView extends React.PureComponent {
 
   render() {
     return (
-      <div
-        ref={elem => {
-          this.listContainer = elem;
-        }}>
+      <div ref={elem => (this.listContainer = elem)}>
         <ComponentsList
           components={this.props.components}
           metrics={this.props.metrics}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.js b/server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.js
index a3d2a9c5b9a..6f921576e23 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/sidebar/ProjectOverviewFacet.js
@@ -31,31 +31,26 @@ type Props = {|
   value: string
 |};
 
-export default class ProjectOverviewFacet extends React.PureComponent {
-  props: Props;
-
-  render() {
-    const { value, selected } = this.props;
-    const facetName = translate('component_measures.overview', value, 'facet');
-    return (
-      <FacetBox>
-        <FacetItemsList>
-          <FacetItem
-            active={value === selected}
-            disabled={false}
-            key={value}
-            name={
-              <Tooltip overlay={facetName} mouseEnterDelay={0.5}>
-                <strong id={`measure-overview-${value}-name`}>
-                  {facetName}
-                </strong>
-              </Tooltip>
-            }
-            onClick={this.props.onChange}
-            value={value}
-          />
-        </FacetItemsList>
-      </FacetBox>
-    );
-  }
+export default function ProjectOverviewFacet({ value, selected, onChange }: Props) {
+  const facetName = translate('component_measures.overview', value, 'facet');
+  return (
+    <FacetBox>
+      <FacetItemsList>
+        <FacetItem
+          active={value === selected}
+          disabled={false}
+          key={value}
+          name={
+            <Tooltip overlay={facetName} mouseEnterDelay={0.5}>
+              <strong id={`measure-overview-${value}-name`}>
+                {facetName}
+              </strong>
+            </Tooltip>
+          }
+          onClick={onChange}
+          value={value}
+        />
+      </FacetItemsList>
+    </FacetBox>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/style.css b/server/sonar-web/src/main/js/apps/component-measures/style.css
index 7990cc163ae..323785dce85 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/style.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/style.css
@@ -168,6 +168,6 @@
 .measure-overview-bubble-chart-axis.y {
   position: absolute;
   top: 50%;
-  left: -20px;
+  left: 5px;
   transform: rotate(-90deg);
 }
diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.js b/server/sonar-web/src/main/js/components/controls/ListFooter.js
index 2cb3d59e903..24711f088db 100644
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.js
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.js
@@ -35,19 +35,15 @@ export default class ListFooter extends React.PureComponent {
     ready: true
   };
 
-  componentWillMount() {
-    this.handleLoadMore = this.handleLoadMore.bind(this);
-  }
-
   canLoadMore() {
     return typeof this.props.loadMore === 'function';
   }
 
-  handleLoadMore(e) {
-    e.preventDefault();
-    e.target.blur();
+  handleLoadMore = event => {
+    event.preventDefault();
+    event.target.blur();
     this.props.loadMore();
-  }
+  };
 
   render() {
     const hasMore = this.props.total > this.props.count;