github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Dashboard Usability] Change color of Unsaved changes badge to warning (#154253)

Browse source
This commit is contained in:
Nick Peihl 2023-04-04 12:33:13 -04:00 • committed by GitHub
parent ce277ceb7d
commit e9bed322e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts
View file

@ -46,6 +46,11 @@ export const unsavedChangesBadgeStrings = {
i18n.translate('dashboard.unsavedChangesBadge', {
defaultMessage: 'Unsaved changes',
}),
getUnsavedChangedBadgeToolTipContent: () =>
i18n.translate('dashboard.unsavedChangesBadgeToolTipContent', {
defaultMessage:
' You have unsaved changes in this dashboard. To remove this label, save the dashboard.',
}),
};
export const leaveConfirmStrings = {

9
src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_top_nav.tsx
View file

@ -18,7 +18,7 @@ import {
import { ViewMode } from '@kbn/embeddable-plugin/public';
import type { DataView } from '@kbn/data-views-plugin/public';
import { EuiHorizontalRule } from '@elastic/eui';
import { EuiHorizontalRule, EuiToolTipProps } from '@elastic/eui';
import {
getDashboardTitle,
leaveConfirmStrings,
@ -252,7 +252,12 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
{
'data-test-subj': 'dashboardUnsavedChangesBadge',
badgeText: unsavedChangesBadgeStrings.getUnsavedChangedBadgeText(),
color: 'success',
title: '',
color: 'warning',
toolTipProps: {
content: unsavedChangesBadgeStrings.getUnsavedChangedBadgeToolTipContent(),
position: 'bottom',
} as EuiToolTipProps,
},
]
: undefined

34
src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
View file

@ -7,7 +7,14 @@
*/
import React, { ReactElement } from 'react';
import { EuiBadge, EuiBadgeGroup, EuiBadgeProps, EuiHeaderLinks } from '@elastic/eui';
import {
EuiBadge,
EuiBadgeGroup,
EuiBadgeProps,
EuiHeaderLinks,
EuiToolTip,
EuiToolTipProps,
} from '@elastic/eui';
import classNames from 'classnames';
import { MountPoint } from '@kbn/core/public';
@ -18,11 +25,16 @@ import { AggregateQuery, Query } from '@kbn/es-query';
import { TopNavMenuData } from './top_nav_menu_data';
import { TopNavMenuItem } from './top_nav_menu_item';
type Badge = EuiBadgeProps & {
badgeText: string;
toolTipProps?: Partial<EuiToolTipProps>;
};
export type TopNavMenuProps<QT extends Query | AggregateQuery = Query> =
StatefulSearchBarProps<QT> &
Omit<SearchBarProps<QT>, 'kibana' | 'intl' | 'timeHistory'> & {
config?: TopNavMenuData[];
badges?: Array<EuiBadgeProps & { badgeText: string }>;
badges?: Badge[];
showSearchBar?: boolean;
showQueryInput?: boolean;
showDatePicker?: boolean;
@ -69,18 +81,20 @@ export function TopNavMenu<QT extends AggregateQuery | Query = Query>(
return null;
}
function createBadge({ badgeText, toolTipProps, ...badgeProps }: Badge, i: number): ReactElement {
const badge = (
<EuiBadge key={`nav-menu-badge-${i}`} {...badgeProps}>
{badgeText}
</EuiBadge>
);
return toolTipProps ? <EuiToolTip {...toolTipProps}>{badge}</EuiToolTip> : badge;
}
function renderBadges(): ReactElement | null {
if (!badges || badges.length === 0) return null;
return (
<EuiBadgeGroup className={'kbnTopNavMenu__badgeGroup'}>
{badges.map((badge: EuiBadgeProps & { badgeText: string }, i: number) => {
const { badgeText, ...badgeProps } = badge;
return (
<EuiBadge key={`nav-menu-badge-${i}`} {...badgeProps}>
{badgeText}
</EuiBadge>
);
})}
{badges.map(createBadge)}
</EuiBadgeGroup>
);
}