[7.17] [Dashboard] Fix z-index of embPanel__header--floater (#136463

) (#152390) # Backport This will backport the following commits from `main` to `7.17`: - [[Dashboard] Fix `z-index` of `embPanel__header--floater` (#136463)](#136463)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Feb 28, 2023 · bab843f · bab843f
1 parent 4e6fb42
commit bab843f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 27 deletions.
diff --git a/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss b/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss
@@ -81,7 +81,9 @@
   right: 0;
   top: 0;
   left: 0;
-  z-index: $euiZLevel1;
+  * {
+    z-index: $euiZLevel1; // apply high z-index to all children
+  }
 }
 
 // OPTIONS MENU

diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -153,7 +153,7 @@ export function PanelHeader({
 
   if (!showPanelBar) {
     return (
-      <div data-test-subj="dashboardPanelTitle__wrapper" className={classes}>
+      <div className={classes}>
         <PanelOptionsMenu
           getActionContextMenuPanel={getActionContextMenuPanel}
           isViewMode={isViewMode}
@@ -212,24 +212,22 @@ export function PanelHeader({
   };
 
   return (
-    <span data-test-subj="dashboardPanelTitle__wrapper">
-      <figcaption
-        className={classes}
-        data-test-subj={`embeddablePanelHeading-${(title || '').replace(/\s/g, '')}`}
-      >
-        <h2 data-test-subj="dashboardPanelTitle" className="embPanel__title embPanel__dragger">
-          <EuiScreenReaderOnly>{getAriaLabel()}</EuiScreenReaderOnly>
-          {renderTitle()}
-          {renderBadges(badges, embeddable)}
-        </h2>
-        {renderNotifications(notifications, embeddable)}
-        <PanelOptionsMenu
-          isViewMode={isViewMode}
-          getActionContextMenuPanel={getActionContextMenuPanel}
-          closeContextMenu={closeContextMenu}
-          title={title}
-        />
-      </figcaption>
-    </span>
+    <figcaption
+      className={classes}
+      data-test-subj={`embeddablePanelHeading-${(title || '').replace(/\s/g, '')}`}
+    >
+      <h2 data-test-subj="dashboardPanelTitle" className="embPanel__title embPanel__dragger">
+        <EuiScreenReaderOnly>{getAriaLabel()}</EuiScreenReaderOnly>
+        {renderTitle()}
+        {renderBadges(badges, embeddable)}
+      </h2>
+      {renderNotifications(notifications, embeddable)}
+      <PanelOptionsMenu
+        isViewMode={isViewMode}
+        getActionContextMenuPanel={getActionContextMenuPanel}
+        closeContextMenu={closeContextMenu}
+        title={title}
+      />
+    </figcaption>
   );
 }
diff --git a/test/functional/page_objects/dashboard_page.ts b/test/functional/page_objects/dashboard_page.ts
@@ -525,7 +525,9 @@ export class DashboardPageObject extends FtrService {
     return await Promise.all(titleObjects.map(async (title) => await title.getVisibleText()));
   }
 
-  // returns an array of Boolean values - true if the panel title is visible in view mode, false if it is not
+  /**
+   * @return An array of boolean values - true if the panel title is visible in view mode, false if it is not
+   */
   public async getVisibilityOfPanelTitles() {
     this.log.debug('in getVisibilityOfPanels');
     // only works if the dashboard is in view mode
@@ -534,9 +536,12 @@ export class DashboardPageObject extends FtrService {
       await this.clickCancelOutOfEditMode();
     }
     const visibilities: boolean[] = [];
-    const titleObjects = await this.testSubjects.findAll('dashboardPanelTitle__wrapper');
-    for (const titleObject of titleObjects) {
-      const exists = !(await titleObject.elementHasClass('embPanel__header--floater'));
+    const panels = await this.getDashboardPanels();
+    for (const panel of panels) {
+      const exists = await this.find.descendantExistsByCssSelector(
+        'figcaption.embPanel__header',
+        panel
+      );
       visibilities.push(exists);
     }
     // return to edit mode if a switch to view mode above was necessary

diff --git a/x-pack/test/functional/apps/dashboard/panel_titles.ts b/x-pack/test/functional/apps/dashboard/panel_titles.ts
@@ -39,7 +39,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.dashboard.saveDashboard(DASHBOARD_NAME);
     });
 
-    describe('panel titles - by value', () => {
+    describe('by value', () => {
       const clearUnsavedChanges = async () => {
         await retry.try(async () => {
           // avoid flaky test by surrounding in retry
@@ -110,7 +110,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
-    describe('panel titles - by reference', () => {
+    describe('by reference', () => {
       it('linking a by value panel with a custom title to the library will overwrite the custom title with the library title', async () => {
         await dashboardPanelActions.setCustomPanelTitle(CUSTOM_TITLE);
         await dashboardPanelActions.saveToLibrary(LIBRARY_TITLE_FOR_CUSTOM_TESTS);