add button to set to current view

elastic · Apr 24, 2020 · 29b8810 · 29b8810
1 parent 1e63dc7
commit 29b8810
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git a/x-pack/plugins/maps/public/connected_components/map_settings_panel/index.ts b/x-pack/plugins/maps/public/connected_components/map_settings_panel/index.ts
@@ -10,13 +10,20 @@ import { FLYOUT_STATE } from '../../reducers/ui';
 import { MapStoreState } from '../../reducers/store';
 import { MapSettingsPanel } from './map_settings_panel';
 import { rollbackMapSettings, updateMapSetting } from '../../actions/map_actions';
-import { getMapSettings, hasMapSettingsChanges } from '../../selectors/map_selectors';
+import {
+  getMapCenter,
+  getMapSettings,
+  getMapZoom,
+  hasMapSettingsChanges,
+} from '../../selectors/map_selectors';
 import { updateFlyout } from '../../actions/ui_actions';
 
 function mapStateToProps(state: MapStoreState) {
   return {
-    settings: getMapSettings(state),
+    center: getMapCenter(state),
     hasMapSettingsChanges: hasMapSettingsChanges(state),
+    settings: getMapSettings(state),
+    zoom: getMapZoom(state),
   };
 }
 

diff --git a/x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -20,21 +20,26 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { MapSettings } from '../../reducers/map';
 import { NavigationPanel } from './navigation_panel';
 import { SpatialFiltersPanel } from './spatial_filters_panel';
+import { MapCenter } from '../../../common/descriptor_types';
 
 interface Props {
   cancelChanges: () => void;
+  center: MapCenter;
   hasMapSettingsChanges: boolean;
   keepChanges: () => void;
   settings: MapSettings;
   updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
+  zoom: number;
 }
 
 export function MapSettingsPanel({
   cancelChanges,
+  center,
   hasMapSettingsChanges,
   keepChanges,
   settings,
   updateMapSetting,
+  zoom,
 }: Props) {
   // TODO move common text like Cancel and Close to common i18n translation
   const closeBtnLabel = hasMapSettingsChanges
@@ -60,7 +65,12 @@ export function MapSettingsPanel({
 
       <div className="mapLayerPanel__body">
         <div className="mapLayerPanel__bodyOverflow">
-          <NavigationPanel settings={settings} updateMapSetting={updateMapSetting} />
+          <NavigationPanel
+            center={center}
+            settings={settings}
+            updateMapSetting={updateMapSetting}
+            zoom={zoom}
+          />
           <EuiSpacer size="s" />
           <SpatialFiltersPanel settings={settings} updateMapSetting={updateMapSetting} />
         </div>

diff --git a/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx b/x-pack/plugins/maps/public/connected_components/map_settings_panel/navigation_panel.tsx
@@ -6,7 +6,10 @@
 
 import React, { ChangeEvent } from 'react';
 import {
+  EuiButtonEmpty,
   EuiFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiFormRow,
   EuiPanel,
   EuiRadioGroup,
@@ -18,12 +21,15 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { MapSettings } from '../../reducers/map';
 import { ValidatedDualRange, Value } from '../../../../../../src/plugins/kibana_react/public';
 import { INITIAL_LOCATION, MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
+import { MapCenter } from '../../../common/descriptor_types';
 // @ts-ignore
 import { ValidatedRange } from '../../components/validated_range';
 
 interface Props {
+  center: MapCenter;
   settings: MapSettings;
   updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
+  zoom: number;
 }
 
 const initialLocationOptions = [
@@ -47,7 +53,7 @@ const initialLocationOptions = [
   },
 ];
 
-export function NavigationPanel({ settings, updateMapSetting }: Props) {
+export function NavigationPanel({ center, settings, updateMapSetting, zoom }: Props) {
   const onZoomChange = (value: Value) => {
     updateMapSetting('minZoom', Math.max(MIN_ZOOM, parseInt(value[0] as string, 10)));
     updateMapSetting('maxZoom', Math.min(MAX_ZOOM, parseInt(value[1] as string, 10)));
@@ -85,6 +91,12 @@ export function NavigationPanel({ settings, updateMapSetting }: Props) {
     updateMapSetting('initialZoom', value);
   };
 
+  const useCurrentView = () => {
+    updateMapSetting('initialLat', center.lat);
+    updateMapSetting('initialLon', center.lon);
+    updateMapSetting('initialZoom', Math.round(zoom));
+  };
+
   function renderInitialLocationInputs() {
     if (settings.initialLocation === INITIAL_LOCATION.LAST_SAVED_LOCATION) {
       return null;
@@ -116,6 +128,16 @@ export function NavigationPanel({ settings, updateMapSetting }: Props) {
 
     return (
       <>
+        <EuiFlexGroup justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={useCurrentView}>
+              <FormattedMessage
+                id="xpack.maps.mapSettingsPanel.useCurrentViewBtnLabel"
+                defaultMessage="Set to current view"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
         <EuiFormRow
           label={i18n.translate('xpack.maps.mapSettingsPanel.initialLatLabel', {
             defaultMessage: 'Initial latitude',