[7.x] [Maps] disable style forms when they are not applied due to other style settings (#55858)

x-pack/legacy/plugins/maps/public/layers/styles/_index.scss

@@ -1,4 +1,4 @@
 @import './components/color_gradient';
-@import './vector/components/static_dynamic_style_row';
+@import './vector/components/style_prop_editor';
 @import './vector/components/color/color_stops';
 @import './vector/components/symbol/icon_select';

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/_style_prop_editor.scss

@@ -0,0 +1,3 @@
+.mapStyleFormDisabledTooltip {
+  width: 100%;
+}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js

@@ -8,6 +8,13 @@ import { i18n } from '@kbn/i18n';
 
 import { VECTOR_STYLES } from '../vector_style_defaults';
 
+export function getDisabledByMessage(styleName) {
+  return i18n.translate('xpack.maps.styles.vector.disabledByMessage', {
+    defaultMessage: `Set '{styleLabel}' to enable`,
+    values: { styleLabel: getVectorStyleLabel(styleName) },
+  });
+}
+
 export function getVectorStyleLabel(styleName) {
   switch (styleName) {
     case VECTOR_STYLES.FILL_COLOR:

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_border_size_editor.js

@@ -6,9 +6,9 @@
 
 import React from 'react';
 
-import { EuiFormRow, EuiSelect } from '@elastic/eui';
+import { EuiFormRow, EuiSelect, EuiToolTip } from '@elastic/eui';
 import { LABEL_BORDER_SIZES, VECTOR_STYLES } from '../../vector_style_defaults';
-import { getVectorStyleLabel } from '../get_vector_style_label';
+import { getVectorStyleLabel, getDisabledByMessage } from '../get_vector_style_label';
 import { i18n } from '@kbn/i18n';
 
 const options = [
@@ -38,20 +38,26 @@ const options = [
   },
 ];
 
-export function VectorStyleLabelBorderSizeEditor({ handlePropertyChange, styleProperty }) {
+export function VectorStyleLabelBorderSizeEditor({
+  disabled,
+  disabledBy,
+  handlePropertyChange,
+  styleProperty,
+}) {
   function onChange(e) {
     const styleDescriptor = {
       options: { size: e.target.value },
     };
     handlePropertyChange(styleProperty.getStyleName(), styleDescriptor);
   }
 
-  return (
+  const labelBorderSizeForm = (
     <EuiFormRow
       label={getVectorStyleLabel(VECTOR_STYLES.LABEL_BORDER_SIZE)}
       display="columnCompressed"
     >
       <EuiSelect
+        disabled={disabled}
         options={options}
         value={styleProperty.getOptions().size}
         onChange={onChange}
@@ -62,4 +68,17 @@ export function VectorStyleLabelBorderSizeEditor({ handlePropertyChange, stylePr
       />
     </EuiFormRow>
   );
+
+  if (!disabled) {
+    return labelBorderSizeForm;
+  }
+
+  return (
+    <EuiToolTip
+      anchorClassName="mapStyleFormDisabledTooltip"
+      content={getDisabledByMessage(disabledBy)}
+    >
+      {labelBorderSizeForm}
+    </EuiToolTip>
+  );
 }

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js

@@ -5,8 +5,15 @@
  */
 
 import React, { Component, Fragment } from 'react';
-import { getVectorStyleLabel } from './get_vector_style_label';
-import { EuiFormRow, EuiSelect } from '@elastic/eui';
+import { getVectorStyleLabel, getDisabledByMessage } from './get_vector_style_label';
+import {
+  EuiFormRow,
+  EuiSelect,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldText,
+  EuiToolTip,
+} from '@elastic/eui';
 import { VectorStyle } from '../vector_style';
 import { i18n } from '@kbn/i18n';
 
@@ -69,7 +76,7 @@ export class StylePropEditor extends Component {
             : VectorStyle.STYLE_TYPE.STATIC
         }
         onChange={this._onTypeToggle}
-        disabled={this.props.fields.length === 0}
+        disabled={this.props.disabled || this.props.fields.length === 0}
         aria-label={i18n.translate('xpack.maps.styles.staticDynamicSelect.ariaLabel', {
           defaultMessage: 'Select to style by fixed value or by data value',
         })}
@@ -83,17 +90,35 @@ export class StylePropEditor extends Component {
       this._onFieldMetaOptionsChange
     );
 
+    const staticDynamicSelect = this.renderStaticDynamicSelect();
+
+    const stylePropertyForm = this.props.disabled ? (
+      <EuiToolTip
+        anchorClassName="mapStyleFormDisabledTooltip"
+        content={getDisabledByMessage(this.props.disabledBy)}
+      >
+        <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFieldText compressed disabled />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiToolTip>
+    ) : (
+      <Fragment>
+        {React.cloneElement(this.props.children, {
+          staticDynamicSelect,
+        })}
+        {fieldMetaOptionsPopover}
+      </Fragment>
+    );
+
     return (
       <EuiFormRow
         label={getVectorStyleLabel(this.props.styleProperty.getStyleName())}
         display="rowCompressed"
       >
-        <Fragment>
-          {React.cloneElement(this.props.children, {
-            staticDynamicSelect: this.renderStaticDynamicSelect(),
-          })}
-          {fieldMetaOptionsPopover}
-        </Fragment>
+        {stylePropertyForm}
       </EuiFormRow>
     );
   }

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/vector_style_symbolize_as_editor.js

@@ -6,11 +6,12 @@
 
 import React from 'react';
 
-import { EuiFormRow, EuiButtonGroup } from '@elastic/eui';
+import { EuiFormRow, EuiButtonGroup, EuiToolTip } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { SYMBOLIZE_AS_TYPES } from '../../../../../../common/constants';
 import { VECTOR_STYLES } from '../../vector_style_defaults';
+import { getDisabledByMessage } from '../get_vector_style_label';
 
 const SYMBOLIZE_AS_OPTIONS = [
   {
@@ -27,7 +28,12 @@ const SYMBOLIZE_AS_OPTIONS = [
   },
 ];
 
-export function VectorStyleSymbolizeAsEditor({ styleProperty, handlePropertyChange }) {
+export function VectorStyleSymbolizeAsEditor({
+  disabled,
+  disabledBy,
+  styleProperty,
+  handlePropertyChange,
+}) {
   const styleOptions = styleProperty.getOptions();
   const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ id }) => {
     return id === styleOptions.value;
@@ -42,14 +48,15 @@ export function VectorStyleSymbolizeAsEditor({ styleProperty, handlePropertyChan
     handlePropertyChange(VECTOR_STYLES.SYMBOLIZE_AS, styleDescriptor);
   };
 
-  return (
+  const symbolizeAsForm = (
     <EuiFormRow
       label={i18n.translate('xpack.maps.vector.symbolLabel', {
         defaultMessage: 'Symbol type',
       })}
       display="columnCompressed"
     >
       <EuiButtonGroup
+        isDisabled={disabled}
         buttonSize="compressed"
         options={SYMBOLIZE_AS_OPTIONS}
         idSelected={selectedOption ? selectedOption.id : undefined}
@@ -58,4 +65,17 @@ export function VectorStyleSymbolizeAsEditor({ styleProperty, handlePropertyChan
       />
     </EuiFormRow>
   );
+
+  if (!disabled) {
+    return symbolizeAsForm;
+  }
+
+  return (
+    <EuiToolTip
+      anchorClassName="mapStyleFormDisabledTooltip"
+      content={getDisabledByMessage(disabledBy)}
+    >
+      {symbolizeAsForm}
+    </EuiToolTip>
+  );
 }