Skip to content

Commit 3769606

Browse files
Heenawterkowalczyk-krzysztof
authored andcommitted
[Dashboard] Add new badge to collapsible sections (elastic#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.
1 parent 8edac4a commit 3769606

File tree

4 files changed

+48
-19
lines changed

4 files changed

+48
-19
lines changed

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
* License v3.0 only", or the "Server Side Public License, v 1".
88
*/
99

10-
import { i18n } from '@kbn/i18n';
10+
import React from 'react';
11+
12+
import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
1113
import { ADD_PANEL_ANNOTATION_GROUP } from '@kbn/embeddable-plugin/public';
14+
import { i18n } from '@kbn/i18n';
1215
import type { CanAddNewSection } from '@kbn/presentation-containers';
1316
import { apiCanAddNewSection } from '@kbn/presentation-containers';
1417
import type { EmbeddableApiContext } from '@kbn/presentation-publishing';
@@ -38,6 +41,24 @@ export class AddSectionAction implements Action<EmbeddableApiContext> {
3841
return 'section';
3942
}
4043

44+
public readonly MenuItem = () => {
45+
return (
46+
<EuiFlexGroup gutterSize="s">
47+
<EuiFlexItem>
48+
<EuiText size="s">{this.getDisplayName()}</EuiText>
49+
</EuiFlexItem>
50+
<EuiFlexItem>
51+
<EuiBadge color="accent">
52+
{i18n
53+
.translate('dashboard.collapsibleSection.newBadge', {
54+
defaultMessage: 'New',
55+
})
56+
.toLocaleUpperCase()}
57+
</EuiBadge>
58+
</EuiFlexItem>
59+
</EuiFlexGroup>
60+
);
61+
};
4162
public async isCompatible({ embeddable }: EmbeddableApiContext) {
4263
return isApiCompatible(embeddable);
4364
}

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

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,35 +24,41 @@ export function Group({ group }: { group: MenuItemGroup }) {
2424
const listItems: EuiListGroupProps['listItems'] = useMemo(
2525
() =>
2626
group.items.map((item) => ({
27+
// default values for an item
2728
key: item.id,
2829
size: 's',
2930
toolTipText: item.description,
3031
toolTipProps: {
3132
position: 'right',
3233
},
3334
showToolTip: true,
34-
label: !item.isDeprecated ? (
35-
item.name
36-
) : (
37-
<EuiFlexGroup wrap responsive={false} gutterSize="s">
38-
<EuiFlexItem grow={false}>
39-
<EuiText size="s">{item.name}</EuiText>
40-
</EuiFlexItem>
41-
<EuiFlexItem grow={false}>
42-
<EuiBadge color="warning">
43-
<FormattedMessage
44-
id="dashboard.editorMenu.deprecatedTag"
45-
defaultMessage="Deprecated"
46-
/>
47-
</EuiBadge>
48-
</EuiFlexItem>
49-
</EuiFlexGroup>
50-
),
35+
label: item.name,
5136
onClick: item.onClick,
5237
iconType: item.icon,
5338
isDisabled: item.isDisabled,
5439
'data-test-subj': item['data-test-subj'],
5540
role: 'menuitem',
41+
// handle overrides for an item
42+
...(item.MenuItem && {
43+
label: item.MenuItem,
44+
}),
45+
...(item.isDeprecated && {
46+
label: (
47+
<EuiFlexGroup wrap responsive={false} gutterSize="s">
48+
<EuiFlexItem grow={false}>
49+
<EuiText size="s">{item.MenuItem ? item.MenuItem : item.name}</EuiText>
50+
</EuiFlexItem>
51+
<EuiFlexItem grow={false}>
52+
<EuiBadge color="warning">
53+
<FormattedMessage
54+
id="dashboard.editorMenu.deprecatedTag"
55+
defaultMessage="Deprecated"
56+
/>
57+
</EuiBadge>
58+
</EuiFlexItem>
59+
</EuiFlexGroup>
60+
),
61+
}),
5662
})),
5763
[group.items]
5864
);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export async function getMenuItemGroups(
6464
'data-test-subj': `create-action-${actionName}`,
6565
description: action?.getDisplayNameTooltip?.(addPanelContext),
6666
order: action.order ?? 0,
67+
MenuItem: action.MenuItem ? action.MenuItem({ context: addPanelContext }) : undefined,
6768
});
6869
});
6970
});

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* License v3.0 only", or the "Server Side Public License, v 1".
88
*/
99

10-
import type { MouseEventHandler } from 'react';
10+
import type { MouseEventHandler, ReactNode } from 'react';
1111
import type { IconType, CommonProps } from '@elastic/eui';
1212

1313
export interface MenuItem extends Pick<CommonProps, 'data-test-subj'> {
@@ -19,6 +19,7 @@ export interface MenuItem extends Pick<CommonProps, 'data-test-subj'> {
1919
isDisabled?: boolean;
2020
isDeprecated?: boolean;
2121
order: number;
22+
MenuItem?: ReactNode;
2223
}
2324

2425
export interface MenuItemGroup extends Pick<CommonProps, 'data-test-subj'> {

0 commit comments

Comments
 (0)