Notification events content context menu items

src-docs/src/views/notification_event/notification_event.tsx

@@ -2,10 +2,7 @@ import React, { useState } from 'react';
 import { EuiPanel } from '../../../../src/components/panel';
 import { EuiSpacer } from '../../../../src/components/spacer';
 import { EuiButtonGroup } from '../../../../src/components/button';
-import {
-  EuiContextMenuItem,
-  EuiContextMenuPanelProps,
-} from '../../../../src/components/context_menu';
+import { EuiContextMenuItem } from '../../../../src/components/context_menu';
 import { EuiNotificationEvent } from '../../../../src/components/notification/notification_event';
 
 const notificationEventsData = [
@@ -65,18 +62,17 @@ const notificationEventsData = [
 
 export default () => {
   const [event, setEvent] = useState<any>(notificationEventsData[0]);
-  const [contextMenuItems, setContextMenuItems] = useState<
-    EuiContextMenuPanelProps['items']
-  >();
 
   const onRead = (id: string, isRead: boolean) => {
     const nextState = { ...event, isRead: !isRead };
 
     setEvent(nextState);
   };
 
-  const onOpenContextMenu = (id: string, isRead: boolean) => {
-    const nextContextMenus = [
+  const onOpenContextMenu = (id: string) => {
+    const { isRead } = event;
+
+    return [
       <EuiContextMenuItem
         key="contextMenuItemA"
         onClick={() => onRead(id, isRead)}>
@@ -91,8 +87,6 @@ export default () => {
         Don’t notify me about this
       </EuiContextMenuItem>,
     ];
-
-    setContextMenuItems(nextContextMenus);
   };
 
   const [toggleIdSelected, setToggleIdSelected] = useState('reportButton');
@@ -143,7 +137,6 @@ export default () => {
           primaryAction={event.primaryAction}
           messages={event.messages}
           onRead={onRead}
-          contextMenuItems={contextMenuItems}
           onOpenContextMenu={onOpenContextMenu}
           onClickPrimaryAction={() => {}}
           onClickTitle={event.id !== 'news' ? () => {} : undefined}

src-docs/src/views/notification_event/notifications_feed.tsx

@@ -2,10 +2,7 @@ import React, { useState } from 'react';
 import { EuiPanel } from '../../../../src/components/panel';
 import { EuiSpacer } from '../../../../src/components/spacer';
 import { EuiButton } from '../../../../src/components/button';
-import {
-  EuiContextMenuItem,
-  EuiContextMenuPanelProps,
-} from '../../../../src/components/context_menu';
+import { EuiContextMenuItem } from '../../../../src/components/context_menu';
 import { EuiNotificationEvent } from '../../../../src/components/notification/notification_event';
 
 const notificationEventsData = [
@@ -93,9 +90,6 @@ const notificationEventsData = [
 
 export default () => {
   const [events, setEvents] = useState(notificationEventsData);
-  const [contextMenuItems, setContextMenuItems] = useState<
-    EuiContextMenuPanelProps['items']
-  >();
 
   const onRead = (id: string, isRead: boolean) => {
     const nextState = events.map((event) => {
@@ -111,12 +105,17 @@ export default () => {
     setEvents(nextState);
   };
 
-  const onOpenContextMenu = (id: string, isRead: boolean, type: string) => {
-    const nextContextMenus = [
+  const onOpenContextMenu = (id: string) => {
+    const {
+      isRead,
+      meta: { type },
+    } = events.find(({ id: eventId }) => eventId === id)!;
+
+    return [
       <EuiContextMenuItem
         key="contextMenuItemA"
         onClick={() => onRead(id, isRead)}>
-        {isRead ? ' Mark as unread' : 'Mark as read'}
+        {isRead ? 'Mark as unread' : 'Mark as read'}
       </EuiContextMenuItem>,
 
       <EuiContextMenuItem
@@ -129,8 +128,6 @@ export default () => {
         Don’t notify me about this
       </EuiContextMenuItem>,
     ];
-
-    setContextMenuItems(nextContextMenus);
   };
 
   const onResetData = () => {
@@ -151,7 +148,6 @@ export default () => {
         primaryAction={event.primaryAction}
         messages={event.messages}
         onRead={onRead}
-        contextMenuItems={contextMenuItems}
         onOpenContextMenu={onOpenContextMenu}
         onClickPrimaryAction={() => {}}
         onClickTitle={onClickTitle!}

src/components/notification/notification_event.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, ReactElement } from 'react';
 import classNames from 'classnames';
 import {
   EuiNotificationEventMeta,
@@ -28,8 +28,8 @@ import {
   EuiNotificationEventMessagesProps,
 } from './notification_event_messages';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
-import { EuiContextMenuPanelProps } from '../context_menu';
 import { EuiLink } from '../link';
+import { EuiContextMenuItem, EuiContextMenuItemProps } from '../context_menu';
 
 export type EuiNotificationEventPrimaryActionProps = EuiButtonEmptyProps & {
   label: string;
@@ -70,13 +70,11 @@ export type EuiNotificationEventProps = {
    */
   onRead?: (id: string, isRead: boolean) => void;
   /**
-   * An array of context menu items. See #EuiContextMenuItem
+   * Provided the `id` of the event must return an array of #EuiContextMenuItem elements
    */
-  contextMenuItems?: EuiContextMenuPanelProps['items'];
-  /**
-   * Returns the `id`, `isRead` ad `type` of the open context menu
-   */
-  onOpenContextMenu?: (id: string, isRead: boolean, type: string) => void;
+  onOpenContextMenu?: (
+    id: string
+  ) => Array<ReactElement<EuiContextMenuItemProps, typeof EuiContextMenuItem>>;
 };
 
 export const EuiNotificationEvent: FunctionComponent<EuiNotificationEventProps> = ({
@@ -87,7 +85,6 @@ export const EuiNotificationEvent: FunctionComponent<EuiNotificationEventProps>
   primaryAction,
   messages,
   onRead,
-  contextMenuItems,
   onOpenContextMenu,
   onClickTitle,
   onClickPrimaryAction,
@@ -110,11 +107,8 @@ export const EuiNotificationEvent: FunctionComponent<EuiNotificationEventProps>
         iconAriaLabel={meta.iconAriaLabel}
         time={meta.time}
         isRead={isRead}
-        contextMenuItems={contextMenuItems}
         onOpenContextMenu={
-          onOpenContextMenu
-            ? () => onOpenContextMenu(id, isRead!, meta.type)
-            : undefined
+          onOpenContextMenu ? () => onOpenContextMenu(id) : undefined
         }
         eventName={meta.eventName}
         onRead={() => onRead?.(id, isRead!)}

src/components/notification/notification_event_meta.test.tsx

@@ -107,7 +107,7 @@ describe('EuiNotificationEventMeta', () => {
           type="Alert"
           time={<span>2 min ago</span>}
           iconType="logoCloud"
-          contextMenuItems={contextMenuItems}
+          onOpenContextMenu={() => contextMenuItems}
           eventName="eventName"
         />
       );

src/components/notification/notification_event_meta.tsx

@@ -17,13 +17,22 @@
  * under the License.
  */
 
-import React, { FunctionComponent, useState, ReactNode } from 'react';
+import React, {
+  FunctionComponent,
+  useState,
+  ReactNode,
+  ReactElement,
+} from 'react';
 import classNames from 'classnames';
 import { EuiIcon, IconType } from '../icon';
 import { EuiBadge, EuiBadgeProps } from '../badge';
 import { EuiPopover } from '../popover';
 import { EuiButtonIcon } from '../button';
-import { EuiContextMenuPanel, EuiContextMenuPanelProps } from '../context_menu';
+import {
+  EuiContextMenuItem,
+  EuiContextMenuItemProps,
+  EuiContextMenuPanel,
+} from '../context_menu';
 import { EuiI18n } from '../i18n';
 import {
   EuiNotificationEventReadButton,
@@ -64,14 +73,12 @@ export type EuiNotificationEventMetaProps = Omit<
    * Indicates when the event was received.
    */
   time: ReactNode;
-  /**
-   * An array of context menu items. See #EuiContextMenuItem
-   */
-  contextMenuItems?: EuiContextMenuPanelProps['items'];
   /**
    * Necessary to trigger onOpenContextMenu from EuiNotificationEvent
    */
-  onOpenContextMenu?: () => void;
+  onOpenContextMenu?: () => Array<
+    ReactElement<EuiContextMenuItemProps, typeof EuiContextMenuItem>
+  >;
   /**
    * Applies an `onClick` handler to the `read` indicator.
    */
@@ -89,14 +96,16 @@ export const EuiNotificationEventMeta: FunctionComponent<EuiNotificationEventMet
   eventName,
   iconAriaLabel,
   onOpenContextMenu,
-  contextMenuItems = [],
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const classes = classNames('euiNotificationEventMeta', {
-    'euiNotificationEventMeta--hasContextMenu':
-      onOpenContextMenu || contextMenuItems.length > 0,
+    'euiNotificationEventMeta--hasContextMenu': onOpenContextMenu,
   });
 
+  const [contextMenuItems, setContextMenuItems] = useState<
+    ReturnType<NonNullable<typeof onOpenContextMenu>>
+  >([]);
+
   const id = htmlIdGenerator()();
 
   const onMarkAsRead = () => {
@@ -109,7 +118,9 @@ export const EuiNotificationEventMeta: FunctionComponent<EuiNotificationEventMet
 
   const onOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
-    onOpenContextMenu?.();
+    if (onOpenContextMenu) {
+      setContextMenuItems(onOpenContextMenu());
+    }
   };
 
   return (
@@ -138,7 +149,7 @@ export const EuiNotificationEventMeta: FunctionComponent<EuiNotificationEventMet
         <span className="euiNotificationEventMeta__time">{time}</span>
       </div>
 
-      {(onOpenContextMenu || contextMenuItems.length > 0) && (
+      {onOpenContextMenu && (
         <div className="euiNotificationEventMeta__contextMenuWrapper">
           <EuiPopover
             id={id}
@@ -169,7 +180,9 @@ export const EuiNotificationEventMeta: FunctionComponent<EuiNotificationEventMet
               </EuiI18n>
             }
             closePopover={() => setIsPopoverOpen(false)}>
-            <EuiContextMenuPanel items={contextMenuItems} />
+            <div onClick={() => setIsPopoverOpen(false)}>
+              <EuiContextMenuPanel items={contextMenuItems} />
+            </div>
           </EuiPopover>
         </div>
       )}