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

* Remove panel wrapper element

* Fix functional tests to work without wrapper

* Remove duplicated code

* Re-add classes to right-justify in view mode

* Apply high z-index to children of floating header rather than parent

src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss

@@ -85,7 +85,9 @@
   right: 0;
   top: 0;
   left: 0;
-  z-index: $euiZLevel1;
+  * {
+    z-index: $euiZLevel1; // apply high z-index to all children
+  }
 }
 
 // OPTIONS MENU

src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx

@@ -154,7 +154,7 @@ export function PanelHeader({
 
   if (!showPanelBar) {
     return (
-      <div data-test-subj="dashboardPanelTitle__wrapper" className={classes}>
+      <div className={classes}>
         <PanelOptionsMenu
           getActionContextMenuPanel={getActionContextMenuPanel}
           isViewMode={isViewMode}
@@ -214,25 +214,23 @@ 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}
-          index={index}
-        />
-      </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}
+        index={index}
+      />
+    </figcaption>
   );
 }

test/functional/apps/dashboard_elements/controls/controls_callout.ts

@@ -39,7 +39,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         before(async () => {
           const panelCount = await dashboard.getPanelCount();
           if (panelCount > 0) {
-            const panels = await dashboard.getAllPanels();
+            const panels = await dashboard.getDashboardPanels();
             for (const panel of panels) {
               await dashboardPanelActions.removePanel(panel);
             }

test/functional/page_objects/dashboard_page.ts

@@ -566,7 +566,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
@@ -575,9 +577,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
@@ -606,11 +611,6 @@ export class DashboardPageObject extends FtrService {
     return panels.length;
   }
 
-  public async getAllPanels() {
-    this.log.debug('getAllPanels');
-    return await this.testSubjects.findAll('embeddablePanel');
-  }
-
   public getTestVisualizations() {
     return [
       { name: PIE_CHART_VIS_NAME, description: 'PieChart' },

x-pack/test/functional/apps/dashboard/group2/panel_titles.ts

@@ -41,7 +41,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.dashboard.saveDashboard(DASHBOARD_NAME);
     });
 
-    describe('panel titles - by value', () => {
+    describe('by value', () => {
       it('new panel by value has empty title', async () => {
         await PageObjects.lens.createAndAddLensFromDashboard({});
         const newPanelTitle = (await PageObjects.dashboard.getPanelTitles())[0];
@@ -103,7 +103,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);