[8.15] fix dashboard scroll issue for when lens inline config is open…

…ed. (#188236) (#194258) # Backport This will backport the following commits from `main` to `8.15`: - [fix dashboard scroll issue for when lens inline config is opened. (#188236)](#188236)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) ","sha":"fdd67f7070037a548494b3830f9cfde64873f1be","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","loe:small","release_note:skip","impact:medium","backport:skip","Project:Dashboard Usability","v8.16.0"],"number":188236,"url":"https://github.com/elastic/kibana/pull/188236","mergeCommit":{"message":"fix dashboard scroll issue for when lens inline config is opened. (#188236)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana/issues/185895\r\n\r\nThis PR adds a side effect to opening the inline config editor to\r\ndisable scroll on the document body, this way the user's scroll\r\ninteraction if any remains within the open inline lens config editor,\r\nwhilst keeping ~on~ the panel whose configuration is being modified in\r\nfocus.\r\n\r\n#### Previously:\r\n\r\n![ScreenRecording2024-07-12at15 23 35-ezgif\r\ncom-video-to-gif-converter](https://github.com/user-attachments/assets/1ed0823f-24f4-4b05-a17e-04a5b1218763)\r\n\r\n#### After\r\n\r\n![ScreenRecording2024-07-12at16 20 27-ezgif\r\ncom-video-to-gif-converter](https://github.com/user-attachments/assets/d6e136ca-778b-4216-8beb-1a9f2e2aa6e5)\r\n\r\n\r\n","sha":"fdd67f7070037a548494b3830f9cfde64873f1be"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","labelRegex":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/188236","number":188236,"mergeCommit":{"message":"fix dashboard scroll issue for when lens inline config is opened. (#188236)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana/issues/185895\r\n\r\nThis PR adds a side effect to opening the inline config editor to\r\ndisable scroll on the document body, this way the user's scroll\r\ninteraction if any remains within the open inline lens config editor,\r\nwhilst keeping ~on~ the panel whose configuration is being modified in\r\nfocus.\r\n\r\n#### Previously:\r\n\r\n![ScreenRecording2024-07-12at15 23 35-ezgif\r\ncom-video-to-gif-converter](https://github.com/user-attachments/assets/1ed0823f-24f4-4b05-a17e-04a5b1218763)\r\n\r\n#### After\r\n\r\n![ScreenRecording2024-07-12at16 20 27-ezgif\r\ncom-video-to-gif-converter](https://github.com/user-attachments/assets/d6e136ca-778b-4216-8beb-1a9f2e2aa6e5)\r\n\r\n\r\n","sha":"fdd67f7070037a548494b3830f9cfde64873f1be"}}]}] BACKPORT-->
elastic · Sep 27, 2024 · d4500f4 · d4500f4
1 parent d6f0ac3
commit d4500f4
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 33 deletions.
diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.tsx
@@ -856,7 +856,7 @@ export class Embeddable
     this.updateInput({ attributes: attrs, savedObjectId });
   }
 
