Migrate browser-side chrome service to packages (#139892)

* add empty packages

* moves the types and mocks

* messing with scss files

* moving implementation, adapting imports

* fill dependencies for internal package

* start adapting imports

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* fix more usages

* missed one

* in tests now

* update README's

* fix README

* fix indent

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -169,6 +169,9 @@
     "@kbn/core-capabilities-server": "link:bazel-bin/packages/core/capabilities/core-capabilities-server",
     "@kbn/core-capabilities-server-internal": "link:bazel-bin/packages/core/capabilities/core-capabilities-server-internal",
     "@kbn/core-capabilities-server-mocks": "link:bazel-bin/packages/core/capabilities/core-capabilities-server-mocks",
+    "@kbn/core-chrome-browser": "link:bazel-bin/packages/core/chrome/core-chrome-browser",
+    "@kbn/core-chrome-browser-internal": "link:bazel-bin/packages/core/chrome/core-chrome-browser-internal",
+    "@kbn/core-chrome-browser-mocks": "link:bazel-bin/packages/core/chrome/core-chrome-browser-mocks",
     "@kbn/core-config-server-internal": "link:bazel-bin/packages/core/config/core-config-server-internal",
     "@kbn/core-config-server-mocks": "link:bazel-bin/packages/core/config/core-config-server-mocks",
     "@kbn/core-deprecations-browser": "link:bazel-bin/packages/core/deprecations/core-deprecations-browser",
@@ -846,6 +849,9 @@
     "@types/kbn__core-capabilities-server": "link:bazel-bin/packages/core/capabilities/core-capabilities-server/npm_module_types",
     "@types/kbn__core-capabilities-server-internal": "link:bazel-bin/packages/core/capabilities/core-capabilities-server-internal/npm_module_types",
     "@types/kbn__core-capabilities-server-mocks": "link:bazel-bin/packages/core/capabilities/core-capabilities-server-mocks/npm_module_types",
+    "@types/kbn__core-chrome-browser": "link:bazel-bin/packages/core/chrome/core-chrome-browser/npm_module_types",
+    "@types/kbn__core-chrome-browser-internal": "link:bazel-bin/packages/core/chrome/core-chrome-browser-internal/npm_module_types",
+    "@types/kbn__core-chrome-browser-mocks": "link:bazel-bin/packages/core/chrome/core-chrome-browser-mocks/npm_module_types",
     "@types/kbn__core-common-internal-base": "link:bazel-bin/packages/core/common/internal-base/npm_module_types",
     "@types/kbn__core-config-server-internal": "link:bazel-bin/packages/core/config/core-config-server-internal/npm_module_types",
     "@types/kbn__core-config-server-mocks": "link:bazel-bin/packages/core/config/core-config-server-mocks/npm_module_types",

packages/BUILD.bazel

@@ -36,6 +36,9 @@ filegroup(
     "//packages/core/capabilities/core-capabilities-server:build",
     "//packages/core/capabilities/core-capabilities-server-internal:build",
     "//packages/core/capabilities/core-capabilities-server-mocks:build",
+    "//packages/core/chrome/core-chrome-browser:build",
+    "//packages/core/chrome/core-chrome-browser-internal:build",
+    "//packages/core/chrome/core-chrome-browser-mocks:build",
     "//packages/core/config/core-config-server-internal:build",
     "//packages/core/deprecations/core-deprecations-browser:build",
     "//packages/core/deprecations/core-deprecations-browser-internal:build",
@@ -334,6 +337,9 @@ filegroup(
     "//packages/core/capabilities/core-capabilities-server:build_types",
     "//packages/core/capabilities/core-capabilities-server-internal:build_types",
     "//packages/core/capabilities/core-capabilities-server-mocks:build_types",
+    "//packages/core/chrome/core-chrome-browser:build_types",
+    "//packages/core/chrome/core-chrome-browser-internal:build_types",
+    "//packages/core/chrome/core-chrome-browser-mocks:build_types",
     "//packages/core/config/core-config-server-internal:build_types",
     "//packages/core/deprecations/core-deprecations-browser:build_types",
     "//packages/core/deprecations/core-deprecations-browser-internal:build_types",

packages/core/chrome/core-chrome-browser-internal/BUILD.bazel

@@ -0,0 +1,144 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "core-chrome-browser-internal"
+PKG_REQUIRE_NAME = "@kbn/core-chrome-browser-internal"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.scss",
+  ],
+  exclude = [
+    "**/*.config.js",
+    "**/*.mock.*",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/__snapshots__/**",
+    "**/integration_tests/**",
+    "**/mocks/**",
+    "**/scripts/**",
+    "**/storybook/**",
+    "**/test_fixtures/**",
+    "**/test_helpers/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+RUNTIME_DEPS = [
+  "@npm//react",
+  "@npm//lodash",
+  "@npm//rxjs",
+  "@npm//classnames",
+  "@npm//react-use",
+  "@npm//@elastic/eui",
+  "//packages/kbn-i18n:npm_module_types",
+  "//packages/kbn-i18n-react",
+  "//packages/core/mount-utils/core-mount-utils-browser-internal",
+]
+
+TYPES_DEPS = [
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/react",
+  "@npm//@types/classnames",
+  "@npm//react-use",
+  "@npm//lodash",
+  "@npm//rxjs",
+  "@npm//@elastic/eui",
+  "//packages/kbn-crypto-browser:npm_module_types",
+  "//packages/kbn-i18n:npm_module_types",
+  "//packages/kbn-i18n-react:npm_module_types",
+  "//packages/core/injected-metadata/core-injected-metadata-browser-internal:npm_module_types",
+  "//packages/core/doc-links/core-doc-links-browser:npm_module_types",
+  "//packages/core/http/core-http-browser:npm_module_types",
+  "//packages/core/notifications/core-notifications-browser:npm_module_types",
+  "//packages/core/mount-utils/core-mount-utils-browser-internal:npm_module_types",
+  "//packages/core/application/core-application-browser:npm_module_types",
+  "//packages/core/application/core-application-browser-internal:npm_module_types",
+  "//packages/core/chrome/core-chrome-browser:npm_module_types",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ]
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/core/chrome/core-chrome-browser-internal/README.md

@@ -0,0 +1,3 @@
+# @kbn/core-chrome-browser-internal
+
+Contains the internal implementation and types of Core's browser-side `chrome` service.

packages/core/chrome/core-chrome-browser-internal/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { ChromeService } from './src';
+export type { InternalChromeStart } from './src';

packages/core/chrome/core-chrome-browser-internal/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/packages/core/chrome/core-chrome-browser-internal'],
+};

packages/core/chrome/core-chrome-browser-internal/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/core-chrome-browser-internal",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "author": "Kibana Core",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

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

@@ -18,22 +18,21 @@ import type { HttpStart } from '@kbn/core-http-browser';
 import { mountReactNode } from '@kbn/core-mount-utils-browser-internal';
 import type { NotificationsStart } from '@kbn/core-notifications-browser';
 import type { InternalApplicationStart } from '@kbn/core-application-browser-internal';
-import { KIBANA_ASK_ELASTIC_LINK } from './constants';
-import { type ChromeDocTitle, DocTitleService } from './doc_title';
-import { type ChromeNavControls, NavControlsService } from './nav_controls';
-import { type ChromeNavLink, NavLinksService } from './nav_links';
-import { type ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed';
-import { Header } from './ui';
 import type {
+  ChromeNavLink,
   ChromeBadge,
   ChromeBreadcrumb,
   ChromeBreadcrumbsAppendExtension,
   ChromeHelpExtension,
-  InternalChromeStart,
   ChromeUserBanner,
-} from './types';
-
-export type { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
+} from '@kbn/core-chrome-browser';
+import { KIBANA_ASK_ELASTIC_LINK } from './constants';
+import { DocTitleService } from './doc_title';
+import { NavControlsService } from './nav_controls';
+import { NavLinksService } from './nav_links';
+import { RecentlyAccessedService } from './recently_accessed';
+import { Header } from './ui';
+import type { InternalChromeStart } from './types';
 
 const IS_LOCKED_KEY = 'core.chrome.isLocked';
 const SNAPSHOT_REGEX = /-snapshot/i;

packages/core/chrome/core-chrome-browser-internal/src/doc_title/doc_title_service.ts

@@ -7,49 +7,12 @@
  */
 
 import { compact, flattenDeep, isString } from 'lodash';
+import type { ChromeDocTitle } from '@kbn/core-chrome-browser';
 
 interface StartDeps {
   document: { title: string };
 }
 
-/**
- * APIs for accessing and updating the document title.
- *
- * @example
- * How to change the title of the document
- * ```ts
- * chrome.docTitle.change('My application')
- * ```
- *
- * @example
- * How to reset the title of the document to it's initial value
- * ```ts
- * chrome.docTitle.reset()
- * ```
- *
- * @public
- * */
-export interface ChromeDocTitle {
-  /**
-   * Changes the current document title.
-   *
-   * @example
-   * How to change the title of the document
-   * ```ts
-   * chrome.docTitle.change('My application title')
-   * chrome.docTitle.change(['My application', 'My section'])
-   * ```
-   *
-   * @param newTitle The new title to set, either a string or string array
-   */
-  change(newTitle: string | string[]): void;
-  /**
-   * Resets the document title to it's initial value.
-   * (meaning the one present in the title meta at application load.)
-   */
-  reset(): void;
-}
-
 const defaultTitle: string[] = [];
 const titleSeparator = ' - ';
 

packages/core/chrome/core-chrome-browser-internal/src/doc_title/index.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export * from './nav_controls_service';
+export { DocTitleService } from './doc_title_service';

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

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { ChromeService } from './chrome_service';
+export type { InternalChromeStart } from './types';

packages/core/chrome/core-chrome-browser-internal/src/nav_controls/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { NavControlsService } from './nav_controls_service';

packages/core/chrome/core-chrome-browser-internal/src/nav_controls/nav_controls_service.test.ts

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { NavControlsService } from './nav_controls_service';
 import { take } from 'rxjs/operators';
+import { NavControlsService } from './nav_controls_service';
 
 describe('RecentlyAccessed#start()', () => {
   const getStart = () => {

packages/core/chrome/core-chrome-browser-internal/src/nav_controls/nav_controls_service.ts

@@ -7,52 +7,15 @@
  */
 
 import { sortBy } from 'lodash';
-import { BehaviorSubject, ReplaySubject, Observable } from 'rxjs';
+import { BehaviorSubject, ReplaySubject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
-import type { MountPoint } from '@kbn/core-mount-utils-browser';
-
-/** @public */
-export interface ChromeNavControl {
-  order?: number;
-  mount: MountPoint;
-}
-
-/**
- * {@link ChromeNavControls | APIs} for registering new controls to be displayed in the navigation bar.
- *
- * @example
- * Register a left-side nav control rendered with React.
- * ```jsx
- * chrome.navControls.registerLeft({
- *   mount(targetDomElement) {
- *     ReactDOM.mount(<MyControl />, targetDomElement);
- *     return () => ReactDOM.unmountComponentAtNode(targetDomElement);
- *   }
- * })
- * ```
- *
- * @public
- */
-export interface ChromeNavControls {
-  /** Register a nav control to be presented on the bottom-left side of the chrome header. */
-  registerLeft(navControl: ChromeNavControl): void;
-  /** Register a nav control to be presented on the top-right side of the chrome header. */
-  registerRight(navControl: ChromeNavControl): void;
-  /** Register a nav control to be presented on the top-center side of the chrome header. */
-  registerCenter(navControl: ChromeNavControl): void;
-  /** @internal */
-  getLeft$(): Observable<ChromeNavControl[]>;
-  /** @internal */
-  getRight$(): Observable<ChromeNavControl[]>;
-  /** @internal */
-  getCenter$(): Observable<ChromeNavControl[]>;
-}
+import type { ChromeNavControl, ChromeNavControls } from '@kbn/core-chrome-browser';
 
 /** @internal */
 export class NavControlsService {
   private readonly stop$ = new ReplaySubject<void>(1);
 
-  public start() {
+  public start(): ChromeNavControls {
     const navControlsLeft$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
     const navControlsRight$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
     const navControlsCenter$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());

packages/core/chrome/core-chrome-browser-internal/src/nav_links/index.ts

@@ -5,7 +5,5 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export { NavLinksService } from './nav_links_service';
 
-export type { ChromeNavLink } from './nav_link';
-export type { ChromeNavLinks } from './nav_links_service';
+export { NavLinksService } from './nav_links_service';

packages/core/chrome/core-chrome-browser-internal/src/nav_links/nav_link.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { ChromeNavLink } from '@kbn/core-chrome-browser';
+
+export class NavLinkWrapper {
+  public readonly id: string;
+  public readonly properties: Readonly<ChromeNavLink>;
+
+  constructor(properties: ChromeNavLink) {
+    if (!properties || !properties.id) {
+      throw new Error('`id` is required.');
+    }
+
+    this.id = properties.id;
+    this.properties = Object.freeze(properties);
+  }
+}

packages/core/chrome/core-chrome-browser-internal/src/nav_links/nav_links_service.ts

@@ -7,13 +7,13 @@
  */
 
 import { sortBy } from 'lodash';
-import { BehaviorSubject, type Observable, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, ReplaySubject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import type { HttpStart, IBasePath } from '@kbn/core-http-browser';
 import type { PublicAppDeepLinkInfo, PublicAppInfo } from '@kbn/core-application-browser';
 import type { InternalApplicationStart } from '@kbn/core-application-browser-internal';
-
-import type { ChromeNavLink, NavLinkWrapper } from './nav_link';
+import type { ChromeNavLinks } from '@kbn/core-chrome-browser';
+import type { NavLinkWrapper } from './nav_link';
 import { toNavLink } from './to_nav_link';
 
 interface StartDeps {
@@ -21,54 +21,6 @@ interface StartDeps {
   http: HttpStart;
 }
 
-/**
- * {@link ChromeNavLinks | APIs} for manipulating nav links.
- *
- * @public
- */
-export interface ChromeNavLinks {
-  /**
-   * Get an observable for a sorted list of navlinks.
-   */
-  getNavLinks$(): Observable<Array<Readonly<ChromeNavLink>>>;
-
-  /**
-   * Get the state of a navlink at this point in time.
-   * @param id
-   */
-  get(id: string): ChromeNavLink | undefined;
-
-  /**
-   * Get the current state of all navlinks.
-   */
-  getAll(): Array<Readonly<ChromeNavLink>>;
-
-  /**
-   * Check whether or not a navlink exists.
-   * @param id
-   */
-  has(id: string): boolean;
-
-  /**
-   * Enable forced navigation mode, which will trigger a page refresh
-   * when a nav link is clicked and only the hash is updated.
-   *
-   * @remarks
-   * This is only necessary when rendering the status page in place of another
-   * app, as links to that app will set the current URL and change the hash, but
-   * the routes for the correct are not loaded so nothing will happen.
-   * https://github.com/elastic/kibana/pull/29770
-   *
-   * Used only by status_page plugin
-   */
-  enableForcedAppSwitcherNavigation(): void;
-
-  /**
-   * An observable of the forced app switcher state.
-   */
-  getForceAppSwitcherNavigation$(): Observable<boolean>;
-}
-
 export class NavLinksService {
   private readonly stop$ = new ReplaySubject<void>(1);
 

packages/core/chrome/core-chrome-browser-internal/src/nav_links/to_nav_link.test.ts

@@ -12,10 +12,9 @@ import {
   type PublicAppInfo,
   type PublicAppDeepLinkInfo,
 } from '@kbn/core-application-browser';
+import { httpServiceMock } from '@kbn/core-http-browser-mocks';
 import { toNavLink } from './to_nav_link';
 
-import { httpServiceMock } from '../../mocks';
-
 const app = (props: Partial<PublicAppInfo> = {}): PublicAppInfo => ({
   id: 'some-id',
   title: 'some-title',

packages/core/chrome/core-chrome-browser-internal/src/recently_accessed/create_log_key.ts

@@ -7,6 +7,7 @@
  */
 
 import { Sha256 } from '@kbn/crypto-browser';
+
 export async function createLogKey(type: string, optionalIdentifier?: string) {
   const baseKey = `kibana.history.${type}`;
 

packages/core/chrome/core-chrome-browser-internal/src/recently_accessed/index.ts

@@ -5,8 +5,5 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 export { RecentlyAccessedService } from './recently_accessed_service';
-export type {
-  ChromeRecentlyAccessed,
-  ChromeRecentlyAccessedHistoryItem,
-} from './recently_accessed_service';

packages/core/chrome/core-chrome-browser-internal/src/recently_accessed/recently_accessed_service.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { HttpSetup } from '@kbn/core-http-browser';
+import type {
+  ChromeRecentlyAccessed,
+  ChromeRecentlyAccessedHistoryItem,
+} from '@kbn/core-chrome-browser';
+import { PersistedLog } from './persisted_log';
+import { createLogKey } from './create_log_key';
+
+interface StartDeps {
+  http: HttpSetup;
+}
+
+/** @internal */
+export class RecentlyAccessedService {
+  async start({ http }: StartDeps): Promise<ChromeRecentlyAccessed> {
+    const logKey = await createLogKey('recentlyAccessed', http.basePath.get());
+    const history = new PersistedLog<ChromeRecentlyAccessedHistoryItem>(logKey, {
+      maxLength: 20,
+      isEqual: (oldItem, newItem) => oldItem.id === newItem.id,
+    });
+
+    return {
+      /** Adds a new item to the history. */
+      add: (link: string, label: string, id: string) => {
+        history.add({
+          link,
+          label,
+          id,
+        });
+      },
+
+      /** Gets the current array of history items. */
+      get: () => history.get(),
+
+      /** Gets an observable of the current array of history items. */
+      get$: () => history.get$(),
+    };
+  }
+}

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

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Observable } from 'rxjs';
+import type { ChromeStart } from '@kbn/core-chrome-browser';
+
+/** @internal */
+export interface InternalChromeStart extends ChromeStart {
+  /**
+   * Used only by the rendering service to render the header UI
+   * @internal
+   */
+  getHeaderComponent(): JSX.Element;
+
+  /**
+   * Used only by the rendering service to retrieve the set of classNames
+   * that will be set on the body element.
+   * @internal
+   */
+  getBodyClasses$(): Observable<string[]>;
+}

packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.test.tsx

@@ -12,8 +12,8 @@ import { BehaviorSubject } from 'rxjs';
 import sinon from 'sinon';
 import { StubBrowserStorage } from '@kbn/test-jest-helpers';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
-import { ChromeNavLink, DEFAULT_APP_CATEGORIES } from '../../..';
-import { ChromeRecentlyAccessedHistoryItem } from '../../recently_accessed';
+import { DEFAULT_APP_CATEGORIES } from '@kbn/core-application-common';
+import type { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '@kbn/core-chrome-browser';
 import { CollapsibleNav } from './collapsible_nav';
 
 const { kibana, observability, security, management } = DEFAULT_APP_CATEGORIES;

packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx

@@ -25,9 +25,8 @@ import * as Rx from 'rxjs';
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { InternalApplicationStart } from '@kbn/core-application-browser-internal';
 import type { AppCategory } from '@kbn/core-application-common';
-
-import type { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '../..';
-import type { OnIsLockedUpdate } from '.';
+import type { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '@kbn/core-chrome-browser';
+import type { OnIsLockedUpdate } from './types';
 import {
   createEuiListItem,
   createRecentNavLink,

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.test.tsx

@@ -11,9 +11,9 @@ import { act } from 'react-dom/test-utils';
 import { BehaviorSubject } from 'rxjs';
 import { StubBrowserStorage, mountWithIntl } from '@kbn/test-jest-helpers';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
-import { applicationServiceMock } from '../../../mocks';
+import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
+import type { ChromeBreadcrumbsAppendExtension } from '@kbn/core-chrome-browser';
 import { Header } from './header';
-import type { ChromeBreadcrumbsAppendExtension } from '../../types';
 
 function mockProps() {
   const http = httpServiceMock.createSetupContract({ basePath: '/test' });

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx

@@ -24,21 +24,18 @@ import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { InternalApplicationStart } from '@kbn/core-application-browser-internal';
-
-import { LoadingIndicator } from '..';
 import type {
   ChromeBadge,
   ChromeBreadcrumb,
   ChromeNavControl,
   ChromeNavLink,
   ChromeRecentlyAccessedHistoryItem,
-} from '../..';
-import type {
   ChromeBreadcrumbsAppendExtension,
   ChromeHelpExtension,
   ChromeUserBanner,
-} from '../../types';
-import type { OnIsLockedUpdate } from '.';
+} from '@kbn/core-chrome-browser';
+import { LoadingIndicator } from '../loading_indicator';
+import type { OnIsLockedUpdate } from './types';
 import { CollapsibleNav } from './collapsible_nav';
 import { HeaderBadge } from './header_badge';
 import { HeaderBreadcrumbs } from './header_breadcrumbs';

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.test.tsx

@@ -8,10 +8,10 @@
 
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 import { BehaviorSubject } from 'rxjs';
-import { HeaderActionMenu } from './header_action_menu';
+import { act } from 'react-dom/test-utils';
 import type { MountPoint, UnmountCallback } from '@kbn/core-mount-utils-browser';
+import { HeaderActionMenu } from './header_action_menu';
 
 type MockedUnmount = jest.MockedFunction<UnmountCallback>;
 

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_badge.tsx

@@ -6,11 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { EuiBetaBadge } from '@elastic/eui';
 import React, { Component } from 'react';
 import * as Rx from 'rxjs';
-
-import { ChromeBadge } from '../../types';
+import { EuiBetaBadge } from '@elastic/eui';
+import type { ChromeBadge } from '@kbn/core-chrome-browser';
 
 interface Props {
   badge$: Rx.Observable<ChromeBadge | undefined>;

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_breadcrumbs.tsx

@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
-import { ChromeBreadcrumb } from '../../types';
+import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
 
 interface Props {
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_extension.test.tsx

@@ -8,6 +8,7 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
+import '@testing-library/jest-dom';
 import { HeaderExtension } from './header_extension';
 
 describe('HeaderExtension', () => {

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_help_menu.tsx

@@ -25,82 +25,11 @@ import {
 } from '@elastic/eui';
 
 import type { InternalApplicationStart } from '@kbn/core-application-browser-internal';
+import type { ChromeHelpExtension } from '@kbn/core-chrome-browser';
 import { GITHUB_CREATE_ISSUE_LINK, KIBANA_FEEDBACK_LINK } from '../../constants';
-import { ChromeHelpExtension } from '../../types';
 import { HeaderExtension } from './header_extension';
 import { isModifiedOrPrevented } from './nav_link';
 
-/** @public */
-export type ChromeHelpExtensionLinkBase = Pick<
-  EuiButtonEmptyProps,
-  'iconType' | 'target' | 'rel' | 'data-test-subj'
->;
-
-/** @public */
-export interface ChromeHelpExtensionMenuGitHubLink extends ChromeHelpExtensionLinkBase {
-  /**
-   * Creates a link to a new github issue in the Kibana repo
-   */
-  linkType: 'github';
-  /**
-   * Include at least one app-specific label to be applied to the new github issue
-   */
-  labels: string[];
-  /**
-   * Provides initial text for the title of the issue
-   */
-  title?: string;
-}
-
-/** @public */
-export interface ChromeHelpExtensionMenuDiscussLink extends ChromeHelpExtensionLinkBase {
-  /**
-   * Creates a generic give feedback link with comment icon
-   */
-  linkType: 'discuss';
-  /**
-   * URL to discuss page.
-   * i.e. `https://discuss.elastic.co/c/${appName}`
-   */
-  href: string;
-}
-
-/** @public */
-export interface ChromeHelpExtensionMenuDocumentationLink extends ChromeHelpExtensionLinkBase {
-  /**
-   * Creates a deep-link to app-specific documentation
-   */
-  linkType: 'documentation';
-  /**
-   * URL to documentation page.
-   * i.e. `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/${appName}.html`,
-   */
-  href: string;
-}
-
-/** @public */
-export interface ChromeHelpExtensionMenuCustomLink extends ChromeHelpExtensionLinkBase {
-  /**
-   * Extend EuiButtonEmpty to provide extra functionality
-   */
-  linkType: 'custom';
-  /**
-   * URL of the link
-   */
-  href: string;
-  /**
-   * Content of the button (in lieu of `children`)
-   */
-  content: React.ReactNode;
-}
-
-/** @public */
-export type ChromeHelpExtensionMenuLink =
-  | ChromeHelpExtensionMenuGitHubLink
-  | ChromeHelpExtensionMenuDiscussLink
-  | ChromeHelpExtensionMenuDocumentationLink
-  | ChromeHelpExtensionMenuCustomLink;
-
 interface Props {
   navigateToUrl: InternalApplicationStart['navigateToUrl'];
   helpExtension$: Observable<ChromeHelpExtension | undefined>;

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.tsx

@@ -13,7 +13,7 @@ import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import Url from 'url';
 import type { HttpStart } from '@kbn/core-http-browser';
-import type { ChromeNavLink } from '../..';
+import type { ChromeNavLink } from '@kbn/core-chrome-browser';
 import { ElasticMark } from './elastic_mark';
 import { LoadingIndicator } from '../loading_indicator';
 

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_nav_controls.tsx

@@ -10,7 +10,7 @@ import { EuiHeaderSectionItem } from '@elastic/eui';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
-import { ChromeNavControl } from '../../nav_controls';
+import type { ChromeNavControl } from '@kbn/core-chrome-browser';
 import { HeaderExtension } from './header_extension';
 
 interface Props {

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_top_banner.tsx

@@ -9,7 +9,7 @@
 import React, { FC } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
-import { ChromeUserBanner } from '../../types';
+import type { ChromeUserBanner } from '@kbn/core-chrome-browser';
 import { HeaderExtension } from './header_extension';
 
 export interface HeaderTopBannerProps {

packages/core/chrome/core-chrome-browser-internal/src/ui/header/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { Header } from './header';
+export type { HeaderProps } from './header';
+export type { OnIsLockedUpdate, NavType } from './types';

packages/core/chrome/core-chrome-browser-internal/src/ui/header/nav_link.tsx

@@ -12,8 +12,7 @@ import React from 'react';
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { InternalApplicationStart } from '@kbn/core-application-browser-internal';
-
-import type { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '../..';
+import type { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '@kbn/core-chrome-browser';
 import { relativeToAbsolute } from '../../nav_links/to_nav_link';
 
 export const isModifiedOrPrevented = (event: React.MouseEvent<HTMLElement, MouseEvent>) =>

packages/core/chrome/core-chrome-browser-internal/src/ui/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { Header } from './header';
+export { LoadingIndicator } from './loading_indicator';
+export type { NavType } from './header';

packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.tsx

@@ -13,6 +13,8 @@ import classNames from 'classnames';
 import type { Subscription } from 'rxjs';
 import type { HttpStart } from '@kbn/core-http-browser';
 
+import './loading_indicator.scss';
+
 export interface LoadingIndicatorProps {
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   showAsBar?: boolean;

packages/core/chrome/core-chrome-browser-internal/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "stripInternal": false,
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ]
+}

packages/core/chrome/core-chrome-browser-mocks/BUILD.bazel

@@ -0,0 +1,119 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "core-chrome-browser-mocks"
+PKG_REQUIRE_NAME = "@kbn/core-chrome-browser-mocks"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  exclude = [
+    "**/*.config.js",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/__snapshots__/**",
+    "**/integration_tests/**",
+    "**/mocks/**",
+    "**/scripts/**",
+    "**/storybook/**",
+    "**/test_fixtures/**",
+    "**/test_helpers/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+RUNTIME_DEPS = [
+  "@npm//rxjs",
+]
+
+TYPES_DEPS = [
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/react",
+  "@npm//rxjs",
+  "//packages/kbn-utility-types:npm_module_types",
+  "//packages/kbn-utility-types-jest:npm_module_types",
+  "//packages/core/chrome/core-chrome-browser:npm_module_types",
+  "//packages/core/chrome/core-chrome-browser-internal:npm_module_types",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/core/chrome/core-chrome-browser-mocks/README.md

@@ -0,0 +1,5 @@
+# @kbn/core-chrome-browser-mocks
+
+Contains the mocks for Core's browser-side `chrome` service.
+
+- `chromeServiceMock`

packages/core/chrome/core-chrome-browser-mocks/index.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export * from './doc_title_service';
+export { chromeServiceMock } from './src';

packages/core/chrome/core-chrome-browser-mocks/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/packages/core/chrome/core-chrome-browser-mocks'],
+};

packages/core/chrome/core-chrome-browser-mocks/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/core-chrome-browser-mocks",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "author": "Kibana Core",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts

@@ -9,7 +9,8 @@
 import { BehaviorSubject } from 'rxjs';
 import type { PublicMethodsOf } from '@kbn/utility-types';
 import type { DeeplyMockedKeys } from '@kbn/utility-types-jest';
-import { ChromeBadge, ChromeBreadcrumb, ChromeService, InternalChromeStart } from '.';
+import type { ChromeBadge, ChromeBreadcrumb } from '@kbn/core-chrome-browser';
+import type { ChromeService, InternalChromeStart } from '@kbn/core-chrome-browser-internal';
 
 const createStartContractMock = () => {
   const startContract: DeeplyMockedKeys<InternalChromeStart> = {

packages/core/chrome/core-chrome-browser-mocks/src/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { chromeServiceMock } from './chrome_service.mock';

packages/core/chrome/core-chrome-browser-mocks/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "stripInternal": false,
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ]
+}

packages/core/chrome/core-chrome-browser/BUILD.bazel

@@ -0,0 +1,118 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "core-chrome-browser"
+PKG_REQUIRE_NAME = "@kbn/core-chrome-browser"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  exclude = [
+    "**/*.config.js",
+    "**/*.mock.*",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/__snapshots__/**",
+    "**/integration_tests/**",
+    "**/mocks/**",
+    "**/scripts/**",
+    "**/storybook/**",
+    "**/test_fixtures/**",
+    "**/test_helpers/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+RUNTIME_DEPS = [
+]
+
+TYPES_DEPS = [
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/react",
+  "@npm//@elastic/eui",
+  "@npm//rxjs",
+  "//packages/core/mount-utils/core-mount-utils-browser:npm_module_types",
+  "//packages/core/application/core-application-common:npm_module_types",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/core/chrome/core-chrome-browser/README.md

@@ -0,0 +1,3 @@
+# @kbn/core-chrome-browser
+
+Contains the public types of Core's browser-side `chrome` service.

packages/core/chrome/core-chrome-browser/index.ts

@@ -6,14 +6,25 @@
  * Side Public License, v 1.
  */
 
-export { Header } from './header';
-export type { HeaderProps } from './header';
-export type { OnIsLockedUpdate, NavType } from './types';
 export type {
-  ChromeHelpExtensionLinkBase,
+  ChromeUserBanner,
+  ChromeBreadcrumb,
+  ChromeHelpExtension,
   ChromeHelpExtensionMenuLink,
-  ChromeHelpExtensionMenuCustomLink,
-  ChromeHelpExtensionMenuDiscussLink,
-  ChromeHelpExtensionMenuDocumentationLink,
+  ChromeHelpExtensionLinkBase,
+  ChromeHelpMenuActions,
+  ChromeNavLink,
+  ChromeBreadcrumbsAppendExtension,
+  ChromeNavLinks,
+  ChromeNavControl,
+  ChromeNavControls,
+  ChromeBadge,
   ChromeHelpExtensionMenuGitHubLink,
-} from './header_help_menu';
+  ChromeHelpExtensionMenuDocumentationLink,
+  ChromeHelpExtensionMenuDiscussLink,
+  ChromeHelpExtensionMenuCustomLink,
+  ChromeDocTitle,
+  ChromeStart,
+  ChromeRecentlyAccessed,
+  ChromeRecentlyAccessedHistoryItem,
+} from './src';

packages/core/chrome/core-chrome-browser/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/packages/core/chrome/core-chrome-browser'],
+};

packages/core/chrome/core-chrome-browser/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/core-chrome-browser",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "author": "Kibana Core",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/core/chrome/core-chrome-browser/src/breadcrumb.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { EuiBreadcrumb } from '@elastic/eui';
+import type { MountPoint } from '@kbn/core-mount-utils-browser';
+
+/** @public */
+export type ChromeBreadcrumb = EuiBreadcrumb;
+
+/** @public */
+export interface ChromeBreadcrumbsAppendExtension {
+  content: MountPoint<HTMLDivElement>;
+}

packages/core/chrome/core-chrome-browser/src/contracts.ts

@@ -6,55 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { EuiBreadcrumb, IconType } from '@elastic/eui';
-import { Observable } from 'rxjs';
-import type { MountPoint } from '@kbn/core-mount-utils-browser';
-import { ChromeDocTitle } from './doc_title';
-import { ChromeNavControls } from './nav_controls';
-import { ChromeNavLinks, ChromeNavLink } from './nav_links';
-import { ChromeRecentlyAccessed } from './recently_accessed';
-import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
-
-/** @public */
-export interface ChromeBadge {
-  text: string;
-  tooltip: string;
-  iconType?: IconType;
-}
-
-/** @public */
-export type ChromeBreadcrumb = EuiBreadcrumb;
-
-/** @public */
-export interface ChromeBreadcrumbsAppendExtension {
-  content: MountPoint<HTMLDivElement>;
-}
-
-/** @public */
-export interface ChromeUserBanner {
-  content: MountPoint<HTMLDivElement>;
-}
-
-/** @public */
-export interface ChromeHelpMenuActions {
-  hideHelpMenu: () => void;
-}
-
-/** @public */
-export interface ChromeHelpExtension {
-  /**
-   * Provide your plugin's name to create a header for separation
-   */
-  appName: string;
-  /**
-   * Creates unified links for sending users to documentation, GitHub, Discuss, or a custom link/button
-   */
-  links?: ChromeHelpExtensionMenuLink[];
-  /**
-   * Custom content to occur below the list of links
-   */
-  content?: (element: HTMLDivElement, menuActions: ChromeHelpMenuActions) => () => void;
-}
+import type { Observable } from 'rxjs';
+import type { ChromeNavLink, ChromeNavLinks } from './nav_links';
+import type { ChromeRecentlyAccessed } from './recently_accessed';
+import type { ChromeDocTitle } from './doc_title';
+import type { ChromeNavControls } from './nav_controls';
+import type { ChromeHelpExtension } from './help_extension';
+import type { ChromeBreadcrumb, ChromeBreadcrumbsAppendExtension } from './breadcrumb';
+import type { ChromeBadge, ChromeUserBanner } from './types';
 
 /**
  * ChromeStart allows plugins to customize the global chrome header UI and
@@ -179,19 +138,3 @@ export interface ChromeStart {
    */
   hasHeaderBanner$(): Observable<boolean>;
 }
-
-/** @internal */
-export interface InternalChromeStart extends ChromeStart {
-  /**
-   * Used only by the rendering service to render the header UI
-   * @internal
-   */
-  getHeaderComponent(): JSX.Element;
-
-  /**
-   * Used only by the rendering service to retrieve the set of classNames
-   * that will be set on the body element.
-   * @internal
-   */
-  getBodyClasses$(): Observable<string[]>;
-}

packages/core/chrome/core-chrome-browser/src/doc_title.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * APIs for accessing and updating the document title.
+ *
+ * @example
+ * How to change the title of the document
+ * ```ts
+ * chrome.docTitle.change('My application')
+ * ```
+ *
+ * @example
+ * How to reset the title of the document to it's initial value
+ * ```ts
+ * chrome.docTitle.reset()
+ * ```
+ *
+ * @public
+ * */
+export interface ChromeDocTitle {
+  /**
+   * Changes the current document title.
+   *
+   * @example
+   * How to change the title of the document
+   * ```ts
+   * chrome.docTitle.change('My application title')
+   * chrome.docTitle.change(['My application', 'My section'])
+   * ```
+   *
+   * @param newTitle The new title to set, either a string or string array
+   */
+  change(newTitle: string | string[]): void;
+  /**
+   * Resets the document title to it's initial value.
+   * (meaning the one present in the title meta at application load.)
+   */
+  reset(): void;
+}

packages/core/chrome/core-chrome-browser/src/help_extension.ts

@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type React from 'react';
+import type { EuiButtonEmptyProps } from '@elastic/eui';
+
+/** @public */
+export interface ChromeHelpMenuActions {
+  hideHelpMenu: () => void;
+}
+
+/** @public */
+export interface ChromeHelpExtension {
+  /**
+   * Provide your plugin's name to create a header for separation
+   */
+  appName: string;
+  /**
+   * Creates unified links for sending users to documentation, GitHub, Discuss, or a custom link/button
+   */
+  links?: ChromeHelpExtensionMenuLink[];
+  /**
+   * Custom content to occur below the list of links
+   */
+  content?: (element: HTMLDivElement, menuActions: ChromeHelpMenuActions) => () => void;
+}
+
+/** @public */
+export type ChromeHelpExtensionLinkBase = Pick<
+  EuiButtonEmptyProps,
+  'iconType' | 'target' | 'rel' | 'data-test-subj'
+>;
+
+/** @public */
+export interface ChromeHelpExtensionMenuGitHubLink extends ChromeHelpExtensionLinkBase {
+  /**
+   * Creates a link to a new github issue in the Kibana repo
+   */
+  linkType: 'github';
+  /**
+   * Include at least one app-specific label to be applied to the new github issue
+   */
+  labels: string[];
+  /**
+   * Provides initial text for the title of the issue
+   */
+  title?: string;
+}
+
+/** @public */
+export interface ChromeHelpExtensionMenuDiscussLink extends ChromeHelpExtensionLinkBase {
+  /**
+   * Creates a generic give feedback link with comment icon
+   */
+  linkType: 'discuss';
+  /**
+   * URL to discuss page.
+   * i.e. `https://discuss.elastic.co/c/${appName}`
+   */
+  href: string;
+}
+
+/** @public */
+export interface ChromeHelpExtensionMenuDocumentationLink extends ChromeHelpExtensionLinkBase {
+  /**
+   * Creates a deep-link to app-specific documentation
+   */
+  linkType: 'documentation';
+  /**
+   * URL to documentation page.
+   * i.e. `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/${appName}.html`,
+   */
+  href: string;
+}
+
+/** @public */
+export interface ChromeHelpExtensionMenuCustomLink extends ChromeHelpExtensionLinkBase {
+  /**
+   * Extend EuiButtonEmpty to provide extra functionality
+   */
+  linkType: 'custom';
+  /**
+   * URL of the link
+   */
+  href: string;
+  /**
+   * Content of the button (in lieu of `children`)
+   */
+  content: React.ReactNode;
+}
+
+/** @public */
+export type ChromeHelpExtensionMenuLink =
+  | ChromeHelpExtensionMenuGitHubLink
+  | ChromeHelpExtensionMenuDiscussLink
+  | ChromeHelpExtensionMenuDocumentationLink
+  | ChromeHelpExtensionMenuCustomLink;

packages/core/chrome/core-chrome-browser/src/index.ts

@@ -6,30 +6,23 @@
  * Side Public License, v 1.
  */
 
-export { ChromeService } from './chrome_service';
+export type { ChromeBreadcrumbsAppendExtension, ChromeBreadcrumb } from './breadcrumb';
+export type { ChromeStart } from './contracts';
+export type { ChromeDocTitle } from './doc_title';
 export type {
+  ChromeHelpExtension,
+  ChromeHelpMenuActions,
   ChromeHelpExtensionLinkBase,
   ChromeHelpExtensionMenuLink,
   ChromeHelpExtensionMenuCustomLink,
   ChromeHelpExtensionMenuDiscussLink,
   ChromeHelpExtensionMenuDocumentationLink,
   ChromeHelpExtensionMenuGitHubLink,
-} from './ui/header/header_help_menu';
-export type { NavType } from './ui';
-export type { ChromeNavLink, ChromeNavLinks } from './nav_links';
+} from './help_extension';
+export type { ChromeNavControls, ChromeNavControl } from './nav_controls';
+export type { ChromeNavLinks, ChromeNavLink } from './nav_links';
 export type {
   ChromeRecentlyAccessed,
   ChromeRecentlyAccessedHistoryItem,
 } from './recently_accessed';
-export type { ChromeNavControl, ChromeNavControls } from './nav_controls';
-export type { ChromeDocTitle } from './doc_title';
-export type {
-  InternalChromeStart,
-  ChromeStart,
-  ChromeHelpExtension,
-  ChromeHelpMenuActions,
-  ChromeBreadcrumbsAppendExtension,
-  ChromeBreadcrumb,
-  ChromeBadge,
-  ChromeUserBanner,
-} from './types';
+export type { ChromeBadge, ChromeUserBanner } from './types';

packages/core/chrome/core-chrome-browser/src/nav_controls.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Observable } from 'rxjs';
+import type { MountPoint } from '@kbn/core-mount-utils-browser';
+
+/** @public */
+export interface ChromeNavControl {
+  order?: number;
+  mount: MountPoint;
+}
+
+/**
+ * {@link ChromeNavControls | APIs} for registering new controls to be displayed in the navigation bar.
+ *
+ * @example
+ * Register a left-side nav control rendered with React.
+ * ```jsx
+ * chrome.navControls.registerLeft({
+ *   mount(targetDomElement) {
+ *     ReactDOM.mount(<MyControl />, targetDomElement);
+ *     return () => ReactDOM.unmountComponentAtNode(targetDomElement);
+ *   }
+ * })
+ * ```
+ *
+ * @public
+ */
+export interface ChromeNavControls {
+  /** Register a nav control to be presented on the bottom-left side of the chrome header. */
+  registerLeft(navControl: ChromeNavControl): void;
+
+  /** Register a nav control to be presented on the top-right side of the chrome header. */
+  registerRight(navControl: ChromeNavControl): void;
+
+  /** Register a nav control to be presented on the top-center side of the chrome header. */
+  registerCenter(navControl: ChromeNavControl): void;
+
+  /** @internal */
+  getLeft$(): Observable<ChromeNavControl[]>;
+
+  /** @internal */
+  getRight$(): Observable<ChromeNavControl[]>;
+
+  /** @internal */
+  getCenter$(): Observable<ChromeNavControl[]>;
+}

packages/core/chrome/core-chrome-browser/src/nav_links.ts

@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { AppCategory } from '../..';
+import type { Observable } from 'rxjs';
+import type { AppCategory } from '@kbn/core-application-common';
 
 /**
  * @public
@@ -79,16 +80,50 @@ export interface ChromeNavLink {
   readonly hidden?: boolean;
 }
 
-export class NavLinkWrapper {
-  public readonly id: string;
-  public readonly properties: Readonly<ChromeNavLink>;
+/**
+ * {@link ChromeNavLinks | APIs} for manipulating nav links.
+ *
+ * @public
+ */
+export interface ChromeNavLinks {
+  /**
+   * Get an observable for a sorted list of navlinks.
+   */
+  getNavLinks$(): Observable<Array<Readonly<ChromeNavLink>>>;
 
-  constructor(properties: ChromeNavLink) {
-    if (!properties || !properties.id) {
-      throw new Error('`id` is required.');
-    }
+  /**
+   * Get the state of a navlink at this point in time.
+   * @param id
+   */
+  get(id: string): ChromeNavLink | undefined;
 
-    this.id = properties.id;
-    this.properties = Object.freeze(properties);
-  }
+  /**
+   * Get the current state of all navlinks.
+   */
+  getAll(): Array<Readonly<ChromeNavLink>>;
+
+  /**
+   * Check whether or not a navlink exists.
+   * @param id
+   */
+  has(id: string): boolean;
+
+  /**
+   * Enable forced navigation mode, which will trigger a page refresh
+   * when a nav link is clicked and only the hash is updated.
+   *
+   * @remarks
+   * This is only necessary when rendering the status page in place of another
+   * app, as links to that app will set the current URL and change the hash, but
+   * the routes for the correct are not loaded so nothing will happen.
+   * https://github.com/elastic/kibana/pull/29770
+   *
+   * Used only by status_page plugin
+   */
+  enableForcedAppSwitcherNavigation(): void;
+
+  /**
+   * An observable of the forced app switcher state.
+   */
+  getForceAppSwitcherNavigation$(): Observable<boolean>;
 }

packages/core/chrome/core-chrome-browser/src/recently_accessed.ts

@@ -6,11 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { Observable } from 'rxjs';
-import type { HttpSetup } from '@kbn/core-http-browser';
-
-import { PersistedLog } from './persisted_log';
-import { createLogKey } from './create_log_key';
+import type { Observable } from 'rxjs';
 
 /** @public */
 export interface ChromeRecentlyAccessedHistoryItem {
@@ -19,38 +15,6 @@ export interface ChromeRecentlyAccessedHistoryItem {
   id: string;
 }
 
-interface StartDeps {
-  http: HttpSetup;
-}
-
-/** @internal */
-export class RecentlyAccessedService {
-  async start({ http }: StartDeps): Promise<ChromeRecentlyAccessed> {
-    const logKey = await createLogKey('recentlyAccessed', http.basePath.get());
-    const history = new PersistedLog<ChromeRecentlyAccessedHistoryItem>(logKey, {
-      maxLength: 20,
-      isEqual: (oldItem, newItem) => oldItem.id === newItem.id,
-    });
-
-    return {
-      /** Adds a new item to the history. */
-      add: (link: string, label: string, id: string) => {
-        history.add({
-          link,
-          label,
-          id,
-        });
-      },
-
-      /** Gets the current array of history items. */
-      get: () => history.get(),
-
-      /** Gets an observable of the current array of history items. */
-      get$: () => history.get$(),
-    };
-  }
-}
-
 /**
  * {@link ChromeRecentlyAccessed | APIs} for recently accessed history.
  * @public

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

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { IconType } from '@elastic/eui';
+import type { MountPoint } from '@kbn/core-mount-utils-browser';
+
+/** @public */
+export interface ChromeBadge {
+  text: string;
+  tooltip: string;
+  iconType?: IconType;
+}
+
+/** @public */
+export interface ChromeUserBanner {
+  content: MountPoint<HTMLDivElement>;
+}

packages/core/chrome/core-chrome-browser/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "stripInternal": false,
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ]
+}

packages/core/mount-utils/core-mount-utils-browser-internal/BUILD.bazel

@@ -9,6 +9,7 @@ SOURCE_FILES = glob(
   [
     "**/*.ts",
     "**/*.tsx",
+    "**/*.scss",
   ],
   exclude = [
     "**/*.config.js",
@@ -62,6 +63,10 @@ jsts_transpiler(
   srcs = SRCS,
   build_pkg_name = package_name(),
   web = True,
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ]
 )
 
 ts_config(

packages/core/mount-utils/core-mount-utils-browser-internal/src/mount.tsx

@@ -11,7 +11,10 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n-react';
 import type { MountPoint } from '@kbn/core-mount-utils-browser';
 
+import './mount_wrapper.scss';
+
 const defaultWrapperClass = 'kbnMountWrapper';
+
 interface MountWrapperComponentProps {
   mount: MountPoint;
   className?: string;

packages/core/overlays/core-overlays-browser-internal/src/_index.scss

@@ -1,2 +0,0 @@
-@import './banners/index';
-@import './mount_wrapper';

packages/core/overlays/core-overlays-browser-internal/src/banners/_index.scss

@@ -1 +0,0 @@
-@import './banners_list';

packages/core/overlays/core-overlays-browser-internal/src/banners/banners_list.tsx

@@ -10,6 +10,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Observable } from 'rxjs';
 import type { OverlayBanner } from './banners_service';
 
+import './banners_list.scss';
+
 interface Props {
   banners$: Observable<OverlayBanner[]>;
 }

src/core/public/_banners_list.scss

@@ -1,3 +0,0 @@
-.kbnGlobalBannerList__item + .kbnGlobalBannerList__item {
-  margin-top: $euiSizeS;
-}

src/core/public/_mount_wrapper.scss

@@ -1,5 +0,0 @@
-.kbnOverlayMountWrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}

src/core/public/chrome/_index.scss

@@ -1 +0,0 @@
-@import './ui/index';

src/core/public/chrome/ui/_index.scss

@@ -1,2 +0,0 @@
-@import './header/index';
-@import './loading_indicator';

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

@@ -1,19 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export { Header } from './header';
-export { LoadingIndicator } from './loading_indicator';
-export type {
-  ChromeHelpExtensionLinkBase,
-  ChromeHelpExtensionMenuLink,
-  ChromeHelpExtensionMenuCustomLink,
-  ChromeHelpExtensionMenuDiscussLink,
-  ChromeHelpExtensionMenuDocumentationLink,
-  ChromeHelpExtensionMenuGitHubLink,
-  NavType,
-} from './header';

src/core/public/core_system.test.mocks.ts

@@ -11,7 +11,7 @@ import { docLinksServiceMock } from '@kbn/core-doc-links-browser-mocks';
 import { themeServiceMock } from '@kbn/core-theme-browser-mocks';
 import { analyticsServiceMock } from '@kbn/core-analytics-browser-mocks';
 import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
-import { chromeServiceMock } from './chrome/chrome_service.mock';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
 import { fatalErrorsServiceMock } from '@kbn/core-fatal-errors-browser-mocks';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
 import { i18nServiceMock } from '@kbn/core-i18n-browser-mocks';
@@ -82,7 +82,7 @@ jest.doMock('@kbn/core-ui-settings-browser-internal', () => ({
 
 export const MockChromeService = chromeServiceMock.create();
 export const ChromeServiceConstructor = jest.fn().mockImplementation(() => MockChromeService);
-jest.doMock('./chrome', () => ({
+jest.doMock('@kbn/core-chrome-browser-internal', () => ({
   ChromeService: ChromeServiceConstructor,
 }));
 

src/core/public/core_system.ts

@@ -31,6 +31,7 @@ import { OverlayService } from '@kbn/core-overlays-browser-internal';
 import { KBN_LOAD_MARKS } from '@kbn/core-mount-utils-browser-internal';
 import { SavedObjectsService } from '@kbn/core-saved-objects-browser-internal';
 import { NotificationsService } from '@kbn/core-notifications-browser-internal';
+import { ChromeService } from '@kbn/core-chrome-browser-internal';
 import {
   ApplicationService,
   type InternalApplicationSetup,
@@ -38,7 +39,6 @@ import {
 } from '@kbn/core-application-browser-internal';
 import { fetchOptionalMemoryInfo } from './fetch_optional_memory_info';
 import { CoreSetup, CoreStart } from '.';
-import { ChromeService } from './chrome';
 import { PluginsService } from './plugins';
 import { RenderingService } from './rendering';
 import { CoreApp } from './core_app';

src/core/public/index.scss

@@ -1,8 +1,5 @@
 @import './variables';
 @import './mixins';
 @import './core';
-@import './chrome/index';
-@import './banners_list';
-@import './mount_wrapper';
 @import './rendering/index';
 @import './styles/index';

src/core/public/index.ts

@@ -68,9 +68,8 @@ import type {
   ChromeRecentlyAccessed,
   ChromeRecentlyAccessedHistoryItem,
   ChromeUserBanner,
-  NavType,
   ChromeHelpMenuActions,
-} from './chrome';
+} from '@kbn/core-chrome-browser';
 import type {
   Plugin,
   PluginInitializer,
@@ -362,7 +361,6 @@ export type {
   PluginOpaqueId,
   IUiSettingsClient,
   UiSettingsState,
-  NavType,
 };
 
 export { __kbnBootstrap__ } from './kbn_bootstrap';