[Maps] Full screen (#29751) (#29910)

* [Maps] full screen

* toggle fullScreen class

* remove unneeded class

* more specific class name

* change i18n name space to common.ui

* clean up scss imports

src/legacy/core_plugins/kibana/public/dashboard/_index.scss

@@ -23,9 +23,6 @@
   @import 'viewport/index';
 }
 
-// Imports outside of theme selector don't change between light/dark modes
-@import 'components/index';
-
 // Must be outside of theme selector because it lives in a portal
 @import 'panel/panel_header/panel_options_menu_form';
 

src/legacy/core_plugins/kibana/public/dashboard/viewport/dashboard_viewport.js

@@ -20,7 +20,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DashboardGrid } from '../grid';
-import { ExitFullScreenButton } from '../components/exit_full_screen_button';
+import { ExitFullScreenButton } from 'ui/exit_full_screen';
 
 export function DashboardViewport({
   maximizedPanelId,

src/ui/public/_index.scss

@@ -18,6 +18,7 @@
 @import './error_allow_explicit_index/index';
 @import './error_auto_create_index/index';
 @import './error_url_overflow/index';
+@import './exit_full_screen/index';
 @import './field_editor/index';
 @import './inspector/index';
 @import './markdown/index';

src/ui/public/exit_full_screen/exit_full_screen_button.js

@@ -57,7 +57,7 @@ class ExitFullScreenButtonUi extends PureComponent {
         <EuiScreenReaderOnly>
           <p aria-live="polite">
             <FormattedMessage
-              id="kbn.dashboard.exitFullScreenButton.fullScreenModeDescription"
+              id="common.ui.exitFullScreenButton.fullScreenModeDescription"
               defaultMessage="In full screen mode, press ESC to exit."
             />
           </p>
@@ -68,7 +68,7 @@ class ExitFullScreenButtonUi extends PureComponent {
           <KuiButton
             type="hollow"
             aria-label={intl.formatMessage({
-              id: 'kbn.dashboard.exitFullScreenButton.exitFullScreenModeButtonAreaLabel',
+              id: 'common.ui.exitFullScreenButton.exitFullScreenModeButtonAreaLabel',
               defaultMessage: 'Exit full screen mode',
             })}
             className="dshExitFullScreenButton__mode"
@@ -77,7 +77,7 @@ class ExitFullScreenButtonUi extends PureComponent {
             <span className="dshExitFullScreenButton__logo" data-test-subj="exitFullScreenModeLogo"/>
             <span className="dshExitFullScreenButton__text" data-test-subj="exitFullScreenModeText">
               <FormattedMessage
-                id="kbn.dashboard.exitFullScreenButton.exitFullScreenModeButtonLabel"
+                id="common.ui.exitFullScreenButton.exitFullScreenModeButtonLabel"
                 defaultMessage="Exit full screen"
               />
               <span className="kuiIcon fa fa-angle-left"/>

src/ui/public/exit_full_screen/index.js

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { ExitFullScreenButton } from './exit_full_screen_button';

x-pack/plugins/maps/public/_main.scss

@@ -6,6 +6,10 @@
   overflow: hidden;
 }
 
+.mapFullScreen {
+  height: 100vh !important;
+}
+
 #react-maps-root {
   flex-grow: 1;
   display: flex;

x-pack/plugins/maps/public/angular/map.html

@@ -1,4 +1,4 @@
-<div id="maps-plugin">
+<div id="maps-plugin"  ng-class="{mapFullScreen: isFullScreen}">
   <div id="maps-top-nav">
     <div>
       <kbn-top-nav name="map" config="topNavMenu">

x-pack/plugins/maps/public/angular/map_controller.js

@@ -6,6 +6,7 @@
 
 import chrome from 'ui/chrome';
 import React from 'react';
+import { I18nProvider } from '@kbn/i18n/react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { applyTheme } from 'ui/theme';
@@ -20,8 +21,14 @@ import {
   replaceLayerList,
   setQuery,
 } from '../actions/store_actions';
-import { getIsDarkTheme, updateFlyout, FLYOUT_STATE } from '../store/ui';
-import {  getUniqueIndexPatternIds } from '../selectors/map_selectors';
+import {
+  getIsDarkTheme,
+  enableFullScreen,
+  getIsFullScreen,
+  updateFlyout,
+  FLYOUT_STATE
+} from '../store/ui';
+import { getUniqueIndexPatternIds } from '../selectors/map_selectors';
 import { Inspector } from 'ui/inspector';
 import { inspectorAdapters, indexPatternService } from '../kibana_services';
 import { SavedObjectSaveModal } from 'ui/saved_objects/components/saved_object_save_modal';
@@ -151,7 +158,9 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
     const root = document.getElementById(REACT_ANCHOR_DOM_ELEMENT_ID);
     render(
       <Provider store={store}>
-        <GisMap/>
+        <I18nProvider>
+          <GisMap/>
+        </I18nProvider>
       </Provider>,
       root);
   });
@@ -176,6 +185,7 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
     $scope.indexPatterns = indexPatterns;
   }
 
+  $scope.isFullScreen = false;
   function handleStoreChanges(store) {
     const state = store.getState();
 
@@ -185,6 +195,14 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
       updateTheme();
     }
 
+    const nextIsFullScreen = getIsFullScreen(store.getState());
+    if (nextIsFullScreen !== $scope.isFullScreen) {
+      // Must trigger digest cycle for angular top nav to redraw itself when isFullScreen changes
+      $scope.$evalAsync(() => {
+        $scope.isFullScreen = nextIsFullScreen;
+      });
+    }
+
     const nextIndexPatternIds = getUniqueIndexPatternIds(store.getState());
     if (nextIndexPatternIds !== prevIndexPatternIds) {
       prevIndexPatternIds = nextIndexPatternIds;
@@ -249,6 +267,15 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
   timefilter.disableAutoRefreshSelector();
   $scope.showDatePicker = true; // used by query-bar directive to enable timepikcer in query bar
   $scope.topNavMenu = [{
+    key: 'fullScreen',
+    description: 'Full screen',
+    testId: 'fullScreenMode',
+    run() {
+      getStore().then(store => {
+        store.dispatch(enableFullScreen());
+      });
+    }
+  }, {
     key: 'inspect',
     description: 'Open Inspector',
     testId: 'openInspectorButton',

x-pack/plugins/maps/public/components/gis_map/index.js

@@ -6,7 +6,7 @@
 
 import { connect } from 'react-redux';
 import { GisMap } from './view';
-import { getFlyoutDisplay, FLYOUT_STATE } from '../../store/ui';
+import { getFlyoutDisplay, getIsFullScreen, exitFullScreen, FLYOUT_STATE } from '../../store/ui';
 import { triggerRefreshTimer } from '../../actions/store_actions';
 import { getRefreshConfig } from '../../selectors/map_selectors';
 
@@ -16,6 +16,7 @@ function mapStateToProps(state = {}) {
     layerDetailsVisible: flyoutDisplay === FLYOUT_STATE.LAYER_PANEL,
     addLayerVisible: flyoutDisplay === FLYOUT_STATE.ADD_LAYER_WIZARD,
     noFlyoutVisible: flyoutDisplay === FLYOUT_STATE.NONE,
+    isFullScreen: getIsFullScreen(state),
     refreshConfig: getRefreshConfig(state),
   };
 }
@@ -23,6 +24,7 @@ function mapStateToProps(state = {}) {
 function mapDispatchToProps(dispatch) {
   return {
     triggerRefreshTimer: () => dispatch(triggerRefreshTimer()),
+    exitFullScreen: () => dispatch(exitFullScreen()),
   };
 }
 

x-pack/plugins/maps/public/components/gis_map/view.js

@@ -11,6 +11,7 @@ import { LayerPanel } from '../layer_panel/index';
 import { AddLayerPanel } from '../layer_addpanel/index';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Toasts } from '../toasts';
+import { ExitFullScreenButton } from 'ui/exit_full_screen';
 
 export class GisMap extends Component {
 
@@ -59,7 +60,9 @@ export class GisMap extends Component {
     const {
       layerDetailsVisible,
       addLayerVisible,
-      noFlyoutVisible
+      noFlyoutVisible,
+      isFullScreen,
+      exitFullScreen,
     } = this.props;
 
     let currentPanel;
@@ -76,6 +79,15 @@ export class GisMap extends Component {
         <LayerPanel/>
       );
     }
+
+    let exitFullScreenButton;
+    if (isFullScreen) {
+      exitFullScreenButton = (
+        <ExitFullScreenButton
+          onExitFullScreenMode={exitFullScreen}
+        />
+      );
+    }
     return (
       <EuiFlexGroup gutterSize="none" responsive={false}>
         <EuiFlexItem className="mapMapWrapper">
@@ -88,6 +100,7 @@ export class GisMap extends Component {
         </EuiFlexItem>
 
         <Toasts/>
+        {exitFullScreenButton}
       </EuiFlexGroup>
     );
   }

x-pack/plugins/maps/public/store/ui.js

@@ -12,6 +12,7 @@ export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
 export const CLOSE_SET_VIEW = 'CLOSE_SET_VIEW';
 export const OPEN_SET_VIEW = 'OPEN_SET_VIEW';
 export const UPDATE_IS_DARK_THEME = 'UPDATE_IS_DARK_THEME';
+export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
 export const FLYOUT_STATE = {
   NONE: 'NONE',
   LAYER_PANEL: 'LAYER_PANEL',
@@ -29,7 +30,8 @@ const INITIAL_STATE = {
   layerLoad: {
     status: LAYER_LOAD_STATE.inactive,
     time: Date()
-  }
+  },
+  isFullScreen: false,
 };
 
 // Reducer
@@ -52,6 +54,8 @@ function ui(state = INITIAL_STATE, action) {
       return { ...state, isSetViewOpen: false };
     case OPEN_SET_VIEW:
       return { ...state, isSetViewOpen: true };
+    case SET_FULL_SCREEN:
+      return { ...state, isFullScreen: action.isFullScreen };
     default:
       return state;
   }
@@ -80,11 +84,24 @@ export function updateIsDarkTheme(isDarkTheme) {
     isDarkTheme
   };
 }
+export function exitFullScreen() {
+  return {
+    type: SET_FULL_SCREEN,
+    isFullScreen: false
+  };
+}
+export function enableFullScreen() {
+  return {
+    type: SET_FULL_SCREEN,
+    isFullScreen: true
+  };
+}
 
 // Selectors
 export const getFlyoutDisplay = ({ ui }) => ui && ui.flyoutDisplay
   || INITIAL_STATE.flyoutDisplay;
 export const getIsDarkTheme = ({ ui }) => _.get(ui, 'isDarkTheme', INITIAL_STATE.isDarkTheme);
 export const getIsSetViewOpen = ({ ui }) => _.get(ui, 'isSetViewOpen', false);
+export const getIsFullScreen = ({ ui }) => _.get(ui, 'isFullScreen', false);
 
 export default ui;