From 827c7c25923d92df898800773e90b7f392cef872 Mon Sep 17 00:00:00 2001
From: Nick Peihl <nick.peihl@elastic.co>
Date: Tue, 29 Mar 2022 18:51:10 -0400
Subject: [PATCH] Review feedback

---
 .../maps/public/classes/layers/layer.tsx      |   2 +-
 .../icon_map_select.test.tsx.snap             |   2 +
 .../symbol/icon_map_select.test.tsx           |   1 +
 .../components/symbol/icon_map_select.tsx     |   2 +-
 .../vector/components/symbol/icon_stops.js    | 231 +++++++++---------
 .../vector/components/vector_style_editor.tsx |   6 +-
 .../classes/styles/vector/vector_style.tsx    |   2 +-
 7 files changed, 123 insertions(+), 123 deletions(-)

diff --git a/x-pack/plugins/maps/public/classes/layers/layer.tsx b/x-pack/plugins/maps/public/classes/layers/layer.tsx
index 6fdd4202ce614..458a8a159a25d 100644
--- a/x-pack/plugins/maps/public/classes/layers/layer.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/layer.tsx
@@ -94,7 +94,7 @@ export interface ILayer {
   cloneDescriptor(): Promise<LayerDescriptor>;
   renderStyleEditor(
     onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void,
-    onCustomIconChange: (customIcons: CustomIcon[]) => void
+    onCustomIconsChange: (customIcons: CustomIcon[]) => void
   ): ReactElement<any> | null;
   getInFlightRequestTokens(): symbol[];
   getPrevRequestToken(dataId: string): symbol | undefined;
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_map_select.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_map_select.test.tsx.snap
index 23bfed7b58225..324e4d9dbd453 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_map_select.test.tsx.snap
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_map_select.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`Should not render icon map select when isCustomOnly 1`] = `
       ]
     }
     onChange={[Function]}
+    onCustomIconsChange={[Function]}
   />
 </Fragment>
 `;
@@ -84,6 +85,7 @@ exports[`Should render custom stops input when useCustomIconMap 1`] = `
       ]
     }
     onChange={[Function]}
+    onCustomIconsChange={[Function]}
   />
 </Fragment>
 `;
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.test.tsx
index ce3b60904034c..e569b0cabb753 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.test.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.test.tsx
@@ -60,6 +60,7 @@ const defaultProps = {
     },
   ],
   customIcons: [],
