[Maps] background color map setting (#83822)

* [Maps] background color map setting

* tslint and jest tests

* get eui theme from kbn/ui-shared-deps/theme

x-pack/plugins/maps/public/connected_components/map_container/_map_container.scss

@@ -1,5 +1,4 @@
 .mapMapWrapper {
-  background-color: $euiColorEmptyShade;
   position: relative;
 }
 

x-pack/plugins/maps/public/connected_components/map_container/index.ts

@@ -14,6 +14,7 @@ import {
   areLayersLoaded,
   getRefreshConfig,
   getMapInitError,
+  getMapSettings,
   getQueryableUniqueIndexPatternIds,
   isToolbarOverlayHidden,
 } from '../../selectors/map_selectors';
@@ -29,6 +30,7 @@ function mapStateToProps(state: MapStoreState) {
     mapInitError: getMapInitError(state),
     indexPatternIds: getQueryableUniqueIndexPatternIds(state),
     hideToolbarOverlay: isToolbarOverlayHidden(state),
+    backgroundColor: getMapSettings(state).backgroundColor,
   };
 }
 

x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx

@@ -37,6 +37,7 @@ const RENDER_COMPLETE_EVENT = 'renderComplete';
 
 interface Props {
   addFilters: ((filters: Filter[]) => Promise<void>) | null;
+  backgroundColor: string;
   getFilterActions?: () => Promise<Action[]>;
   getActionContext?: () => ActionExecutionContext;
   areLayersLoaded: boolean;
@@ -241,7 +242,10 @@ export class MapContainer extends Component<Props, State> {
         data-title={this.props.title}
         data-description={this.props.description}
       >
-        <EuiFlexItem className="mapMapWrapper">
+        <EuiFlexItem
+          className="mapMapWrapper"
+          style={{ backgroundColor: this.props.backgroundColor }}
+        >
           <MBMap
             addFilters={addFilters}
             getFilterActions={getFilterActions}

x-pack/plugins/maps/public/connected_components/map_settings_panel/map_chrome_panel.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 React from 'react';
+import { EuiFormRow, EuiPanel, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { MapSettings } from '../../reducers/map';
+import { MbValidatedColorPicker } from '../../classes/styles/vector/components/color/mb_validated_color_picker';
+
+interface Props {
+  settings: MapSettings;
+  updateMapSetting: (settingKey: string, settingValue: string | number | boolean) => void;
+}
+
+export function MapChromePanel({ settings, updateMapSetting }: Props) {
+  const onBackgroundColorChange = (color: string) => {
+    updateMapSetting('backgroundColor', color);
+  };
+
+  return (
+    <EuiPanel>
+      <EuiTitle size="xs">
+        <h5>
+          <FormattedMessage id="xpack.maps.mapSettingsPanel.mapTitle" defaultMessage="Map" />
+        </h5>
+      </EuiTitle>
+
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.mapSettingsPanel.backgroundColorLabel', {
+          defaultMessage: 'Background color',
+        })}
+        display="columnCompressed"
+      >
+        <MbValidatedColorPicker
+          color={settings.backgroundColor}
+          onChange={onBackgroundColorChange}
+        />
+      </EuiFormRow>
+    </EuiPanel>
+  );
+}

x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx

@@ -20,6 +20,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { MapSettings } from '../../reducers/map';
 import { NavigationPanel } from './navigation_panel';
 import { SpatialFiltersPanel } from './spatial_filters_panel';
+import { MapChromePanel } from './map_chrome_panel';
 import { MapCenter } from '../../../common/descriptor_types';
 
 interface Props {
@@ -65,6 +66,8 @@ export function MapSettingsPanel({
 
       <div className="mapLayerPanel__body">
         <div className="mapLayerPanel__bodyOverflow">
+          <MapChromePanel settings={settings} updateMapSetting={updateMapSetting} />
+          <EuiSpacer size="s" />
           <NavigationPanel
             center={center}
             settings={settings}

x-pack/plugins/maps/public/reducers/default_map_settings.ts

@@ -4,12 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
 import { INITIAL_LOCATION, MAX_ZOOM, MIN_ZOOM } from '../../common/constants';
 import { MapSettings } from './map';
 
 export function getDefaultMapSettings(): MapSettings {
   return {
     autoFitToDataBounds: false,
+    backgroundColor: euiThemeVars.euiColorEmptyShade,
     initialLocation: INITIAL_LOCATION.LAST_SAVED_LOCATION,
     fixedLocation: { lat: 0, lon: 0, zoom: 2 },
     browserLocation: { zoom: 2 },

x-pack/plugins/maps/public/reducers/map.d.ts

@@ -43,6 +43,7 @@ export type MapContext = {
 
 export type MapSettings = {
   autoFitToDataBounds: boolean;
+  backgroundColor: string;
   initialLocation: INITIAL_LOCATION;
   fixedLocation: {
     lat: number;