[Dashboard] Hover actions for panels

packages/kbn-panel-loader/index.tsx

@@ -15,9 +15,11 @@ export const PanelLoader = (props: {
   showShadow?: boolean;
   showBorder?: boolean;
   dataTestSubj?: string;
+  className?: string;
 }) => {
   return (
     <EuiPanel
+      className={props.className}
       css={css`
         z-index: auto;
         flex: 1;

src/plugins/dashboard/public/dashboard_actions/add_to_library_action.tsx

@@ -37,6 +37,7 @@ import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
 import { PresentationContainer } from '@kbn/presentation-containers';
 import { pluginServices } from '../services/plugin_services';
 import { dashboardAddToLibraryActionStrings } from './_dashboard_actions_strings';
+import { dashboardActionGroup } from '.';
 
 export const ACTION_ADD_TO_LIBRARY = 'saveToLibrary';
 
@@ -61,6 +62,7 @@ export class AddToLibraryAction implements Action<EmbeddableApiContext> {
   public readonly type = ACTION_ADD_TO_LIBRARY;
   public readonly id = ACTION_ADD_TO_LIBRARY;
   public order = 8;
+  public grouping = [dashboardActionGroup];
 
   private toastsService;
 

src/plugins/dashboard/public/dashboard_actions/clone_panel_action.tsx

@@ -20,6 +20,7 @@ import {
   HasUniqueId,
 } from '@kbn/presentation-publishing';
 import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { dashboardActionGroup } from '.';
 import { dashboardClonePanelActionStrings } from './_dashboard_actions_strings';
 
 export const ACTION_CLONE_PANEL = 'clonePanel';
@@ -41,6 +42,7 @@ export class ClonePanelAction implements Action<EmbeddableApiContext> {
   public readonly type = ACTION_CLONE_PANEL;
   public readonly id = ACTION_CLONE_PANEL;
   public order = 45;
+  public grouping = [dashboardActionGroup];
 
   constructor() {}
 

src/plugins/dashboard/public/dashboard_actions/copy_to_dashboard_action.tsx

@@ -29,6 +29,7 @@ import { DashboardPluginInternalFunctions } from '../dashboard_container/externa
 import { pluginServices } from '../services/plugin_services';
 import { CopyToDashboardModal } from './copy_to_dashboard_modal';
 import { dashboardCopyToDashboardActionStrings } from './_dashboard_actions_strings';
+import { dashboardActionGroup } from '.';
 
 export const ACTION_COPY_TO_DASHBOARD = 'copyToDashboard';
 
@@ -57,6 +58,7 @@ export class CopyToDashboardAction implements Action<EmbeddableApiContext> {
   public readonly type = ACTION_COPY_TO_DASHBOARD;
   public readonly id = ACTION_COPY_TO_DASHBOARD;
   public order = 1;
+  public grouping = [dashboardActionGroup];
 
   private dashboardCapabilities;
   private openModal;

src/plugins/dashboard/public/dashboard_actions/expand_panel_action.test.tsx

@@ -14,14 +14,18 @@ describe('Expand panel action', () => {
   let action: ExpandPanelAction;
   let context: { embeddable: ExpandPanelActionApi };
 
+  let updateExpandPanelId: (id?: string) => void;
+
   beforeEach(() => {
+    const expandPanelIdSubject = new BehaviorSubject<string | undefined>(undefined);
+    updateExpandPanelId = (id) => expandPanelIdSubject.next(id);
     action = new ExpandPanelAction();
     context = {
       embeddable: {
         uuid: 'superId',
         parentApi: {
           expandPanel: jest.fn(),
-          expandedPanelId: new BehaviorSubject<string | undefined>(undefined),
+          expandedPanelId: expandPanelIdSubject,
         },
       },
     };
@@ -38,19 +42,22 @@ describe('Expand panel action', () => {
     expect(await action.isCompatible(emptyContext)).toBe(false);
   });
 
+  it('calls onChange when expandedPanelId changes', async () => {
+    const onChange = jest.fn();
+    updateExpandPanelId('superPanelId');
+    action.subscribeToCompatibilityChanges(context, onChange);
+    expect(onChange).toHaveBeenCalledWith(true, action);
+  });
+
   it('returns the correct icon based on expanded panel id', async () => {
     expect(await action.getIconType(context)).toBe('expand');
-    context.embeddable.parentApi.expandedPanelId = new BehaviorSubject<string | undefined>(
-      'superPanelId'
-    );
+    updateExpandPanelId('superPanelId');
     expect(await action.getIconType(context)).toBe('minimize');
   });
 
   it('returns the correct display name based on expanded panel id', async () => {
     expect(await action.getDisplayName(context)).toBe('Maximize');
-    context.embeddable.parentApi.expandedPanelId = new BehaviorSubject<string | undefined>(
-      'superPanelId'
-    );
+    updateExpandPanelId('superPanelId');
     expect(await action.getDisplayName(context)).toBe('Minimize');
   });
 

src/plugins/dashboard/public/dashboard_actions/expand_panel_action.tsx

@@ -16,6 +16,7 @@ import {
   HasUniqueId,
 } from '@kbn/presentation-publishing';
 import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { dashboardActionGroup } from '.';
 
 import { dashboardExpandPanelActionStrings } from './_dashboard_actions_strings';
 
@@ -29,7 +30,8 @@ const isApiCompatible = (api: unknown | null): api is ExpandPanelActionApi =>
 export class ExpandPanelAction implements Action<EmbeddableApiContext> {
   public readonly type = ACTION_EXPAND_PANEL;
   public readonly id = ACTION_EXPAND_PANEL;
-  public order = 7;
+  public order = 9;
+  public grouping = [dashboardActionGroup];
 
   constructor() {}
 
@@ -49,6 +51,20 @@ export class ExpandPanelAction implements Action<EmbeddableApiContext> {
     return isApiCompatible(embeddable);
   }
 
+  public couldBecomeCompatible({ embeddable }: EmbeddableApiContext) {
+    return apiHasParentApi(embeddable) && apiCanExpandPanels(embeddable.parentApi);
+  }
+
+  public subscribeToCompatibilityChanges(
+    { embeddable }: EmbeddableApiContext,
+    onChange: (isCompatible: boolean, action: ExpandPanelAction) => void
+  ) {
+    if (!isApiCompatible(embeddable)) return;
+    return embeddable.parentApi.expandedPanelId.subscribe(() => {
+      onChange(isApiCompatible(embeddable), this);
+    });
+  }
+
   public async execute({ embeddable }: EmbeddableApiContext) {
     if (!isApiCompatible(embeddable)) throw new IncompatibleActionError();
     embeddable.parentApi.expandPanel(embeddable.uuid);

src/plugins/dashboard/public/dashboard_actions/export_csv_action.tsx

@@ -41,7 +41,7 @@ const isApiCompatible = (api: unknown | null): api is ExportCsvActionApi =>
 export class ExportCSVAction implements Action<ExportContext> {
   public readonly id = ACTION_EXPORT_CSV;
   public readonly type = ACTION_EXPORT_CSV;
-  public readonly order = 18; // right after Export in discover which is 19
+  public readonly order = 17; // right after Export in discover which is 19
 
   private fieldFormats;
   private uiSettings;

src/plugins/dashboard/public/dashboard_actions/filters_notification_action.test.tsx

@@ -9,7 +9,6 @@
 
 import { Filter, FilterStateStore, type AggregateQuery, type Query } from '@kbn/es-query';
 
-import { ViewMode } from '@kbn/presentation-publishing';
 import { BehaviorSubject } from 'rxjs';
 import {
   FiltersNotificationAction,
@@ -42,22 +41,17 @@ describe('filters notification action', () => {
 
   let updateFilters: (filters: Filter[]) => void;
   let updateQuery: (query: Query | AggregateQuery | undefined) => void;
-  let updateViewMode: (viewMode: ViewMode) => void;
 
   beforeEach(() => {
     const filtersSubject = new BehaviorSubject<Filter[] | undefined>(undefined);
     updateFilters = (filters) => filtersSubject.next(filters);
     const querySubject = new BehaviorSubject<Query | AggregateQuery | undefined>(undefined);
     updateQuery = (query) => querySubject.next(query);
 
-    const viewModeSubject = new BehaviorSubject<ViewMode>('edit');
-    updateViewMode = (viewMode) => viewModeSubject.next(viewMode);
-
     action = new FiltersNotificationAction();
     context = {
       embeddable: {
         uuid: 'testId',
-        viewMode: viewModeSubject,
         parentApi: {
           getAllDataViews: jest.fn(),
           getDashboardPanelFromId: jest.fn(),
@@ -87,22 +81,6 @@ describe('filters notification action', () => {
     expect(await action.isCompatible(context)).toBe(true);
   });
 
-  it('is incompatible when api is in view mode', async () => {
-    updateFilters([getMockPhraseFilter('SuperField', 'SuperValue')]);
-    updateQuery({ esql: 'FROM test_dataview' } as AggregateQuery);
-    updateViewMode('view');
-    expect(await action.isCompatible(context)).toBe(false);
-  });
-
-  it('calls onChange when view mode changes', () => {
-    const onChange = jest.fn();
-    updateFilters([getMockPhraseFilter('SuperField', 'SuperValue')]);
-    updateQuery({ esql: 'FROM test_dataview' } as AggregateQuery);
-    action.subscribeToCompatibilityChanges(context, onChange);
-    updateViewMode('view');
-    expect(onChange).toHaveBeenCalledWith(false, action);
-  });
-
   it('calls onChange when filters change', async () => {
     const onChange = jest.fn();
     action.subscribeToCompatibilityChanges(context, onChange);

src/plugins/dashboard/public/dashboard_actions/filters_notification_action.tsx

@@ -14,13 +14,9 @@ import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
 import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
 
 import {
-  apiCanAccessViewMode,
   apiPublishesPartialUnifiedSearch,
   apiHasUniqueId,
-  CanAccessViewMode,
   EmbeddableApiContext,
-  getInheritedViewMode,
-  getViewModeSubject,
   HasParentApi,
   PublishesUnifiedSearch,
   HasUniqueId,
@@ -34,17 +30,14 @@ import { dashboardFilterNotificationActionStrings } from './_dashboard_actions_s
 export const BADGE_FILTERS_NOTIFICATION = 'ACTION_FILTERS_NOTIFICATION';
 
 export type FiltersNotificationActionApi = HasUniqueId &
-  CanAccessViewMode &
   Partial<PublishesUnifiedSearch> &
   HasParentApi<DashboardPluginInternalFunctions>;
 
 const isApiCompatible = (api: unknown | null): api is FiltersNotificationActionApi =>
-  Boolean(
-    apiHasUniqueId(api) && apiCanAccessViewMode(api) && apiPublishesPartialUnifiedSearch(api)
-  );
+  Boolean(apiHasUniqueId(api) && apiPublishesPartialUnifiedSearch(api));
 
 const compatibilityCheck = (api: EmbeddableApiContext['embeddable']) => {
-  if (!isApiCompatible(api) || getInheritedViewMode(api) !== 'edit') return false;
+  if (!isApiCompatible(api)) return false;
   const query = api.query$?.value;
   return (
     (api.filters$?.value ?? []).length > 0 ||
@@ -103,9 +96,7 @@ export class FiltersNotificationAction implements Action<EmbeddableApiContext> {
   ) {
     if (!isApiCompatible(embeddable)) return;
     return merge(
-      ...[embeddable.query$, embeddable.filters$, getViewModeSubject(embeddable)].filter((value) =>
-        Boolean(value)
-      )
+      ...[embeddable.query$, embeddable.filters$].filter((value) => Boolean(value))
     ).subscribe(() => onChange(compatibilityCheck(embeddable), this));
   }
 

src/plugins/dashboard/public/dashboard_actions/filters_notification_popover.test.tsx

@@ -10,7 +10,6 @@
 import { AggregateQuery, Filter, FilterStateStore, Query } from '@kbn/es-query';
 import { I18nProvider } from '@kbn/i18n-react';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
-import { ViewMode } from '@kbn/presentation-publishing';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -59,7 +58,6 @@ describe('filters notification popover', () => {
 
     api = {
       uuid: 'testId',
-      viewMode: new BehaviorSubject<ViewMode>('edit'),
       parentApi: {
         getAllDataViews: jest.fn(),
         getDashboardPanelFromId: jest.fn(),

src/plugins/dashboard/public/dashboard_actions/index.ts

@@ -26,6 +26,8 @@ interface BuildAllDashboardActionsProps {
   plugins: DashboardStartDependencies;
 }
 
+export const dashboardActionGroup = { id: 'dashboard_actions', order: 10 };
+
 export const buildAllDashboardActions = async ({
   core,
   plugins,

src/plugins/dashboard/public/dashboard_actions/legacy_add_to_library_action.tsx

@@ -18,6 +18,7 @@ import {
   HasLegacyLibraryTransforms,
 } from '@kbn/presentation-publishing';
 import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { dashboardActionGroup } from '.';
 import { pluginServices } from '../services/plugin_services';
 import { dashboardAddToLibraryActionStrings } from './_dashboard_actions_strings';
 
@@ -34,6 +35,7 @@ export class LegacyAddToLibraryAction implements Action<EmbeddableApiContext> {
   public readonly type = ACTION_LEGACY_ADD_TO_LIBRARY;
   public readonly id = ACTION_LEGACY_ADD_TO_LIBRARY;
   public order = 15;
+  public grouping = [dashboardActionGroup];
 
   private toastsService;
 

src/plugins/dashboard/public/dashboard_actions/legacy_unlink_from_library_action.tsx

@@ -21,6 +21,7 @@ import {
 } from '@kbn/presentation-publishing';
 import { pluginServices } from '../services/plugin_services';
 import { dashboardUnlinkFromLibraryActionStrings } from './_dashboard_actions_strings';
+import { dashboardActionGroup } from '.';
 
 export const ACTION_LEGACY_UNLINK_FROM_LIBRARY = 'legacyUnlinkFromLibrary';
 
@@ -37,6 +38,7 @@ export class LegacyUnlinkFromLibraryAction implements Action<EmbeddableApiContex
   public readonly type = ACTION_LEGACY_UNLINK_FROM_LIBRARY;
   public readonly id = ACTION_LEGACY_UNLINK_FROM_LIBRARY;
   public order = 15;
+  public grouping = [dashboardActionGroup];
 
   private toastsService;
 

src/plugins/dashboard/public/dashboard_actions/unlink_from_library_action.tsx

@@ -30,6 +30,7 @@ import {
 import { PresentationContainer } from '@kbn/presentation-containers';
 import { pluginServices } from '../services/plugin_services';
 import { dashboardUnlinkFromLibraryActionStrings } from './_dashboard_actions_strings';
+import { dashboardActionGroup } from '.';
 
 export const ACTION_UNLINK_FROM_LIBRARY = 'unlinkFromLibrary';
 
@@ -54,6 +55,7 @@ export class UnlinkFromLibraryAction implements Action<EmbeddableApiContext> {
   public readonly type = ACTION_UNLINK_FROM_LIBRARY;
   public readonly id = ACTION_UNLINK_FROM_LIBRARY;
   public order = 15;
+  public grouping = [dashboardActionGroup];
 
   private toastsService;
 

src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_grid.scss

@@ -19,7 +19,7 @@
 .dshLayout--editing {
   .react-resizable-handle {
     @include size($euiSizeL);
-    z-index: $euiZLevel1; /* 1 */
+    z-index: $euiZLevel2; /* 1 */
     right: 0;
     bottom: 0;
     padding-right: $euiSizeS;
@@ -33,15 +33,18 @@
  */
 .dshLayout-isMaximizedPanel {
   height: 100% !important; /* 1. */
+
+  .embPanel__hoverActionsLeft {
+    visibility: hidden;
+  }
 }
 
 /**
  * When a single panel is expanded, all the other panels moved offscreen.
  * Shifting the rendered panels offscreen prevents a quick flash when redrawing the panels on minimize
  */
 .dshDashboardGrid__item--hidden {
-  top: -9999px;
-  left: -9999px;
+  transform: translate(-9999px, -9999px);
 }
 
 /**
@@ -98,13 +101,25 @@
    */
   &.resizing,
   &.react-draggable-dragging {
-    z-index: $euiZLevel2 !important;
+    z-index: $euiZLevel3 !important;
   }
 
   &.react-draggable-dragging {
     transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
     @include euiBottomShadowLarge;
     border-radius: $euiBorderRadius; // keeps shadow within bounds
+
+    .embPanel__hoverActionsWrapper {
+      top: -$euiSizeXL;
+    }
+
+    .embPanel__hoverActionsLeft {
+      opacity: 1 !important;
+    }
+
+    .embPanel__hoverActionsRight {
+      opacity: 0 !important;
+    }
   }
 
   /**