From e6a5b9ee7f517c3e59c182a310e88270bc0e70dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 16 Jul 2022 17:44:16 +0200
Subject: [PATCH] TopNav: Store collapse state for chrome top search bar in
 local storage (#52300)

---
 .../core/components/AppChrome/AppChrome.tsx   | 19 +++++++++----------
 .../components/AppChrome/AppChromeService.tsx | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx
index cfa37b4e79d..a9c94b907d1 100644
--- a/public/app/core/components/AppChrome/AppChrome.tsx
+++ b/public/app/core/components/AppChrome/AppChrome.tsx
@@ -1,6 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { PropsWithChildren, useState } from 'react';
-import { useToggle } from 'react-use';
+import React, { PropsWithChildren } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
@@ -17,8 +16,6 @@ export interface Props extends PropsWithChildren<{}> {}
 
 export function AppChrome({ children }: Props) {
   const styles = useStyles2(getStyles);
-  const [searchBarHidden, toggleSearchBar] = useToggle(false); // repace with local storage
-  const [megaMenuOpen, setMegaMenuOpen] = useState(false);
   const state = appChromeService.useState();
 
   if (state.chromeless || !config.featureToggles.topnav) {
@@ -28,18 +25,20 @@ export function AppChrome({ children }: Props) {
   return (
     <main className="main-view">
       <div className={styles.topNav}>
-        {!searchBarHidden && <TopSearchBar />}
+        {!state.searchBarHidden && <TopSearchBar />}
         <NavToolbar
-          searchBarHidden={searchBarHidden}
+          searchBarHidden={state.searchBarHidden}
           sectionNav={state.sectionNav}
           pageNav={state.pageNav}
           actions={state.actions}
-          onToggleSearchBar={toggleSearchBar}
-          onToggleMegaMenu={() => setMegaMenuOpen(!megaMenuOpen)}
+          onToggleSearchBar={appChromeService.toggleSearchBar}
+          onToggleMegaMenu={appChromeService.toggleMegaMenu}
         />
       </div>
-      <div className={cx(styles.content, searchBarHidden && styles.contentNoSearchBar)}>{children}</div>
-      {megaMenuOpen && <MegaMenu searchBarHidden={searchBarHidden} onClose={() => setMegaMenuOpen(false)} />}
+      <div className={cx(styles.content, state.searchBarHidden && styles.contentNoSearchBar)}>{children}</div>
+      {state.megaMenuOpen && (
+        <MegaMenu searchBarHidden={state.searchBarHidden} onClose={appChromeService.toggleMegaMenu} />
+      )}
     </main>
   );
 }
diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx
index 0c113f7701d..bf6c0c031b6 100644
--- a/public/app/core/components/AppChrome/AppChromeService.tsx
+++ b/public/app/core/components/AppChrome/AppChromeService.tsx
@@ -2,6 +2,7 @@ import { useObservable } from 'react-use';
 import { BehaviorSubject } from 'rxjs';
 
 import { NavModelItem } from '@grafana/data';
+import store from 'app/core/store';
 import { isShallowEqual } from 'app/core/utils/isShallowEqual';
 
 import { RouteDescriptor } from '../../navigation/types';
@@ -11,14 +12,19 @@ export interface AppChromeState {
   sectionNav: NavModelItem;
   pageNav?: NavModelItem;
   actions?: React.ReactNode;
+  searchBarHidden?: boolean;
+  megaMenuOpen?: boolean;
 }
 
 const defaultSection: NavModelItem = { text: 'Grafana' };
 
 export class AppChromeService {
+  searchBarStorageKey = 'SearchBar_Hidden';
+
   readonly state = new BehaviorSubject<AppChromeState>({
     chromeless: true, // start out hidden to not flash it on pages without chrome
     sectionNav: defaultSection,
+    searchBarHidden: store.getBool(this.searchBarStorageKey, false),
   });
 
   routeMounted(route: RouteDescriptor) {
@@ -42,6 +48,16 @@ export class AppChromeService {
     }
   }
 
+  toggleMegaMenu = () => {
+    this.update({ megaMenuOpen: !this.state.getValue().megaMenuOpen });
+  };
+
+  toggleSearchBar = () => {
+    const searchBarHidden = !this.state.getValue().searchBarHidden;
+    store.set(this.searchBarStorageKey, searchBarHidden);
+    this.update({ searchBarHidden });
+  };
+
   useState() {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useObservable(this.state, this.state.getValue());