[navigation-next] Add new left navigation (#7230)

* [navigation-next] Add CollapsibleNavGroupEnabled component into chrome_service.(#7093) Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: enable parent nav link id Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: modify left navigation Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: modify style Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: enable left bottom Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * temp: merge Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: save Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: merge Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * temp change Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * temp change Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * fix: overview page can not be load Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: remove useless change Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: add unit test Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: update snapshot Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * fix: unit test error Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * fix: new application Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: add unit test Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: update category based on latest design Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: update Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: update snapshot Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: do not emphasize see all link Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * Changeset file for PR #7230 created/updated * feat: update Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: update Signed-off-by: SuZhou-Joe <suzhou@amazon.com> --------- Signed-off-by: SuZhou-Joe <suzhou@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Jul 18, 2024 · 38ae65b · 38ae65b
1 parent 964c6c9
commit 38ae65b
Show file tree

Hide file tree

Showing 46 changed files with 2,354 additions and 136 deletions.
diff --git a/changelogs/fragments/7230.yml b/changelogs/fragments/7230.yml
@@ -0,0 +1,2 @@
+feat:
+- [navigation-next] Add new left navigation ([#7230](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7230))
diff --git a/src/core/public/chrome/chrome_service.mock.ts b/src/core/public/chrome/chrome_service.mock.ts
@@ -71,9 +71,11 @@ const createStartContractMock = () => {
       registerLeft: jest.fn(),
       registerCenter: jest.fn(),
       registerRight: jest.fn(),
+      registerLeftBottom: jest.fn(),
       getLeft$: jest.fn(),
       getCenter$: jest.fn(),
       getRight$: jest.fn(),
+      getLeftBottom$: jest.fn(),
     },
     navGroup: {
       getNavGroupsMap$: jest.fn(() => new BehaviorSubject({})),

diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
@@ -294,6 +294,7 @@ export class ChromeService {
           navControlsRight$={navControls.getRight$()}
           navControlsExpandedCenter$={navControls.getExpandedCenter$()}
           navControlsExpandedRight$={navControls.getExpandedRight$()}
+          navControlsLeftBottom$={navControls.getLeftBottom$()}
           onIsLockedUpdate={setIsNavDrawerLocked}
           isLocked$={getIsNavDrawerLocked$}
           branding={injectedMetadata.getBranding()}
@@ -302,7 +303,9 @@ export class ChromeService {
           collapsibleNavHeaderRender={this.collapsibleNavHeaderRender}
           sidecarConfig$={sidecarConfig$}
           navGroupEnabled={navGroup.getNavGroupEnabled()}
-          currentNavgroup$={navGroup.getCurrentNavGroup$()}
+          currentNavGroup$={navGroup.getCurrentNavGroup$()}
+          navGroupsMap$={navGroup.getNavGroupsMap$()}
+          setCurrentNavGroup={navGroup.setCurrentNavGroup}
         />
       ),
 

diff --git a/src/core/public/chrome/index.ts b/src/core/public/chrome/index.ts
@@ -50,4 +50,4 @@ export { ChromeRecentlyAccessed, ChromeRecentlyAccessedHistoryItem } from './rec
 export { ChromeNavControl, ChromeNavControls } from './nav_controls';
 export { ChromeDocTitle } from './doc_title';
 export { RightNavigationOrder } from './constants';
-export { ChromeRegistrationNavLink, ChromeNavGroupUpdater } from './nav_group';
+export { ChromeRegistrationNavLink, ChromeNavGroupUpdater, NavGroupItemInMap } from './nav_group';
diff --git a/src/core/public/chrome/nav_controls/nav_controls_service.test.ts b/src/core/public/chrome/nav_controls/nav_controls_service.test.ts
@@ -143,4 +143,24 @@ describe('RecentlyAccessed#start()', () => {
       ]);
     });
   });
+
+  describe('expanded left bottom controls', () => {
+    it('allows registration', async () => {
+      const navControls = getStart();
+      const nc = { mount: jest.fn() };
+      navControls.registerLeftBottom(nc);
+      expect(await navControls.getLeftBottom$().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.registerLeftBottom(nc1);
+      navControls.registerLeftBottom(nc2);
+      navControls.registerLeftBottom(nc3);
+      expect(await navControls.getLeftBottom$().pipe(take(1)).toPromise()).toEqual([nc2, nc1, nc3]);
+    });
+  });
 });
diff --git a/src/core/public/chrome/nav_controls/nav_controls_service.ts b/src/core/public/chrome/nav_controls/nav_controls_service.ts
@@ -62,12 +62,16 @@ export interface ChromeNavControls {
   registerRight(navControl: ChromeNavControl): void;
   /** Register a nav control to be presented on the top-center side of the chrome header. */
   registerCenter(navControl: ChromeNavControl): void;
+  /** Register a nav control to be presented on the left-bottom side of the left navigation. */
+  registerLeftBottom(navControl: ChromeNavControl): void;
   /** @internal */
   getLeft$(): Observable<ChromeNavControl[]>;
   /** @internal */
   getRight$(): Observable<ChromeNavControl[]>;
   /** @internal */
   getCenter$(): Observable<ChromeNavControl[]>;
+  /** @internal */
+  getLeftBottom$(): Observable<ChromeNavControl[]>;
 }
 
 /** @internal */
@@ -82,6 +86,7 @@ export class NavControlsService {
     const navControlsExpandedCenter$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(
       new Set()
     );
+    const navControlsLeftBottom$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
 
     return {
       // In the future, registration should be moved to the setup phase. This
@@ -105,6 +110,11 @@ export class NavControlsService {
           new Set([...navControlsExpandedCenter$.value.values(), navControl])
         ),
 
+      registerLeftBottom: (navControl: ChromeNavControl) =>
+        navControlsLeftBottom$.next(
+          new Set([...navControlsLeftBottom$.value.values(), navControl])
+        ),
+
       getLeft$: () =>
         navControlsLeft$.pipe(
           map((controls) => sortBy([...controls.values()], 'order')),
@@ -130,6 +140,11 @@ export class NavControlsService {
           map((controls) => sortBy([...controls.values()], 'order')),
           takeUntil(this.stop$)
         ),
+      getLeftBottom$: () =>
+        navControlsLeftBottom$.pipe(
+          map((controls) => sortBy([...controls.values()], 'order')),
+          takeUntil(this.stop$)
+        ),
     };
   }