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

* [navigation-next] Add CollapsibleNavGroupEnabled component into chrome_service.(#7093)



* feat: enable parent nav link id



* feat: modify left navigation



* feat: modify style



* feat: enable left bottom



* temp: merge



* feat: save



* feat: merge



* temp change



* temp change



* fix: overview page can not be load



* feat: remove useless change



* feat: add unit test



* feat: update snapshot



* fix: unit test error



* fix: new application



* feat: add unit test



* feat: update category based on latest design



* feat: update



* feat: update snapshot



* feat: do not emphasize see all link



* Changeset file for PR #7230 created/updated

* feat: update



* feat: update



---------

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

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))

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({})),

src/core/public/chrome/chrome_service.tsx

@@ -295,6 +295,7 @@ export class ChromeService {
           navControlsRight$={navControls.getRight$()}
           navControlsExpandedCenter$={navControls.getExpandedCenter$()}
           navControlsExpandedRight$={navControls.getExpandedRight$()}
+          navControlsLeftBottom$={navControls.getLeftBottom$()}
           onIsLockedUpdate={setIsNavDrawerLocked}
           isLocked$={getIsNavDrawerLocked$}
           branding={injectedMetadata.getBranding()}
@@ -303,7 +304,9 @@ export class ChromeService {
           collapsibleNavHeaderRender={this.collapsibleNavHeaderRender}
           sidecarConfig$={sidecarConfig$}
           navGroupEnabled={navGroup.getNavGroupEnabled()}
-          currentNavgroup$={navGroup.getCurrentNavGroup$()}
+          currentNavGroup$={navGroup.getCurrentNavGroup$()}
+          navGroupsMap$={navGroup.getNavGroupsMap$()}
+          setCurrentNavGroup={navGroup.setCurrentNavGroup}
         />
       ),
 

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';

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

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