[navigation-next] feat: introduce new interface for group

changelogs/fragments/7060.yml

@@ -0,0 +1,2 @@
+feat:
+- Introduce new interface for group ([#7060](https:/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 @@
 const createSetupContractMock = () => {
  return {
  registerCollapsibleNavHeader: jest.fn(),
+ navGroup: {
+ addNavLinksToGroup: jest.fn(),
+ getNavGroupEnabled: jest.fn(),
+ },
  };
 };
 
@@ -70,6 +74,10 @@
  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';