move settings button to top map chrome

elastic · Apr 20, 2020 · 71e7d7a · 71e7d7a
1 parent 1abe6b9
commit 71e7d7a
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 68 deletions.
diff --git a/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts b/x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts
@@ -5,6 +5,7 @@
  */
 
 import { AnyAction } from 'redux';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FLYOUT_STATE } from '../../../../../plugins/maps/public/reducers/ui';
 
 export function updateFlyout(display: FLYOUT_STATE): AnyAction;

diff --git a/x-pack/legacy/plugins/maps/public/actions/ui_actions.js b/x-pack/legacy/plugins/maps/public/actions/ui_actions.js
@@ -19,6 +19,10 @@ import {
 } from '../../../../../plugins/maps/public/actions/ui_actions';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 export * from '../../../../../plugins/maps/public/actions/ui_actions';
+import { getFlyoutDisplay } from '../selectors/ui_selectors';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { FLYOUT_STATE } from '../../../../../plugins/maps/public/reducers/ui';
+import { setSelectedLayer, trackMapSettings } from './map_actions';
 
 export function exitFullScreen() {
   return {
@@ -33,6 +37,17 @@ export function updateFlyout(display) {
     display,
   };
 }
+export function openMapSettings() {
+  return (dispatch, getState) => {
+    const flyoutDisplay = getFlyoutDisplay(getState());
+    if (flyoutDisplay === FLYOUT_STATE.MAP_SETTINGS_PANEL) {
+      return;
+    }
+    dispatch(setSelectedLayer(null));
+    dispatch(trackMapSettings());
+    dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
+  };
+}
 export function closeSetView() {
   return {
     type: CLOSE_SET_VIEW,

diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js
@@ -50,8 +50,9 @@ import {
   setReadOnly,
   setIsLayerTOCOpen,
   setOpenTOCDetails,
+  openMapSettings,
 } from '../actions/ui_actions';
-import { getIsFullScreen } from '../selectors/ui_selectors';
+import { getIsFullScreen, getFlyoutDisplay } from '../selectors/ui_selectors';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { copyPersistentState } from '../../../../../plugins/maps/public/reducers/util';
 import {
@@ -447,6 +448,7 @@ app.controller(
 
     $scope.isFullScreen = false;
     $scope.isSaveDisabled = false;
+    $scope.isOpenSettingsDisabled = false;
     function handleStoreChanges(store) {
       const nextIsFullScreen = getIsFullScreen(store.getState());
       if (nextIsFullScreen !== $scope.isFullScreen) {
@@ -468,6 +470,14 @@ app.controller(
           $scope.isSaveDisabled = nextIsSaveDisabled;
         });
       }
+
+      const flyoutDisplay = getFlyoutDisplay(store.getState());
+      const nextIsOpenSettingsDisabled = flyoutDisplay !== FLYOUT_STATE.NONE;
+      if (nextIsOpenSettingsDisabled !== $scope.isOpenSettingsDisabled) {
+        $scope.$evalAsync(() => {
+          $scope.isOpenSettingsDisabled = nextIsOpenSettingsDisabled;
+        });
+      }
     }
 
     $scope.$on('$destroy', () => {
@@ -645,6 +655,22 @@ app.controller(
             },
           ]
         : []),
+      {
+        id: 'mapSettings',
+        label: i18n.translate('xpack.maps.mapController.openSettingsButtonLabel', {
+          defaultMessage: `Settings`,
+        }),
+        description: i18n.translate('xpack.maps.mapController.openSettingsDescription', {
+          defaultMessage: `Open settings`,
+        }),
+        testId: 'openSettingsButton',
+        disableButton() {
+          return $scope.isOpenSettingsDisabled;
+        },
+        run() {
+          store.dispatch(openMapSettings());
+        },
+      },
     ];
   }
 );
diff --git a/.../public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/.../public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
@@ -9,7 +9,7 @@ import { LayerControl } from './view';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { FLYOUT_STATE } from '../../../../../../../plugins/maps/public/reducers/ui';
 import { updateFlyout, setIsLayerTOCOpen } from '../../../actions/ui_actions';
-import { setSelectedLayer, trackMapSettings } from '../../../actions/map_actions';
+import { setSelectedLayer } from '../../../actions/map_actions';
 import {
   getIsReadOnly,
   getIsLayerTOCOpen,
@@ -38,11 +38,6 @@ function mapDispatchToProps(dispatch) {
     openLayerTOC: () => {
       dispatch(setIsLayerTOCOpen(true));
     },
-    openMapSettings: async () => {
-      await dispatch(setSelectedLayer(null));
-      dispatch(trackMapSettings());
-      dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
-    },
   };
 }
 

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
@@ -58,7 +58,6 @@ export function LayerControl({
   openLayerTOC,
   layerList,
   isFlyoutOpen,
-  openMapSettings,
 }) {
   if (!isLayerTOCOpen) {
     const hasErrors = layerList.some(layer => {
@@ -81,12 +80,7 @@ export function LayerControl({
     );
   }
 
-  const openMapSettingsLabel = i18n.translate('xpack.maps.layerControl.openMapSettingsLabel', {
-    defaultMessage: 'Edit map settings',
-  });
-
   let addLayer;
-  let mapSettingsBtn;
   if (!isReadOnly) {
     addLayer = (
       <Fragment>
@@ -106,21 +100,6 @@ export function LayerControl({
         </EuiButton>
       </Fragment>
     );
-    mapSettingsBtn = (
-      <EuiFlexItem grow={false}>
-        <EuiToolTip delay="long" content={openMapSettingsLabel}>
-          <EuiButtonIcon
-            isDisabled={isFlyoutOpen}
-            className="mapLayerControl__openMapSettingsButton"
-            onClick={openMapSettings}
-            iconType="gear"
-            color="text"
-            aria-label={openMapSettingsLabel}
-            data-test-subj="mapOpenMapSettingsButton"
-          />
-        </EuiToolTip>
-      </EuiFlexItem>
-    );
   }
 
   return (
@@ -147,7 +126,6 @@ export function LayerControl({
                 </h2>
               </EuiTitle>
             </EuiFlexItem>
-            {mapSettingsBtn}
             <EuiFlexItem grow={false}>
               <EuiToolTip
                 delay="long"

diff --git a/...legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js b/...legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
@@ -19,7 +19,6 @@ const defaultProps = {
   showAddLayerWizard: () => {},
   closeLayerTOC: () => {},
   openLayerTOC: () => {},
-  openMapSettings: () => {},
   isLayerTOCOpen: true,
   layerList: [],
   isFlyoutOpen: false,