Extract Chrome app header infra fixes

src/core/packages/chrome/app-header/src/app_header/app_badge.stories.tsx

@@ -0,0 +1,182 @@
+/*
+ * 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, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import {
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHeader,
+  EuiHeaderSection,
+  EuiPageTemplate,
+  EuiPopover,
+  EuiTitle,
+} from '@elastic/eui';
+import type { AppHeaderBadge } from '../types';
+import { AppBadge } from './app_badge';
+
+const MAX_VISIBLE_BADGES = 2;
+const OVERFLOW_THRESHOLD = 3;
+
+interface AppBadgeStoryProps {
+  title: string;
+  badges: AppHeaderBadge[];
+}
+
+const HeaderWithBadges = ({ title, badges }: AppBadgeStoryProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const shouldOverflow = badges.length > OVERFLOW_THRESHOLD;
+  const visibleBadges = shouldOverflow ? badges.slice(0, MAX_VISIBLE_BADGES) : badges;
+  const overflowBadges = shouldOverflow ? badges.slice(MAX_VISIBLE_BADGES) : [];
+
+  return (
+    <EuiHeader>
+      <EuiHeaderSection>
+        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={false}>
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="xs">
+              <h1>{title}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          {visibleBadges.map((badge) => (
+            <EuiFlexItem grow={false} key={badge.label}>
+              <AppBadge badge={badge} />
+            </EuiFlexItem>
+          ))}
+          {overflowBadges.length > 0 && (
+            <EuiFlexItem grow={false}>
+              <EuiPopover
+                aria-label="More badges"
+                button={
+                  <EuiBadge
+                    color="hollow"
+                    onClick={() => setIsPopoverOpen((open) => !open)}
+                    onClickAriaLabel={`Show ${overflowBadges.length} more badges`}
+                  >
+                    +{overflowBadges.length}
+                  </EuiBadge>
+                }
+                isOpen={isPopoverOpen}
+                closePopover={() => setIsPopoverOpen(false)}
+                panelPaddingSize="s"
+              >
+                <EuiFlexGroup direction="column" gutterSize="xs" alignItems="center">
+                  {overflowBadges.map((badge) => (
+                    <EuiFlexItem grow={false} key={badge.label}>
+                      <AppBadge badge={badge} />
+                    </EuiFlexItem>
+                  ))}
+                </EuiFlexGroup>
+              </EuiPopover>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiHeaderSection>
+    </EuiHeader>
+  );
+};
+
+const meta: Meta<AppBadgeStoryProps> = {
+  title: 'Chrome/App Badge',
+  component: HeaderWithBadges,
+  decorators: [
+    (Story) => (
+      <EuiPageTemplate>
+        <Story />
+      </EuiPageTemplate>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Badges displayed inline next to the page title in the Chrome header. ' +
+          'Each badge can be a simple label, have a click handler, or open a context menu.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<AppBadgeStoryProps>;
+
+export const Badges: Story = {
+  args: {
+    title: '[Logs] Web Traffic',
+    badges: [
+      { label: 'Beta' },
+      {
+        label: 'Tech Preview',
+        color: 'warning',
+        tooltip: 'This feature is in tech preview and may change.',
+        onClick: action('tech-preview-clicked'),
+        onClickAriaLabel: 'Click to learn more about tech preview',
+      },
+      {
+        label: 'Managed',
+        color: 'primary',
+        popoverWidth: 180,
+        items: [
+          {
+            name: 'View details',
+            icon: 'inspect',
+            onClick: action('view-details-clicked'),
+          },
+          {
+            name: 'Export',
+            icon: 'exportAction',
+            popoverWidth: 180,
+            items: [
+              {
+                name: 'Export as CSV',
+                icon: 'document',
+                onClick: action('export-csv-clicked'),
+              },
+              {
+                name: 'Export as JSON',
+                icon: 'document',
+                onClick: action('export-json-clicked'),
+              },
+            ],
+          },
+          {
+            name: 'Unlink',
+            icon: 'unlink',
+            onClick: action('unlink-clicked'),
+          },
+        ],
+      },
+      { label: 'New', color: 'primary' },
+    ],
+  },
+};
+
+export const ThreeBadges: Story = {
+  name: 'Three badges',
+  args: {
+    title: '[Logs] Web Traffic',
+    badges: [
+      { label: 'Beta' },
+      {
+        label: 'Tech Preview',
+        color: 'warning',
+        tooltip: 'This feature is in tech preview and may change.',
+      },
+      {
+        label: 'Managed',
+        color: 'primary',
+        onClick: action('managed-clicked'),
+        onClickAriaLabel: 'Click to view managed details',
+      },
+    ],
+  },
+};

src/core/packages/chrome/app-header/src/app_header/app_menu.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
+import { hasNonGlobalStaticItems, type AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { useHasLegacyActionMenu } from './hooks/chrome';
 import { LegacyHeaderActionMenu } from './legacy_action_menu';
 import { useAppHeaderMenu } from './hooks';
@@ -27,8 +27,9 @@ export interface AppMenuProps {
 export const AppMenu = React.memo<AppMenuProps>(({ menu, docLink, showAddIntegrations }) => {
   const { config, staticItems } = useAppHeaderMenu(menu, docLink, showAddIntegrations);
   const hasLegacyActionMenu = useHasLegacyActionMenu();
+  const hasStaticItems = hasNonGlobalStaticItems(staticItems);
 
-  if (config || staticItems?.length) {
+  if (config || hasStaticItems) {
     return (
       <Suspense>
         <AppMenuComponent config={config} staticItems={staticItems} />

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

@@ -37,4 +37,5 @@ export {
   getPopoverPanels,
   getPopoverActionItems,
   getIsSelectedColor,
+  hasNonGlobalStaticItems,
 } from './src';

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu.tsx

@@ -9,7 +9,7 @@
 
 import React, { useState } from 'react';
 import { EuiHeaderLinks, useIsWithinBreakpoints } from '@elastic/eui';
-import { getAppMenuItems, processStaticItems } from '../utils';
+import { getAppMenuItems, hasNonGlobalStaticItems, processStaticItems } from '../utils';
 import { AppMenuActionButton } from './app_menu_action_button';
 import { AppMenuItem } from './app_menu_item';
 import { AppMenuOverflowButton } from './app_menu_overflow_button';
@@ -51,9 +51,9 @@ export const AppMenuComponent = ({
    * If only global static items are present, we don't want to render
    * the app menu.
    */
