[Dashboard] Change panel filters action visibility

src/plugins/dashboard/public/application/actions/filters_notification_badge.test.tsx → src/plugins/dashboard/public/application/actions/filters_notification_action.test.tsx

@@ -6,12 +6,7 @@
  * Side Public License, v 1.
  */
 
-import {
-  IContainer,
-  ErrorEmbeddable,
-  isErrorEmbeddable,
-  FilterableEmbeddable,
-} from '@kbn/embeddable-plugin/public';
+import { ErrorEmbeddable, isErrorEmbeddable, ViewMode } from '@kbn/embeddable-plugin/public';
 import {
   ContactCardEmbeddable,
   CONTACT_CARD_EMBEDDABLE,
@@ -25,16 +20,13 @@ import { embeddablePluginMock } from '@kbn/embeddable-plugin/public/mocks';
 import { getSampleDashboardInput } from '../test_helpers';
 import { pluginServices } from '../../services/plugin_services';
 import { DashboardContainer } from '../embeddable/dashboard_container';
-import { FiltersNotificationBadge } from './filters_notification_badge';
+import { FiltersNotificationAction } from './filters_notification_action';
 
 const mockEmbeddableFactory = new ContactCardEmbeddableFactory((() => null) as any, {} as any);
 pluginServices.getServices().embeddable.getEmbeddableFactory = jest
   .fn()
   .mockReturnValue(mockEmbeddableFactory);
 
-let action: FiltersNotificationBadge;
-let container: DashboardContainer;
-let embeddable: ContactCardEmbeddable & FilterableEmbeddable;
 const mockGetFilters = jest.fn(async () => [] as Filter[]);
 const mockGetQuery = jest.fn(async () => undefined as Query | AggregateQuery | undefined);
 
@@ -58,46 +50,54 @@ const getMockPhraseFilter = (key: string, value: string) => {
   };
 };
 
