[UX] Consolidate menu bars

config/opensearch_dashboards.yml

@@ -175,6 +175,7 @@
 #     darkModeUrl: ""
 #   faviconUrl: ""
 #   applicationTitle: ""
+#   useExpandedMenu: false
 
 # Set the value of this setting to true to capture region blocked warnings and errors
 # for your map rendering services.

src/core/public/_variables.scss

@@ -1,3 +1,3 @@
 @import "@elastic/eui/src/global_styling/variables/header";
 
-$osdHeaderOffset: $euiHeaderHeightCompensation * 2;
+$osdHeaderOffset: $euiHeaderHeightCompensation;

src/core/public/chrome/chrome_service.tsx

@@ -257,6 +257,8 @@ export class ChromeService {
           navControlsLeft$={navControls.getLeft$()}
           navControlsCenter$={navControls.getCenter$()}
           navControlsRight$={navControls.getRight$()}
+          navControlsExpandedCenter$={navControls.getExpandedCenter$()}
+          navControlsExpandedRight$={navControls.getExpandedRight$()}
           onIsLockedUpdate={setIsNavDrawerLocked}
           isLocked$={getIsNavDrawerLocked$}
           branding={injectedMetadata.getBranding()}

src/core/public/chrome/nav_controls/nav_controls_service.test.ts

@@ -36,7 +36,7 @@ describe('RecentlyAccessed#start()', () => {
     return new NavControlsService().start();
   };
 
-  describe('left side', () => {
+  describe('left contorols', () => {
     it('allows registration', async () => {
       const navControls = getStart();
       const nc = { mount: jest.fn() };
@@ -56,7 +56,7 @@ describe('RecentlyAccessed#start()', () => {
     });
   });
 
-  describe('right side', () => {
+  describe('right controls', () => {
     it('allows registration', async () => {
       const navControls = getStart();
       const nc = { mount: jest.fn() };
@@ -75,4 +75,72 @@ describe('RecentlyAccessed#start()', () => {
       expect(await navControls.getRight$().pipe(take(1)).toPromise()).toEqual([nc2, nc1, nc3]);
     });
   });
+
+  describe('center controls', () => {
+    it('allows registration', async () => {
+      const navControls = getStart();
+      const nc = { mount: jest.fn() };
+      navControls.registerCenter(nc);
+      expect(await navControls.getCenter$().pipe(take(1)).toPromise()).toEqual([nc]);
+    });
+
+    it('sorts controls by order property', async () => {
+      const navControls = getStart();
+      const nc1 = { mount: jest.fn(), order: 10 };
+      const nc2 = { mount: jest.fn(), order: 0 };
+      const nc3 = { mount: jest.fn(), order: 20 };
+      navControls.registerCenter(nc1);
+      navControls.registerCenter(nc2);
+      navControls.registerCenter(nc3);
+      expect(await navControls.getCenter$().pipe(take(1)).toPromise()).toEqual([nc2, nc1, nc3]);
+    });
+  });
+
+  describe('expanded right controls', () => {
+    it('allows registration', async () => {
+      const navControls = getStart();
+      const nc = { mount: jest.fn() };
+      navControls.registerExpandedRight(nc);
+      expect(await navControls.getExpandedRight$().pipe(take(1)).toPromise()).toEqual([nc]);
+    });
+
+    it('sorts controls by order property', async () => {
+      const navControls = getStart();
+      const nc1 = { mount: jest.fn(), order: 10 };
+      const nc2 = { mount: jest.fn(), order: 0 };
+      const nc3 = { mount: jest.fn(), order: 20 };
+      navControls.registerExpandedRight(nc1);
+      navControls.registerExpandedRight(nc2);
+      navControls.registerExpandedRight(nc3);
+      expect(await navControls.getExpandedRight$().pipe(take(1)).toPromise()).toEqual([
+        nc2,
+        nc1,
+        nc3,
+      ]);
+    });
+  });
+
+  describe('expanded center controls', () => {
+    it('allows registration', async () => {
+      const navControls = getStart();
+      const nc = { mount: jest.fn() };
+      navControls.registerExpandedCenter(nc);
+      expect(await navControls.getExpandedCenter$().pipe(take(1)).toPromise()).toEqual([nc]);
+    });
+
+    it('sorts controls by order property', async () => {
+      const navControls = getStart();
+      const nc1 = { mount: jest.fn(), order: 10 };
+      const nc2 = { mount: jest.fn(), order: 0 };
+      const nc3 = { mount: jest.fn(), order: 20 };
+      navControls.registerExpandedCenter(nc1);
+      navControls.registerExpandedCenter(nc2);
+      navControls.registerExpandedCenter(nc3);
+      expect(await navControls.getExpandedCenter$().pipe(take(1)).toPromise()).toEqual([
+        nc2,
+        nc1,
+        nc3,
+      ]);
+    });
+  });
 });

src/core/public/chrome/nav_controls/nav_controls_service.ts

@@ -78,6 +78,10 @@ export class NavControlsService {
     const navControlsLeft$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
     const navControlsRight$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
     const navControlsCenter$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
+    const navControlsExpandedRight$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
+    const navControlsExpandedCenter$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(
+      new Set()
+    );
 
     return {
       // In the future, registration should be moved to the setup phase. This
@@ -91,6 +95,16 @@ export class NavControlsService {
       registerCenter: (navControl: ChromeNavControl) =>
         navControlsCenter$.next(new Set([...navControlsCenter$.value.values(), navControl])),
 
+      registerExpandedRight: (navControl: ChromeNavControl) =>
+        navControlsExpandedRight$.next(
+          new Set([...navControlsExpandedRight$.value.values(), navControl])
+        ),
+
+      registerExpandedCenter: (navControl: ChromeNavControl) =>
+        navControlsExpandedCenter$.next(
+          new Set([...navControlsExpandedCenter$.value.values(), navControl])
+        ),
+
       getLeft$: () =>
         navControlsLeft$.pipe(
           map((controls) => sortBy([...controls.values()], 'order')),
@@ -106,6 +120,16 @@ export class NavControlsService {
           map((controls) => sortBy([...controls.values()], 'order')),
           takeUntil(this.stop$)
         ),
+      getExpandedRight$: () =>
+        navControlsExpandedRight$.pipe(
+          map((controls) => sortBy([...controls.values()], 'order')),
+          takeUntil(this.stop$)
+        ),
+      getExpandedCenter$: () =>
+        navControlsExpandedCenter$.pipe(
+          map((controls) => sortBy([...controls.values()], 'order')),
+          takeUntil(this.stop$)
+        ),
     };
   }