SONAR-7454 Keep state of "Tree" and "List" when switching between them

3 files changed, 63 insertions, 35 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldown.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldown.js
index c8205cb0a50..d0e78285813 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldown.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldown.js
@@ -30,13 +30,33 @@ import { hasHistory, hasBubbleChart, hasTreemap } from '../utils';
 import { translate } from '../../../helpers/l10n';
 
 export default class MeasureDrilldown extends React.Component {
+  state = {
+    tree: {
+      components: [],
+      breadcrumbs: [],
+      selected: null,
+      fetching: true
+    },
+    list: {
+      components: [],
+      selected: null,
+      fetching: true
+    }
+  };
+
   render () {
     const { children, metric, ...other } = this.props;
     const { component } = this.context;
 
     const showListView = ['VW', 'SVW', 'DEV'].indexOf(component.qualifier) === -1;
 
-    const child = React.cloneElement(children, { component, metric, ...other });
+    const child = React.cloneElement(children, {
+      component,
+      metric,
+      ...other,
+      store: this.state,
+      updateStore: this.setState.bind(this)
+    });
 
     return (
         <div className="measure-details-drilldown">
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js
index 0a0e49601aa..78872e291a7 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js
@@ -27,15 +27,11 @@ import { enhanceWithSingleMeasure } from '../utils';
 import { getFiles } from '../../../api/components';
 
 export default class MeasureDrilldownList extends React.Component {
-  state = {
-    components: [],
-    selected: null,
-    fetching: true
-  };
-
   componentDidMount () {
     this.mounted = true;
-    this.fetchComponents(this.context.component);
+    if (this.props.store.list.fetching) {
+      this.fetchComponents(this.context.component);
+    }
   }
 
   componentDidUpdate (nextProps, nextState, nextContext) {
@@ -50,7 +46,7 @@ export default class MeasureDrilldownList extends React.Component {
   }
 
   fetchComponents (baseComponent) {
-    const { metric } = this.props;
+    const { metric, store, updateStore } = this.props;
     const asc = metric.direction === 1;
 
     const options = {
@@ -59,28 +55,42 @@ export default class MeasureDrilldownList extends React.Component {
       asc
     };
 
-    this.setState({ fetching: true });
+    updateStore({
+      list: {
+        ...store.list,
+        fetching: true
+      }
+    });
 
     getFiles(baseComponent.key, [metric.key], options).then(files => {
       if (this.mounted) {
         const components = enhanceWithSingleMeasure(files);
 
-        this.setState({
-          components,
-          selected: null,
-          fetching: false
+        updateStore({
+          list: {
+            ...store.list,
+            components,
+            selected: null,
+            fetching: false
+          }
         });
       }
     });
   }
 
   handleFileClick (selected) {
-    this.setState({ selected });
+    const { store, updateStore } = this.props;
+    updateStore({
+      list: {
+        ...store.list,
+        selected
+      }
+    });
   }
 
   render () {
-    const { metric } = this.props;
-    const { components, selected, fetching } = this.state;
+    const { metric, store } = this.props;
+    const { components, selected, fetching } = store.list;
 
     if (fetching) {
       return <Spinner/>;
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js
index 5e2a2a65d64..0f925cc2f42 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js
@@ -27,16 +27,11 @@ import { enhanceWithSingleMeasure } from '../utils';
 import { getChildren } from '../../../api/components';
 
 export default class MeasureDrilldownTree extends React.Component {
-  state = {
-    components: [],
-    breadcrumbs: [],
-    selected: null,
-    fetching: true
-  };
-
   componentDidMount () {
     this.mounted = true;
-    this.fetchComponents(this.context.component);
+    if (this.props.store.tree.fetching) {
+      this.fetchComponents(this.context.component);
+    }
   }
 
   componentDidUpdate (nextProps, nextState, nextContext) {
@@ -51,7 +46,7 @@ export default class MeasureDrilldownTree extends React.Component {
   }
 
   fetchComponents (baseComponent) {
-    const { metric } = this.props;
+    const { metric, store, updateStore } = this.props;
     const asc = metric.direction === 1;
 
     const options = {
@@ -62,26 +57,29 @@ export default class MeasureDrilldownTree extends React.Component {
 
     const componentKey = baseComponent.refKey || baseComponent.key;
 
-    this.setState({ fetching: true });
+    updateStore({ tree: { ...store.tree, fetching: true } });
 
     getChildren(componentKey, [metric.key], options).then(children => {
       if (this.mounted) {
         const components = enhanceWithSingleMeasure(children);
 
-        const indexInBreadcrumbs = this.state.breadcrumbs
+        const indexInBreadcrumbs = store.tree.breadcrumbs
             .findIndex(component => component === baseComponent);
 
         const breadcrumbs = indexInBreadcrumbs !== -1 ?
-            this.state.breadcrumbs.slice(0, indexInBreadcrumbs + 1) :
-            [...this.state.breadcrumbs, baseComponent];
+            store.tree.breadcrumbs.slice(0, indexInBreadcrumbs + 1) :
+            [...store.tree.breadcrumbs, baseComponent];
 
-        this.setState({
+        const tree = {
+          ...store.tree,
           baseComponent,
           breadcrumbs,
           components,
           selected: null,
           fetching: false
-        });
+        };
+
+        updateStore({ tree });
       }
     });
   }
@@ -95,12 +93,12 @@ export default class MeasureDrilldownTree extends React.Component {
   }
 
   handleFileOpen (selected) {
-    this.setState({ selected });
+    this.props.updateStore({ tree: { ...this.props.store.tree, selected } });
   }
 
   render () {
-    const { metric } = this.props;
-    const { components, selected, breadcrumbs, fetching } = this.state;
+    const { metric, store } = this.props;
+    const { components, selected, breadcrumbs, fetching } = store.tree;
     const parent = breadcrumbs.length > 1 ? breadcrumbs[breadcrumbs.length - 2] : null;
 
     if (fetching) {