[Embeddables] Fix Notifications show header (elastic#162194)

Fixes a regression where the Embeddable panel would show its header when given a custom `getActions` function and `showBadges` or `showNotifications` turned to false.
ThomThomson · Aug 1, 2023 · b0e5558 · b0e5558
1 parent e2c2778
commit b0e5558
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 25 deletions.
diff --git a/src/plugins/embeddable/public/embeddable_panel/embeddable_panel.test.tsx b/src/plugins/embeddable/public/embeddable_panel/embeddable_panel.test.tsx
@@ -25,7 +25,7 @@ import {
   ContactCardEmbeddableReactFactory,
   HelloWorldContainer,
 } from '../lib/test_samples';
-import { EuiBadge } from '@elastic/eui';
+import { EuiBadge, EuiNotificationBadge } from '@elastic/eui';
 import { embeddablePluginMock } from '../mocks';
 import { EmbeddablePanel } from './embeddable_panel';
 import { core, inspector } from '../kibana_services';
@@ -89,10 +89,17 @@ const setupContainerAndEmbeddable = async (viewMode?: ViewMode, hidePanelTitles?
   return { container, embeddable };
 };
 
-const renderInEditModeAndOpenContextMenu = async (
-  embeddableInputs: any,
-  getActions: UiActionsStart['getTriggerCompatibleActions'] = () => Promise.resolve([])
-) => {
+const renderInEditModeAndOpenContextMenu = async ({
+  embeddableInputs,
+  getActions = () => Promise.resolve([]),
+  showNotifications = true,
+  showBadges = true,
+}: {
+  embeddableInputs: any;
+  getActions?: UiActionsStart['getTriggerCompatibleActions'];
+  showNotifications?: boolean;
+  showBadges?: boolean;
+}) => {
   const container = new HelloWorldContainer({ id: '123', panels: {}, viewMode: ViewMode.VIEW }, {
     getEmbeddableFactory,
   } as any);
@@ -110,8 +117,8 @@ const renderInEditModeAndOpenContextMenu = async (
         <EmbeddablePanel
           embeddable={embeddable}
           getActions={getActions}
-          showNotifications={true}
-          showBadges={true}
+          showNotifications={showNotifications}
+          showBadges={showBadges}
         />
       </I18nProvider>
     );
@@ -264,19 +271,19 @@ test('Actions which are disabled via disabledActions are hidden', async () => {
   };
   const getActions = () => Promise.resolve([action]);
 
-  const { component: component1 } = await renderInEditModeAndOpenContextMenu(
-    {
+  const { component: component1 } = await renderInEditModeAndOpenContextMenu({
+    embeddableInputs: {
       firstName: 'Bob',
     },
-    getActions
-  );
-  const { component: component2 } = await renderInEditModeAndOpenContextMenu(
-    {
+    getActions,
+  });
+  const { component: component2 } = await renderInEditModeAndOpenContextMenu({
+    embeddableInputs: {
       firstName: 'Bob',
       disabledActions: ['FOO'],
     },
-    getActions
-  );
+    getActions,
+  });
 
   const fooContextMenuActionItem1 = findTestSubject(component1, 'embeddablePanelAction-FOO');
   const fooContextMenuActionItem2 = findTestSubject(component2, 'embeddablePanelAction-FOO');
@@ -300,24 +307,77 @@ test('Badges which are disabled via disabledActions are hidden', async () => {
   };
   const getActions = () => Promise.resolve([action]);
 
-  const { component: component1 } = await renderInEditModeAndOpenContextMenu(
-    {
+  const { component: component1 } = await renderInEditModeAndOpenContextMenu({
+    embeddableInputs: {
       firstName: 'Bob',
     },
-    getActions
-  );
-  const { component: component2 } = await renderInEditModeAndOpenContextMenu(
-    {
+    getActions,
+  });
+  const { component: component2 } = await renderInEditModeAndOpenContextMenu({
+    embeddableInputs: {
       firstName: 'Bob',
       disabledActions: ['BAR'],
     },
-    getActions
-  );
+    getActions,
+  });
 
   expect(component1.find(EuiBadge).length).toBe(1);
   expect(component2.find(EuiBadge).length).toBe(0);
 });
 
+test('Badges are not shown when hideBadges is true', async () => {
+  const action = {
+    id: 'BAR',
+    type: 'BAR',
+    getIconType: () => undefined,
+    getDisplayName: () => 'bar',
+    isCompatible: async () => true,
+    execute: async () => {},
+    order: 10,
+    getHref: () => {
+      return Promise.resolve(undefined);
+    },
+  };
+  const getActions = () => Promise.resolve([action]);
+
+  const { component } = await renderInEditModeAndOpenContextMenu({
+    embeddableInputs: {
+      firstName: 'Bob',
+    },
+    getActions,
+    showBadges: false,
+  });
+  expect(component.find(EuiBadge).length).toBe(0);
+  expect(component.find(EuiNotificationBadge).length).toBe(1);
+});
+
+test('Notifications are not shown when hideNotifications is true', async () => {
+  const action = {
+    id: 'BAR',
+    type: 'BAR',
+    getIconType: () => undefined,
+    getDisplayName: () => 'bar',
+    isCompatible: async () => true,
+    execute: async () => {},
+    order: 10,
+    getHref: () => {
+      return Promise.resolve(undefined);
+    },
+  };
+  const getActions = () => Promise.resolve([action]);
+
+  const { component } = await renderInEditModeAndOpenContextMenu({
+    embeddableInputs: {
+      firstName: 'Bob',
+    },
+    getActions,
+    showNotifications: false,
+  });
+
+  expect(component.find(EuiBadge).length).toBe(1);
+  expect(component.find(EuiNotificationBadge).length).toBe(0);
+});
+
 test('Edit mode actions are hidden if parent is in view mode', async () => {
   const { embeddable } = await setupContainerAndEmbeddable();
 

diff --git a/src/plugins/embeddable/public/embeddable_panel/panel_header/embeddable_panel_header.tsx b/src/plugins/embeddable/public/embeddable_panel/panel_header/embeddable_panel_header.tsx
@@ -37,6 +37,8 @@ export const EmbeddablePanelHeader = ({
   );
 
   const { notificationComponents, badgeComponents } = useEmbeddablePanelBadges(
+    showNotifications,
+    showBadges,
     embeddable,
     getActions
   );

diff --git a/src/plugins/embeddable/public/embeddable_panel/panel_header/use_embeddable_panel_badges.tsx b/src/plugins/embeddable/public/embeddable_panel/panel_header/use_embeddable_panel_badges.tsx
@@ -26,6 +26,8 @@ import {
 } from '../types';
 
 export const useEmbeddablePanelBadges = (
+  showNotifications: boolean,
+  showBadges: boolean,
   embeddable: IEmbeddable,
   getActions: EmbeddablePanelProps['getActions']
 ) => {
@@ -35,6 +37,7 @@ export const useEmbeddablePanelBadges = (
   const [notifications, setNotifications] = useState<EmbeddableNotificationAction[]>();
 
   const getAllBadgesFromEmbeddable = useCallback(async () => {
+    if (!showBadges) return;
     let currentBadges: EmbeddableBadgeAction[] =
       ((await getActionsForTrigger(PANEL_BADGE_TRIGGER, {
         embeddable,
@@ -45,9 +48,10 @@ export const useEmbeddablePanelBadges = (
       currentBadges = currentBadges.filter((badge) => disabledActions.indexOf(badge.id) === -1);
     }
     return currentBadges;
-  }, [embeddable, getActionsForTrigger]);
+  }, [embeddable, getActionsForTrigger, showBadges]);
 
   const getAllNotificationsFromEmbeddable = useCallback(async () => {
+    if (!showNotifications) return;
     let currentNotifications: EmbeddableNotificationAction[] =
       ((await getActionsForTrigger(PANEL_NOTIFICATION_TRIGGER, {
         embeddable,
@@ -60,7 +64,7 @@ export const useEmbeddablePanelBadges = (
       );
     }
     return currentNotifications;
-  }, [embeddable, getActionsForTrigger]);
+  }, [embeddable, getActionsForTrigger, showNotifications]);
 
   /**
    * On embeddable creation get initial badges & notifications then subscribe to all