[navigation-next] feat: introduce new interface for group(#7060)

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

Author: SuZhou-Joe

changelogs/fragments/7060.yml

@@ -0,0 +1,2 @@
+feat:
+- Introduce new interface for group ([#7060](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7060))

src/core/public/chrome/README.md

@@ -6,6 +6,7 @@
 - [Nav Links Service](#navlinksservice-)
 - [Recently Accessed Service](#recentlyaccessedservice-)
 - [Doc Title Service](#doctitleservice-)
+- [Nav Group Service](#chromenavgroupservice-)
 - [UI](#ui-)
 
 ## About :
@@ -112,6 +113,31 @@ Gets an Observable of the array of recently accessed history :-
    chrome.docTitle.change('My application title')
    chrome.docTitle.change(['My application', 'My section'])
    ```
+### ChromeNavGroupService:
+- Interface : ChromeNavGroup
+- Signature : ```navGroup: ChromeNavGroupService```
+- Methods :
+Add nav links to group :-
+
+`addNavLinksToGroup: (group: ChromeNavGroup, navLinks: ChromeRegistrationNavLink[]) => void;`
+
+Gets an Observable of the array of registered groups :-
+
+`getNavGroupsMap$: Observable<Record<string, NavGroupItemInMap>>`
+##### Register a new group with a navLink
+
+  ```ts
+    coreSetup.chrome.navGroup.addNavLinksToGroup(
+      { 
+        id: 'my-group',
+        title: 'A demo group',
+        description: 'description for demo group'
+      },
+      [{
+        id: 'nav'
+      }]
+    )
+   ```
 ### UI :
 ###### consists of tsx/scss files && renders UI components from css Library e.g ```<Progress props={props}>```
 

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

@@ -36,6 +36,10 @@ import { getLogosMock } from '../../common/mocks';
 const createSetupContractMock = () => {
   return {
     registerCollapsibleNavHeader: jest.fn(),
+    navGroup: {
+      addNavLinksToGroup: jest.fn(),
+      getNavGroupEnabled: jest.fn(),
+    },
   };
 };
 
@@ -70,6 +74,10 @@ const createStartContractMock = () => {
       getCenter$: jest.fn(),
       getRight$: jest.fn(),
     },
+    navGroup: {
+      getNavGroupsMap$: jest.fn(() => new BehaviorSubject({})),
+      getNavGroupEnabled: jest.fn(),
+    },
     setAppTitle: jest.fn(),
     setIsVisible: jest.fn(),
     getIsVisible$: jest.fn(),

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

@@ -90,6 +90,8 @@ async function start({
 }: { options?: any; cspConfigMock?: any; startDeps?: ReturnType<typeof defaultStartDeps> } = {}) {
   const service = new ChromeService(options);
 
+  service.setup({ uiSettings: startDeps.uiSettings });
+
   if (cspConfigMock) {
     startDeps.injectedMetadata.getCspConfig.mockReturnValue(cspConfigMock);
   }
@@ -119,8 +121,9 @@ describe('setup', () => {
     const customHeaderMock = React.createElement('TestCustomNavHeader');
     const renderMock = jest.fn().mockReturnValue(customHeaderMock);
     const chrome = new ChromeService({ browserSupportsCsp: true });
+    const uiSettings = uiSettingsServiceMock.createSetupContract();
 
-    const chromeSetup = chrome.setup();
+    const chromeSetup = chrome.setup({ uiSettings });
     chromeSetup.registerCollapsibleNavHeader(renderMock);
 
     const chromeStart = await chrome.start(defaultStartDeps());
@@ -135,8 +138,9 @@ describe('setup', () => {
     const customHeaderMock = React.createElement('TestCustomNavHeader');
     const renderMock = jest.fn().mockReturnValue(customHeaderMock);
     const chrome = new ChromeService({ browserSupportsCsp: true });
+    const uiSettings = uiSettingsServiceMock.createSetupContract();
 
-    const chromeSetup = chrome.setup();
+    const chromeSetup = chrome.setup({ uiSettings });
     // call 1st time
     chromeSetup.registerCollapsibleNavHeader(renderMock);
     // call 2nd time

src/core/public/chrome/chrome_service.tsx

@@ -52,6 +52,11 @@ import { Branding } from '../';
 import { getLogos } from '../../common';
 import type { Logos } from '../../common/types';
 import { OverlayStart } from '../overlays';
+import {
+  ChromeNavGroupService,
+  ChromeNavGroupServiceSetupContract,
+  ChromeNavGroupServiceStartContract,
+} from './nav_group';
 
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
@@ -90,6 +95,10 @@ interface ConstructorParams {
   browserSupportsCsp: boolean;
 }
 
+export interface SetupDeps {
+  uiSettings: IUiSettingsClient;
+}
+
 export interface StartDeps {
   application: InternalApplicationStart;
   docLinks: DocLinksStart;
@@ -111,6 +120,7 @@ export class ChromeService {
   private readonly navLinks = new NavLinksService();
   private readonly recentlyAccessed = new RecentlyAccessedService();
   private readonly docTitle = new DocTitleService();
+  private readonly navGroup = new ChromeNavGroupService();
   private collapsibleNavHeaderRender?: CollapsibleNavHeaderRender;
 
   constructor(private readonly params: ConstructorParams) {}
@@ -147,7 +157,8 @@ export class ChromeService {
     );
   }
 
-  public setup() {
+  public setup({ uiSettings }: SetupDeps): ChromeSetup {
+    const navGroup = this.navGroup.setup({ uiSettings });
     return {
       registerCollapsibleNavHeader: (render: CollapsibleNavHeaderRender) => {
         if (this.collapsibleNavHeaderRender) {
@@ -158,6 +169,7 @@ export class ChromeService {
         }
         this.collapsibleNavHeaderRender = render;
       },
+      navGroup,
     };
   }
 
@@ -186,6 +198,7 @@ export class ChromeService {
     const navLinks = this.navLinks.start({ application, http });
     const recentlyAccessed = await this.recentlyAccessed.start({ http });
     const docTitle = this.docTitle.start({ document: window.document });
+    const navGroup = await this.navGroup.start({ navLinks });
 
     // erase chrome fields from a previous app while switching to a next app
     application.currentAppId$.subscribe(() => {
@@ -254,6 +267,7 @@ export class ChromeService {
       recentlyAccessed,
       docTitle,
       logos,
+      navGroup,
 
       getHeaderComponent: () => (
         <Header
@@ -344,6 +358,7 @@ export class ChromeService {
 
   public stop() {
     this.navLinks.stop();
+    this.navGroup.stop();
     this.stop$.next();
   }
 }
@@ -360,6 +375,7 @@ export class ChromeService {
  */
 export interface ChromeSetup {
   registerCollapsibleNavHeader: (render: CollapsibleNavHeaderRender) => void;
+  navGroup: ChromeNavGroupServiceSetupContract;
 }
 
 /**
@@ -397,6 +413,8 @@ export interface ChromeStart {
   recentlyAccessed: ChromeRecentlyAccessed;
   /** {@inheritdoc ChromeDocTitle} */
   docTitle: ChromeDocTitle;
+  /** {@inheritdoc NavGroupService} */
+  navGroup: ChromeNavGroupServiceStartContract;
   /** {@inheritdoc Logos} */
   readonly logos: Logos;
 

src/core/public/chrome/index.ts

@@ -50,3 +50,4 @@ export { ChromeRecentlyAccessed, ChromeRecentlyAccessedHistoryItem } from './rec
 export { ChromeNavControl, ChromeNavControls } from './nav_controls';
 export { ChromeDocTitle } from './doc_title';
 export { RightNavigationOrder } from './constants';
+export { ChromeRegistrationNavLink } from './nav_group';

src/core/public/chrome/nav_group/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export {
+  ChromeNavGroupService,
+  ChromeNavGroupServiceSetupContract,
+  ChromeNavGroupServiceStartContract,
+  ChromeRegistrationNavLink,
+  NavGroupItemInMap,
+} from './nav_group_service';