Refactor workspace context menu register

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

@@ -33,6 +33,12 @@ import type { PublicMethodsOf } from '@osd/utility-types';
 import { ChromeBadge, ChromeBreadcrumb, ChromeService, InternalChromeStart } from './';
 import { getLogosMock } from '../../common/mocks';
 
+const createSetupContractMock = () => {
+  return {
+    registerCollapsibleNavHeader: jest.fn(),
+  };
+};
+
 const createStartContractMock = () => {
   const startContract: DeeplyMockedKeys<InternalChromeStart> = {
     getHeaderComponent: jest.fn(),
@@ -97,6 +103,7 @@ const createStartContractMock = () => {
 type ChromeServiceContract = PublicMethodsOf<ChromeService>;
 const createMock = () => {
   const mocked: jest.Mocked<ChromeServiceContract> = {
+    setup: jest.fn(),
     start: jest.fn(),
     stop: jest.fn(),
   };
@@ -107,4 +114,5 @@ const createMock = () => {
 export const chromeServiceMock = {
   create: createMock,
   createStartContract: createStartContractMock,
+  createSetupContract: createSetupContractMock,
 };

src/core/public/chrome/chrome_service.tsx

@@ -99,6 +99,12 @@ interface StartDeps {
   workspaces: WorkspacesStart;
 }
 
+type CollapsibleNavHeaderRender = (context: {
+  basePath: HttpStart['basePath'];
+  getUrlForApp: InternalApplicationStart['getUrlForApp'];
+  workspaces: WorkspacesStart;
+}) => JSX.Element | null;
+
 /** @internal */
 export class ChromeService {
   private isVisible$!: Observable<boolean>;
@@ -108,6 +114,7 @@ export class ChromeService {
   private readonly navLinks = new NavLinksService();
   private readonly recentlyAccessed = new RecentlyAccessedService();
   private readonly docTitle = new DocTitleService();
+  private collapsibleNavHeaderRender?: CollapsibleNavHeaderRender;
 
   constructor(private readonly params: ConstructorParams) {}
 
@@ -143,6 +150,14 @@ export class ChromeService {
     );
   }
 
+  public setup() {
+    return {
+      registerCollapsibleNavHeader: (render: CollapsibleNavHeaderRender) => {
+        this.collapsibleNavHeaderRender = render;
+      },
+    };
+  }
+
   public async start({
     application,
     docLinks,
@@ -181,6 +196,15 @@ export class ChromeService {
       localStorage.setItem(IS_LOCKED_KEY, `${isLocked}`);
     };
 
+    const collapsibleNavHeaderRender = () =>
+      this.collapsibleNavHeaderRender
+        ? this.collapsibleNavHeaderRender({
+            basePath: http.basePath,
+            workspaces,
+            getUrlForApp: application.getUrlForApp,
+          })
+        : null;
+
     const getIsNavDrawerLocked$ = isNavDrawerLocked$.pipe(takeUntil(this.stop$));
 
     const logos = getLogos(injectedMetadata.getBranding(), http.basePath.serverBasePath);
@@ -264,7 +288,7 @@ export class ChromeService {
           branding={injectedMetadata.getBranding()}
           logos={logos}
           survey={injectedMetadata.getSurvey()}
-          workspaces={workspaces}
+          collapsibleNavHeaderRender={collapsibleNavHeaderRender}
         />
       ),
 
@@ -328,6 +352,20 @@ export class ChromeService {
   }
 }
 
+/**
+ * ChromeSetup allows plugins to customize the global chrome header UI rendering
+ * before the header UI is mounted.
+ *
+ * @example
+ * Customize the Collapsible Nav's (left nav menu) header section:
+ * ```ts
+ * core.chrome.registerCollapsibleNavHeader(() => <CustomNavHeader />)
+ * ```
+ */
+export interface ChromeSetup {
+  registerCollapsibleNavHeader: (render: CollapsibleNavHeaderRender) => void;
+}
+
 /**
  * ChromeStart allows plugins to customize the global chrome header UI and
  * enrich the UX with additional information about the current location of the

src/core/public/chrome/index.ts

@@ -33,6 +33,7 @@ export {
   ChromeBreadcrumb,
   ChromeService,
   ChromeStart,
+  ChromeSetup,
   InternalChromeStart,
   ChromeHelpExtension,
 } from './chrome_service';