Add navControlsPrimaryHeaderRight slot to header (#9223) (#9250)

* Add navControlNewPrimaryRight slot to header



* Changeset file for PR #9223 created/updated

* Fix vertical align for header items



* Fix test coverage drop



* Fix failed UTs



* Fix bootstrap failed



* Update failed snapshots



* Remove left border



* Refactor with headerRight



* Renaming to primaryHeaderRight



* Changeset file for PR #9223 created/updated

---------



(cherry picked from commit 8ae1c71)

Signed-off-by: Lin Wang <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: 3 people

changelogs/fragments/9223.yml

@@ -0,0 +1,2 @@
+feat:
+- Add navControlsPrimaryHeaderRight slot to header ([#9223](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9223))

src/core/public/chrome/chrome_service.mock.ts

@@ -75,10 +75,12 @@ const createStartContractMock = () => {
       registerCenter: jest.fn(),
       registerRight: jest.fn(),
       registerLeftBottom: jest.fn(),
+      registerPrimaryHeaderRight: jest.fn(),
       getLeft$: jest.fn(),
       getCenter$: jest.fn(),
       getRight$: jest.fn(),
       getLeftBottom$: jest.fn(),
+      getPrimaryHeaderRight$: jest.fn(),
     },
     navGroup: {
       getNavGroupsMap$: jest.fn(() => new BehaviorSubject({})),

src/core/public/chrome/chrome_service.tsx

@@ -392,6 +392,7 @@ export class ChromeService {
           navControlsExpandedCenter$={navControls.getExpandedCenter$()}
           navControlsExpandedRight$={navControls.getExpandedRight$()}
           navControlsLeftBottom$={navControls.getLeftBottom$()}
+          navControlsPrimaryHeaderRight$={navControls.getPrimaryHeaderRight$()}
           onIsLockedUpdate={setIsNavDrawerLocked}
           isLocked$={getIsNavDrawerLocked$}
           branding={injectedMetadata.getBranding()}

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

@@ -163,4 +163,28 @@ describe('RecentlyAccessed#start()', () => {
       expect(await navControls.getLeftBottom$().pipe(take(1)).toPromise()).toEqual([nc2, nc1, nc3]);
     });
   });
+
+  describe('new primary header right controls', () => {
+    it('allows registration', async () => {
+      const navControls = getStart();
+      const nc = { mount: jest.fn() };
+      navControls.registerPrimaryHeaderRight(nc);
+      expect(await navControls.getPrimaryHeaderRight$().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.registerPrimaryHeaderRight(nc1);
+      navControls.registerPrimaryHeaderRight(nc2);
+      navControls.registerPrimaryHeaderRight(nc3);
+      expect(await navControls.getPrimaryHeaderRight$().pipe(take(1)).toPromise()).toEqual([
+        nc2,
+        nc1,
+        nc3,
+      ]);
+    });
+  });
 });

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

@@ -64,6 +64,8 @@ export interface ChromeNavControls {
   registerCenter(navControl: ChromeNavControl): void;
   /** Register a nav control to be presented on the left-bottom side of the left navigation. */
   registerLeftBottom(navControl: ChromeNavControl): void;
+  /** Register a nav control to be presented on the right side of the primary chrome header. */
+  registerPrimaryHeaderRight(navControl: ChromeNavControl): void;
   /** @internal */
   getLeft$(): Observable<ChromeNavControl[]>;
   /** @internal */
@@ -72,6 +74,8 @@ export interface ChromeNavControls {
   getCenter$(): Observable<ChromeNavControl[]>;
   /** @internal */
   getLeftBottom$(): Observable<ChromeNavControl[]>;
+  /** @internal */
+  getPrimaryHeaderRight$(): Observable<ChromeNavControl[]>;
 }
 
 /** @internal */
@@ -87,6 +91,9 @@ export class NavControlsService {
       new Set()
     );
     const navControlsLeftBottom$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
+    const navControlsPrimaryHeaderRight$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(
+      new Set()
+    );
 
     return {
       // In the future, registration should be moved to the setup phase. This
@@ -115,6 +122,11 @@ export class NavControlsService {
           new Set([...navControlsLeftBottom$.value.values(), navControl])
         ),
 
+      registerPrimaryHeaderRight: (navControl: ChromeNavControl) =>
+        navControlsPrimaryHeaderRight$.next(
+          new Set([...navControlsPrimaryHeaderRight$.value.values(), navControl])
+        ),
+
       getLeft$: () =>
         navControlsLeft$.pipe(
           map((controls) => sortBy([...controls.values()], 'order')),
@@ -145,6 +157,11 @@ export class NavControlsService {
           map((controls) => sortBy([...controls.values()], 'order')),
           takeUntil(this.stop$)
         ),
+      getPrimaryHeaderRight$: () =>
+        navControlsPrimaryHeaderRight$.pipe(
+          map((controls) => sortBy([...controls.values()], 'order')),
+          takeUntil(this.stop$)
+        ),
     };
   }