+  onCustomIconsChange: () => {},
 };
 
 test('Should render default props', () => {
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.tsx
index 32b81446de991..37b6a9185ad71 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.tsx
@@ -38,7 +38,7 @@ interface Props {
   customIconStops?: IconStop[];
   iconPaletteId: string | null;
   customIcons: CustomIcon[];
-  onCustomIconsChange?: (customIcons: CustomIcon[]) => void;
+  onCustomIconsChange: (customIcons: CustomIcon[]) => void;
   onChange: ({ customIconStops, iconPaletteId, useCustomIconMap }: StyleOptionChanges) => void;
   styleProperty: IDynamicStyleProperty<IconDynamicOptions>;
   useCustomIconMap?: boolean;
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_stops.js b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_stops.js
index daa6a7f8201ef..2700a599c3aee 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_stops.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_stops.js
@@ -51,127 +51,128 @@ export function IconStops({
   onCustomIconsChange,
   customIcons,
 }) {
-  return iconStops.map(({ stop, icon, iconSource }, index) => {
-    const iconInfo =
-      iconSource === ICON_SOURCE.CUSTOM
-        ? customIcons.find(({ symbolId }) => symbolId === icon)
-        : getMakiSymbol(icon);
-    if (iconInfo === undefined) return;
-    const { svg, label } = iconInfo;
-    const onIconSelect = ({ selectedIconId }) => {
-      const newIconStops = [...iconStops];
-      newIconStops[index] = {
-        ...iconStops[index],
-        icon: selectedIconId,
+  return iconStops
+    .map(({ stop, icon, iconSource }, index) => {
+      const iconInfo =
+        iconSource === ICON_SOURCE.CUSTOM
+          ? customIcons.find(({ symbolId }) => symbolId === icon)
+          : getMakiSymbol(icon);
+      if (iconInfo === undefined) return;
+      const { svg, label } = iconInfo;
+      const onIconSelect = ({ selectedIconId }) => {
+        const newIconStops = [...iconStops];
+        newIconStops[index] = {
+          ...iconStops[index],
+          icon: selectedIconId,
+        };
+        onChange({ customStops: newIconStops });
       };
-      onChange({ customStops: newIconStops });
-    };
-    const onStopChange = (newStopValue) => {
-      const newIconStops = [...iconStops];
-      newIconStops[index] = {
-        ...iconStops[index],
-        stop: newStopValue,
+      const onStopChange = (newStopValue) => {
+        const newIconStops = [...iconStops];
+        newIconStops[index] = {
+          ...iconStops[index],
+          stop: newStopValue,
+        };
+        onChange({
+          customStops: newIconStops,
+          isInvalid: isDuplicateStop(newStopValue, iconStops),
+        });
       };
-      onChange({
-        customStops: newIconStops,
-        isInvalid: isDuplicateStop(newStopValue, iconStops),
-      });
-    };
-    const onAdd = () => {
-      onChange({
-        customStops: [
-          ...iconStops.slice(0, index + 1),
-          {
-            stop: '',
-            icon: getFirstUnusedSymbol(iconStops),
-          },
-          ...iconStops.slice(index + 1),
-        ],
-      });
-    };
-    const onRemove = () => {
-      onChange({
-        customStops: [...iconStops.slice(0, index), ...iconStops.slice(index + 1)],
-      });
-    };
+      const onAdd = () => {
+        onChange({
+          customStops: [
+            ...iconStops.slice(0, index + 1),
+            {
+              stop: '',
+              icon: getFirstUnusedSymbol(iconStops),
+            },
+            ...iconStops.slice(index + 1),
+          ],
+        });
+      };
+      const onRemove = () => {
+        onChange({
+          customStops: [...iconStops.slice(0, index), ...iconStops.slice(index + 1)],
+        });
+      };
+
+      let deleteButton;
+      if (iconStops.length > 2 && index !== 0) {
+        deleteButton = (
+          <EuiButtonIcon
+            iconType="trash"
+            color="danger"
+            aria-label={i18n.translate('xpack.maps.styles.iconStops.deleteButtonAriaLabel', {
+              defaultMessage: 'Delete',
+            })}
+            title={i18n.translate('xpack.maps.styles.iconStops.deleteButtonLabel', {
+              defaultMessage: 'Delete',
+            })}
+            onClick={onRemove}
+          />
+        );
+      }
 
-    let deleteButton;
-    if (iconStops.length > 2 && index !== 0) {
-      deleteButton = (
-        <EuiButtonIcon
-          iconType="trash"
-          color="danger"
-          aria-label={i18n.translate('xpack.maps.styles.iconStops.deleteButtonAriaLabel', {
-            defaultMessage: 'Delete',
-          })}
-          title={i18n.translate('xpack.maps.styles.iconStops.deleteButtonLabel', {
-            defaultMessage: 'Delete',
-          })}
-          onClick={onRemove}
-        />
+      const iconStopButtons = (
+        <div>
+          {deleteButton}
+          <EuiButtonIcon
+            iconType="plusInCircle"
+            color="primary"
+            aria-label="Add"
+            title="Add"
+            onClick={onAdd}
+          />
+        </div>
       );
-    }
 
-    const iconStopButtons = (
-      <div>
-        {deleteButton}
-        <EuiButtonIcon
-          iconType="plusInCircle"
-          color="primary"
-          aria-label="Add"
-          title="Add"
-          onClick={onAdd}
-        />
-      </div>
-    );
+      const errors = [];
+      // TODO check for duplicate values and add error messages here
 
-    const errors = [];
-    // TODO check for duplicate values and add error messages here
+      const stopInput =
+        index === 0 ? (
+          <EuiFieldText
+            aria-label={getOtherCategoryLabel()}
+            placeholder={getOtherCategoryLabel()}
+            disabled
+            compressed
+          />
+        ) : (
+          <StopInput
+            key={field.getName()} // force new component instance when field changes
+            field={field}
+            getValueSuggestions={getValueSuggestions}
+            value={stop}
+            onChange={onStopChange}
+          />
+        );
 
-    const stopInput =
-      index === 0 ? (
-        <EuiFieldText
-          aria-label={getOtherCategoryLabel()}
-          placeholder={getOtherCategoryLabel()}
-          disabled
-          compressed
-        />
-      ) : (
-        <StopInput
-          key={field.getName()} // force new component instance when field changes
-          field={field}
-          getValueSuggestions={getValueSuggestions}
-          value={stop}
-          onChange={onStopChange}
-        />
+      return (
+        <EuiFormRow
+          key={index}
+          className="mapColorStop"
+          isInvalid={errors.length !== 0}
+          error={errors}
+          display="rowCompressed"
+        >
+          <EuiFlexGroup alignItems="center" gutterSize="xs">
+            <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+              {stopInput}
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <IconSelect
+                onCustomIconsChange={onCustomIconsChange}
+                customIcons={customIcons}
+                onChange={onIconSelect}
+                icon={{ value: icon, svg, label }}
+                append={iconStopButtons}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
       );
-
-    return (
-      <EuiFormRow
-        key={index}
-        className="mapColorStop"
-        isInvalid={errors.length !== 0}
-        error={errors}
-        display="rowCompressed"
-      >
-        <EuiFlexGroup alignItems="center" gutterSize="xs">
-          <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
-            {stopInput}
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <IconSelect
-              onCustomIconsChange={onCustomIconsChange}
-              customIcons={customIcons}
-              onChange={onIconSelect}
-              icon={{ value: icon, svg, label }}
-              append={iconStopButtons}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFormRow>
-    );
-  })
-  .filter((stop) => {
-    return stop !== undefined;
-  });
+    })
+    .filter((stop) => {
+      return stop !== undefined;
+    });
 }
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
index 64a4f5b8072f6..4431cead9b0d1 100644
--- 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
@@ -167,10 +167,6 @@ export class VectorStyleEditor extends Component<Props, State> {
     this.props.handlePropertyChange(propertyName, styleDescriptor);
   };
 
-  _onCustomIconsChange = (icons: CustomIcon[]) => {
-    this.props.onCustomIconsChange(icons);
-  };
-
   _hasMarkerOrIcon() {
     const iconSize = this.props.styleProperties[VECTOR_STYLES.ICON_SIZE];
     return iconSize.isDynamic() || (iconSize as StaticSizeProperty).getOptions().size > 0;
@@ -402,7 +398,7 @@ export class VectorStyleEditor extends Component<Props, State> {
             customIcons={this.props.customIcons}
             onStaticStyleChange={this._onStaticStyleChange}
             onDynamicStyleChange={this._onDynamicStyleChange}
-            onCustomIconsChange={this._onCustomIconsChange}
+            onCustomIconsChange={this.props.onCustomIconsChange}
             styleProperty={
               this.props.styleProperties[VECTOR_STYLES.ICON] as IStyleProperty<
                 IconDynamicOptions | IconStaticOptions
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
index 282846fc81ecd..52209563e9807 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx
@@ -713,7 +713,7 @@ export class VectorStyle implements IVectorStyle {
 
   getIconSvg(symbolId: string) {
     const meta = this._getIconMeta(symbolId);
-    return meta ? meta.svg : undefined
+    return meta ? meta.svg : undefined;
   }
 
   _getSymbolId() {