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

7 files changed, 54 insertions, 18 deletions

diff --git a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationFavoriteProjects.js b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationFavoriteProjects.js
index be73dafc0af..9c3edfce2aa 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationFavoriteProjects.js
+++ b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationFavoriteProjects.js
@@ -28,6 +28,8 @@ class OrganizationFavoriteProjects extends React.PureComponent {
   props: {
     children?: React.Element<*>,
     location: Object,
+    optionBarOpen: boolean,
+    optionBarToggle: (open: boolean) => void,
     organization: {
       key: string
     }
@@ -52,6 +54,8 @@ class OrganizationFavoriteProjects extends React.PureComponent {
       <div id="projects-page">
         <FavoriteProjectsContainer
           location={this.props.location}
+          optionBarOpen={this.props.optionBarOpen}
+          optionBarToggle={this.props.optionBarToggle}
           organization={this.props.organization}
         />
       </div>
diff --git a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationPage.js b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationPage.js
index fe3ad60da2e..55f9cd00902 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationPage.js
+++ b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationPage.js
@@ -39,10 +39,15 @@ type Props = {
   fetchOrganization: string => Promise<*>
 };
 
+type State = {
+  loading: boolean,
+  optionBarOpen: boolean
+};
+
 class OrganizationPage extends React.PureComponent {
   mounted: boolean;
   props: Props;
-  state = { loading: true };
+  state: State = { loading: true, optionBarOpen: false };
 
   componentDidMount() {
     this.mounted = true;
@@ -70,6 +75,8 @@ class OrganizationPage extends React.PureComponent {
     });
   };
 
+  handleOptionBarToggle = (open: boolean) => this.setState({ optionBarOpen: open });
+
   render() {
     const { organization } = this.props;
 
@@ -85,7 +92,11 @@ class OrganizationPage extends React.PureComponent {
       <div>
         <Helmet defaultTitle={organization.name} titleTemplate={'%s - ' + organization.name} />
         <OrganizationNavigation organization={organization} location={this.props.location} />
-        {this.props.children}
+        {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/organizations/components/OrganizationProjects.js b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationProjects.js
index c342564368a..f3286b2ab82 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/OrganizationProjects.js
+++ b/server/sonar-web/src/main/js/apps/organizations/components/OrganizationProjects.js
@@ -28,6 +28,8 @@ class OrganizationProjects extends React.PureComponent {
   props: {
     children?: React.Element<*>,
     location: Object,
+    optionBarOpen: boolean,
+    optionBarToggle: (open: boolean) => void,
     organization: {
       key: string
     }
@@ -53,6 +55,8 @@ class OrganizationProjects extends React.PureComponent {
         <AllProjectsContainer
           isFavorite={false}
           location={this.props.location}
+          optionBarOpen={this.props.optionBarOpen}
+          optionBarToggle={this.props.optionBarToggle}
           organization={this.props.organization}
         />
       </div>
diff --git a/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationPage-test.js.snap b/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationPage-test.js.snap
index d9579e1bf4a..91b20a05ca1 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationPage-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationPage-test.js.snap
@@ -28,7 +28,10 @@ exports[`smoke test 2`] = `
       }
     }
   />
-  <div>
+  <div
+    optionBarOpen={false}
+    optionBarToggle={[Function]}
+  >
     hello
   </div>
 </div>
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}
         />
       );