SONAR-9245 Keep the top bar open while switching between favorits and all projects page

3 files changed, 29 insertions, 15 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
index fefc5f19801..93c68c438ce 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js
@@ -35,21 +35,19 @@ type Props = {
   isFavorite: boolean,
   location: { pathname: string, query: { [string]: string } },
   fetchProjects: (query: string, isFavorite: boolean, organization?: {}) => Promise<*>,
+  optionBarOpen: boolean,
+  optionBarToggle: (open: boolean) => void,
   organization?: { key: string },
   router: { push: ({ pathname: string, query?: {} }) => void }
 };
 
 type State = {
-  query: { [string]: string },
-  optionBarOpen: boolean
+  query: { [string]: string }
 };
 
 export default class AllProjects extends React.PureComponent {
   props: Props;
-  state: State = {
-    query: {},
-    optionBarOpen: false
-  };
+  state: State = { query: {} };
 
   componentDidMount() {
     this.handleQueryChange();
@@ -71,11 +69,9 @@ export default class AllProjects extends React.PureComponent {
   openOptionBar = (evt: Event & { currentTarget: HTMLElement }) => {
     evt.currentTarget.blur();
     evt.preventDefault();
-    this.handleOptionBarToggle(true);
+    this.props.optionBarToggle(true);
   };
 
-  handleOptionBarToggle = (open: boolean) => this.setState({ optionBarOpen: open });
-
   handlePerspectiveChange = ({ view, visualization }: { view: string, visualization?: string }) => {
     const query: { view: ?string, visualization: ?string, sort?: ?string } = {
       view: view === 'overall' ? undefined : view,
@@ -115,8 +111,8 @@ export default class AllProjects extends React.PureComponent {
   };
 
   render() {
-    const { isFavorite, organization } = this.props;
-    const { query, optionBarOpen } = this.state;
+    const { isFavorite, organization, optionBarOpen } = this.props;
+    const { query } = this.state;
     const isFiltered = Object.keys(query).some(key => query[key] != null);
 
     const view = query.view || 'overall';
@@ -132,7 +128,7 @@ export default class AllProjects extends React.PureComponent {
         <ProjectsOptionBarContainer
           onPerspectiveChange={this.handlePerspectiveChange}
           onSortChange={this.handleSortChange}
-          onToggleOptionBar={this.handleOptionBarToggle}
+          onToggleOptionBar={this.props.optionBarToggle}
           open={optionBarOpen}
           selectedSort={selectedSort}
           view={view}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/App.js b/server/sonar-web/src/main/js/apps/projects/components/App.js
index 2bd70ec15bd..f1b4d2f71c2 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/App.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/App.js
@@ -17,21 +17,35 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+//@flow
 import React from 'react';
 
+type State = {
+  optionBarOpen: boolean
+};
+
 export default class App extends React.PureComponent {
+  state: State = { optionBarOpen: false };
+
   componentDidMount() {
-    document.querySelector('html').classList.add('dashboard-page');
+    const elem = document.querySelector('html');
+    elem && elem.classList.add('dashboard-page');
   }
 
   componentWillUnmount() {
-    document.querySelector('html').classList.remove('dashboard-page');
+    const elem = document.querySelector('html');
+    elem && elem.classList.remove('dashboard-page');
   }
 
+  handleOptionBarToggle = (open: boolean) => this.setState({ optionBarOpen: open });
+
   render() {
     return (
       <div id="projects-page">
-        {this.props.children}
+        {React.cloneElement(this.props.children, {
+          optionBarOpen: this.state.optionBarOpen,
+          optionBarToggle: this.handleOptionBarToggle
+        })}
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/DefaultPageSelector.js b/server/sonar-web/src/main/js/apps/projects/components/DefaultPageSelector.js
index b8673473218..0a163363c46 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/DefaultPageSelector.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/DefaultPageSelector.js
@@ -29,6 +29,8 @@ import { searchProjects } from '../../../api/components';
 type Props = {
   currentUser: { isLoggedIn: boolean },
   location: { query: {} },
+  optionBarOpen: boolean,
+  optionBarToggle: (open: boolean) => void,
   router: {
     replace: (location: { pathname?: string, query?: { [string]: string } }) => void
   }
@@ -105,6 +107,8 @@ class DefaultPageSelector extends React.PureComponent {
         <AllProjectsContainer
           isFavorite={false}
           location={this.props.location}
+          optionBarOpen={this.props.optionBarOpen}
+          optionBarToggle={this.props.optionBarToggle}
           user={this.props.currentUser}
         />
       );