Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 6 commits into from
Apr 4, 2023
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
22152f4
133857 - addressing PR comments
10xtechie Jun 18, 2022
32a2e43
issue #133857 - EuiToolTipProps is used instead of ToolTipProps
10xtechie Jun 21, 2022
12d9ac7
Fix linting
ThomThomson Jun 23, 2022
4ba414b
Add PR changes to renamed files
nickpeihl Apr 3, 2023
fb3e1a0
Make badge tooltip optional / feedback
nickpeihl Apr 3, 2023
b50bad5
Merge branch 'main' into fix-renamed-files
nickpeihl Apr 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
9 changes: 7 additions & 2 deletions src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_top_nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down
34 changes: 24 additions & 10 deletions src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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>
);
}
Expand Down