decidim-core 0.26.10 → 0.27.0.rc1

data/app/packs/src/decidim/external_link.test.js

@@ -0,0 +1,64 @@
+import $ from "jquery"; // eslint-disable-line id-length
+
+import ExternalLink from "./external_link";
+
+describe("ExternalLink", () => {
+  const content = `
+    <div id="links">
+      <a href="https://decidim.org/" target="_blank">This is an external link</a>
+      <a href="https://decidim.org/" target="_blank"><img src="/path/to/image.png" alt=""></a>
+      <a href="https://decidim.org/" target="_blank" data-external-link-spacer="%%%">Custom spacer link</a>
+      <a href="https://decidim.org/" target="_blank" data-external-link-target=".external-wrapper"><span class="external-wrapper"></span>This is the link</a>
+    </div>
+  `;
+
+  const config = {
+    "icons_path": "/path/to/icons.svg"
+  };
+  window.Decidim = {
+    config: {
+      get: (key) => config[key]
+    }
+  }
+  const expectedIcon = '<svg class="icon icon--external-link" role="img" aria-hidden="true"><title>external-link</title><use href="/path/to/icons.svg#icon-external-link"></use></svg>';
+
+  beforeEach(() => {
+    $("body").html(content);
+    $('a[target="_blank"]').each((_i, elem) => {
+      const $link = $(elem);
+      $link.data("external-link", new ExternalLink($link));
+    });
+  });
+
+  it("adds the external link indicator to the normal external link", () => {
+    const $link = $("#links a")[0];
+
+    expect($link.outerHTML).toEqual(
+      `<a href="https://decidim.org/" target="_blank" class="external-link-container">This is an external link&nbsp;<span class="external-link-indicator">${expectedIcon}<span class="show-for-sr">(External link)</span></span></a>`
+    );
+  });
+
+  it("adds the external link indicator without a spacer to the image link", () => {
+    const $link = $("#links a")[1];
+
+    expect($link.outerHTML).toEqual(
+      `<a href="https://decidim.org/" target="_blank" class="external-link-container"><img src="/path/to/image.png" alt=""><span class="external-link-indicator">${expectedIcon}<span class="show-for-sr">(External link)</span></span></a>`
+    );
+  });
+
+  it("adds the external link indicator with a custom spacer to the link with the custom spacer configuration", () => {
+    const $link = $("#links a")[2];
+
+    expect($link.outerHTML).toEqual(
+      `<a href="https://decidim.org/" target="_blank" data-external-link-spacer="%%%" class="external-link-container">Custom spacer link%%%<span class="external-link-indicator">${expectedIcon}<span class="show-for-sr">(External link)</span></span></a>`
+    );
+  });
+
+  it("adds the external link indicator with a custom container to the link with the custom container configuration", () => {
+    const $link = $("#links a")[3];
+
+    expect($link.outerHTML).toEqual(
+      `<a href="https://decidim.org/" target="_blank" data-external-link-target=".external-wrapper"><span class="external-wrapper external-link-container"><span class="external-link-indicator">${expectedIcon}<span class="show-for-sr">(External link)</span></span></span>This is the link</a>`
+    );
+  });
+});

data/app/packs/src/decidim/form_filter.component.test.js

@@ -1,4 +1,4 @@
-/* global spyOn, jest */
+/* global spyOn */
 /* eslint-disable id-length */
 window.$ = $;
 
@@ -7,20 +7,6 @@ import DataPicker from "./data_picker"
 
 const FormFilterComponent = require("./form_filter.component_for_testing.js");
 
