[Maps] Add clone layer to layer actions (elastic#33853) (elastic#34062)

* [Maps] Add clone layer to layer actions * remove console statement * do not show clone action when isReadOnly * clean up * combine getLayerList uses into single getLayerById function * update jest snapshots
snide · Mar 28, 2019 · 81d131a · 81d131a
1 parent 4ca61c0
commit 81d131a
Show file tree

Hide file tree

Showing 10 changed files with 263 additions and 71 deletions.
diff --git a/x-pack/plugins/maps/public/actions/store_actions.js b/x-pack/plugins/maps/public/actions/store_actions.js
@@ -69,6 +69,12 @@ function getLayerLoadingCallbacks(dispatch, layerId) {
   };
 }
 
+function getLayerById(layerId, state) {
+  return getLayerList(state).find(layer => {
+    return layerId === layer.getId();
+  });
+}
+
 async function syncDataForAllLayers(getState, dispatch, dataFilters) {
   const state = getState();
   const layerList = getLayerList(state);
@@ -119,6 +125,18 @@ export function replaceLayerList(newLayerList) {
   };
 }
 
+export function cloneLayer(layerId) {
+  return async (dispatch, getState) => {
+    const layer = getLayerById(layerId, getState());
+    if (!layer) {
+      return;
+    }
+
+    const clonedDescriptor = await layer.cloneDescriptor();
+    dispatch(addLayer(clonedDescriptor));
+  };
+}
+
 export function addLayer(layerDescriptor) {
   return (dispatch, getState) => {
     const isMapReady = getMapReady(getState());
@@ -161,9 +179,7 @@ export function toggleLayerVisible(layerId) {
   return async (dispatch, getState) => {
     //if the current-state is invisible, we also want to sync data
     //e.g. if a layer was invisible at start-up, it won't have any data loaded
-    const layer = getLayerList(getState()).find(layer => {
-      return layerId === layer.getId();
-    });
+    const layer = getLayerById(layerId, getState());
     if (!layer) {
       return;
     }
@@ -336,9 +352,7 @@ export function clearMouseCoordinates() {
 
 export function fitToLayerExtent(layerId) {
   return async function (dispatch, getState) {
-    const targetLayer = getLayerList(getState()).find(layer => {
-      return layer.getId() === layerId;
-    });
+    const targetLayer = getLayerById(layerId, getState());
 
     if (targetLayer) {
       const dataFilters = getDataFilters(getState());
@@ -431,9 +445,7 @@ export function updateSourceProp(layerId, propName, value) {
 
 export function syncDataForLayer(layerId) {
   return async (dispatch, getState) => {
-    const targetLayer = getLayerList(getState()).find(layer => {
-      return layer.getId() === layerId;
-    });
+    const targetLayer = getLayerById(layerId, getState());
     if (targetLayer) {
       const dataFilters = getDataFilters(getState());
       const loadingFunctions = getLayerLoadingCallbacks(dispatch, layerId);
@@ -492,9 +504,7 @@ export function removeSelectedLayer() {
 
 export function removeLayer(layerId) {
   return (dispatch, getState) => {
-    const layerGettingRemoved = getLayerList(getState()).find(layer => {
-      return layerId === layer.getId();
-    });
+    const layerGettingRemoved = getLayerById(layerId, getState());
     if (!layerGettingRemoved) {
       return;
     }
@@ -546,9 +556,7 @@ export function triggerRefreshTimer() {
 
 export function clearMissingStyleProperties(layerId) {
   return async (dispatch, getState) => {
-    const targetLayer = getLayerList(getState()).find(layer => {
-      return layer.getId() === layerId;
-    });
+    const targetLayer = getLayerById(layerId, getState());
     if (!targetLayer) {
       return;
     }

diff --git a/...mponents/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap b/...mponents/widget_overlay/layer_control/layer_toc/toc_entry/__snapshots__/view.test.js.snap
@@ -16,6 +16,7 @@ exports[`TOCEntry is rendered 1`] = `
       grow={false}
     >
       <LayerTocActions
+        cloneLayer={[Function]}
         displayName="layer 1"
         fitToBounds={[Function]}
         layer={
@@ -90,8 +91,10 @@ exports[`TOCEntry props isReadOnly 1`] = `
       grow={false}
     >
       <LayerTocActions
+        cloneLayer={[Function]}
         displayName="layer 1"
         fitToBounds={[Function]}
+        isReadOnly={true}
         layer={
           Object {
             "getDisplayName": [Function],

diff --git a/.../plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/index.js b/.../plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/index.js
@@ -12,7 +12,8 @@ import {
   fitToLayerExtent,
   setSelectedLayer,
   toggleLayerVisible,
-  removeTransientLayer
+  removeTransientLayer,
+  cloneLayer,
 } from '../../../../../actions/store_actions';
 
 import { hasDirtyState, getSelectedLayer } from '../../../../../selectors/map_selectors';
@@ -40,8 +41,11 @@ function mapDispatchToProps(dispatch) {
     toggleVisible: layerId => {
       dispatch(toggleLayerVisible(layerId));
     },
-    fitToBounds: (layerId) => {
+    fitToBounds: layerId => {
       dispatch(fitToLayerExtent(layerId));
+    },
+    cloneLayer: layerId => {
+      dispatch(cloneLayer(layerId));
     }
   });
 }

diff --git a/...k/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js b/...k/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
@@ -144,6 +144,7 @@ export class TOCEntry extends React.Component {
 
   _renderLayerHeader() {
     const {
+      cloneLayer,
       isReadOnly,
       layer,
       zoom,
@@ -181,6 +182,10 @@ export class TOCEntry extends React.Component {
               toggleVisible(layer.getId());
             }}
             displayName={this.state.displayName}
+            cloneLayer={() => {
+              cloneLayer(layer.getId());
+            }}
+            isReadOnly={this.props.isReadOnly}
           />
         </EuiFlexItem>
         <EuiFlexItem>

diff --git a/x-pack/plugins/maps/public/shared/components/__snapshots__/layer_toc_actions.test.js.snap b/x-pack/plugins/maps/public/shared/components/__snapshots__/layer_toc_actions.test.js.snap
@@ -54,6 +54,15 @@ exports[`LayerTocActions is rendered 1`] = `
               "name": "Hide layer",
               "onClick": [Function],
             },
+            Object {
+              "data-test-subj": "cloneLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="copy"
+              />,
+              "name": "Clone layer",
+              "onClick": [Function],
+            },
           ],
           "title": "Layer actions",
         },
@@ -117,6 +126,15 @@ exports[`LayerTocActions should disable fit to data when supportsFitToBounds is
               "name": "Hide layer",
               "onClick": [Function],
             },
+            Object {
+              "data-test-subj": "cloneLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="copy"
+              />,
+              "name": "Clone layer",
+              "onClick": [Function],
+            },
           ],
           "title": "Layer actions",
         },
@@ -151,6 +169,78 @@ exports[`LayerTocActions should display spinner when layer is loading 1`] = `
   ownFocus={false}
   panelPaddingSize="none"
   withTitle={true}
+>
+  <EuiContextMenu
+    data-test-subj="layerTocActionsPanellayer1"
+    initialPanelId={0}
+    panels={
+      Array [
+        Object {
+          "id": 0,
+          "items": Array [
+            Object {
+              "data-test-subj": "fitToBoundsButton",
+              "disabled": false,
+              "icon": <EuiIcon
+                size="m"
+                type="search"
+              />,
+              "name": "Fit to data",
+              "onClick": [Function],
+              "toolTipContent": null,
+            },
+            Object {
+              "data-test-subj": "layerVisibilityToggleButton",
+              "icon": <EuiIcon
+                size="m"
+                type="eye"
+              />,
+              "name": "Hide layer",
+              "onClick": [Function],
+            },
+            Object {
+              "data-test-subj": "cloneLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="copy"
+              />,
+              "name": "Clone layer",
+              "onClick": [Function],
+            },
+          ],
+          "title": "Layer actions",
+        },
+      ]
+    }
+  />
+</EuiPopover>
+`;
+
+exports[`LayerTocActions should not show edit actions in read only mode 1`] = `
+<EuiPopover
+  anchorPosition="leftUp"
+  button={
+    <EuiButtonEmpty
+      color="text"
+      data-test-subj="layerTocActionsPanelToggleButtonlayer1"
+      flush="left"
+      iconSide="left"
+      onClick={[Function]}
+      size="xs"
+      type="button"
+    >
+      <div>
+        icon mock
+      </div>
+    </EuiButtonEmpty>
+  }
+  closePopover={[Function]}
+  hasArrow={true}
+  id="contextMenu"
+  isOpen={false}
+  ownFocus={false}
+  panelPaddingSize="none"
+  withTitle={true}
 >
   <EuiContextMenu
     data-test-subj="layerTocActionsPanellayer1"
@@ -250,6 +340,15 @@ exports[`LayerTocActions should provide feedback when layer is not visible becau
               "name": "Hide layer",
               "onClick": [Function],
             },
+            Object {
+              "data-test-subj": "cloneLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="copy"
+              />,
+              "name": "Clone layer",
+              "onClick": [Function],
+            },
           ],
           "title": "Layer actions",
         },
@@ -313,6 +412,15 @@ exports[`LayerTocActions should show visible toggle when layer is not visible 1`
               "name": "Show layer",
               "onClick": [Function],
             },
+            Object {
+              "data-test-subj": "cloneLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="copy"
+              />,
+              "name": "Clone layer",
+              "onClick": [Function],
+            },
           ],
           "title": "Layer actions",
         },
@@ -380,6 +488,15 @@ exports[`LayerTocActions should show warning when layer has errors 1`] = `
               "name": "Hide layer",
               "onClick": [Function],
             },
+            Object {
+              "data-test-subj": "cloneLayerButton",
+              "icon": <EuiIcon
+                size="m"
+                type="copy"
+              />,
+              "name": "Clone layer",
+              "onClick": [Function],
+            },
           ],
           "title": "Layer actions",
         },