[Serverless Chrome] Polish of home logo and project switcher

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { BehaviorSubject, combineLatest, merge, type Observable, of, ReplaySubject } from 'rxjs';
-import { flatMap, map, takeUntil } from 'rxjs/operators';
+import { mergeMap, map, takeUntil } from 'rxjs/operators';
 import { parse } from 'url';
 import { EuiLink } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
@@ -89,7 +89,7 @@ export class ChromeService {
       // in the sense that the chrome UI should not be displayed until a non-chromeless app is mounting or mounted
       of(true),
       application.currentAppId$.pipe(
-        flatMap((appId) =>
+        mergeMap((appId) =>
           application.applications$.pipe(
             map((applications) => {
               return !!appId && applications.has(appId) && !!applications.get(appId)!.chromeless;
@@ -177,25 +177,23 @@ export class ChromeService {
       chromeStyle$.next(style);
     };
 
-    const setProjectSideNavComponent = (component: ISideNavComponent | null) => {
+    const validateChromeStyle = () => {
       const chromeStyle = chromeStyle$.getValue();
       if (chromeStyle !== 'project') {
         // Helps ensure callers go through the serverless plugin to get here.
         throw new Error(
-          `Invalid ChromeStyle value of "${chromeStyle}". setProjectSideNavComponent requires ChromeStyle set to "project".`
+          `Invalid ChromeStyle value of "${chromeStyle}". This method requires ChromeStyle set to "project".`
         );
       }
+    };
+
+    const setProjectSideNavComponent = (component: ISideNavComponent | null) => {
+      validateChromeStyle();
       projectNavigation.setProjectSideNavComponent(component);
     };
 
     const setProjectNavigation = (config: ChromeProjectNavigation) => {
-      const chromeStyle = chromeStyle$.getValue();
-      if (chromeStyle !== 'project') {
-        // Helps ensure callers go through the serverless plugin to get here.
-        throw new Error(
-          `Invalid ChromeStyle value of "${chromeStyle}". setProjectNavigation requires ChromeStyle set to "project".`
-        );
-      }
+      validateChromeStyle();
       projectNavigation.setProjectNavigation(config);
     };
 
@@ -206,6 +204,11 @@ export class ChromeService {
       projectNavigation.setProjectBreadcrumbs(breadcrumbs, params);
     };
 
+    const setProjectHome = (homeHref: string) => {
+      validateChromeStyle();
+      projectNavigation.setProjectHome(homeHref);
+    };
+
     const isIE = () => {
       const ua = window.navigator.userAgent;
       const msie = ua.indexOf('MSIE '); // IE 10 or older
@@ -288,9 +291,14 @@ export class ChromeService {
               breadcrumbs$={projectBreadcrumbs$.pipe(takeUntil(this.stop$))}
               helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
               helpSupportUrl$={helpSupportUrl$.pipe(takeUntil(this.stop$))}
+              navControlsLeft$={navControls.getLeft$()}
+              navControlsCenter$={navControls.getCenter$()}
               navControlsRight$={navControls.getRight$()}
+              loadingCount$={http.getLoadingCount$()}
+              homeHref$={projectNavigation.getProjectHome$()}
               kibanaDocLink={docLinks.links.kibana.guide}
               kibanaVersion={injectedMetadata.getKibanaVersion()}
+              prependBasePath={http.basePath.prepend}
             >
               {/* TODO: pass down the SideNavCompProps once they are defined  */}
               <SideNavComponent />
@@ -405,6 +413,7 @@ export class ChromeService {
       setChromeStyle,
       getChromeStyle$: () => chromeStyle$.pipe(takeUntil(this.stop$)),
       project: {
+        setHome: setProjectHome,
         setNavigation: setProjectNavigation,
         setSideNavComponent: setProjectSideNavComponent,
         setBreadcrumbs: setProjectBreadcrumbs,

packages/core/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.ts

@@ -26,6 +26,7 @@ export class ProjectNavigationService {
   private customProjectSideNavComponent$ = new BehaviorSubject<{
     current: SideNavComponent | null;
   }>({ current: null });
+  private projectHome$ = new BehaviorSubject<string | undefined>(undefined);
   private projectNavigation$ = new BehaviorSubject<ChromeProjectNavigation | undefined>(undefined);
 
   private projectBreadcrumbs$ = new BehaviorSubject<{
@@ -40,6 +41,12 @@ export class ProjectNavigationService {
     // 3. keep track of currently active link / path (path will be used to highlight the link in the sidenav and display part of the breadcrumbs)
 
     return {
+      setProjectHome: (homeHref: string) => {
+        this.projectHome$.next(homeHref);
+      },
+      getProjectHome$: () => {
+        return this.projectHome$.asObservable();
+      },
       setProjectNavigation: (projectNavigation: ChromeProjectNavigation) => {
         this.projectNavigation$.next(projectNavigation);
       },

packages/core/chrome/core-chrome-browser-internal/src/types.ts

@@ -32,34 +32,42 @@ export interface InternalChromeStart extends ChromeStart {
 
   /**
    * Used only by the serverless plugin to customize project-style chrome.
-   * Use {@link ServerlessPluginStart.setSideNavComponent} to set serverless navigation.
+   * @internal
    */
   project: {
+    /**
+     * Sets the project home href string.
+     * @param homeHref
+     *
+     * Use {@link ServerlessPluginStart.setProjectHome} to set project home.
+     */
+    setHome(homeHref: string): void;
+
     /**
      * Sets the project navigation config to be used for rendering project navigation.
      * It is used for default project sidenav, project breadcrumbs, tracking active deep link.
      * @param projectNavigation The project navigation config
      *
-     * @remarks Has no effect if the chrome style is not `project`.
+     * Use {@link ServerlessPluginStart.setNavigation} to set project navigation config.
      */
     setNavigation(projectNavigation: ChromeProjectNavigation): void;
 
     /**
      * Set custom project sidenav component to be used instead of the default project sidenav.
-     * @param getter A function returning a CustomNavigationComponent.
-     * This component will receive Chrome navigation state as props (not yet implemented)
+     * @param component A getter function returning a CustomNavigationComponent.
+     *
+     * @remarks This component will receive Chrome navigation state as props (not yet implemented)
      *
-     * @remarks Has no effect if the chrome style is not `project`.
+     * Use {@link ServerlessPluginStart.setSideNavComponent} to set custom project navigation.
      */
     setSideNavComponent(component: SideNavComponent | null): void;
 
     /**
      * Set project breadcrumbs
-     *
      * @param breadcrumbs
      * @param params.absolute If true, If true, the breadcrumbs will replace the defaults, otherwise they will be appended to the default ones. false by default.
      *
-     * @remarks Has no effect if the chrome style is not `project` or if setNavigation was not called
+     * Use {@link ServerlessPluginStart.setBreadcrumbs} to set project breadcrumbs.
      */
     setBreadcrumbs(
       breadcrumbs: ChromeProjectBreadcrumb[] | ChromeProjectBreadcrumb,