Chrome Next

.github/CODEOWNERS

@@ -457,6 +457,7 @@ src/platform/packages/shared/content-management/table_list_view @elastic/appex-s
 src/platform/packages/shared/content-management/table_list_view_common @elastic/appex-sharedux
 src/platform/packages/shared/content-management/table_list_view_table @elastic/appex-sharedux
 src/platform/packages/shared/content-management/user_profiles @elastic/appex-sharedux
+src/platform/packages/shared/context-switcher-components @elastic/appex-sharedux
 src/platform/packages/shared/controls/control-group-renderer @elastic/kibana-presentation
 src/platform/packages/shared/controls/controls-constants @elastic/kibana-presentation
 src/platform/packages/shared/controls/controls-schemas @elastic/kibana-presentation

package.json

@@ -321,6 +321,7 @@
     "@kbn/content-management-user-profiles": "link:src/platform/packages/shared/content-management/user_profiles",
     "@kbn/content-management-utils": "link:src/platform/packages/shared/kbn-content-management-utils",
     "@kbn/content-packs-schema": "link:x-pack/platform/packages/shared/kbn-content-packs-schema",
+    "@kbn/context-switcher-components": "link:src/platform/packages/shared/context-switcher-components",
     "@kbn/control-group-renderer": "link:src/platform/packages/shared/controls/control-group-renderer",
     "@kbn/controls-constants": "link:src/platform/packages/shared/controls/controls-constants",
     "@kbn/controls-example-plugin": "link:examples/controls_example",
@@ -354,6 +355,7 @@
     "@kbn/core-chrome-browser-hooks": "link:src/core/packages/chrome/browser-hooks",
     "@kbn/core-chrome-browser-internal": "link:src/core/packages/chrome/browser-internal",
     "@kbn/core-chrome-browser-internal-types": "link:src/core/packages/chrome/browser-internal-types",
+    "@kbn/core-chrome-feature-flags": "link:src/core/packages/chrome/feature-flags",
     "@kbn/core-chrome-layout": "link:src/core/packages/chrome/layout/core-chrome-layout",
     "@kbn/core-chrome-layout-components": "link:src/core/packages/chrome/layout/core-chrome-layout-components",
     "@kbn/core-chrome-layout-constants": "link:src/core/packages/chrome/layout/core-chrome-layout-constants",

packages/kbn-optimizer/limits.yml

@@ -26,7 +26,7 @@ pageLoadAssetSize:
   contentConnectors: 33014
   contentManagement: 8350
   controls: 10300
-  core: 547151
+  core: 604282
   cps: 9209
   crossClusterReplication: 12662
   customIntegrations: 11715
@@ -42,7 +42,7 @@ pageLoadAssetSize:
   dataViewManagement: 6250
   dataViews: 66000
   dataVisualizer: 32727
-  developerToolbar: 4467
+  developerToolbar: 15000
   devTools: 8109
   discover: 30501
   discoverEnhanced: 5509
@@ -70,7 +70,7 @@ pageLoadAssetSize:
   expressionTagcloud: 14009
   expressionXY: 45000
   features: 4145
-  feedback: 7000
+  feedback: 7500
   fieldFormats: 64634
   fieldsMetadata: 4901
   files: 6037
@@ -79,7 +79,7 @@ pageLoadAssetSize:
   fleet: 209495
   genAiSettings: 6400
   globalSearch: 6890
-  globalSearchBar: 26122
+  globalSearchBar: 31178
   globalSearchProviders: 4646
   graph: 9924
   grokdebugger: 5469
@@ -174,7 +174,7 @@ pageLoadAssetSize:
   share: 58677
   slo: 40437
   snapshotRestore: 22068
-  spaces: 28871
+  spaces: 36639
   stackAlerts: 31499
   stackConnectors: 85421
   streams: 15433

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/index.ts