-beforeEach(async () => {
-  container = new DashboardContainer(getSampleDashboardInput());
-
+const buildEmbeddable = async (input?: Partial<ContactCardEmbeddableInput>) => {
+  const container = new DashboardContainer(getSampleDashboardInput());
   const contactCardEmbeddable = await container.addNewEmbeddable<
     ContactCardEmbeddableInput,
     ContactCardEmbeddableOutput,
     ContactCardEmbeddable
   >(CONTACT_CARD_EMBEDDABLE, {
     firstName: 'Kibanana',
+    viewMode: ViewMode.EDIT,
+    ...input,
   });
   if (isErrorEmbeddable(contactCardEmbeddable)) {
     throw new Error('Failed to create embeddable');
   }
 
-  action = new FiltersNotificationBadge();
-  embeddable = embeddablePluginMock.mockFilterableEmbeddable(contactCardEmbeddable, {
+  const embeddable = embeddablePluginMock.mockFilterableEmbeddable(contactCardEmbeddable, {
     getFilters: () => mockGetFilters(),
     getQuery: () => mockGetQuery(),
   });
-});
+
+  return embeddable;
+};
+
+const action = new FiltersNotificationAction();
 
 test('Badge is incompatible with Error Embeddables', async () => {
-  const errorEmbeddable = new ErrorEmbeddable(
-    'Wow what an awful error',
-    { id: ' 404' },
-    embeddable.getRoot() as IContainer
-  );
+  const errorEmbeddable = new ErrorEmbeddable('Wow what an awful error', { id: ' 404' });
   expect(await action.isCompatible({ embeddable: errorEmbeddable })).toBe(false);
 });
 
 test('Badge is not shown when panel has no app-level filters or queries', async () => {
+  const embeddable = await buildEmbeddable();
   expect(await action.isCompatible({ embeddable })).toBe(false);
 });
 
 test('Badge is shown when panel has at least one app-level filter', async () => {
+  const embeddable = await buildEmbeddable();
   mockGetFilters.mockResolvedValue([getMockPhraseFilter('fieldName', 'someValue')] as Filter[]);
   expect(await action.isCompatible({ embeddable })).toBe(true);
 });
 
 test('Badge is shown when panel has at least one app-level query', async () => {
+  const embeddable = await buildEmbeddable();
   mockGetQuery.mockResolvedValue({ sql: 'SELECT * FROM test_dataview' } as AggregateQuery);
   expect(await action.isCompatible({ embeddable })).toBe(true);
 });
+
+test('Badge is not shown in view mode', async () => {
+  const embeddable = await buildEmbeddable({ viewMode: ViewMode.VIEW });
+  expect(await action.isCompatible({ embeddable })).toBe(false);
+});

src/plugins/dashboard/public/application/actions/filters_notification_badge.tsx → src/plugins/dashboard/public/application/actions/filters_notification_action.tsx

@@ -8,15 +8,17 @@
 
 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 { KibanaThemeProvider, reactToUiComponent } 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 { I18nProvider } from '@kbn/i18n-react';
 
-import { dashboardFilterNotificationBadge } from '../../dashboard_strings';
+import { FiltersNotificationPopover } from './filters_notification_popover';
+import { dashboardFilterNotificationAction } from '../../dashboard_strings';
 import { pluginServices } from '../../services/plugin_services';
 
 export const BADGE_FILTERS_NOTIFICATION = 'ACTION_FILTERS_NOTIFICATION';
@@ -25,27 +27,57 @@ export interface FiltersNotificationActionContext {
   embeddable: IEmbeddable;
 }
 
-export class FiltersNotificationBadge implements Action<FiltersNotificationActionContext> {
+export class FiltersNotificationAction implements Action<FiltersNotificationActionContext> {
   public readonly id = BADGE_FILTERS_NOTIFICATION;
   public readonly type = BADGE_FILTERS_NOTIFICATION;
   public readonly order = 2;
 
-  private displayName = dashboardFilterNotificationBadge.getDisplayName();
+  private displayName = dashboardFilterNotificationAction.getDisplayName();
   private icon = 'filter';
   private applicationService;
   private embeddableService;
   private settingsService;
-  private openModal;
 
   constructor() {
     ({
       application: this.applicationService,
       embeddable: this.embeddableService,
-      overlays: { openModal: this.openModal },
       settings: this.settingsService,
     } = pluginServices.getServices());
   }
 
+  private FilterIconButton = ({ context }: { context: FiltersNotificationActionContext }) => {
+    const { embeddable } = context;
+
+    const editPanelAction = new EditPanelAction(
+      this.embeddableService.getEmbeddableFactory,
+      this.applicationService as unknown as ApplicationStart,
+      this.embeddableService.getStateTransfer()
+    );
+
+    const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
+      uiSettings: this.settingsService.uiSettings,
+    });
+
+    return (
+      <I18nProvider>
+        <KibanaThemeProvider theme$={this.settingsService.theme.theme$}>
+          <KibanaReactContextProvider>
+            <FiltersNotificationPopover
+              editPanelAction={editPanelAction}
+              displayName={this.displayName}
+              context={context}
+              icon={this.getIconType({ embeddable })}
+              id={this.id}
+            />
+          </KibanaReactContextProvider>
+        </KibanaThemeProvider>
+      </I18nProvider>
+    );
+  };
+
+  public readonly MenuItem = reactToUiComponent(this.FilterIconButton);
+
   public getDisplayName({ embeddable }: FiltersNotificationActionContext) {
     if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
       throw new IncompatibleActionError();
@@ -65,6 +97,7 @@ export class FiltersNotificationBadge implements Action<FiltersNotificationActio
     if (
       isErrorEmbeddable(embeddable) ||
       !embeddable.getRoot().isContainer ||
+      embeddable.getInput()?.viewMode !== ViewMode.EDIT ||
       !isFilterableEmbeddable(embeddable)
     ) {
       return false;
@@ -80,48 +113,5 @@ export class FiltersNotificationBadge implements Action<FiltersNotificationActio
     );
   };
 
-  public execute = async (context: FiltersNotificationActionContext) => {
-    const { embeddable } = context;
-
-    const isCompatible = await this.isCompatible({ embeddable });
-    if (!isCompatible || !isFilterableEmbeddable(embeddable)) {
-      throw new IncompatibleActionError();
-    }
-
-    const {
-      uiSettings,
-      theme: { theme$ },
-    } = this.settingsService;
-    const { getEmbeddableFactory, getStateTransfer } = this.embeddableService;
-
-    const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
-      uiSettings,
-    });
-    const editPanelAction = new EditPanelAction(
-      getEmbeddableFactory,
-      this.applicationService as unknown as ApplicationStart,
-      getStateTransfer()
-    );
-    const FiltersNotificationModal = await import('./filters_notification_modal').then(
-      (m) => m.FiltersNotificationModal
-    );
-
-    const session = this.openModal(
-      toMountPoint(
-        <KibanaReactContextProvider>
-          <FiltersNotificationModal
-            context={context}
-            displayName={this.displayName}
-            id={this.id}
-            editPanelAction={editPanelAction}
-            onClose={() => session.close()}
-          />
-        </KibanaReactContextProvider>,
-        { theme$ }
-      ),
-      {
-        'data-test-subj': 'filtersNotificationModal',
-      }
-    );
-  };
+  public execute = async () => {};
 }