[Workspace Chrome] Adjust scrollIntoViewIfNeeded for the new layout (#228796)

## Summary

We're working on [new layout
engine](elastic/kibana-team#1581) for Kibana
moving from legacy fixed layout to grid layout. New layout is in main
behind feature flag `feature_flags.overrides.core.chrome.layoutType:
'grid'` and we're preparing for QA before the rollout.

When running functional tests with the new layout there turned out to be
a lot of failures that I pin pointed to
`src/platform/packages/shared/kbn-ftr-common-functional-ui-services/services/web_element_wrapper/scroll_into_view_if_necessary.js`
This function is used for scrolling inside our ftr test. It didn't work
properly with the new layout because the main application scroll is
moved from document to internal main grid cell.

This PR adjusts the function to work well for both the old layout and
the new layout.

However, there were issues with this function in the old layout as well.
It didn't correctly decide if an element was visible when the page was
scrolled down. I fixed it, but I had to adjust a couple of tests to
account for the logical change.


@dolaru helped to run mki, and it passed:
https://buildkite.com/elastic/appex-qa-serverless-kibana-ftr-tests/builds/6385,
give a bit more confidence

---------

Co-authored-by: kibanamachine <[email protected]>

Author: Dosant

NOTICE.txt

@@ -138,32 +138,6 @@ The above copyright notice and this permission notice shall be included in all c
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
----
-Based on the scroll-into-view-if-necessary module from npm
-https://github.com/stipsan/compute-scroll-into-view/blob/master/src/index.ts#L269-L340
-
-MIT License
-
-Copyright (c) 2018 Cody Olsen
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
 ---
 MIT License
 

src/platform/packages/shared/kbn-ftr-common-functional-ui-services/services/find.ts

@@ -415,14 +415,14 @@ export class FindService extends FtrService {
   public async clickByCssSelector(
     selector: string,
     timeout: number = this.defaultFindTimeout,
-    topOffset?: number
+    topOffsetOrOptions?: number | { topOffset?: number; bottomOffset?: number }
   ): Promise<void> {
     this.log.debug(`Find.clickByCssSelector('${selector}') with timeout=${timeout}`);
     await this.retry.try(async () => {
       const element = await this.byCssSelector(selector, timeout);
       if (element) {
         // await element.moveMouseTo();
-        await element.click(topOffset);
+        await element.click(topOffsetOrOptions);
       } else {
         throw new Error(`Element with css='${selector}' is not found`);
       }

src/platform/packages/shared/kbn-ftr-common-functional-ui-services/services/test_subjects.ts

@@ -163,10 +163,14 @@ export class TestSubjects extends FtrService {
   public async click(
     selector: string,
     timeout: number = this.FIND_TIME,
-    topOffset?: number
+    topOffsetOrOptions?: number | { topOffset?: number; bottomOffset?: number }
   ): Promise<void> {
     this.log.debug(`TestSubjects.click(${selector})`);
-    await this.findService.clickByCssSelector(testSubjSelector(selector), timeout, topOffset);
+    await this.findService.clickByCssSelector(
+      testSubjSelector(selector),
+      timeout,
+      topOffsetOrOptions
+    );
   }
 
   public async pressEnter(selector: string, timeout: number = this.FIND_TIME): Promise<void> {

src/platform/packages/shared/kbn-ftr-common-functional-ui-services/services/web_element_wrapper/scroll_into_view_if_necessary.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export function scrollIntoViewIfNecessary(
+  target: HTMLElement,
+  scrollContainerId?: string,
+  scrollFixedHeader: number = 0,
+  scrollFixedFooter: number = 0
+) {
+  const scrollContainer =
+    (scrollContainerId && document.getElementById(scrollContainerId)) || document.documentElement;
+
+  // Measure helper, logic is different for scrolling the viewport vs a scroller element
+  const getRects = () => {
+    const targetRect = target.getBoundingClientRect();
+    const scrollIsViewport =
+      scrollContainer === document.documentElement || scrollContainer === document.body;
+    const scrollRect = scrollIsViewport
+      ? { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight }
+      : scrollContainer.getBoundingClientRect();
+    return { targetRect, scrollRect };
+  };
+
+  const isVisible = ({ targetRect, scrollRect }: ReturnType<typeof getRects>) =>
+    targetRect.top >= scrollRect.top + scrollFixedHeader &&
+    targetRect.bottom <= scrollRect.bottom - scrollFixedFooter &&
+    targetRect.left >= scrollRect.left &&
+    targetRect.right <= scrollRect.right;
+
+  let { targetRect, scrollRect } = getRects();
+
+  if (isVisible({ targetRect, scrollRect })) {
+    return;
+  }
+
+  // Determine scroll container for adjustments
+
+  // First try native scrollIntoView - it will find and scroll the correct container
+  target.scrollIntoView();
+
+  if (scrollFixedHeader) {
+    // Remeasure after initial scroll
+    ({ targetRect, scrollRect } = getRects());
+
+    // Adjust for fixed headers
+    const deltaTop = targetRect.top - (scrollRect.top + scrollFixedHeader);
+    if (deltaTop < 0) {
+      scrollContainer.scrollBy({ top: deltaTop });
+    }
+  }
+
+  if (scrollFixedFooter) {
+    // Remeasure again after header adjustment
+    ({ targetRect, scrollRect } = getRects());
+
+    // Adjust for fixed footers
+    const deltaBottom = targetRect.bottom - (scrollRect.bottom - scrollFixedFooter);
+    if (deltaBottom > 0) {
+      scrollContainer.scrollBy({ top: deltaBottom });
+    }
+  }
+}

src/platform/packages/shared/kbn-ftr-common-functional-ui-services/services/web_element_wrapper/scroll_into_view_if_necessary.ts

@@ -14,8 +14,9 @@ import { PNG } from 'pngjs';
 import cheerio from 'cheerio';
 import { subj as testSubjSelector } from '@kbn/test-subj-selector';
 import type { ToolingLog } from '@kbn/tooling-log';
+import { APP_MAIN_SCROLL_CONTAINER_ID } from '@kbn/core-chrome-layout-constants';
 import type { CustomCheerio, CustomCheerioStatic } from './custom_cheerio_api';
-// @ts-ignore not supported yet
+
 import { scrollIntoViewIfNecessary } from './scroll_into_view_if_necessary';
 import { Browsers } from '../remote/browsers';
 
@@ -199,9 +200,9 @@ export class WebElementWrapper {
    *
    * @return {Promise<void>}
    */
-  public async click(topOffset?: number) {
+  public async click(topOffsetOrOptions?: number | { topOffset?: number; bottomOffset?: number }) {
     await this.retryCall(async function click(wrapper) {
-      await wrapper.scrollIntoViewIfNecessary(topOffset);
+      await wrapper.scrollIntoViewIfNecessary(topOffsetOrOptions);
       await wrapper._webElement.click();
     });
   }
@@ -780,6 +781,7 @@ export class WebElementWrapper {
     await this.driver.executeScript(
       scrollIntoViewIfNecessary,
       this._webElement,
+      APP_MAIN_SCROLL_CONTAINER_ID,
       topOffset || this.fixedHeaderHeight,
       bottomOffset
     );

src/platform/packages/shared/kbn-ftr-common-functional-ui-services/services/web_element_wrapper/web_element_wrapper.ts

@@ -14,5 +14,6 @@
     "@kbn/ftr-common-functional-services",
     "@kbn/std",
     "@kbn/expect",
+    "@kbn/core-chrome-layout-constants",
   ]
 }

src/platform/packages/shared/kbn-ftr-common-functional-ui-services/tsconfig.json

@@ -48,6 +48,7 @@ export class DashboardPageControls extends FtrService {
   private readonly retry = this.ctx.getService('retry');
   private readonly browser = this.ctx.getService('browser');
   private readonly testSubjects = this.ctx.getService('testSubjects');
+  private readonly panelActions = this.ctx.getService('dashboardPanelActions');
 
   private readonly common = this.ctx.getPageObject('common');
 
@@ -402,7 +403,11 @@ export class DashboardPageControls extends FtrService {
   public async optionsListOpenPopover(controlId: string) {
     this.log.debug(`Opening popover for Options List: ${controlId}`);
     await this.retry.try(async () => {
-      await this.testSubjects.click(`optionsList-control-${controlId}`);
+      await this.testSubjects.click(
+        `optionsList-control-${controlId}`,
+        500,
+        await this.panelActions.getContainerTopOffset()
+      );
       await this.retry.waitForWithTimeout('popover to open', 500, async () => {
         return await this.testSubjects.exists(`optionsList-control-popover`);
       });

src/platform/test/functional/page_objects/dashboard_page_controls.ts

@@ -8,6 +8,7 @@
  */
 
 import type { WebElementWrapper } from '@kbn/ftr-common-functional-ui-services';
+import { asyncMap } from '@kbn/std';
 import { FtrService } from '../../ftr_provider_context';
 
 const ACTION_SHOW_CONFIG_PANEL_SUBJ = 'embeddablePanelAction-ACTION_SHOW_CONFIG_PANEL';
@@ -32,7 +33,6 @@ export class DashboardPanelActionsService extends FtrService {
   private readonly find = this.ctx.getService('find');
   private readonly inspector = this.ctx.getService('inspector');
   private readonly testSubjects = this.ctx.getService('testSubjects');
-  private readonly browser = this.ctx.getService('browser');
 
   private readonly header = this.ctx.getPageObject('header');
   private readonly common = this.ctx.getPageObject('common');
@@ -47,10 +47,26 @@ export class DashboardPanelActionsService extends FtrService {
   }
 
   async getDashboardContainerTopOffset() {
-    return (
-      (await (await this.testSubjects.find('dashboardContainer')).getPosition()).y +
-      DASHBOARD_MARGIN_SIZE
-    );
+    const fixedHeaders = (
+      await Promise.all([
+        // global fixed eui headers, TODO: remove when Kibana switched to grid layout
+        this.find.allByCssSelector('[data-fixed-header="true"]', 500),
+        // fixed header with actions from project navigation
+        this.find.allByCssSelector('[data-test-subj="kibanaProjectHeaderActionMenu"]', 500),
+        // sticky unified search bar
+        this.find.allByCssSelector('[data-test-subj="globalQueryBar"]', 500),
+      ])
+    ).flat();
+
+    let fixedHeaderHeight = 0;
+    await asyncMap(fixedHeaders, async (header) => {
+      const headerHeight = (await header.getSize()).height;
+      fixedHeaderHeight += headerHeight;
+    });
+
+    const additionalOffsetForFloatingHoverActions = 32;
+
+    return fixedHeaderHeight + DASHBOARD_MARGIN_SIZE + additionalOffsetForFloatingHoverActions;
   }
 
   async getCanvasContainerTopOffset() {
@@ -70,17 +86,10 @@ export class DashboardPanelActionsService extends FtrService {
   async scrollPanelIntoView(wrapper?: WebElementWrapper) {
     this.log.debug(`scrollPanelIntoView`);
     wrapper = wrapper || (await this.getPanelWrapper());
-    const yOffset = (await wrapper.getPosition()).y;
-    await this.browser.execute(`
-        const scrollY = window.scrollY;
-        window.scrollBy(0, scrollY - ${yOffset});
-      `);
 
     const containerTop = await this.getContainerTopOffset();
 
-    await wrapper.moveMouseTo({
-      topOffset: containerTop,
-    });
+    await wrapper.moveMouseTo({ topOffset: containerTop });
   }
 
   async toggleContextMenu(wrapper?: WebElementWrapper) {

src/platform/test/functional/services/dashboard/panel_actions.ts

@@ -346,7 +346,9 @@ export function AddCisIntegrationFormPageProvider({
     if (credentialType === 'cloud_connectors') {
       credentialTypeValue = 'cloud_connector';
     }
-    await testSubjects.click(AWS_CREDENTIAL_SELECTOR);
+    await testSubjects.click(AWS_CREDENTIAL_SELECTOR, undefined, {
+      bottomOffset: 100 /* account for fixed footer to decide if need to scroll down */,
+    });
     await selectValue(AWS_CREDENTIAL_SELECTOR, credentialTypeValue);
   };