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

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" 
     

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);
       });
     });
 

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);
       });
     });
 

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');

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()"

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);
+      });
+    });
+  });
+}

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 () {

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');
     }