-  const hasNonGlobalStaticItems = !!staticItems?.length && staticItems.some((item) => !item.global);
+  const hasVisibleStaticItems = hasNonGlobalStaticItems(staticItems);
 
-  if ((!config || hasNoItems(config)) && !hasNonGlobalStaticItems) {
+  if ((!config || hasNoItems(config)) && !hasVisibleStaticItems) {
     return null;
   }
 
@@ -78,7 +78,7 @@ export const AppMenuComponent = ({
     shouldOverflow: shouldOverflowBase,
   } = getAppMenuItems({
     config,
-    hasStaticItems: hasNonGlobalStaticItems,
+    hasStaticItems: hasVisibleStaticItems,
   });
 
   const processedStaticItems = processStaticItems(staticItems);

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

@@ -40,4 +40,5 @@ export {
   getPopoverActionItems,
   getPopoverSwitchItems,
   getIsSelectedColor,
+  hasNonGlobalStaticItems,
 } from './utils';

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/utils.tsx

@@ -126,6 +126,9 @@ export const processStaticItems = (staticItems?: AppMenuItemType[]): AppMenuItem
     overflow: true,
   }));
 
+export const hasNonGlobalStaticItems = (staticItems?: Array<{ global?: boolean }>): boolean =>
+  !!staticItems?.some((item) => !item.global);
+
 export const isDisabled = (disableButton: AppMenuItemCommon['disableButton']) =>
   Boolean(isFunction(disableButton) ? disableButton() : disableButton);
 

src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts

@@ -247,21 +247,12 @@ export function useAppMenu() {
   return useObservable(appMenu$, undefined);
 }
 
-/**
- * Returns the current legacy action menu mount point, or `undefined` if none is set.
- * @deprecated Legacy action menus use imperative mount points. Prefer `chrome.setAppMenu()`.
- */
-export function useCurrentActionMenu(): MountPoint | undefined {
-  const { application } = useChromeComponentsDeps();
-  return useObservable(application.currentActionMenu$, undefined);
-}
-
 /**
  * Whether a legacy action menu mount point is currently set.
  * @deprecated Legacy action menus use imperative mount points. Prefer `chrome.setAppMenu()`.
  */
 export function useHasLegacyActionMenu(): boolean {
-  return !!useCurrentActionMenu();
+  return !!useInternalLegacyActionMenu();
 }
 
 /** Whether the current app menu (registered via `chrome.setAppMenu()`) has items configured. */
@@ -298,3 +289,8 @@ export function useHasInlineAppHeader(): boolean {
   const inlineAppHeader$ = useMemo(() => chrome.next.inlineAppHeader.get$(), [chrome]);
   return useObservable(inlineAppHeader$, false);
 }
