[SolutionSideNav] Add badge to all items except section header (#217301)

## Summary This PR adds the ability add badge to all side nav items, except section headers. Follow-up on https://github.com/elastic/kibana/pull/214854 ![Screenshot 2025-04-07 at 12 24 29](https://github.com/user-attachments/assets/9ae2a610-1e56-4853-8214-ecb417bd4855)
2025-04-23 17:28:26 -04:00 · 2025-04-07 21:37:39 +02:00 · 2025-04-07 21:37:39 +02:00 · 0d84936259
commit 0d84936259
parent 9342cff262
5 changed files with 51 additions and 35 deletions
--- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx
@ -24,6 +24,7 @@ import {
  EuiButton,
 } from '@elastic/eui';
 import type { ChromeProjectNavigationNode } from '@kbn/core-chrome-browser';
+import { SubItemTitle } from './subitem_title';
 import { useNavigation as useServices } from '../../services';
 import { isActiveFromUrl } from '../../utils';
 import type { NavigateToUrlFn } from '../../types';
@ -46,7 +47,11 @@ const getStyles = (euiTheme: EuiThemeComputed<{}>) => css`
  }
 `;

-const getButtonStyles = (euiTheme: EuiThemeComputed<{}>, isActive: boolean) => css`
+const getButtonStyles = (
+  euiTheme: EuiThemeComputed<{}>,
+  isActive: boolean,
+  withBadge?: boolean
+) => css`
  background-color: ${isActive ? transparentize(euiTheme.colors.lightShade, 0.5) : 'transparent'};
  transform: none !important; /* don't translateY 1px */
  color: inherit;
@ -56,14 +61,21 @@ const getButtonStyles = (euiTheme: EuiThemeComputed<{}>, isActive: boolean) => c
    justify-content: flex-start;
    position: relative;
  }
