Fix full screen toggle button when panel is expanded (#13320) (#13363)

* Add failing tests

* Fix style issues with full screen toggle

src/core_plugins/kibana/public/dashboard/dashboard.html

@@ -7,8 +7,8 @@
       class="exitFullScreenMode"
       ng-click="exitFullScreenMode()"
     >
-      <span class="exitFullScreenModeLogo"></span>
-      <span class="exitFullScreenModeText">
+      <span class="exitFullScreenModeLogo" data-test-subj="exitFullScreenModeLogo"></span>
+      <span class="exitFullScreenModeText" data-test-subj="exitFullScreenModeText">
         Exit full screen
         <span class="kuiIcon fa fa-angle-left"></span>
       </span>

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -19,6 +19,7 @@
   padding: 0;
   border: none;
   background: none;
+  z-index: 5;
 }
 
 

src/ui/public/styles/base.less

@@ -133,7 +133,6 @@ a {
 .app-container {
   > * {
     position: relative;
-    z-index: 0;
   }
 
   .kibana-nav-options {

test/functional/apps/dashboard/_dashboard.js

@@ -220,8 +220,57 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
+    describe('full screen mode', () => {
+      it('option not available in edit mode', async () => {
+        const exists = await PageObjects.dashboard.fullScreenModeMenuItemExists();
+        expect(exists).to.be(false);
+      });
+
+      it('available in view mode', async () => {
+        await PageObjects.dashboard.saveDashboard('full screen test');
+        const exists = await PageObjects.dashboard.fullScreenModeMenuItemExists();
+        expect(exists).to.be(true);
+      });
+
+      it('hides the chrome', async () => {
+        let isChromeVisible = await PageObjects.common.isChromeVisible();
+        expect(isChromeVisible).to.be(true);
+
+        await PageObjects.dashboard.clickFullScreenMode();
+
+        await retry.try(async () => {
+          isChromeVisible = await PageObjects.common.isChromeVisible();
+          expect(isChromeVisible).to.be(false);
+        });
+      });
+
+      it('displays exit full screen logo button', async () => {
+        const exists = await PageObjects.dashboard.exitFullScreenLogoButtonExists();
+        expect(exists).to.be(true);
+      });
+
+      it('displays exit full screen logo button when panel is expanded', async () => {
+        await PageObjects.dashboard.toggleExpandPanel();
+
+        const exists = await PageObjects.dashboard.exitFullScreenTextButtonExists();
+        expect(exists).to.be(true);
+      });
+
+      it('exits when the text button is clicked on', async () => {
+        const logoButton = await PageObjects.dashboard.getExitFullScreenLogoButton();
+        await remote.moveMouseTo(logoButton);
+        await PageObjects.dashboard.clickExitFullScreenTextButton();
+
+        await retry.try(async () => {
+          const isChromeVisible = await PageObjects.common.isChromeVisible();
+          expect(isChromeVisible).to.be(true);
+        });
+      });
+    });
+
     describe('add new visualization link', () => {
       it('adds a new visualization', async () => {
+        await PageObjects.dashboard.clickEdit();
         await PageObjects.dashboard.clickAddVisualization();
         await PageObjects.dashboard.clickAddNewVisualizationLink();
         await PageObjects.visualize.clickAreaChart();

test/functional/page_objects/dashboard_page.js

@@ -33,6 +33,39 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
       return logstash;
     }
 
+    async clickFullScreenMode() {
+      log.debug(`clickFullScreenMode`);
+      await testSubjects.click('dashboardFullScreenMode');
+    }
+
+    async fullScreenModeMenuItemExists() {
+      return await testSubjects.exists('dashboardFullScreenMode');
+    }
+
+    async exitFullScreenTextButtonExists() {
+      return await testSubjects.exists('exitFullScreenModeText');
+    }
+
+    async getExitFullScreenTextButton() {
+      return await testSubjects.find('exitFullScreenModeText');
+    }
+
+    async exitFullScreenLogoButtonExists() {
+      return await testSubjects.exists('exitFullScreenModeLogo');
+    }
+
+    async getExitFullScreenLogoButton() {
+      return await testSubjects.find('exitFullScreenModeLogo');
+    }
+
+    async clickExitFullScreenLogoButton() {
+      await testSubjects.click('exitFullScreenModeLogo');
+    }
+
+    async clickExitFullScreenTextButton() {
+      await testSubjects.click('exitFullScreenModeText');
+    }
+
     /**
      * Returns true if already on the dashboard landing page (that page doesn't have a link to itself).
      * @returns {Promise<boolean>}