Panel top right

src/plugins/embeddable/public/bootstrap.ts

@@ -31,12 +31,15 @@ import {
   ACTION_EDIT_PANEL,
   FilterActionContext,
   ACTION_APPLY_FILTER,
+  panelNotificationTrigger,
+  PANEL_NOTIFICATION_TRIGGER,
 } from './lib';
 
 declare module '../../ui_actions/public' {
   export interface TriggerContextMapping {
     [CONTEXT_MENU_TRIGGER]: EmbeddableContext;
     [PANEL_BADGE_TRIGGER]: EmbeddableContext;
+    [PANEL_NOTIFICATION_TRIGGER]: EmbeddableContext;
   }
 
   export interface ActionContextMapping {
@@ -56,6 +59,7 @@ declare module '../../ui_actions/public' {
 export const bootstrap = (uiActions: UiActionsSetup) => {
   uiActions.registerTrigger(contextMenuTrigger);
   uiActions.registerTrigger(panelBadgeTrigger);
+  uiActions.registerTrigger(panelNotificationTrigger);
 
   const actionApplyFilter = createFilterAction();
 

src/plugins/embeddable/public/index.ts

@@ -57,6 +57,8 @@ export {
   OutputSpec,
   PANEL_BADGE_TRIGGER,
   panelBadgeTrigger,
+  PANEL_NOTIFICATION_TRIGGER,
+  panelNotificationTrigger,
   PanelNotFoundError,
   PanelState,
   PropertySpec,

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -25,7 +25,12 @@ import { CoreStart, OverlayStart } from '../../../../../core/public';
 import { toMountPoint } from '../../../../kibana_react/public';
 
 import { Start as InspectorStartContract } from '../inspector';
-import { CONTEXT_MENU_TRIGGER, PANEL_BADGE_TRIGGER, EmbeddableContext } from '../triggers';
+import {
+  CONTEXT_MENU_TRIGGER,
+  PANEL_BADGE_TRIGGER,
+  PANEL_NOTIFICATION_TRIGGER,
+  EmbeddableContext,
+} from '../triggers';
 import { IEmbeddable } from '../embeddables/i_embeddable';
 import { ViewMode } from '../types';
 
@@ -65,14 +70,13 @@ interface State {
   hidePanelTitles: boolean;
   closeContextMenu: boolean;
   badges: Array<Action<EmbeddableContext>>;
-  eventCount?: number;
+  notifications: Array<Action<EmbeddableContext>>;
 }
 
 export class EmbeddablePanel extends React.Component<Props, State> {
   private embeddableRoot: React.RefObject<HTMLDivElement>;
   private parentSubscription?: Subscription;
   private subscription?: Subscription;
-  private eventCountSubscription?: Subscription;
   private mounted: boolean = false;
   private generateId = htmlIdGenerator();
 
@@ -92,6 +96,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       hidePanelTitles,
       closeContextMenu: false,
       badges: [],
+      notifications: [],
     };
 
     this.embeddableRoot = React.createRef();
@@ -113,6 +118,22 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     });
   }
 
+  private async refreshNotifications() {
+    let notifications = await this.props.getActions(PANEL_NOTIFICATION_TRIGGER, {
+      embeddable: this.props.embeddable,
+    });
+    if (!this.mounted) return;
+
+    const { disabledActions } = this.props.embeddable.getInput();
+    if (disabledActions) {
+      notifications = notifications.filter(badge => disabledActions.indexOf(badge.id) === -1);
+    }
+
+    this.setState({
+      notifications,
+    });
+  }
+
   public UNSAFE_componentWillMount() {
     this.mounted = true;
     const { embeddable } = this.props;
@@ -125,6 +146,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
         });
 
         this.refreshBadges();
+        this.refreshNotifications();
       }
     });
 
@@ -136,6 +158,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
           });
 
           this.refreshBadges();
+          this.refreshNotifications();
         }
       });
     }
@@ -146,9 +169,6 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     if (this.subscription) {
       this.subscription.unsubscribe();
     }
-    if (this.eventCountSubscription) {
-      this.eventCountSubscription.unsubscribe();
-    }
     if (this.parentSubscription) {
       this.parentSubscription.unsubscribe();
     }
@@ -188,9 +208,9 @@ export class EmbeddablePanel extends React.Component<Props, State> {
             closeContextMenu={this.state.closeContextMenu}
             title={title}
             badges={this.state.badges}
+            notifications={this.state.notifications}
             embeddable={this.props.embeddable}
             headerId={headerId}
-            eventCount={this.state.eventCount}
           />
         )}
         <div className="embPanel__content" ref={this.embeddableRoot} />
@@ -202,17 +222,6 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     if (this.embeddableRoot.current) {
       this.props.embeddable.render(this.embeddableRoot.current);
     }
