hide top nav menu in full screen mode of maps and dashboard (#41672) (#…

…41731) * hide top nav menu in full screen mode of maps and dashboard * Fixed dashboard full screen mode and added full screen mode test to maps
elastic · Jul 23, 2019 · 8804085 · 8804085
1 parent 3d04609
commit 8804085
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 6 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
@@ -4,6 +4,7 @@
 >
   <!-- Local nav. -->
   <kbn-top-nav-v2 
+    ng-show="chrome.getVisible()"
     app-name="'dashboard'"
     config="topNavMenu" 
 

diff --git a/test/functional/apps/dashboard/embed_mode.js b/test/functional/apps/dashboard/embed_mode.js
@@ -30,7 +30,7 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('hides the chrome', async () => {
-      let isChromeVisible = await PageObjects.common.isChromeVisible();
+      const isChromeVisible = await PageObjects.common.isChromeVisible();
       expect(isChromeVisible).to.be(true);
 
       const currentUrl = await browser.getCurrentUrl();
@@ -40,8 +40,8 @@ export default function ({ getService, getPageObjects }) {
       await browser.get(newUrl.toString(), useTimeStamp);
 
       await retry.try(async () => {
-        isChromeVisible = await PageObjects.common.isChromeVisible();
-        expect(isChromeVisible).to.be(false);
+        const isChromeHidden = await PageObjects.common.isChromeHidden();
+        expect(isChromeHidden).to.be(true);
       });
     });
 

diff --git a/test/functional/apps/dashboard/full_screen_mode.js b/test/functional/apps/dashboard/full_screen_mode.js
@@ -43,14 +43,14 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('hides the chrome', async () => {
-      let isChromeVisible = await PageObjects.common.isChromeVisible();
+      const 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);
+        const isChromeHidden = await PageObjects.common.isChromeHidden();
+        expect(isChromeHidden).to.be(true);
       });
     });
 

diff --git a/test/functional/page_objects/common_page.js b/test/functional/page_objects/common_page.js
@@ -336,6 +336,12 @@ export function CommonPageProvider({ getService, getPageObjects }) {
       return globalNavShown && topNavShown;
     }
 
+    async isChromeHidden() {
+      const globalNavShown = await globalNav.exists();
+      const topNavShown = await testSubjects.exists('top-nav');
+      return !globalNavShown && !topNavShown;
+    }
+
     async waitForTopNavToBeVisible() {
       await retry.try(async () => {
         const isNavVisible = await testSubjects.exists('top-nav');

diff --git a/x-pack/legacy/plugins/maps/public/angular/map.html b/x-pack/legacy/plugins/maps/public/angular/map.html
@@ -2,6 +2,7 @@
   <div id="maps-top-nav">
     <div>
       <kbn-top-nav-v2 
+        ng-show="chrome.getVisible()"
         app-name="'maps'"
         config="topNavMenu"
         show-search-bar="chrome.getVisible()"

diff --git a/x-pack/test/functional/apps/maps/full_screen_mode.js b/x-pack/test/functional/apps/maps/full_screen_mode.js
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+
+export default function ({ getService, getPageObjects }) {
+  const PageObjects = getPageObjects(['maps', 'common']);
+  const browser = getService('browser');
+  const retry = getService('retry');
+
+  describe('full screen mode', () => {
+    before(async () => {
+      await PageObjects.maps.openNewMap();
+    });
+
+    it('full screen button should exist', async () => {
+      const exists = await PageObjects.maps.fullScreenModeMenuItemExists();
+      expect(exists).to.be(true);
+    });
+
+    it('hides the chrome', async () => {
+      const isChromeVisible = await PageObjects.common.isChromeVisible();
+      expect(isChromeVisible).to.be(true);
+
+      await PageObjects.maps.clickFullScreenMode();
+
+      await retry.try(async () => {
+        const isChromeHidden = await PageObjects.common.isChromeHidden();
+        expect(isChromeHidden).to.be(true);
+      });
+    });
+
+    it('displays exit full screen logo button', async () => {
+      const exists = await PageObjects.maps.exitFullScreenLogoButtonExists();
+      expect(exists).to.be(true);
+    });
+
+    it('exits when the text button is clicked on', async () => {
+      const logoButton = await PageObjects.maps.getExitFullScreenLogoButton();
+      await browser.moveMouseTo(logoButton);
+      await PageObjects.maps.clickExitFullScreenTextButton();
+
+      await retry.try(async () => {
+        const isChromeVisible = await PageObjects.common.isChromeVisible();
+        expect(isChromeVisible).to.be(true);
+      });
+    });
+  });
+}
diff --git a/x-pack/test/functional/apps/maps/index.js b/x-pack/test/functional/apps/maps/index.js
@@ -35,6 +35,7 @@ export default function ({ loadTestFile, getService }) {
       loadTestFile(require.resolve('./sample_data'));
       loadTestFile(require.resolve('./feature_controls/maps_security'));
       loadTestFile(require.resolve('./feature_controls/maps_spaces'));
+      loadTestFile(require.resolve('./full_screen_mode'));
     });
 
     describe('', function () {

diff --git a/x-pack/test/functional/page_objects/gis_page.js b/x-pack/test/functional/page_objects/gis_page.js
@@ -402,6 +402,27 @@ export function GisPageProvider({ getService, getPageObjects }) {
       return await testSubjects.getVisibleText(`layerErrorMessage`);
     }
 
+    async fullScreenModeMenuItemExists() {
+      return await testSubjects.exists('mapsFullScreenMode');
+    }
+
+    async clickFullScreenMode() {
+      log.debug(`clickFullScreenMode`);
+      await testSubjects.click('mapsFullScreenMode');
+    }
+
+    async exitFullScreenLogoButtonExists() {
+      return await testSubjects.exists('exitFullScreenModeLogo');
+    }
+
+    async getExitFullScreenLogoButton() {
+      return await testSubjects.find('exitFullScreenModeLogo');
+    }
+
+    async clickExitFullScreenTextButton() {
+      await testSubjects.click('exitFullScreenModeText');
+    }
+
     async openInspectorMapView() {
       await inspector.openInspectorView('inspectorViewChooserMap');
     }