+
+export function useInternalLegacyActionMenu(): MountPoint | undefined {
+  const { legacyActionMenu$ } = useChromeService().componentDeps;
+  return useObservable(legacyActionMenu$, undefined);
+}

src/core/packages/chrome/browser-components/src/shared/header_action_menu.test.tsx

@@ -13,6 +13,8 @@ import { mount } from 'enzyme';
 import { BehaviorSubject } from 'rxjs';
 import { act } from 'react-dom/test-utils';
 import type { MountPoint, UnmountCallback } from '@kbn/core-mount-utils-browser';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
+import { ChromeServiceProvider } from '@kbn/core-chrome-browser-context';
 import { ChromeComponentsProvider } from '../context';
 import { createMockChromeComponentsDeps } from '../test_helpers';
 import { HeaderActionMenu } from './header_action_menu';
@@ -60,7 +62,19 @@ describe('HeaderActionMenu', () => {
   const renderWithProvider = (ui: React.ReactElement) => {
     const deps = createMockChromeComponentsDeps();
     deps.application = { ...deps.application, currentActionMenu$: menuMount$ };
-    return mount(<ChromeComponentsProvider value={deps}>{ui}</ChromeComponentsProvider>);
+    const chromeMock = chromeServiceMock.createStartContract();
+    const chrome = {
+      ...chromeMock,
+      componentDeps: {
+        ...chromeMock.componentDeps,
+        legacyActionMenu$: menuMount$,
+      },
+    };
+    return mount(
+      <ChromeServiceProvider value={{ chrome }}>
+        <ChromeComponentsProvider value={deps}>{ui}</ChromeComponentsProvider>
+      </ChromeServiceProvider>
+    );
   };
 
   it('mounts the current value of the provided observable', () => {

src/core/packages/chrome/browser-components/src/shared/header_action_menu.tsx

@@ -10,14 +10,14 @@
 import type { FC } from 'react';
 import React, { useRef, useLayoutEffect } from 'react';
 import type { UnmountCallback } from '@kbn/core-mount-utils-browser';
-import { useCurrentActionMenu } from './chrome_hooks';
+import { useInternalLegacyActionMenu } from './chrome_hooks';
 
 /**
  * Renders the currently mounted header action menu set via {@link ChromeStart.setHeaderActionMenu}.
  * @deprecated Use {@link HeaderAppMenu} instead. See kibana-team#2651.
  */
 export const HeaderActionMenu: FC = () => {
-  const mount = useCurrentActionMenu();
+  const mount = useInternalLegacyActionMenu();
   const elementRef = useRef<HTMLDivElement>(null);
   const unmountRef = useRef<UnmountCallback | null>(null);
 

src/core/packages/chrome/browser-components/src/shared/header_extension.tsx

@@ -55,7 +55,7 @@ export const HeaderExtension = ({ extension, display, containerClassName }: Prop
   if (!isMountPoint(extension)) {
     return (
       <Suspense fallback={null}>
-        <div className={containerClassName} style={style}>
+        <div css={mountPointContainerCss} className={containerClassName} style={style}>
           {extension}
         </div>
       </Suspense>

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

@@ -10,6 +10,7 @@
 export { useChromeStyle } from './use_chrome_style';
 export { useActiveSolutionNavId } from './use_active_solution_nav_id';
 export { useIsChromeVisible } from './use_is_chrome_visible';
+export { useIsNextChrome } from './use_is_next_chrome';
 export { useSidebarWidth } from './use_sidebar_width';
 export { useSideNavCollapsed } from './use_side_nav_collapsed';
 export { useSideNavWidth } from './use_side_nav_width';

src/core/packages/chrome/browser-hooks/use_is_next_chrome.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { useChromeService } from '@kbn/core-chrome-browser-context';
+
+/**
+ * Returns `true` when Chrome Next is enabled.
+ * Note: this only checks the feature flag, it does not check whether current chrome is classic vs project.
+ * Combine with `useChromeStyle` to check if the current chrome is classic vs project.
+ */
+export function useIsNextChrome(): boolean {
+  const chrome = useChromeService();
+  return chrome.next.isEnabled;
+}

src/platform/kbn-ui/chrome-layout/src/sidebar/layout_sidebar.styles.ts

@@ -18,6 +18,8 @@ const root = css`
     100% - ${layoutVar('application.marginTop')} - ${layoutVar('application.marginBottom')}
   );
   width: calc(100% - ${layoutVar('application.marginRight')});
+  margin-top: ${layoutVar('application.marginTop')};
+  margin-bottom: ${layoutVar('application.marginBottom')};
   z-index: ${layoutLevels.sidebar};
   min-height: 0; // to allow flex children to shrink properly
 `;