-
-    const dynamicActions = (this.props.embeddable.enhancements as any)?.dynamicActions;
-    if (dynamicActions) {
-      this.setState({ eventCount: dynamicActions.state.get().events.length });
-      this.eventCountSubscription = dynamicActions.state.state$.subscribe(
-        ({ events }: { events: unknown[] }) => {
-          if (!this.mounted) return;
-          this.setState({ eventCount: events.length });
-        }
-      );
-    }
   }
 
   closeMyContextMenuPanel = () => {

src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx

@@ -39,9 +39,9 @@ export interface PanelHeaderProps {
   getActionContextMenuPanel: () => Promise<EuiContextMenuPanelDescriptor>;
   closeContextMenu: boolean;
   badges: Array<Action<EmbeddableContext>>;
+  notifications: Array<Action<EmbeddableContext>>;
   embeddable: IEmbeddable;
   headerId?: string;
-  eventCount?: number;
 }
 
 function renderBadges(badges: Array<Action<EmbeddableContext>>, embeddable: IEmbeddable) {
@@ -58,6 +58,21 @@ function renderBadges(badges: Array<Action<EmbeddableContext>>, embeddable: IEmb
   ));
 }
 
+function renderNotifications(
+  notifications: Array<Action<EmbeddableContext>>,
+  embeddable: IEmbeddable
+) {
+  return notifications.map(notification => (
+    <EuiNotificationBadge
+      key={notification.id}
+      style={{ marginTop: '4px', marginRight: '4px' }}
+      onClick={() => notification.execute({ embeddable })}
+    >
+      {notification.getDisplayName({ embeddable })}
+    </EuiNotificationBadge>
+  ));
+}
+
 function renderTooltip(description: string) {
   return (
     description !== '' && (
@@ -90,9 +105,9 @@ export function PanelHeader({
   getActionContextMenuPanel,
   closeContextMenu,
   badges,
+  notifications,
   embeddable,
   headerId,
-  eventCount,
 }: PanelHeaderProps) {
   const viewDescription = getViewDescription(embeddable);
   const showTitle = !isViewMode || (title && !hidePanelTitles) || viewDescription !== '';
@@ -150,11 +165,7 @@ export function PanelHeader({
         )}
         {renderBadges(badges, embeddable)}
       </h2>
-      {!isViewMode && !!eventCount && (
-        <EuiNotificationBadge style={{ marginTop: '4px', marginRight: '4px' }}>
-          {eventCount}
-        </EuiNotificationBadge>
-      )}
+      {renderNotifications(notifications, embeddable)}
       <PanelOptionsMenu
         isViewMode={isViewMode}
         getActionContextMenuPanel={getActionContextMenuPanel}

src/plugins/embeddable/public/lib/triggers/triggers.ts

@@ -44,5 +44,12 @@ export const PANEL_BADGE_TRIGGER = 'PANEL_BADGE_TRIGGER';
 export const panelBadgeTrigger: Trigger<'PANEL_BADGE_TRIGGER'> = {
   id: PANEL_BADGE_TRIGGER,
   title: 'Panel badges',
-  description: 'Actions appear in title bar when an embeddable loads in a panel',
+  description: 'Actions appear in title bar when an embeddable loads in a panel.',
+};
+
+export const PANEL_NOTIFICATION_TRIGGER = 'PANEL_NOTIFICATION_TRIGGER';
+export const panelNotificationTrigger: Trigger<'PANEL_NOTIFICATION_TRIGGER'> = {
+  id: PANEL_NOTIFICATION_TRIGGER,
+  title: 'Panel notifications',
+  description: 'Actions appear in top-right corner of a panel.',
 };

src/plugins/ui_actions/public/service/ui_actions_service.ts

@@ -23,6 +23,7 @@ import {
   TriggerToActionsRegistry,
   TriggerId,
   TriggerContextMapping,
+  ActionContextMapping,
   ActionType,
 } from '../types';
 import { ActionInternal, Action, ActionByType, ActionDefinition, ActionContext } from '../actions';
@@ -138,7 +139,9 @@ export class UiActionsService {
     triggerId: TType,
     // The action can accept partial or no context, but if it needs context not provided
     // by this type of trigger, typescript will complain. yay!
-    action: ActionByType<AType> & Action<TriggerContextMapping[TType]>
+    action:
+      | (ActionByType<AType> & Action<TriggerContextMapping[TType]>)
+      | ActionDefinition<ActionContextMapping[AType]>
   ): void => {
     if (!this.actions.has(action.id)) this.registerAction(action);
     this.attachAction(triggerId, action.id);

x-pack/plugins/embeddable_enhanced/public/actions/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './panel_notifications_action';

x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.test.ts

@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { PanelNotificationsAction } from './panel_notifications_action';
+import { EnhancedEmbeddableContext } from '../types';
+import { ViewMode } from '../../../../../src/plugins/embeddable/public';
+
+const createContext = (events: unknown[] = [], isEditMode = false): EnhancedEmbeddableContext =>
+  ({
+    embeddable: {
+      getInput: () =>
+        ({
+          viewMode: isEditMode ? ViewMode.EDIT : ViewMode.VIEW,
+        } as unknown),
+      enhancements: {
+        dynamicActions: {
+          state: {
+            get: () =>
+              ({
+                events,
+              } as unknown),
+          },
+        },
+      },
+    },
+  } as EnhancedEmbeddableContext);
+
+describe('PanelNotificationsAction', () => {
+  describe('getDisplayName', () => {
+    test('returns "0" if embeddable has no events', async () => {
+      const context = createContext();
+      const action = new PanelNotificationsAction();
+
+      const name = await action.getDisplayName(context);
+      expect(name).toBe('0');
+    });
+
+    test('returns "2" if embeddable has two events', async () => {
+      const context = createContext([{}, {}]);
+      const action = new PanelNotificationsAction();
+
+      const name = await action.getDisplayName(context);
+      expect(name).toBe('2');
+    });
+  });
+
+  describe('isCompatible', () => {
+    test('returns false if not in "edit" mode', async () => {
+      const context = createContext([{}]);
+      const action = new PanelNotificationsAction();
+
+      const result = await action.isCompatible(context);
+      expect(result).toBe(false);
+    });
+
+    test('returns true when in "edit" mode', async () => {
+      const context = createContext([{}], true);
+      const action = new PanelNotificationsAction();
+
+      const result = await action.isCompatible(context);
+      expect(result).toBe(true);
+    });
+
+    test('returns false when no embeddable has no events', async () => {
+      const context = createContext([], true);
+      const action = new PanelNotificationsAction();
+
+      const result = await action.isCompatible(context);
+      expect(result).toBe(false);
+    });
+  });
+});

x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { UiActionsActionDefinition as ActionDefinition } from '../../../../../src/plugins/ui_actions/public';
+import { ViewMode } from '../../../../../src/plugins/embeddable/public';
+import { EnhancedEmbeddableContext, EnhancedEmbeddable } from '../types';
+
+export const ACTION_PANEL_NOTIFICATIONS = 'ACTION_PANEL_NOTIFICATIONS';
+
+/**
+ * This action renders in "edit" mode number of events (dynamic action) a panel
+ * has attached to it.
+ */
+export class PanelNotificationsAction implements ActionDefinition<EnhancedEmbeddableContext> {
+  public readonly id = ACTION_PANEL_NOTIFICATIONS;
+
+  private getEventCount(embeddable: EnhancedEmbeddable): number {
+    return embeddable.enhancements.dynamicActions.state.get().events.length;
+  }
+
+  public readonly getDisplayName = ({ embeddable }: EnhancedEmbeddableContext) => {
+    return String(this.getEventCount(embeddable));
+  };
+
+  public readonly isCompatible = async ({ embeddable }: EnhancedEmbeddableContext) => {
+    if (embeddable.getInput().viewMode !== ViewMode.EDIT) return false;
+    return this.getEventCount(embeddable) > 0;
+  };
+
+  public readonly execute = async () => {};
+}

x-pack/plugins/embeddable_enhanced/public/plugin.ts

@@ -16,14 +16,22 @@ import {
   IEmbeddable,
   defaultEmbeddableFactoryProvider,
   EmbeddableContext,
+  PANEL_NOTIFICATION_TRIGGER,
 } from '../../../../src/plugins/embeddable/public';
-import { EnhancedEmbeddable } from './types';
+import { EnhancedEmbeddable, EnhancedEmbeddableContext } from './types';
 import { EmbeddableActionStorage } from './embeddables/embeddable_action_storage';
 import {
   UiActionsEnhancedDynamicActionManager as DynamicActionManager,
   AdvancedUiActionsSetup,
   AdvancedUiActionsStart,
 } from '../../advanced_ui_actions/public';
+import { PanelNotificationsAction, ACTION_PANEL_NOTIFICATIONS } from './actions';
+
+declare module '../../../../src/plugins/ui_actions/public' {
+  export interface ActionContextMapping {
+    [ACTION_PANEL_NOTIFICATIONS]: EnhancedEmbeddableContext;
+  }
+}
 
 export interface SetupDependencies {
   embeddable: EmbeddableSetup;
@@ -50,6 +58,11 @@ export class EmbeddableEnhancedPlugin
   public setup(core: CoreSetup<StartDependencies>, plugins: SetupDependencies): SetupContract {
     this.setCustomEmbeddableFactoryProvider(plugins);
 
+    plugins.advancedUiActions.addTriggerAction(
+      PANEL_NOTIFICATION_TRIGGER,
+      new PanelNotificationsAction()
+    );
+
     return {};
   }