feat: optimize code

Signed-off-by: SuZhou-Joe <[email protected]>
opensearch-project · Sep 24, 2024 · 05e083d · 05e083d
1 parent d87ccfb
commit 05e083d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 22 deletions.
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.test.tsx
@@ -69,7 +69,6 @@ describe('<CollapsibleNavGroupEnabled />', () => {
       appId$: new BehaviorSubject('test'),
       basePath: mockBasePath,
       id: 'collapsibe-nav',
-      isLocked: false,
       isNavOpen: false,
       currentWorkspace$: new BehaviorSubject<WorkspaceObject | null>({ id: 'test', name: 'test' }),
       navLinks$: new BehaviorSubject([
@@ -94,7 +93,6 @@ describe('<CollapsibleNavGroupEnabled />', () => {
         ...(props?.navLinks || []),
       ]),
       storage: new StubBrowserStorage(),
-      onIsLockedUpdate: () => {},
       closeNav: () => {},
       navigateToApp: () => Promise.resolve(),
       navigateToUrl: () => Promise.resolve(),

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -23,7 +23,6 @@ import { ChromeNavControl, ChromeNavLink } from '../..';
 import { AppCategory, NavGroupType } from '../../../../types';
 import { InternalApplicationStart } from '../../../application/types';
 import { HttpStart } from '../../../http';
-import { OnIsLockedUpdate } from './';
 import { createEuiListItem } from './nav_link';
 import type { Logos } from '../../../../common/types';
 import {
@@ -42,11 +41,9 @@ export interface CollapsibleNavGroupEnabledProps {
   collapsibleNavHeaderRender?: () => JSX.Element | null;
   basePath: HttpStart['basePath'];
   id: string;
-  isLocked: boolean;
   isNavOpen: boolean;
   navLinks$: Rx.Observable<ChromeNavLink[]>;
   storage?: Storage;
-  onIsLockedUpdate: OnIsLockedUpdate;
   closeNav: () => void;
   navigateToApp: InternalApplicationStart['navigateToApp'];
   navigateToUrl: InternalApplicationStart['navigateToUrl'];
@@ -80,10 +77,8 @@ enum NavWidth {
 export function CollapsibleNavGroupEnabled({
   basePath,
   id,
-  isLocked,
   isNavOpen,
   storage = window.localStorage,
-  onIsLockedUpdate,
   closeNav,
   navigateToApp,
   navigateToUrl,

diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx
@@ -265,11 +265,11 @@ describe('Header', () => {
     const props = {
       ...mockProps(),
       branding,
-      navGroupEnabled: true,
-      storage: new StubBrowserStorage(),
+      useUpdatedHeader: true,
+      onIsLockedUpdate: jest.fn(),
     };
     const component = mountWithIntl(<Header {...props} />);
     component.find(EuiHeaderSectionItemButton).first().simulate('click');
-    expect(props.storage.getItem('core.leftNav.navGroupEnabled-true.isNavOpen')).toEqual('true');
+    expect(props.onIsLockedUpdate).toBeCalledWith(true);
   });
 });
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -122,7 +122,6 @@ export interface HeaderProps {
   workspaceList$: Observable<WorkspaceObject[]>;
   currentWorkspace$: WorkspacesStart['currentWorkspace$'];
   useUpdatedHeader?: boolean;
-  storage?: Storage;
 }
 
 const hasValue = (value: any) => {
@@ -148,16 +147,12 @@ export function Header({
   navGroupEnabled,
   setCurrentNavGroup,
   useUpdatedHeader,
-  storage = window.localStorage,
   ...observables
 }: HeaderProps) {
-  const storageKey = `core.leftNav.navGroupEnabled-${!!navGroupEnabled}.isNavOpen`;
   const isVisible = useObservable(observables.isVisible$, false);
   const headerVariant = useObservable(observables.headerVariant$, HeaderVariant.PAGE);
   const isLocked = useObservable(observables.isLocked$, false);
-  const [isNavOpen, setIsNavOpenState] = useState(
-    localStorage.getItem(storageKey) === 'true' ? true : false
-  );
+  const [isNavOpenState, setIsNavOpenState] = useState(isLocked);
   const sidecarConfig = useObservable(observables.sidecarConfig$, undefined);
   const breadcrumbs = useObservable(observables.breadcrumbs$, []);
   const currentWorkspace = useObservable(observables.currentWorkspace$, undefined);
@@ -166,14 +161,20 @@ export function Header({
     return getOsdSidecarPaddingStyle(sidecarConfig);
   }, [sidecarConfig]);
 
+  const isNavOpen = useUpdatedHeader ? isLocked : isNavOpenState;
+
   const setIsNavOpen = useCallback(
     (value) => {
-      setIsNavOpenState(value);
-      if (navGroupEnabled) {
-        storage.setItem(storageKey, JSON.stringify(value));
+      /**
+       * When use updated header, we will regard the lock state as source of truth
+       */
+      if (useUpdatedHeader) {
+        onIsLockedUpdate(value);
+      } else {
+        setIsNavOpenState(value);
       }
     },
-    [setIsNavOpenState, navGroupEnabled, storageKey, storage]
+    [setIsNavOpenState, onIsLockedUpdate, useUpdatedHeader]
   );
 
   if (!isVisible) {
@@ -652,13 +653,11 @@ export function Header({
             appId$={application.currentAppId$}
             collapsibleNavHeaderRender={collapsibleNavHeaderRender}
             id={navId}
-            isLocked={isLocked}
             navLinks$={observables.navLinks$}
             isNavOpen={isNavOpen}
             basePath={basePath}
             navigateToApp={application.navigateToApp}
             navigateToUrl={application.navigateToUrl}
-            onIsLockedUpdate={onIsLockedUpdate}
             closeNav={() => {
               setIsNavOpen(false);
               if (toggleCollapsibleNavRef.current) {