Convert filter badge to icon notification + show only in edit mode

elastic · Dec 5, 2022 · dce3124 · dce3124
1 parent 035ebc4
commit dce3124
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/plugins/dashboard/public/application/actions/filters_notification_badge.tsx b/src/plugins/dashboard/public/application/actions/filters_notification_badge.tsx
@@ -8,13 +8,14 @@
 
 import React from 'react';
 
-import { EditPanelAction, isFilterableEmbeddable } from '@kbn/embeddable-plugin/public';
-import { type AggregateQuery } from '@kbn/es-query';
-import { toMountPoint } from '@kbn/kibana-react-plugin/public';
-import type { ApplicationStart } from '@kbn/core/public';
-import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
-import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { EditPanelAction, isFilterableEmbeddable, ViewMode } from '@kbn/embeddable-plugin/public';
 import { type IEmbeddable, isErrorEmbeddable } from '@kbn/embeddable-plugin/public';
+import { reactToUiComponent, toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
+import type { ApplicationStart } from '@kbn/core/public';
+import { type AggregateQuery } from '@kbn/es-query';
+import { EuiButtonIcon } from '@elastic/eui';
 
 import { dashboardFilterNotificationBadge } from '../../dashboard_strings';
 import { pluginServices } from '../../services/plugin_services';
@@ -46,6 +47,22 @@ export class FiltersNotificationBadge implements Action<FiltersNotificationActio
     } = pluginServices.getServices());
   }
 
+  private FiltersNotification: React.FC<{ context: FiltersNotificationActionContext }> = ({
+    context,
+  }: {
+    context: FiltersNotificationActionContext;
+  }) => {
+    const { embeddable } = context;
+    return (
+      <EuiButtonIcon
+        iconType={this.getIconType({ embeddable })}
+        onClick={() => this.execute(context)}
+      />
+    );
+  };
+
+  public readonly MenuItem = reactToUiComponent(this.FiltersNotification);
+
   public getDisplayName({ embeddable }: FiltersNotificationActionContext) {
     if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
       throw new IncompatibleActionError();
@@ -65,6 +82,7 @@ export class FiltersNotificationBadge implements Action<FiltersNotificationActio
     if (
       isErrorEmbeddable(embeddable) ||
       !embeddable.getRoot().isContainer ||
+      embeddable.getInput()?.viewMode !== ViewMode.EDIT ||
       !isFilterableEmbeddable(embeddable)
     ) {
       return false;

diff --git a/src/plugins/dashboard/public/application/actions/index.ts b/src/plugins/dashboard/public/application/actions/index.ts
@@ -6,11 +6,7 @@
  * Side Public License, v 1.
  */
 
-import {
-  CONTEXT_MENU_TRIGGER,
-  PANEL_BADGE_TRIGGER,
-  PANEL_NOTIFICATION_TRIGGER,
-} from '@kbn/embeddable-plugin/public';
+import { CONTEXT_MENU_TRIGGER, PANEL_NOTIFICATION_TRIGGER } from '@kbn/embeddable-plugin/public';
 import { CoreStart } from '@kbn/core/public';
 import { getSavedObjectFinder } from '@kbn/saved-objects-plugin/public';
 
@@ -48,14 +44,14 @@ export const buildAllDashboardActions = async ({
   uiActions.registerAction(changeViewAction);
   uiActions.attachAction(CONTEXT_MENU_TRIGGER, changeViewAction.id);
 
-  const panelLevelFiltersNotification = new FiltersNotificationBadge();
-  uiActions.registerAction(panelLevelFiltersNotification);
-  uiActions.attachAction(PANEL_BADGE_TRIGGER, panelLevelFiltersNotification.id);
-
   const expandPanelAction = new ExpandPanelAction();
   uiActions.registerAction(expandPanelAction);
   uiActions.attachAction(CONTEXT_MENU_TRIGGER, expandPanelAction.id);
 
+  const panelLevelFiltersNotification = new FiltersNotificationBadge();
+  uiActions.registerAction(panelLevelFiltersNotification);
+  uiActions.attachAction(PANEL_NOTIFICATION_TRIGGER, panelLevelFiltersNotification.id);
+
   if (share) {
     const ExportCSVPlugin = new ExportCSVAction();
     uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, ExportCSVPlugin);