@@ -28,6 +28,7 @@ export {
   APP_MENU_ITEM_LIMIT,
   APP_MENU_NOTIFICATION_INDICATOR_LEFT,
   APP_MENU_NOTIFICATION_INDICATOR_TOP,
+  APP_MENU_SHARE_ID,
 } from './src';
 
 export {

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/constants.ts

@@ -18,3 +18,4 @@ export const APP_MENU_ITEM_LIMIT = 3;
 export const APP_MENU_NOTIFICATION_INDICATOR_TOP = 2;
 export const APP_MENU_NOTIFICATION_INDICATOR_LEFT = 25;
 export const DEFAULT_POPOVER_WIDTH = 200;
+export const APP_MENU_SHARE_ID = 'share';

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/index.ts

@@ -28,6 +28,7 @@ export {
   APP_MENU_ITEM_LIMIT,
   APP_MENU_NOTIFICATION_INDICATOR_LEFT,
   APP_MENU_NOTIFICATION_INDICATOR_TOP,
+  APP_MENU_SHARE_ID,
   DEFAULT_POPOVER_WIDTH,
 } from './constants';
 

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

@@ -12,8 +12,20 @@ export type { ChromeComponentsDeps } from './src/context';
 
 export { ClassicHeader } from './src/classic';
 export { ProjectHeader } from './src/project';
+export {
+  AppHeader,
+  AppHeaderShell,
+  GlobalHeader,
+  GlobalHeaderShell,
+  HeaderActionButton,
+} from './src/chrome_next';
+export type {
+  AppHeaderShellProps,
+  GlobalHeaderShellProps,
+  HeaderActionButtonProps,
+} from './src/chrome_next';
 export { GridLayoutProjectSideNav } from './src/project/sidenav/grid_layout_sidenav';
 export { Sidebar } from './src/sidebar';
 export { AppMenuBar } from './src/project/app_menu';
 export { HeaderBreadcrumbsBadges, HeaderTopBanner, ChromelessHeader } from './src/shared';
-export { useHasAppMenu } from './src/shared/chrome_hooks';
+export { useHasAppMenu, useIsNextChrome } from './src/shared/chrome_hooks';

src/core/packages/chrome/browser-components/moon.yml

@@ -35,9 +35,12 @@ dependsOn:
   - '@kbn/core-chrome-layout-constants'
   - '@kbn/core-chrome-sidebar-components'
   - '@kbn/ui-side-navigation'
+  - '@kbn/core-chrome-feature-flags'
   - '@kbn/core-custom-branding-browser'
   - '@kbn/core-custom-branding-common'
   - '@kbn/core-doc-links-browser'
+  - '@kbn/core-feature-flags-browser'
+  - '@kbn/core-feature-flags-browser-mocks'
   - '@kbn/core-doc-links-browser-mocks'
   - '@kbn/core-http-browser'
   - '@kbn/core-http-browser-mocks'
@@ -46,6 +49,8 @@ dependsOn:
   - '@kbn/shared-ux-label-formatter'
   - '@kbn/test-jest-helpers'
   - '@kbn/use-observable'
+  - '@kbn/core-chrome-layout-components'
+  - '@kbn/shared-ux-utility'
 tags:
   - shared-browser
   - package

src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badge.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useMemo } from 'react';
+import { EuiBadge, EuiToolTip } from '@elastic/eui';
+import type { ChromeNextHeaderBadge } from '@kbn/core-chrome-browser/src';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+
+const useBadgeStyle = () => {
+  return useMemo(() => {
+    const badge = css`
+      max-width: 200px;
+    `;
+
+    return { badge };
+  }, []);
+};
+
+export const AppBadge = ({ badge }: { badge: ChromeNextHeaderBadge }) => {
+  const { badge: badgeStyle } = useBadgeStyle();
+
+  // @ts-expect-error supported for backward compatibility. TODO: Remove it
+  if (badge?.renderCustomBadge) {
+    // @ts-expect-error supported for backward compatibility. TODO: Remove it
+    return badge.renderCustomBadge({ badgeText: badge.label });
+  }
+
+  const badgeOnClickAriaLabel =
+    badge?.onClickAriaLabel ??
+    i18n.translate('core.ui.chrome.appHeader.badge.ariaLabel', {
+      defaultMessage: 'Click {label} badge',
+      values: { label: badge.label },
+    });
+
+  const handleBadgeClick = () => {
+    if (badge?.onClick) {
+      badge.onClick();
+    }
+  };
+
+  const badgeComponent = (
+    <EuiBadge
+      onClick={handleBadgeClick}
+      onClickAriaLabel={badgeOnClickAriaLabel}
+      color={badge?.color ?? 'hollow'}
+      data-test-subj={badge?.['data-test-subj']}
+      css={badgeStyle}
+    >
+      {badge.label}
+    </EuiBadge>
+  );
+
+  if (badge?.tooltip) {
+    return <EuiToolTip content={badge.tooltip}>{badgeComponent}</EuiToolTip>;
+  }
+
+  return badgeComponent;
+};
+
+AppBadge.displayName = 'AppBadge';

