decidim-core 0.27.1 → 0.27.3

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

@@ -1,11 +1,25 @@
 /* eslint-disable require-jsdoc */
 
-import lineBreakButtonHandler from "src/decidim/editor/linebreak_module"
-import "src/decidim/editor/clipboard_override"
-import "src/decidim/vendor/image-resize.min"
-import "src/decidim/vendor/image-upload.min"
+import lineBreakButtonHandler from "src/decidim/editor/linebreak_module";
+import "src/decidim/editor/clipboard_override";
+import "src/decidim/vendor/image-resize.min";
+import "src/decidim/vendor/image-upload.min";
 
-const quillFormats = ["bold", "italic", "link", "underline", "header", "list", "video", "image", "alt", "break", "width", "style", "code", "blockquote", "indent"];
+const quillFormats = [
+  "bold",
+  "italic",
+  "link",
+  "underline",
+  "header",
+  "list",
+  "alt",
+  "break",
+  "width",
+  "style",
+  "code",
+  "blockquote",
+  "indent"
+];
 
 export default function createQuillEditor(container) {
   const toolbar = $(container).data("toolbar");
@@ -17,26 +31,28 @@ export default function createQuillEditor(container) {
     [{ list: "ordered" }, { list: "bullet" }],
     ["link", "clean"],
     ["code", "blockquote"],
-    [{ "indent": "-1"}, { "indent": "+1" }]
+    [{ indent: "-1" }, { indent: "+1" }]
   ];
 
-  let addImage = $(container).data("editorImages");
+  let addImage = false;
+  let addVideo = false;
 
-  if (toolbar === "full") {
+  /**
+   * - basic = only basic controls without titles
+   * - content = basic + headings
+   * - full = basic + headings + image + video
+   */
+  if (toolbar === "content") {
+    quillToolbar = [[{ header: [2, 3, 4, 5, 6, false] }], ...quillToolbar];
+  } else if (toolbar === "full") {
+    addImage = true;
+    addVideo = true;
     quillToolbar = [
       [{ header: [2, 3, 4, 5, 6, false] }],
       ...quillToolbar,
-      ["video"]
+      ["video"],
+      ["image"]
     ];
-  } else if (toolbar === "basic") {
-    quillToolbar = [
-      ...quillToolbar,
-      ["video"]
-    ];
-  }
-
-  if (addImage) {
-    quillToolbar.push(["image"]);
   }
 
   let modules = {
@@ -44,17 +60,26 @@ export default function createQuillEditor(container) {
     toolbar: {
       container: quillToolbar,
       handlers: {
-        "linebreak": lineBreakButtonHandler
+        linebreak: lineBreakButtonHandler
       }
     }
   };
   const $input = $(container).siblings('input[type="hidden"]');
   container.innerHTML = $input.val() || "";
   const token = $('meta[name="csrf-token"]').attr("content");
+
+  if (addVideo) {
+    quillFormats.push("video");
+  }
+
   if (addImage) {
+    // Attempt to allow images only if the image support is enabled at editor support.
+    // see: https://github.com/quilljs/quill/issues/1108
+    quillFormats.push("image");
+
     modules.imageResize = {
       modules: ["Resize", "DisplaySize"]
-    }
+    };
     modules.imageUpload = {
       url: $(container).data("uploadImagesPath"),
       method: "POST",
@@ -62,18 +87,23 @@ export default function createQuillEditor(container) {
       withCredentials: false,
       headers: { "X-CSRF-Token": token },
       callbackOK: (serverResponse, next) => {
-        $("div.ql-toolbar").last().removeClass("editor-loading")
+        $("div.ql-toolbar").last().removeClass("editor-loading");
         next(serverResponse.url);
       },
       callbackKO: (serverError) => {
-        $("div.ql-toolbar").last().removeClass("editor-loading")
+        $("div.ql-toolbar").last().removeClass("editor-loading");
         console.log(`Image upload error: ${serverError.message}`);
       },
       checkBeforeSend: (file, next) => {
-        $("div.ql-toolbar").last().addClass("editor-loading")
+        $("div.ql-toolbar").last().addClass("editor-loading");
         next(file);
       }
-    }
+    };
+
+    const text = $(container).data("dragAndDropHelpText");
+    $(container).after(
+      `<p class="help-text" style="margin-top:-1.5rem;">${text}</p>`
+    );
   }
   const quill = new Quill(container, {
     modules: modules,
@@ -81,6 +111,11 @@ export default function createQuillEditor(container) {
     theme: "snow"
   });
 
+  if (addImage === false) {
+    // Firefox natively implements image drop in contenteditable which is why we need to disable that
+    quill.root.addEventListener("drop", (ev) => ev.preventDefault());
+  }
+
   if (disabled) {
     quill.disable();
   }
@@ -95,7 +130,10 @@ export default function createQuillEditor(container) {
     });
     container.dispatchEvent(event);
 
-    if ((text === "\n" || text === "\n\n") && quill.root.querySelectorAll(allowedEmptyContentSelector).length === 0) {
+    if (
+      (text === "\n" || text === "\n\n") &&
+      quill.root.querySelectorAll(allowedEmptyContentSelector).length === 0
+    ) {
       $input.val("");
     } else {
       const emptyParagraph = "<p><br></p>";
@@ -109,13 +147,5 @@ export default function createQuillEditor(container) {
   // After editor is ready, linebreak_module deletes two extraneous new lines
   quill.emitter.emit("editor-ready");
 
-  if (addImage) {
-    const text = $(container).data("dragAndDropHelpText");
-    $(container).after(`<p class="help-text" style="margin-top:-1.5rem;">${text}</p>`);
-  }
-
-  // After editor is ready, linebreak_module deletes two extraneous new lines
-  quill.emitter.emit("editor-ready");
-
   return quill;
 }

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

@@ -1,4 +1,4 @@
-/* global spyOn */
+/* global spyOn, jest */
 /* eslint-disable id-length */
 window.$ = $;
 
@@ -7,6 +7,20 @@ 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;
@@ -15,6 +29,10 @@ 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">
@@ -67,11 +85,25 @@ describe("FormFilterComponent", () => {
     `;
     $("body").append(form);
 
+    const $form = $(document).find("form");
+
     window.Decidim = window.Decidim || {};
 
     window.theDataPicker = new DataPicker($(".data-picker"));
     window.theCheckBoxesTree = new CheckBoxesTree();
-    subject = new FormFilterComponent($(document).find("form"));
+    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();
   });
 
   it("exists", () => {
@@ -88,7 +120,19 @@ describe("FormFilterComponent", () => {
 
   describe("when mounted", () => {
     beforeEach(() => {
-      spyOn(subject.$form, "on");
+      // 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);
+        }
+      });
+
       subject.mountComponent();
     });
 
@@ -100,8 +144,98 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeTruthy();
     });
 
-    it("binds the form change event", () => {
+    it("binds the form change and submit events", () => {
       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", () => {
@@ -131,6 +265,14 @@ 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();
+      });
     });
   });
 
@@ -145,8 +287,9 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeFalsy();
     });
 
-    it("unbinds the form change event", () => {
+    it("unbinds the form change and submit events", () => {
       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,6 +23,7 @@ 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) {
@@ -42,6 +43,7 @@ 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}`)
     }
@@ -62,6 +64,7 @@ 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) => {
@@ -254,14 +257,16 @@ export default class FormFilterComponent {
 
     // Only one instance should submit the form on browser history navigation
     if (this.popStateSubmiter) {
-      Rails.fire(this.$form[0], "submit");
+      Rails.fire(this.$form[0], "submit", { from: "pop" });
     }
 
     this.changeEvents = true;
   }
 
   /**
-   * Handles the logic to update the current location after a form change event.
+   * 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.
    * @private
    * @returns {Void} - Returns nothing.
    */
@@ -270,7 +275,7 @@ export default class FormFilterComponent {
       return;
     }
 
-    const [newPath, newState] = this._currentStateAndPath();
+    const [newPath] = this._currentStateAndPath();
     const path = this._getLocation(false);
 
     if (newPath === path) {
@@ -278,6 +283,23 @@ 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);
   }
@@ -314,7 +336,7 @@ export default class FormFilterComponent {
    * @returns {String} - Returns a unique identifier
    */
   _getUID() {
-    return `filter-form-${new Date().setUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
+    return `filter-form-${new Date().getUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
   }
 
   /**

data/app/packs/stylesheets/decidim/email.scss

@@ -25,6 +25,13 @@ body{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+
+  &.preview{
+    .see-on-website,
+    .unsubscribe{
+      cursor: not-allowed;
+    }
+  }
 }
 
 .ExternalClass{

data/app/packs/stylesheets/decidim/modules/_buttons.scss

@@ -123,6 +123,10 @@
     }
   }
 
+  &.primary{
+    @include button-hollow-variant(var(--primary));
+  }
+
   &.secondary{
     @include button-hollow-variant(var(--secondary));
   }
@@ -257,12 +261,12 @@
 
 .button--shadow{
   $shadows: (
-    primary: shade($primary, 50),
-    secondary: shade($secondary, 50),
-    success: shade($success, 50),
-    warning: shade($warning, 50),
-    alert: shade($alert, 50),
-    muted: shade($muted, 50),
+    primary: shade($primary, 50%),
+    secondary: shade($secondary, 50%),
+    success: shade($success, 50%),
+    warning: shade($warning, 50%),
+    alert: shade($alert, 50%),
+    muted: shade($muted, 50%),
   );
 
   @include modifiers(background-color, $shadows){

data/app/packs/stylesheets/decidim/modules/_cards.scss

@@ -934,7 +934,7 @@ a .card__title{
   @include modifiers(
     color,
     (
-      muted: tint($muted, 50),
+      muted: tint($muted, 50%),
     )
   ){
     margin-top: -$global-margin * .95;

data/app/packs/stylesheets/decidim/modules/_comments.scss

@@ -17,6 +17,30 @@ $comment-form-bg: $light-gray;
 
 .comment-thread{
   @extend .card;
+
+  .show-comment-replies{
+    display: none;
+  }
+
+  .hide-comment-replies{
+    display: inline;
+  }
+
+  .comment__hide{
+    float: left;
+    margin-bottom: 0;
+  }
+
+  .no-comments{
+    .show-comment-replies{
+      display: inline;
+    }
+
+    .hide-comment-replies,
+    .replies{
+      display: none;
+    }
+  }
 }
 
 .comment-thread__title{

data/app/packs/stylesheets/decidim/modules/_input-gallery.scss

@@ -26,7 +26,8 @@
       top: 2px;
       width: 2rem;
       height: 2rem;
-      background: rgba(var(--primary-rgb), .8);
+      background: var(--primary);
+      opacity: .8;
       color: $white;
       border-radius: 50%;
     }

data/app/packs/stylesheets/decidim/modules/_upload_modal.scss

@@ -32,10 +32,6 @@
         border-width: 2px;
         border-radius: 4px;
 
-        * >{
-          display: none;
-        }
-
         .form-error{
           margin: 0;
         }

data/app/packs/stylesheets/decidim/vizzs/_linechart.scss

@@ -36,8 +36,8 @@
   @mixin loop-colors-types($color, $max: 12){
     @for $i from 0 through ($max - 1){
       $interval: ($i % 4) * 24 + 1;
-      $tints: tint($color, $interval);
-      $shades: shade($color, $interval);
+      $tints: tint($color, $interval * 1%);
+      $shades: shade($color, $interval * 1%);
       $adjusts: adjust-color($color, $lightness: $interval * 1%, $hue: -$interval);
 
       .type-#{$i}:not(.legend){

data/app/packs/stylesheets/decidim/vizzs/_rowchart.scss

@@ -27,8 +27,8 @@
   @mixin loop-colors-types($color, $max: 12){
     @for $i from 0 through ($max - 1){
       $interval: ($i % 4) * 24 + 1;
-      $tints: tint($color, $interval);
-      $shades: shade($color, $interval);
+      $tints: tint($color, $interval * 1%);
+      $shades: shade($color, $interval * 1%);
       $adjusts: adjust-color($color, $lightness: $interval * 1%, $hue: -$interval);
 
       .type-#{$i}{

data/app/presenters/decidim/admin_log/user_group_presenter.rb

@@ -20,7 +20,7 @@ module Decidim
 
       def action_string
         case action
-        when "verify", "verify_via_csv", "reject"
+        when "verify", "verify_via_csv", "reject", "block", "unblock"
           "decidim.admin_log.user_group.#{action}"
         else
           super

data/app/presenters/decidim/admin_log/user_moderation_presenter.rb

@@ -52,7 +52,7 @@ module Decidim
       end
 
       def unreported_user
-        @unreported_user ||= Decidim::User.find_by(id: action_log.extra.dig("extra", "user_id"))
+        @unreported_user ||= Decidim::UserBaseEntity.find_by(id: action_log.extra.dig("extra", "user_id"))
       end
 
       def has_diff?

data/app/presenters/decidim/notification_presenter.rb

@@ -11,7 +11,7 @@ module Decidim
 
     def created_at_in_words
       if created_at.between?(1.month.ago, Time.current)
-        time_ago_in_words(created_at)
+        I18n.t("decidim.user_conversations.index.time_ago", time: time_ago_in_words(created_at))
       else
         format = created_at.year == Time.current.year ? :ddmm : :ddmmyyyy
         I18n.l(created_at, format: format)

data/app/presenters/decidim/notification_to_mailer_presenter.rb

@@ -27,6 +27,7 @@ module Decidim
       @event ||= event_class.constantize.new(
         resource: resource,
         user: user,
+        user_role: user_role,
         event_name: event_name,
         extra: extra
       )

data/app/presenters/decidim/push_notification_presenter.rb

@@ -19,7 +19,7 @@ module Decidim
     end
 
     def url
-      resource.reported_content_url
+      event_class_instance.resource_url
     end
   end
 end

data/app/presenters/decidim/user_group_presenter.rb

@@ -16,7 +16,7 @@ module Decidim
     end
 
     def can_be_contacted?
-      true
+      true unless blocked?
     end
 
     def officialization_text

data/app/presenters/decidim/user_presenter.rb

@@ -61,7 +61,7 @@ module Decidim
     end
 
     def can_be_contacted?
-      true
+      true unless blocked?
     end
 
     def officialization_text

data/app/scrubbers/decidim/admin_input_scrubber.rb

@@ -14,12 +14,14 @@ module Decidim
   class AdminInputScrubber < UserInputScrubber
     private
 
+    DECIDIM_ALLOWED_TAGS = %w(img video audio source comment iframe).freeze
+
     def custom_allowed_attributes
       super + %w(frameborder allowfullscreen) - %w(onerror)
     end
 
     def custom_allowed_tags
-      super + %w(comment iframe)
+      super + DECIDIM_ALLOWED_TAGS
     end
   end
 end