Clean up Color and Icon map select components

x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js

@@ -89,7 +89,7 @@ export class ColorMapSelect extends Component {
   };
 
   _renderColorStopsInput() {
-    if (this.props.supportsAutoDomain && !this.props.useCustomColorMap) {
+    if (!this.props.isCustomOnly && !this.props.useCustomColorMap) {
       return null;
     }
 
@@ -122,17 +122,21 @@ export class ColorMapSelect extends Component {
   }
 
   _renderColorMapSelections() {
+    if (this.props.isCustomOnly) {
+      return null;
+    }
+
     const colorMapOptionsWithCustom = [
       {
         value: CUSTOM_COLOR_MAP,
         inputDisplay: this.props.customOptionLabel,
         'data-test-subj': `colorMapSelectOption_${CUSTOM_COLOR_MAP}`,
       },
-      ...(this.props.supportsAutoDomain ? this.props.colorMapOptions : []),
+      ...this.props.colorMapOptions,
     ];
 
     let valueOfSelected;
-    if (this.props.useCustomColorMap || !this.props.supportsAutoDomain) {
+    if (this.props.useCustomColorMap) {
       valueOfSelected = CUSTOM_COLOR_MAP;
     } else {
       valueOfSelected = this.props.colorMapOptions.find(
@@ -147,28 +151,29 @@ export class ColorMapSelect extends Component {
     ) : null;
 
     return (
-      <EuiFlexGroup gutterSize={'none'}>
-        {toggle}
-        <EuiFlexItem>
-          <EuiSuperSelect
-            disabled={!this.props.supportsAutoDomain}
-            compressed
-            options={colorMapOptionsWithCustom}
-            onChange={this._onColorMapSelect}
-            valueOfSelected={valueOfSelected}
-            hasDividers={true}
-            data-test-subj={`colorMapSelect_${this.props.styleProperty.getStyleName()}`}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <Fragment>
+        <EuiFlexGroup gutterSize={'none'}>
+          {toggle}
+          <EuiFlexItem>
+            <EuiSuperSelect
+              compressed
+              options={colorMapOptionsWithCustom}
+              onChange={this._onColorMapSelect}
+              valueOfSelected={valueOfSelected}
+              hasDividers={true}
+              data-test-subj={`colorMapSelect_${this.props.styleProperty.getStyleName()}`}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="s" />
+      </Fragment>
     );
   }
 
   render() {
     return (
       <Fragment>
         {this._renderColorMapSelections()}
-        <EuiSpacer size="s" />
         {this._renderColorStopsInput()}
       </Fragment>
     );

x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js

@@ -90,7 +90,7 @@ export function DynamicColorForm({
     if (styleProperty.isOrdinal()) {
       return (
         <ColorMapSelect
-          supportsAutoDomain={field.supportsAutoDomain}
+          isCustomOnly={!field.supportsAutoDomain}
           colorMapOptions={COLOR_GRADIENTS}
           customOptionLabel={i18n.translate('xpack.maps.style.customColorRampLabel', {
             defaultMessage: 'Custom color ramp',
@@ -100,9 +100,7 @@ export function DynamicColorForm({
           colorMapType={COLOR_MAP_TYPE.ORDINAL}
           color={styleOptions.color}
           customColorMap={styleOptions.customColorRamp}
-          useCustomColorMap={
-            !field.supportsAutoDomain || _.get(styleOptions, 'useCustomColorRamp', false)
-          }
+          useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
           styleProperty={styleProperty}
           showColorMapTypeToggle={showColorMapTypeToggle}
           swatches={swatches}
@@ -111,7 +109,7 @@ export function DynamicColorForm({
     } else if (styleProperty.isCategorical()) {
       return (
         <ColorMapSelect
-          supportsAutoDomain={field.supportsAutoDomain}
+          isCustomOnly={!field.supportsAutoDomain}
           colorMapOptions={COLOR_PALETTES}
           customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
             defaultMessage: 'Custom color palette',
@@ -121,9 +119,7 @@ export function DynamicColorForm({
           colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
           color={styleOptions.colorCategory}
           customColorMap={styleOptions.customColorPalette}
-          useCustomColorMap={
-            !field.supportsAutoDomain || _.get(styleOptions, 'useCustomColorPalette', false)
-          }
+          useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
           styleProperty={styleProperty}
           showColorMapTypeToggle={showColorMapTypeToggle}
           swatches={swatches}

x-pack/plugins/maps/public/classes/styles/vector/components/style_map_select.js

@@ -46,19 +46,16 @@ export class StyleMapSelect extends Component {
   };
 
   _renderCustomStopsInput() {
-    if (!this.props.useCustomMap) {
+    return !this.props.isCustomOnly && !this.props.useCustomMap
+      ? null
+      : this.props.renderCustomStopsInput(this._onCustomMapChange);
+  }
+
+  _renderMapSelect() {
+    if (this.props.isCustomOnly) {
       return null;
     }
 
-    return (
-      <Fragment>
-        <EuiSpacer size="s" />
-        {this.props.renderCustomStopsInput(this._onCustomMapChange)}
-      </Fragment>
-    );
-  }
-
-  render() {
     const mapOptionsWithCustom = [
       {
         value: CUSTOM_MAP,
@@ -87,6 +84,15 @@ export class StyleMapSelect extends Component {
           hasDividers={true}
           compressed
         />
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <Fragment>
+        {this._renderMapSelect()}
         {this._renderCustomStopsInput()}
       </Fragment>
     );

x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js

@@ -36,17 +36,20 @@ export function DynamicIconForm({
   };
 
   function renderIconMapSelect() {
-    if (!styleOptions.field || !styleOptions.field.name) {
+    const field = styleProperty.getField();
+    if (!field) {
       return null;
     }
 
     return (
       <IconMapSelect
         {...styleOptions}
+        useCustomIconMap={_.get(styleOptions, 'useCustomColorRamp', false)}
         styleProperty={styleProperty}
         onChange={onIconMapChange}
         isDarkMode={isDarkMode}
         symbolOptions={symbolOptions}
+        isCustomOnly={!field.supportsAutoDomain()}
       />
     );
   }

x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js

@@ -8,8 +8,8 @@ import React from 'react';
 
 import { StyleMapSelect } from '../style_map_select';
 import { i18n } from '@kbn/i18n';
-import { getIconPaletteOptions } from '../../symbol_utils';
 import { IconStops } from './icon_stops';
+import { getIconPaletteOptions } from '../../symbol_utils';
 
 export function IconMapSelect({
   customIconStops,
@@ -19,6 +19,7 @@ export function IconMapSelect({
   styleProperty,
   symbolOptions,
   useCustomIconMap,
+  isCustomOnly,
 }) {
   function onMapSelectChange({ customMapStops, selectedMapId, useCustomMap }) {
     onChange({
@@ -41,20 +42,18 @@ export function IconMapSelect({
     );
   }
 
-  const field = styleProperty.getField();
-  const defaultOptions = field.supportsAutoDomain() ? getIconPaletteOptions(isDarkMode) : [];
-
   return (
     <StyleMapSelect
       onChange={onMapSelectChange}
       customOptionLabel={i18n.translate('xpack.maps.styles.icon.customMapLabel', {
         defaultMessage: 'Custom icon palette',
       })}
-      options={defaultOptions}
+      options={getIconPaletteOptions(isDarkMode)}
       customMapStops={customIconStops}
-      useCustomMap={field.supportsAutoDomain() ? useCustomIconMap : true}
+      useCustomMap={useCustomIconMap}
       selectedMapId={iconPaletteId}
       renderCustomStopsInput={renderCustomIconStopsInput}
+      isCustomOnly={isCustomOnly}
     />
   );
 }