src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_badges.tsx

@@ -0,0 +1,111 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { memo, useMemo, useState } from 'react';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiPopover, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { AppBadge } from './app_badge';
+import { useAppBadges } from './hooks/use_app_badges';
+
+const MAX_VISIBLE_BADGES = 2;
+
+const useBadgesStyle = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => {
+    const badgesContainer = css`
+      margin-left: ${euiTheme.size.s};
+
+      /* Deprecated renderCustomBadge items may return null at runtime,
+         leaving empty EuiFlexItem wrappers in the DOM. Hide the container
+         when none of its children have visible content to avoid a stale
+         margin-left gap next to the title. */
+      &:not(:has(.euiFlexItem:not(:empty))) {
+        display: none;
+      }
+    `;
+
+    return { badgesContainer };
+  }, [euiTheme]);
+};
+
+export const AppBadges = memo(() => {
+  const badges = useAppBadges();
+  const { badgesContainer } = useBadgesStyle();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  if (!badges || badges.length === 0) {
+    return null;
+  }
+
+  const visibleBadges = badges.slice(0, MAX_VISIBLE_BADGES);
+  const overflowBadges = badges.slice(MAX_VISIBLE_BADGES);
+
+  const handleClosePopover = () => {
+    setIsPopoverOpen(false);
+  };
+
+  const handleTogglePopover = () => {
+    setIsPopoverOpen((open) => !open);
+  };
+
+  return (
+    <EuiFlexGroup
+      gutterSize="xs"
+      alignItems="center"
+      responsive={false}
+      wrap={false}
+      css={badgesContainer}
+    >
+      {visibleBadges.map((badge) => (
+        <EuiFlexItem grow={false} key={badge.label}>
+          <AppBadge badge={badge} />
+        </EuiFlexItem>
+      ))}
+      {overflowBadges.length > 0 && (
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            aria-label={i18n.translate('core.ui.chrome.appHeader.badges.popoverAriaLabel', {
+              defaultMessage: 'More badges',
+            })}
+            button={
+              <EuiBadge
+                color="hollow"
+                onClick={handleTogglePopover}
+                onClickAriaLabel={i18n.translate(
+                  'core.ui.chrome.appHeader.badges.overflowAriaLabel',
+                  {
+                    defaultMessage: 'Show {count} more badges',
+                    values: { count: overflowBadges.length },
+                  }
+                )}
+              >
+                +{overflowBadges.length}
+              </EuiBadge>
+            }
+            isOpen={isPopoverOpen}
+            closePopover={handleClosePopover}
+            panelPaddingSize="s"
+          >
+            <EuiFlexGroup direction="column" gutterSize="xs">
+              {overflowBadges.map((badge) => (
+                <EuiFlexItem key={badge.label}>
+                  <AppBadge badge={badge} />
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
+          </EuiPopover>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+});
+
+AppBadges.displayName = 'AppBadges';

src/core/packages/chrome/browser-components/src/chrome_next/app_header/app_header.tsx

@@ -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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { AppHeaderShell } from './app_header_shell';
+import { AppBadges } from './app_badges';
+import { TitleArea } from './title_area';
+import { GlobalActions } from './global_actions';
+import { AppMenu } from './app_menu';
+
+export const AppHeader = React.memo(() => (
+  <AppHeaderShell
+    title={<TitleArea />}
+    badges={<AppBadges />}
+    titleActions={<GlobalActions />}
+    trailing={<AppMenu />}
+  />
+));
+
+AppHeader.displayName = 'AppHeader';