-  async openConfingPanel(
+  async openConfigPanel(
     startDependencies: LensPluginStartDependencies,
     isNewPanel?: boolean,
     deletePanel?: () => void

diff --git a/x-pack/plugins/lens/public/trigger_actions/open_lens_config/edit_action.test.tsx b/x-pack/plugins/lens/public/trigger_actions/open_lens_config/edit_action.test.tsx
@@ -95,7 +95,7 @@ describe('open config panel action', () => {
           };
         },
         getIsEditable: () => true,
-        openConfingPanel: jest.fn().mockResolvedValue(<span>Lens Config Panel Component</span>),
+        openConfigPanel: jest.fn().mockResolvedValue(<span>Lens Config Panel Component</span>),
         getRoot: () => {
           return {
             openOverlay: jest.fn(),

diff --git a/x-pack/plugins/lens/public/trigger_actions/open_lens_config/edit_action_helpers.ts b/x-pack/plugins/lens/public/trigger_actions/open_lens_config/edit_action_helpers.ts
@@ -6,9 +6,10 @@
  */
 import React from 'react';
 import './helpers.scss';
-import { tracksOverlays } from '@kbn/presentation-containers';
-import { IEmbeddable } from '@kbn/embeddable-plugin/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
+import { tracksOverlays } from '@kbn/presentation-containers';
+import type { IEmbeddable } from '@kbn/embeddable-plugin/public';
+import { ViewMode } from '@kbn/embeddable-plugin/common';
 import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
 import { isLensEmbeddable } from '../utils';
 import type { LensPluginStartDependencies } from '../../plugin';
@@ -24,10 +25,60 @@ interface Context extends StartServices {
 export async function isEditActionCompatible(embeddable: IEmbeddable) {
   if (!embeddable?.getInput) return false;
   // display the action only if dashboard is on editable mode
-  const inDashboardEditMode = embeddable.getInput().viewMode === 'edit';
+  const inDashboardEditMode = embeddable.getInput().viewMode === ViewMode.EDIT;
   return Boolean(isLensEmbeddable(embeddable) && embeddable.getIsEditable() && inDashboardEditMode);
 }
 
+type PanelConfigElement<T = {}> = React.ReactElement<T & { closeFlyout: () => void }>;
+
+const openInlineLensConfigEditor = (
+  startServices: StartServices,
+  embeddable: IEmbeddable,
+  EmbeddableInlineConfigEditor: PanelConfigElement
+) => {
+  const rootEmbeddable = embeddable.getRoot();
+  const overlayTracker = tracksOverlays(rootEmbeddable) ? rootEmbeddable : undefined;
+
+  const handle = startServices.overlays.openFlyout(
+    toMountPoint(
+      React.createElement(function InlineLensConfigEditor() {
+        React.useEffect(() => {
+          document.body.style.overflowY = 'hidden';
+
+          return () => {
+            document.body.style.overflowY = 'initial';
+          };
+        }, []);
+
+        return React.cloneElement(EmbeddableInlineConfigEditor, {
+          closeFlyout: () => {
+            overlayTracker?.clearOverlays();
+            handle.close();
+          },
+        });
+      }),
+      startServices
+    ),
+    {
+      size: 's',
+      type: 'push',
+      paddingSize: 'm',
+      'data-test-subj': 'customizeLens',
+      className: 'lnsConfigPanel__overlay',
+      hideCloseButton: true,
+      onClose: (overlayRef) => {
+        overlayTracker?.clearOverlays();
+        overlayRef.close();
+      },
+      outsideClickCloses: true,
+    }
+  );
+
+  overlayTracker?.openOverlay(handle, {
+    focusedPanelId: embeddable.id,
+  });
+};
+
 export async function executeEditAction({
   embeddable,
   startDependencies,
@@ -39,35 +90,10 @@ export async function executeEditAction({
   if (!isCompatibleAction || !isLensEmbeddable(embeddable)) {
     throw new IncompatibleActionError();
   }
-  const rootEmbeddable = embeddable.getRoot();
-  const overlayTracker = tracksOverlays(rootEmbeddable) ? rootEmbeddable : undefined;
-  const ConfigPanel = await embeddable.openConfingPanel(startDependencies, isNewPanel, deletePanel);
+
+  const ConfigPanel = await embeddable.openConfigPanel(startDependencies, isNewPanel, deletePanel);
 
   if (ConfigPanel) {
-    const handle = startServices.overlays.openFlyout(
-      toMountPoint(
-        React.cloneElement(ConfigPanel, {
-          closeFlyout: () => {
-            if (overlayTracker) overlayTracker.clearOverlays();
-            handle.close();
-          },
-        }),
-        startServices
-      ),
-      {
-        className: 'lnsConfigPanel__overlay',
-        size: 's',
-        'data-test-subj': 'customizeLens',
-        type: 'push',
-        paddingSize: 'm',
-        hideCloseButton: true,
-        onClose: (overlayRef) => {
-          if (overlayTracker) overlayTracker.clearOverlays();
-          overlayRef.close();
-        },
-        outsideClickCloses: true,
-      }
-    );
-    overlayTracker?.openOverlay(handle, { focusedPanelId: embeddable.id });
+    openInlineLensConfigEditor(startServices, embeddable, ConfigPanel);
   }
 }