-const expectedPushState = (state, filters) => {
-  const queryString = Object.keys(filters).map((key) => {
-    const name = `filter[${key}]`;
-    const val = filters[key];
-    if (Array.isArray(val)) {
-      return val.map((v) => `${encodeURIComponent(`${name}[]`)}=${encodeURIComponent(v)}`).join("&");
-    }
-
-    return `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;
-  }).join("&");
-
-  return [state, null, `/filters?${queryString}`];
-}
-
 describe("FormFilterComponent", () => {
   const selector = "form#new_filter";
   let subject = null;
@@ -29,10 +15,6 @@ describe("FormFilterComponent", () => {
   beforeEach(() => {
     let form = `
       <form id="new_filter" action="/filters" method="get">
-        <fieldset>
-          <input id="filter_search_text_cont" placeholder="Search" data-disable-dynamic-change="true" type="search" name="filter[search_text_cont]">
-        </fieldset>
-
         <fieldset>
           <div id="filter_somerandomid_scope_id" class="data-picker picker-multiple" data-picker-name="filter[scope_id]">
             <div class="picker-values">
@@ -85,25 +67,11 @@ describe("FormFilterComponent", () => {
     `;
     $("body").append(form);
 
-    const $form = $(document).find("form");
-
     window.Decidim = window.Decidim || {};
 
     window.theDataPicker = new DataPicker($(".data-picker"));
     window.theCheckBoxesTree = new CheckBoxesTree();
-    window.Rails = {
-      fire: (htmlElement, event) => {
-        // Hack to call trigger on the correct instance of the form, as fetching
-        // with the selector does not work.
-        if (htmlElement === $form[0]) {
-          $form.trigger(event);
-        }
-      }
-    };
-
-    subject = new FormFilterComponent($form);
-
-    jest.useFakeTimers();
+    subject = new FormFilterComponent($(document).find("form"));
   });
 
   it("exists", () => {
@@ -120,19 +88,7 @@ describe("FormFilterComponent", () => {
 
   describe("when mounted", () => {
     beforeEach(() => {
-      // Jest doesn't implement listening on the form submit event so we need
-      // to hack it.
-      const originalOn = subject.$form.on.bind(subject.$form);
-      jest.spyOn(subject.$form, "on").mockImplementation((...args) => {
-        if (args[0] === "submit") {
-          subject.$form.submitHandler = args[1];
-        } else if (args[0] === "change" && typeof args[1] === "string") {
-          subject.$form.changeHandler = args[2];
-        } else {
-          originalOn(...args);
-        }
-      });
-
+      spyOn(subject.$form, "on");
       subject.mountComponent();
     });
 
@@ -144,98 +100,8 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeTruthy();
     });
 
-    it("binds the form change and submit events", () => {
+    it("binds the form change event", () => {
       expect(subject.$form.on).toHaveBeenCalledWith("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", subject._onFormChange);
-      expect(subject.$form.on).toHaveBeenCalledWith("submit", subject._onFormSubmit);
-    });
-
-    describe("form changes", () => {
-      beforeEach(() => {
-        spyOn(window.history, "pushState");
-
-        // This is a hack to be able to trigger the events even somewhat close
-        // to an actual situation. In real browser environment the change events
-        // would be triggered by the input/select elements but to simplify the
-        // test implementation, we trigger them directly on the form.
-        const originalTrigger = subject.$form.trigger.bind(subject.$form);
-        jest.spyOn(subject.$form, "trigger").mockImplementation((...args) => {
-          if (args[0] === "submit") {
-            subject.$form.submitHandler(
-              $.event.fix(new CustomEvent("submit", { bubbles: true, cancelable: true }))
-            );
-          } else if (args[0] === "change") {
-            subject.$form.changeHandler();
-          } else {
-            originalTrigger(...args);
-          }
-
-          jest.runAllTimers();
-        });
-      });
-
-      it("does not save the state in case there were no changes to previous state", () => {
-        subject.$form.trigger("change");
-
-        expect(window.history.pushState).not.toHaveBeenCalled();
-      });
-
-      it("saves the state after dynamic form changes", () => {
-        $("#filter_somerandomid_category_id").val(2);
-
-        subject.$form.trigger("change");
-
-        const state = {
-          "filter_somerandomid_scope_id": [
-            {
-              "text": "Scope 1",
-              "url": "picker_url_1",
-              "value": "3"
-            },
-            {
-              "text": "Scope 2",
-              "url": "picker_url_2",
-              "value": "4"
-            }
-          ]
-        };
-        const filters = {
-          "search_text_cont": "",
-          "scope_id": [3, 4],
-          "category_id": 2,
-          "state": [""]
-        };
-        expect(window.history.pushState).toHaveBeenCalledWith(...expectedPushState(state, filters));
-      });
-
-      it("saves the state after form submission through input element", () => {
-        const textInput = document.getElementById("filter_search_text_cont");
-        textInput.value = "search";
-
-        subject.$form.trigger("submit");
-
-        const state = {
-          "filter_somerandomid_scope_id": [
-            {
-              "text": "Scope 1",
-              "url": "picker_url_1",
-              "value": "3"
-            },
-            {
-              "text": "Scope 2",
-              "url": "picker_url_2",
-              "value": "4"
-            }
-          ]
-        }
-        const filters = {
-          "search_text_cont": "search",
-          "scope_id": [3, 4],
-          "category_id": 1,
-          "state": [""]
-        }
-
-        expect(window.history.pushState).toHaveBeenCalledWith(...expectedPushState(state, filters));
-      });
     });
 
     describe("onpopstate event", () => {
@@ -265,14 +131,6 @@ describe("FormFilterComponent", () => {
         expect(checked.map((input) => input.value)).toEqual(["", "accepted", "evaluating"]);
         expect(checked.filter((input) => input.indeterminate).map((input) => input.value)).toEqual([""]);
       });
-
-      it("does not save the state", () => {
-        spyOn(window.history, "pushState");
-
-        window.onpopstate({ isTrusted: true, state: scopesPickerState});
-
-        expect(window.history.pushState).not.toHaveBeenCalled();
-      });
     });
   });
 
@@ -287,9 +145,8 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeFalsy();
     });
 
-    it("unbinds the form change and submit events", () => {
+    it("unbinds the form change event", () => {
       expect(subject.$form.off).toHaveBeenCalledWith("change", "input, select", subject._onFormChange);
-      expect(subject.$form.off).toHaveBeenCalledWith("submit", subject._onFormSubmit);
     });
   });
 

data/app/packs/src/decidim/form_filter.js

@@ -23,7 +23,6 @@ export default class FormFilterComponent {
 
     this._updateInitialState();
     this._onFormChange = delayed(this, this._onFormChange.bind(this));
-    this._onFormSubmit = delayed(this, this._onFormSubmit.bind(this));
     this._onPopState = this._onPopState.bind(this);
 
     if (window.Decidim.PopStateHandler) {
@@ -43,7 +42,6 @@ export default class FormFilterComponent {
     if (this.mounted) {
       this.mounted = false;
       this.$form.off("change", "input, select", this._onFormChange);
-      this.$form.off("submit", this._onFormSubmit);
 
       unregisterCallback(`filters-${this.id}`)
     }
@@ -64,7 +62,6 @@ export default class FormFilterComponent {
         contentContainer = this.$form.data("remoteFill");
       }
       this.$form.on("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", this._onFormChange);
-      this.$form.on("submit", this._onFormSubmit);
 
       this.currentFormRequest = null;
       this.$form.on("ajax:beforeSend", (e) => {
@@ -257,16 +254,14 @@ export default class FormFilterComponent {
 
     // Only one instance should submit the form on browser history navigation
     if (this.popStateSubmiter) {
-      Rails.fire(this.$form[0], "submit", { from: "pop" });
+      Rails.fire(this.$form[0], "submit");
     }
 
     this.changeEvents = true;
   }
 
   /**
-   * Handles the logic to decide whether the form should be submitted or not
-   * after a form change event. The form is only submitted when changes have
-   * occurred.
+   * Handles the logic to update the current location after a form change event.
    * @private
    * @returns {Void} - Returns nothing.
    */
@@ -275,7 +270,7 @@ export default class FormFilterComponent {
       return;
     }
 
-    const [newPath] = this._currentStateAndPath();
+    const [newPath, newState] = this._currentStateAndPath();
     const path = this._getLocation(false);
 
     if (newPath === path) {
@@ -283,23 +278,6 @@ export default class FormFilterComponent {
     }
 
     Rails.fire(this.$form[0], "submit");
-  }
-
-  /**
-   * Saves the current state of the search on form submit to update the search
-   * parameters to the URL and store the picker states.
-   * @private
-   * @param {jQuery.Event} ev The event that caused the form to submit.
-   * @returns {Void} - Returns nothing.
-   */
-  _onFormSubmit(ev) {
-    const eventDetail = ev.originalEvent.detail;
-    if (eventDetail && eventDetail.from === "pop") {
-      return;
-    }
-
-    const [newPath, newState] = this._currentStateAndPath();
-
     pushState(newPath, newState);
     this._saveFilters(newPath);
   }
@@ -336,7 +314,7 @@ export default class FormFilterComponent {
    * @returns {String} - Returns a unique identifier
    */
   _getUID() {
-    return `filter-form-${new Date().getUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
+    return `filter-form-${new Date().setUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
   }
 
   /**

data/app/packs/src/decidim/geocoding/attach_input.js

@@ -125,10 +125,7 @@ export default function attachGeocoding($input, options, callback) {
   $input.on("geocoder-suggest-coordinates.decidim", (_ev, coordinates) => {
     setCoordinates(coordinates);
     geocoded = true;
-    if (typeof callback === "function") {
-      callback(coordinates);
-      return;
-    }
+    callback(coordinates)
   });
 
   // Set the initial values if the field defines the coordinates

data/app/packs/src/decidim/geocoding/provider/here.js

@@ -34,28 +34,26 @@ $(() => {
       if (`${query}`.trim().length < queryMinLength) {
         return;
       }
-      // Changes to the autocomplete api call based on:
-      // https://developer.here.com/documentation/geocoding-search-api/migration_guide/migration-geocoder/topics-api/autocomplete.html
+
       currentSuggestionQuery = setTimeout(() => {
         $.ajax({
           method: "GET",
-          url: "https://autocomplete.search.hereapi.com/v1/autocomplete",
+          url: "https://autocomplete.geocoder.ls.hereapi.com/6.2/suggest.json",
           data: {
             apiKey: config.apiKey,
-            // eslint-disable-next-line
-            q: query,
-            lang: language
+            query: query,
+            language: language
           },
           dataType: "json"
         }).done((resp) => {
-          if (resp.items) {
-            return callback(resp.items.map((item) => {
+          if (resp.suggestions) {
+            return callback(resp.suggestions.map((item) => {
               const label = generateAddressLabel(item.address, addressFormat);
 
               return {
                 key: label,
                 value: label,
-                locationId: item.id
+                locationId: item.locationId
               }
             }));
           }
@@ -67,24 +65,30 @@ $(() => {
     $input.on("geocoder-suggest-select.decidim", (_ev, selectedItem) => {
       $.ajax({
         method: "GET",
-        url: "https://lookup.search.hereapi.com/v1/lookup",
+        url: "https://geocoder.ls.hereapi.com/6.2/geocode.json",
         data: {
           apiKey: config.apiKey,
-          id: selectedItem.locationId
+          gen: 9,
+          jsonattributes: 1,
+          locationid: selectedItem.locationId
         },
         dataType: "json"
       }).done((resp) => {
-        if (!resp || Object.keys(resp).length < 1
+        if (!resp.response || !Array.isArray(resp.response.view) ||
+          resp.response.view.length < 1
         ) {
           return;
         }
-        const position = resp.position;
-        if (!position || !position.lat || !position.lng) {
-          return
+
+        const view = resp.response.view[0];
+        if (!Array.isArray(view.result) || view.result.length < 1) {
+          return;
         }
+
+        const result = view.result[0];
         const coordinates = [
-          position.lat,
-          position.lng
+          result.location.displayPosition.latitude,
+          result.location.displayPosition.longitude
         ];
 
         $input.trigger(

data/app/packs/src/decidim/geocoding/provider/photon.js

@@ -59,7 +59,7 @@ $(() => {
               return {
                 key: label,
                 value: label,
-                coordinates: item.geometry.coordinates.reverse()
+                coordinates: item.geometry.coordinates
               }
             }));
           }

data/app/packs/src/decidim/geocoding.js

@@ -1,43 +1,20 @@
-import Tribute from "src/decidim/vendor/tribute"
+import AutoComplete from "src/decidim/autocomplete";
 
 $(() => {
   $("[data-decidim-geocoding]").each((_i, el) => {
     const $input = $(el);
-    const $fieldContainer = $input.parent();
 
-    $fieldContainer.addClass("has-tribute");
-
-    const tribute = new Tribute(
-      {
-        autocompleteMode: true,
-        // autocompleteSeparator: / \+ /, // See below, requires Tribute update
-        allowSpaces: true,
-        positionMenu: false,
-        replaceTextSuffix: "",
-        menuContainer: $fieldContainer.get(0),
-        noMatchTemplate: null,
-        values: (text, cb) => {
-          $input.trigger("geocoder-suggest.decidim", [text, cb]);
-        }
+    const autoComplete = new AutoComplete(el, {
+      mode: "single",
+      dataMatchKeys: ["value"],
+      dataSource: (query, callback) => {
+        $input.trigger("geocoder-suggest.decidim", [query, callback]);
       }
-    );
-
-    // Port https://github.com/zurb/tribute/pull/406
-    // This changes the autocomplete separator from space to " + " so that
-    // we can do searches such as "streetname 4" including a space. Otherwise
-    // this would do two separate searches for "streetname" and "4".
-    tribute.range.getLastWordInText = (text) => {
-      const final = text.replace(/\u00A0/g, " ");
-      const wordsArray = final.split(/ \+ /);
-      const worldsCount = wordsArray.length - 1;
-
-      return wordsArray[worldsCount].trim();
-    };
-
-    tribute.attach($input.get(0));
+    });
+    el.addEventListener("selection", autoComplete);
 
-    $input.on("tribute-replaced", function(ev) {
-      const selectedItem = ev.detail.item.original;
+    $input.on("selection", (event) => {
+      const selectedItem = event.detail.selection.value;
       $input.trigger("geocoder-suggest-select.decidim", [selectedItem]);
 
       // Not all geocoding autocomplete APIs include the coordinates in the
@@ -48,7 +25,5 @@ $(() => {
         $input.trigger("geocoder-suggest-coordinates.decidim", [selectedItem.coordinates]);
       }
     });
-
-    $input.data("geocoder-tribute", tribute);
   });
 });

data/app/packs/src/decidim/identity_selector_dialog.js

@@ -1,6 +1,6 @@
 /**
  * Makes the #select-identity-button to open a popup for the user to
- * select with which identity he wants to perform an action.
+ * select with which identity they want to perform an action.
  *
  */
 $(() => {

data/app/packs/src/decidim/impersonation.js

@@ -1,11 +1,11 @@
-import moment from "moment"
+import dayjs from "dayjs"
 
 $(() => {
   const $impersonationWarning = $(".impersonation-warning");
   if ($impersonationWarning.length) {
-    const endsAt = moment($impersonationWarning.data("session-ends-at"));
+    const endsAt = dayjs($impersonationWarning.data("session-ends-at"));
     const exitInterval = setInterval(() => {
-      const diff = (endsAt - moment()) / 60000;
+      const diff = (endsAt - dayjs()) / 60000;
       const diffInMinutes = Math.round(diff);
       $impersonationWarning.find(".minutes").html(diffInMinutes);