[Dashboard] Add new badge to collapsible sections (#233768)

## Summary

This PR adds a "New" badge to collapsible sections so that they stand
out in the "Add panel" menu:

| Before | After |
|--------|--------|
| <img width="1368" height="907" alt="image"
src="https://github.com/user-attachments/assets/787fc0cb-84aa-405e-8236-089d00b55cf1"
/> | <img width="1368" height="907" alt="image"
src="https://github.com/user-attachments/assets/e5173670-2657-440d-897c-3f2b1eb91cea"
/> |

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: Heenawter

src/platform/plugins/shared/dashboard/public/dashboard_actions/add_section_action.tsx

@@ -7,8 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { ADD_PANEL_ANNOTATION_GROUP } from '@kbn/embeddable-plugin/public';
+import { i18n } from '@kbn/i18n';
 import type { CanAddNewSection } from '@kbn/presentation-containers';
 import { apiCanAddNewSection } from '@kbn/presentation-containers';
 import type { EmbeddableApiContext } from '@kbn/presentation-publishing';
@@ -38,6 +41,24 @@ export class AddSectionAction implements Action<EmbeddableApiContext> {
     return 'section';
   }
 
+  public readonly MenuItem = () => {
+    return (
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem>
+          <EuiText size="s">{this.getDisplayName()}</EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiBadge color="accent">
+            {i18n
+              .translate('dashboard.collapsibleSection.newBadge', {
+                defaultMessage: 'New',
+              })
+              .toLocaleUpperCase()}
+          </EuiBadge>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
   public async isCompatible({ embeddable }: EmbeddableApiContext) {
     return isApiCompatible(embeddable);
   }

src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/add_panel_button/components/group.tsx

@@ -24,35 +24,41 @@ export function Group({ group }: { group: MenuItemGroup }) {
   const listItems: EuiListGroupProps['listItems'] = useMemo(
     () =>
       group.items.map((item) => ({
+        // default values for an item
         key: item.id,
         size: 's',
         toolTipText: item.description,
         toolTipProps: {
           position: 'right',
         },
         showToolTip: true,
-        label: !item.isDeprecated ? (
-          item.name
-        ) : (
-          <EuiFlexGroup wrap responsive={false} gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <EuiText size="s">{item.name}</EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiBadge color="warning">
-                <FormattedMessage
-                  id="dashboard.editorMenu.deprecatedTag"
-                  defaultMessage="Deprecated"
-                />
-              </EuiBadge>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ),
+        label: item.name,
         onClick: item.onClick,
         iconType: item.icon,
         isDisabled: item.isDisabled,
         'data-test-subj': item['data-test-subj'],
         role: 'menuitem',
+        // handle overrides for an item
+        ...(item.MenuItem && {
+          label: item.MenuItem,
+        }),
+        ...(item.isDeprecated && {
+          label: (
+            <EuiFlexGroup wrap responsive={false} gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiText size="s">{item.MenuItem ? item.MenuItem : item.name}</EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiBadge color="warning">
+                  <FormattedMessage
+                    id="dashboard.editorMenu.deprecatedTag"
+                    defaultMessage="Deprecated"
+                  />
+                </EuiBadge>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          ),
+        }),
       })),
     [group.items]
   );

src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/add_panel_button/get_menu_item_groups.ts

@@ -64,6 +64,7 @@ export async function getMenuItemGroups(
         'data-test-subj': `create-action-${actionName}`,
         description: action?.getDisplayNameTooltip?.(addPanelContext),
         order: action.order ?? 0,
+        MenuItem: action.MenuItem ? action.MenuItem({ context: addPanelContext }) : undefined,
       });
     });
   });

src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/add_panel_button/types.ts

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import type { IconType, CommonProps } from '@elastic/eui';
 
 export interface MenuItem extends Pick<CommonProps, 'data-test-subj'> {
@@ -19,6 +19,7 @@ export interface MenuItem extends Pick<CommonProps, 'data-test-subj'> {
   isDisabled?: boolean;
   isDeprecated?: boolean;
   order: number;
+  MenuItem?: ReactNode;
 }
 
 export interface MenuItemGroup extends Pick<CommonProps, 'data-test-subj'> {