From 161b07ab4a69b3664e5795304371fe9ee1bd1ab1 Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Mon, 7 Aug 2017 09:14:33 -0400
Subject: [PATCH] Fix full screen toggle button when panel is expanded (#13320)

* Add failing tests

* Fix style issues with full screen toggle
---
 .../kibana/public/dashboard/dashboard.html    |  4 +-
 .../kibana/public/dashboard/styles/index.less |  1 +
 src/ui/public/styles/base.less                |  1 -
 test/functional/apps/dashboard/_dashboard.js  | 49 +++++++++++++++++++
 .../functional/page_objects/dashboard_page.js | 33 +++++++++++++
 5 files changed, 85 insertions(+), 3 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.html b/src/core_plugins/kibana/public/dashboard/dashboard.html
index adf2797a6af38..4fdcd23a8710c 100644
--- a/src/core_plugins/kibana/public/dashboard/dashboard.html
+++ b/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>
diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
index ff46b18b6ca69..c2b9a024d82f5 100644
--- a/src/core_plugins/kibana/public/dashboard/styles/index.less
+++ b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -19,6 +19,7 @@
   padding: 0;
   border: none;
   background: none;
+  z-index: 5;
 }
 
 
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 9c0598e5b60a7..fb49d3de3d262 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -133,7 +133,6 @@ a {
 .app-container {
   > * {
     position: relative;
-    z-index: 0;
   }
 
   .kibana-nav-options {
diff --git a/test/functional/apps/dashboard/_dashboard.js b/test/functional/apps/dashboard/_dashboard.js
index 3ae4ea1476175..0c1df9a6b0ab3 100644
--- a/test/functional/apps/dashboard/_dashboard.js
+++ b/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();
diff --git a/test/functional/page_objects/dashboard_page.js b/test/functional/page_objects/dashboard_page.js
index dc0b537a2a03a..603f0f73b3be0 100644
--- a/test/functional/page_objects/dashboard_page.js
+++ b/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>}