elastic#133857 - addressing PR comments

10xtechie · Jun 18, 2022 · fe50f84 · fe50f84
1 parent 7231537
commit fe50f84
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -8,7 +8,7 @@
 
 import { METRIC_TYPE } from '@kbn/analytics';
 import { Required } from '@kbn/utility-types';
-import { EuiHorizontalRule } from '@elastic/eui';
+import { EuiHorizontalRule, ToolTipPositions} from '@elastic/eui';
 import UseUnmount from 'react-use/lib/useUnmount';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -517,6 +517,8 @@ export function DashboardTopNav({
             {
               'data-test-subj': 'dashboardUnsavedChangesBadge',
               badgeText: unsavedChangesBadge.getUnsavedChangedBadgeText(),
+              title:'',
+              toolTipProps: {content:unsavedChangesBadge.getUnsavedChangedBadgeToolTipContent(), position: 'bottom' as ToolTipPositions},
               color: 'warning',
             },
           ]

diff --git a/src/plugins/dashboard/public/dashboard_strings.ts b/src/plugins/dashboard/public/dashboard_strings.ts
@@ -28,7 +28,11 @@ export function getDashboardTitle(title: string, viewMode: ViewMode, isNew: bool
 export const unsavedChangesBadge = {
   getUnsavedChangedBadgeText: () =>
     i18n.translate('dashboard.unsavedChangesBadge', {
-      defaultMessage: 'This dashboard has changed since the last time it was saved. To clear this message save the dashboard',
+      defaultMessage: 'Unsaved changes',
+    }),
+  getUnsavedChangedBadgeToolTipContent: () =>
+    i18n.translate('dashboard.unsavedChangesBadgeToolTipContent', {
+      defaultMessage: 'This dashboard has changed since the last time it was saved. To clear this message save the dashboard.',
     }),
 };
 

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { ReactElement } from 'react';
-import { EuiBadge, EuiBadgeGroup, EuiBadgeProps, EuiHeaderLinks } from '@elastic/eui';
+import { EuiBadge, EuiBadgeGroup, EuiBadgeProps, EuiHeaderLinks, EuiToolTip, ToolTipPositions} from '@elastic/eui';
 import classNames from 'classnames';
 
 import { MountPoint } from '@kbn/core/public';
@@ -20,7 +20,7 @@ import { TopNavMenuItem } from './top_nav_menu_item';
 export type TopNavMenuProps = StatefulSearchBarProps &
   Omit<SearchBarProps, 'kibana' | 'intl' | 'timeHistory'> & {
     config?: TopNavMenuData[];
-    badges?: Array<EuiBadgeProps & { badgeText: string }>;
+    badges?: Array<EuiBadgeProps & { badgeText: string, toolTipProps: { content: string; position: ToolTipPositions }}>;
     showSearchBar?: boolean;
     showQueryBar?: boolean;
     showQueryInput?: boolean;
@@ -70,12 +70,15 @@ export function TopNavMenu(props: TopNavMenuProps): 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;
+        {badges.map((badge: EuiBadgeProps & { badgeText: string, toolTipProps: { content: string; position: string }}, i: number) => {
+          const { badgeText, toolTipProps, ...badgeProps } = badge;
           return (
-            <EuiBadge key={`nav-menu-badge-${i}`} {...badgeProps}>
-              {badgeText}
-            </EuiBadge>
+            <EuiToolTip content={toolTipProps.content} position={toolTipProps.position as ToolTipPositions} 
+            >
+              <EuiBadge key={`nav-menu-badge-${i}`} {...badgeProps}>
+                  {badgeText}
+              </EuiBadge>
+            </EuiToolTip>
           );
         })}
       </EuiBadgeGroup>