feedback

x-pack/plugins/maps/public/connected_components/toolbar_overlay/_index.scss

@@ -13,6 +13,11 @@
   background-color: $euiColorEmptyShade !important;
   pointer-events: all;
 
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  max-width: 100%;
+
   &:enabled,
   &:enabled:hover,
   &:enabled:focus {

x-pack/plugins/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx

@@ -15,30 +15,24 @@ interface Props {
   fitToBounds: () => void;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface State {}
-
-// eslint-disable-next-line react/prefer-stateless-function
-export class FitToData extends Component<Props, State> {
-  render() {
-    if (this.props.layerList.length === 0) {
-      return null;
-    }
-
-    return (
-      <EuiButtonIcon
-        className="mapToolbarOverlay__button"
-        onClick={this.props.fitToBounds}
-        data-test-subj="fitToData"
-        iconType="search"
-        color="text"
-        aria-label={i18n.translate('xpack.maps.fitToData.fitButtonLabel', {
-          defaultMessage: 'Fit to data bounds',
-        })}
-        title={i18n.translate('xpack.maps.fitToData.fitAriaLabel', {
-          defaultMessage: 'Fit to data bounds',
-        })}
-      />
-    );
+export const FitToData: React.FunctionComponent<Props> = ({ layerList, fitToBounds }: Props) => {
+  if (layerList.length === 0) {
+    return null;
   }
-}
+
+  return (
+    <EuiButtonIcon
+      className="mapToolbarOverlay__button"
+      onClick={fitToBounds}
+      data-test-subj="fitToData"
+      iconType="search"
+      color="text"
+      aria-label={i18n.translate('xpack.maps.fitToData.fitButtonLabel', {
+        defaultMessage: 'Fit to data bounds',
+      })}
+      title={i18n.translate('xpack.maps.fitToData.fitAriaLabel', {
+        defaultMessage: 'Fit to data bounds',
+      })}
+    />
+  );
+};

x-pack/plugins/maps/public/connected_components/toolbar_overlay/toolbar_overlay.js

@@ -37,11 +37,11 @@ export class ToolbarOverlay extends React.Component {
           <SetViewControl />
         </EuiFlexItem>
 
-        {this._renderToolsControl()}
-
         <EuiFlexItem>
           <FitToData />
         </EuiFlexItem>
+
+        {this._renderToolsControl()}
       </EuiFlexGroup>
     );
   }

x-pack/plugins/maps/public/connected_components/toolbar_overlay/toolbar_overlay.test.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+import { ToolbarOverlay } from './toolbar_overlay';
+
+test('Must render zoom tools', async () => {
+  const component = shallow(<ToolbarOverlay />);
+  expect(component).toMatchSnapshot();
+});
+
+test('Must zoom tools and draw filter tools', async () => {
+  const component = shallow(<ToolbarOverlay addFilters={() => {}} geoFields={['coordinates']} />);
+  expect(component).toMatchSnapshot();
+});

x-pack/plugins/maps/public/selectors/map_selectors.js

@@ -256,9 +256,9 @@ export const getFittableLayers = createSelector(getLayerList, layerList => {
     //These are the only layer-types that implement bounding-box retrieval reliably
     //This will _not_ work if Maps will allow register custom layer types
     const isFittable =
-      layer.constructor.type === LAYER_TYPE.VECTOR ||
-      layer.constructor.type === LAYER_TYPE.BLENDED_VECTOR ||
-      layer.constructor.type === LAYER_TYPE.HEATMAP;
+      layer.getType() === LAYER_TYPE.VECTOR ||
+      layer.getType() === LAYER_TYPE.BLENDED_VECTOR ||
+      layer.getType() === LAYER_TYPE.HEATMAP;
 
     return isFittable && layer.isVisible();
   });