Added clickFeatureAction config to the Layer Level (#2488)

* added clickFeatureAction config

* reviewdog edits

* dogreview

* linting

* Revert "linting"

This reverts commit 702e1a9.

* mapview removed check

* pr comments

* PR comments

* removed accidental commit

* Update Map.js

* Update MapView.js

* Update MapView.js

* Update MapView.js

* unit tests for MapInteractions.js  - unit tests for zoom and showDetails Issue #2187

* unit tests for MapInteractions.js 

 - unit tests for zoom and showDetails Issue #2187
- resolved unit test issues

---------

Co-authored-by: Alona Kosobokova <alonakosobokova@MacBook-Pro-Alona.local>

src/js/models/maps/MapInteraction.js

@@ -28,7 +28,7 @@ define([
    * @since 2.27.0
    * @extends Backbone.Model
    */
-  var MapInteraction = Backbone.Model.extend(
+  const MapInteraction = Backbone.Model.extend(
     /** @lends MapInteraction.prototype */ {
       /**
        * The type of model this is.
@@ -163,7 +163,7 @@ define([
 
       /**
        * Handles a mouse click on the map. If the user has clicked on a feature,
-       * the feature is set as the 'clickedFeatures' attribute. If the map is
+       * the feature is set as the 'clickedFeatures' attribute. If the map or layer is
        * configured to show details when a feature is clicked, the feature is
        * also set as the 'selectedFeatures' attribute.
        * @param {MapInteraction} m - The MapInteraction model.
@@ -175,7 +175,12 @@ define([
         // Clone the models in hovered features and set them as clicked features
         const hoveredFeatures = this.get("hoveredFeatures").models;
         this.setClickedFeatures(hoveredFeatures);
-        const clickAction = this.get("mapModel")?.get("clickFeatureAction");
+        let clickAction = this.get("hoveredFeatures")
+          ?.models[0].get("mapAsset")
+          ?.get("clickFeatureAction");
+        if (clickAction == null) {
+          clickAction = this.get("mapModel")?.get("clickFeatureAction");
+        }
         if (clickAction === "showDetails") {
           this.selectFeatures(hoveredFeatures);
         } else if (clickAction === "zoom") {

src/js/models/maps/assets/MapAsset.js

@@ -108,6 +108,9 @@ define([
        * from the layer list.
        * @property {boolean} [showOpacitySlider = true] Set to true to show opacity slider
        * for the layer.
+       * @property {"showDetails"|"zoom"} [clickFeatureAction = null] The action to take when a user clicks on a feature on the layer. The
+       * available options are "showDetails" (show the feature details in the
+       * sidebar) or "zoom" (zoom to the feature's location).
        */
       defaults() {
         return {
@@ -133,7 +136,7 @@ define([
           statusDetails: null,
           hideInLayerList: false,
           showOpacitySlider: true,
-          clickFeatureAction: "",
+          clickFeatureAction: null,
         };
       },
 

src/js/views/maps/MapView.js

@@ -129,10 +129,7 @@ define([
           this.renderToolbar();
           this.renderLayerDetails();
         }
-        if (
-          this.model.get("showFeatureInfo") &&
-          this.model.get("clickFeatureAction") === "showDetails"
-        ) {
+        if (this.model.get("showFeatureInfo")) {
           this.renderFeatureInfo();
         }
         return this;

test/js/specs/unit/models/maps/MapInteraction.spec.js

@@ -73,4 +73,21 @@ define([
       expect(spy.args[0][1].assets.length).to.equal(3);
     });
   });
+  it("should do nothing if the action is not LEFT_CLICK", function () {
+    const model = new MapInteraction();
+    const initialClickedFeatures = model.get("clickedFeatures").models.length;
+    model.handleClick(model, "RIGHT_CLICK");
+    model
+      .get("clickedFeatures")
+      .models.length.should.equal(initialClickedFeatures);
+  });
+
+  it("should set zoomTarget if clickFeatureAction is 'zoom'", function () {
+    const model = new MapInteraction();
+    model.set("clickFeatureAction", "zoom");
+    const feature1 = new Features({ id: 1 });
+    model.set("hoveredFeatures", new Features([feature1]));
+    model.handleClick(model, "LEFT_CLICK");
+    model.get("clickFeatureAction").should.equal("zoom");
+  });
 });