-  & .euiIcon {
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateY(50%);
-  }
+  ${!withBadge
+    ? `
+    & .euiIcon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translateY(50%);
+    }
+  `
+    : `
+    & .euiBetaBadge {
+      margin-left: -${euiTheme.size.m};
+    }
+    `}
 `;
-
 interface Props {
  item: ChromeProjectNavigationNode;
  navigateToUrl: NavigateToUrlFn;
@ -74,7 +86,7 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
  const { euiTheme } = useEuiTheme();
  const { open: openPanel, close: closePanel, selectedNode } = usePanel();
  const { isSideNavCollapsed } = useServices();
-  const { title, deepLink, children } = item;
+  const { title, deepLink, children, withBadge } = item;
  const { id, path } = item;
  const href = deepLink?.url ?? item.href;
  const isNotMobile = useIsWithinMinBreakpoint('s');
@ -89,7 +101,10 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
    getStyles(euiTheme)
  );

-  const buttonClassNames = classNames('sideNavItem', getButtonStyles(euiTheme, isActive));
+  const buttonClassNames = classNames(
+    'sideNavItem',
+    getButtonStyles(euiTheme, isActive, withBadge)
+  );

  const dataTestSubj = classNames(`nav-item`, `nav-item-${path}`, {
    [`nav-item-deepLinkId-${deepLink?.id}`]: !!deepLink,
@ -144,17 +159,17 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
        className={buttonClassNames}
        data-test-subj={dataTestSubj}
      >
-        {title}
+        {withBadge ? <SubItemTitle item={item} /> : title}
      </EuiButton>
    );
  }

  return (
    <EuiFlexGroup alignItems="center" gutterSize="xs">
-      <EuiFlexItem style={{ flexBasis: isIconVisible ? '80%' : '100%' }}>
+      <EuiFlexItem css={{ flexBasis: isIconVisible ? '80%' : '100%' }}>
        <EuiListGroup gutterSize="none">
          <EuiListGroupItem
-            label={title}
+            label={withBadge ? <SubItemTitle item={item} /> : title}
            href={href}
            wrapText
            onClick={onLinkClick}
@ -166,7 +181,7 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
        </EuiListGroup>
      </EuiFlexItem>
      {isIconVisible && (
-        <EuiFlexItem grow={0} style={{ flexBasis: '15%' }}>
+        <EuiFlexItem grow={0} css={{ flexBasis: '15%' }}>
          <EuiButtonIcon
            display={isExpanded ? 'base' : 'empty'}
            size="s"
--- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx
@ -421,7 +421,7 @@ function nodeToEuiCollapsibleNavProps(
      onClick,
      icon: navNode.icon,
      // @ts-expect-error title accepts JSX elements and they render correctly but the type definition expects a string
-      title: !subItems && navNode.withBadge ? <SubItemTitle item={navNode} /> : navNode.title,
+      title: navNode.withBadge ? <SubItemTitle item={navNode} /> : navNode.title,
      ['data-test-subj']: dataTestSubj,
      iconProps: { size: deps.treeDepth === 0 ? 'm' : 's' },

--- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/panel_group.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/panel_group.tsx
@ -22,6 +22,7 @@ import {
 import { css } from '@emotion/css';

 import type { ChromeProjectNavigationNode } from '@kbn/core-chrome-browser';
+import { SubItemTitle } from '../subitem_title';
 import { PanelNavItem } from './panel_nav_item';

 const accordionButtonClassName = 'sideNavPanelAccordion__button';
@ -64,7 +65,7 @@ interface Props {

 export const PanelGroup: FC<Props> = ({ navNode, isFirstInList, hasHorizontalRuleBefore }) => {
  const { euiTheme } = useEuiTheme();
-  const { id, title, appendHorizontalRule, spaceBefore: _spaceBefore } = navNode;
+  const { id, title, appendHorizontalRule, spaceBefore: _spaceBefore, withBadge } = navNode;
  const filteredChildren = navNode.children?.filter((child) => child.sideNavStatus !== 'hidden');
  const classNames = getClassnames(euiTheme);
  const hasTitle = !!title && title !== '';
@ -83,21 +84,18 @@ export const PanelGroup: FC<Props> = ({ navNode, isFirstInList, hasHorizontalRul
    }
  }

-  const renderChildren = useCallback(
-    ({ parentIsAccordion } = { parentIsAccordion: false }) => {
-      if (!filteredChildren) return null;
+  const renderChildren = useCallback(() => {
+    if (!filteredChildren) return null;

-      return filteredChildren.map((item, i) => {
-        const isItem = item.renderAs === 'item' || !item.children;
-        return isItem ? (
-          <PanelNavItem key={item.id} item={item} parentIsAccordion={parentIsAccordion} />
-        ) : (
-          <PanelGroup navNode={item} key={item.id} />
-        );
-      });
-    },
-    [filteredChildren]
-  );
+    return filteredChildren.map((item, i) => {
+      const isItem = item.renderAs === 'item' || !item.children;
+      return isItem ? (
+        <PanelNavItem key={item.id} item={item} />
+      ) : (
+        <PanelGroup navNode={item} key={item.id} />
+      );
+    });
+  }, [filteredChildren]);

  if (!filteredChildren?.length || !someChildIsVisible(filteredChildren)) {
    return null;
@ -109,7 +107,7 @@ export const PanelGroup: FC<Props> = ({ navNode, isFirstInList, hasHorizontalRul
        {spaceBefore !== null && <EuiSpacer size={spaceBefore} />}
        <EuiAccordion
          id={id}
-          buttonContent={title}
+          buttonContent={withBadge ? <SubItemTitle item={navNode} /> : title}
          className={classNames.accordion}
          buttonClassName={accordionButtonClassName}
          data-test-subj={groupTestSubj}
@ -120,7 +118,7 @@ export const PanelGroup: FC<Props> = ({ navNode, isFirstInList, hasHorizontalRul
        >
          <>
            {!firstChildIsGroup && <EuiSpacer size="s" />}
-            {renderChildren({ parentIsAccordion: true })}
+            {renderChildren()}
          </>
        </EuiAccordion>
        {appendHorizontalRule && <EuiHorizontalRule margin="xs" />}
--- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/panel_nav_item.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/panel_nav_item.tsx
@ -19,10 +19,9 @@ import { usePanel } from './context';

 interface Props {
  item: ChromeProjectNavigationNode;
-  parentIsAccordion?: boolean;
 }

-export const PanelNavItem: FC<Props> = ({ item, parentIsAccordion }) => {
+export const PanelNavItem: FC<Props> = ({ item }) => {
  const { navigateToUrl } = useServices();
  const { close: closePanel } = usePanel();
  const { id, icon, deepLink, openInNewTab, isExternalLink, renderItem } = item;
@ -46,7 +45,7 @@ export const PanelNavItem: FC<Props> = ({ item, parentIsAccordion }) => {
  ) : (
    <EuiListGroupItem
      key={id}
-      label={parentIsAccordion ? <SubItemTitle item={item} /> : item.title}
+      label={<SubItemTitle item={item} />}
      wrapText
      className={classNames(
        'sideNavPanelLink',
--- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx
+++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx
@ -113,6 +113,7 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
          href: '/app/kibana',
          icon: 'iInCircle',
          isExternalLink: true,
+          withBadge: true,
        },
        {
          id: 'item02',
@ -229,6 +230,7 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
                  title: 'Item 19',
                  icon: 'iInCircle',
                  renderAs: 'accordion',
+                  withBadge: true,
                  children: [
                    {
                      id: 'sub1',
@ -294,6 +296,7 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
              path: '',
              icon: 'iInCircle',
              renderAs: 'panelOpener',
+              withBadge: true,
              children: [
                {
                  id: 'sub1',
@ -411,6 +414,7 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
          path: '',
          renderAs: 'accordion',
          icon: 'iInCircle',
+          withBadge: true,
          children: [
            {
              id: 'item-beta',