[maps] fix Label border color is not removed from legend when disabled (

elastic#122705)
KOTungseth · Jan 11, 2022 · a5a5db4 · a5a5db4
1 parent cc2e3f3
commit a5a5db4
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx
@@ -48,8 +48,10 @@ import { IStyleProperty } from '../properties/style_property';
 import { SymbolizeAsProperty } from '../properties/symbolize_as_property';
 import { LabelBorderSizeProperty } from '../properties/label_border_size_property';
 import { StaticTextProperty } from '../properties/static_text_property';
+import { DynamicTextProperty } from '../properties/dynamic_text_property';
 import { StaticSizeProperty } from '../properties/static_size_property';
 import { IVectorLayer } from '../../../layers/vector_layer';
+import { getHasLabel } from '../style_util';
 
 export interface StyleProperties {
   [key: string]: IStyleProperty<StylePropertyOptions>;
@@ -167,14 +169,6 @@ export class VectorStyleEditor extends Component<Props, State> {
     return iconSize.isDynamic() || (iconSize as StaticSizeProperty).getOptions().size > 0;
   }
 
-  _hasLabel() {
-    const label = this.props.styleProperties[VECTOR_STYLES.LABEL_TEXT];
-    return label.isDynamic()
-      ? label.isComplete()
-      : (label as StaticTextProperty).getOptions().value != null &&
-          (label as StaticTextProperty).getOptions().value.length;
-  }
-
   _hasLabelBorder() {
     const labelBorderSize = this.props.styleProperties[
       VECTOR_STYLES.LABEL_BORDER_SIZE
@@ -258,7 +252,11 @@ export class VectorStyleEditor extends Component<Props, State> {
   }
 
   _renderLabelProperties() {
-    const hasLabel = this._hasLabel();
+    const hasLabel = getHasLabel(
+      this.props.styleProperties[VECTOR_STYLES.LABEL_TEXT] as
+        | StaticTextProperty
+        | DynamicTextProperty
+    );
     const hasLabelBorder = this._hasLabelBorder();
     return (
       <Fragment>

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts b/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts
@@ -8,6 +8,8 @@
 import { i18n } from '@kbn/i18n';
 import { MB_LOOKUP_FUNCTION, VECTOR_SHAPE_TYPE, VECTOR_STYLES } from '../../../../common/constants';
 import { Category } from '../../../../common/descriptor_types';
+import { StaticTextProperty } from './properties/static_text_property';
+import { DynamicTextProperty } from './properties/dynamic_text_property';
 
 export function getOtherCategoryLabel() {
   return i18n.translate('xpack.maps.styles.categorical.otherCategoryLabel', {
@@ -107,3 +109,10 @@ export function makeMbClampedNumberExpression({
     fallback,
   ];
 }
+
+export function getHasLabel(label: StaticTextProperty | DynamicTextProperty) {
+  return label.isDynamic()
+    ? label.isComplete()
+    : (label as StaticTextProperty).getOptions().value != null &&
+        (label as StaticTextProperty).getOptions().value.length;
+}
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx
@@ -10,7 +10,12 @@ import React, { CSSProperties, ReactElement } from 'react';
 import { FeatureIdentifier, Map as MbMap } from '@kbn/mapbox-gl';
 import { FeatureCollection } from 'geojson';
 import { StyleProperties, VectorStyleEditor } from './components/vector_style_editor';
-import { getDefaultStaticProperties, LINE_STYLES, POLYGON_STYLES } from './vector_style_defaults';
+import {
+  getDefaultStaticProperties,
+  LABEL_STYLES,
+  LINE_STYLES,
+  POLYGON_STYLES,
+} from './vector_style_defaults';
 import {
   DEFAULT_ICON,
   FIELD_ORIGIN,
@@ -25,7 +30,7 @@ import {
 import { StyleMeta } from './style_meta';
 import { VectorIcon } from './components/legend/vector_icon';
 import { VectorStyleLegend } from './components/legend/vector_style_legend';
-import { isOnlySingleFeatureType } from './style_util';
+import { isOnlySingleFeatureType, getHasLabel } from './style_util';
 import { StaticStyleProperty } from './properties/static_style_property';
 import { DynamicStyleProperty, IDynamicStyleProperty } from './properties/dynamic_style_property';
 import { DynamicSizeProperty } from './properties/dynamic_size_property';
@@ -745,12 +750,18 @@ export class VectorStyle implements IVectorStyle {
   }
 
   _getLegendDetailStyleProperties = () => {
+    const hasLabel = getHasLabel(this._labelStyleProperty);
     return this.getDynamicPropertiesArray().filter((styleProperty) => {
       const styleName = styleProperty.getStyleName();
       if ([VECTOR_STYLES.ICON_ORIENTATION, VECTOR_STYLES.LABEL_TEXT].includes(styleName)) {
         return false;
       }
 
+      if (!hasLabel && LABEL_STYLES.includes(styleName)) {
+        // do not render legend for label styles when there is no label
+        return false;
+      }
+
       if (this._getIsLinesOnly()) {
         return LINE_STYLES.includes(styleName);
       }

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/vector_style_defaults.ts b/x-pack/plugins/maps/public/classes/styles/vector/vector_style_defaults.ts
@@ -37,6 +37,12 @@ export const POLYGON_STYLES = [
   VECTOR_STYLES.LINE_COLOR,
   VECTOR_STYLES.LINE_WIDTH,
 ];
+export const LABEL_STYLES = [
+  VECTOR_STYLES.LABEL_SIZE,
+  VECTOR_STYLES.LABEL_COLOR,
+  VECTOR_STYLES.LABEL_BORDER_COLOR,
+  VECTOR_STYLES.LABEL_BORDER_SIZE,
+];
 
 export function getDefaultStaticProperties(
   mapColors: string[] = []