[UX] Consolidate menu bars (#1586)

Add a config option to remove the upper global header and incorporate all items into a single header. While the previous expanded dual header is still the default, we've added a new home button which also serves as the location of the global loading indicator.

Additional changes:

* update branding unit tests
* fix header spacing at smallest breakpoint
* update branding functional tests

Issue resolved:
#1583

Squashed commits:
- update branding mark unit tests
- fix header spacing at smallest breakpoint
- update custom branding functional test
- update line chart functional test ticks to account for more
ticks visisble with larger height of viz area
- update release notes
- add branding config for expanded menu
- revert release note addition
- remove home link from collapsible nav
- Add expanded header option
- Move navControlsRight to left of help
- Rename HeaderLogo to HomeLoader
  - Serves as unified home button and global loading     indicator
  - Add title for tooltip, because purpose may not be obvious
- Rename Mark to HomeIcon
  - Uses home icon when header expanded by default
- Restore HeaderLogo for expanded header
  - Duplicate default logo, rename to match mark naming (default, dark)
- Add new nav control areas for expanded menu only
  - navControlsExpandedRight
  - navControlsExpandedCenter
- Add new body class for expanded header
  - used by styles to correctly set app height
  - remove unecessary duplicate header mixin inclusion
- fix functional tests
  - update test subjects
  - convert home tests to ts
  - update names and methods to be more clear
- update snapshots
- add, update, improve unit tests
- keep expanded as default config
- restore logo link
- update functional tests
- group dark mode branding tests
- final review updates

Signed-off-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit ae6cb80)

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$)
+        ),
     };
   }