decidim-core 0.28.3 → 0.29.0.rc1

data/app/packs/src/decidim/datepicker/test/date.test.js

@@ -0,0 +1,118 @@
+/* global jest */
+
+import {
+  dateToPicker,
+  displayDate,
+  formatDate,
+  formatInputDate,
+  calculateDatepickerPos
+} from "src/decidim/datepicker/datepicker_functions"
+
+describe("dateToPicker", () => {
+  it('should format date from "d-m-y" to "m-d-y" -format for datepicker', () => {
+    const inputDate = "01/02/2023";
+    const formats = { separator: "/", order: "d-m-y" };
+
+    const result = dateToPicker(inputDate, formats);
+
+    expect(result).toEqual("02/01/2023");
+  });
+
+  it('should format date from "y-m-d" to "m-d-y" -format for datepicker', () => {
+    const inputDate = "2023.02.01";
+    const formats = { separator: ".", order: "y-m-d" };
+
+    const result = dateToPicker(inputDate, formats);
+
+    expect(result).toEqual("02/01/2023");
+  });
+});
+
+describe("displayDate", () => {
+  it('should format date in "d-m-y" order correctly', () => {
+    const inputDate = new Date("2023-02-01");
+    const formats = { separator: "/", order: "d-m-y" };
+
+    const result = displayDate(inputDate, formats);
+
+    expect(result).toEqual("01/02/2023");
+  });
+
+  it('should format date in "y-m-d" order correctly', () => {
+    const inputDate = new Date("2023-02-01");
+    const formats = { separator: ".", order: "y-m-d" };
+
+    const result = displayDate(inputDate, formats);
+
+    expect(result).toEqual("2023.02.01");
+  });
+});
+
+describe("formatDate", () => {
+  it('should format date in "d-m-y" -format correctly to "datetime-local" or "date" formfield', () => {
+    const inputDate = "01/02/2023";
+    const formats = { separator: "/", order: "d-m-y" };
+
+    const result = formatDate(inputDate, formats);
+
+    expect(result).toEqual("2023-02-01");
+  });
+
+  it('should format date in "y-m-d" -format correctly to "datetime-local" or "date" formfield', () => {
+    const inputDate = "2023.02.01";
+    const formats = { separator: ".", order: "y-m-d" };
+
+    const result = formatDate(inputDate, formats);
+
+    expect(result).toEqual("2023-02-01");
+  });
+});
+
+describe("formatInputDate", () => {
+  it('should format date in "d-m-y" order correctly', () => {
+    const inputDate = "2023-02-01";
+    const formats = { separator: "/", order: "d-m-y" };
+
+    const result = formatInputDate(inputDate, formats);
+
+    expect(result).toEqual("01/02/2023");
+  });
+
+  it('should format date in "y-m-d" order correctly', () => {
+    const inputDate = "2023-02-01";
+    const formats = { separator: ".", order: "y-m-d" };
+
+    const result = formatInputDate(inputDate, formats);
+
+    expect(result).toEqual("2023.02.01");
+  });
+});
+
+describe("calculateDatepickerPos", () => {
+  it("should calculate datepicker position correctly in Admin panel", () => {
+    Reflect.defineProperty(document.body, "clientHeight", {
+      value: 800,
+      writable: true
+    });
+
+    Reflect.defineProperty(window, "scrollY", {
+      value: 200,
+      writable: true
+    });
+
+    const datePicker = {
+      getBoundingClientRect: jest.fn(() => ({
+        top: 300
+      })),
+      clientHeight: 100
+    };
+
+    jest.spyOn(document, "querySelector").mockReturnValue({
+      clientHeight: 50
+    });
+
+    const result = calculateDatepickerPos(datePicker);
+
+    expect(result).toEqual(150);
+  });
+});

data/app/packs/src/decidim/datepicker/test/time.test.js

@@ -0,0 +1,227 @@
+import {
+  setHour,
+  setMinute,
+  formatInputTime,
+  changeHourDisplay,
+  changeMinuteDisplay,
+  hourDisplay,
+  minuteDisplay,
+  formatTime
+} from "src/decidim/datepicker/datepicker_functions"
+
+describe("setHour", () => {
+  it("returns the hour in correct 24-hour format", () => {
+    const result = setHour("15:30", 24);
+    expect(result).toBe(15);
+  });
+
+  it("returns the hour in correct 12-hour format when hour is more than 12", () => {
+    const result = setHour("18:45", 12);
+    expect(result).toBe(6);
+  });
+
+  it("returns 12 for 12-hour format when hour is 0", () => {
+    const result = setHour("00:30", 12);
+    expect(result).toBe(12);
+  });
+
+  it("returns the hour in correct 12-hour format when hour is less than or equal to 12", () => {
+    const result = setHour("09:15", 12);
+    expect(result).toBe(9);
+  });
+});
+
+describe("setMinute", () => {
+  it("returns the correct value", () => {
+    const result = setMinute("12:45");
+    expect(result).toBe(45);
+  });
+
+  it("returns the correct minute value when 0", () => {
+    const result = setMinute("08:00");
+    expect(result).toBe(0);
+  });
+
+  it("returns the correct single-digit value", () => {
+    const result = setMinute("09:05");
+    expect(result).toBe(5);
+  });
+});
+
+describe("formatInputTime", () => {
+  const setupDOM = () => {
+    document.body.innerHTML = `
+      <input type="radio" id="period_am_exampleInput" name="period">
+      <input type="radio" id="period_pm_exampleInput" name="period">
+    `;
+  };
+
+  describe("24-hour format", () => {
+    it("returns the value in correct format", () => {
+      setupDOM();
+      const time = "15:30";
+      const format = 24;
+      const input = { id: "exampleInput" };
+
+      const result = formatInputTime(time, format, input);
+
+      expect(result).toBe("15:30");
+    });
+  })
+
+  describe("12-hour format", () => {
+    it("returns the value in correct format and checks the PM radio-button", () => {
+      setupDOM();
+      const time = "12:45";
+      const format = 12;
+      const input = { id: "exampleInput" };
+
+      const result = formatInputTime(time, format, input);
+
+      expect(result).toBe("12:45");
+      expect(document.getElementById("period_pm_exampleInput").checked).toBeTruthy();
+      expect(document.getElementById("period_am_exampleInput").checked).toBeFalsy();
+    });
+
+    it("returns the value in correct format", () => {
+      setupDOM();
+      const time = "00:25";
+      const format = 12;
+      const input = { id: "exampleInput" };
+
+      const result = formatInputTime(time, format, input);
+
+      expect(result).toBe("12:25");
+      // We are not expecting a radio button to be selected here since in a real environment the selected button is not
+      // handled by this method for values < 12
+    });
+  })
+});
+
+
+describe("changeHourDisplay", () => {
+  describe("24-hour format", () => {
+    it("should increase the hour", () => {
+      expect(changeHourDisplay("increase", 10, 24)).toEqual(11);
+    });
+
+    it("should change hour from 23 -> 0", () => {
+      expect(changeHourDisplay("increase", 23, 24)).toEqual(0);
+    });
+
+    it("should decrease the hour", () => {
+      expect(changeHourDisplay("decrease", 10, 24)).toEqual(9);
+    });
+
+    it("should change the hour from 0 -> 23", () => {
+      expect(changeHourDisplay("decrease", 0, 24)).toEqual(23);
+    });
+  });
+
+  describe("12-hour format", () => {
+    it("should increase the hour", () => {
+      expect(changeHourDisplay("increase", 10, 12)).toEqual(11);
+    });
+
+    it("should change hour from 12 -> 1", () => {
+      expect(changeHourDisplay("increase", 12, 12)).toEqual(1);
+    });
+
+    it("should decrease the hour", () => {
+      expect(changeHourDisplay("decrease", 10, 12)).toEqual(9);
+    });
+
+    it("should change the hour from 1 -> 12", () => {
+      expect(changeHourDisplay("decrease", 1, 12)).toEqual(12);
+    });
+  });
+
+  it("should return null when invalid parameter", () => {
+    expect(changeHourDisplay("invalid", 10, 12)).toBeNull();
+  });
+});
+
+describe("changeMinuteDisplay", () => {
+  describe("increase", () => {
+    it("should increase the minute", () => {
+      expect(changeMinuteDisplay("increase", 10)).toEqual(11);
+    });
+
+    it("should change the minute from 59 -> 0", () => {
+      expect(changeMinuteDisplay("increase", 59)).toEqual(0);
+    });
+  });
+
+  describe("decrease", () => {
+    it("should decrease the minute", () => {
+      expect(changeMinuteDisplay("decrease", 10)).toEqual(9);
+    });
+
+    it("should change the minute from 0 -> 59", () => {
+      expect(changeMinuteDisplay("decrease", 0)).toEqual(59);
+    });
+  });
+
+  it("should handle invalid input by returning null", () => {
+    expect(changeMinuteDisplay("invalid", 10)).toBeNull();
+  });
+});
+
+describe("hourDisplay", () => {
+  it("should add a prefix zero for single-digit hours", () => {
+    expect(hourDisplay(5)).toEqual("05");
+    expect(hourDisplay(9)).toEqual("09");
+  });
+
+  it("should not add a prefix zero for double-digit hours", () => {
+    expect(hourDisplay(10)).toEqual(10);
+    expect(hourDisplay(15)).toEqual(15);
+  });
+});
+
+describe("minuteDisplay", () => {
+  it("should add a prefix zero for single-digit minutes", () => {
+    expect(minuteDisplay(5)).toEqual("05");
+    expect(minuteDisplay(9)).toEqual("09");
+  });
+
+  it("should not add a prefix zero for double-digit minutes", () => {
+    expect(minuteDisplay(10)).toEqual(10);
+    expect(minuteDisplay(15)).toEqual(15);
+  });
+});
+
+
+describe("formatTime", () => {
+  const id = "exampleInput";
+
+  it("should convert 12-hour time to 24-hour time for AM", () => {
+    document.body.innerHTML = `
+      <input type="radio" id="period_am_exampleInput" checked> AM
+      <input type="radio" id="period_pm_exampleInput"> PM
+    `;
+
+    expect(formatTime("09:30", 12, id)).toEqual("09:30");
+    expect(formatTime("12:45", 12, id)).toEqual("00:45");
+  });
+
+  it("should convert 12-hour time to 24-hour time for PM", () => {
+    document.body.innerHTML = `
+      <input type="radio" id="period_am_exampleInput"> AM
+      <input type="radio" id="period_pm_exampleInput" checked> PM
+    `;
+
+    expect(formatTime("03:15", 12, id)).toEqual("15:15");
+    expect(formatTime("11:30", 12, id)).toEqual("23:30");
+  });
+
+  it("should return the original time for 24-hour format", () => {
+    document.body.innerHTML = `
+      <input type="radio" id="period_am_exampleInput"> AM
+      <input type="radio" id="period_pm_exampleInput"> PM
+    `;
+
+    expect(formatTime("15:45", 24, id)).toEqual("15:45");
+    expect(formatTime("08:20", 24, id)).toEqual("08:20");
+  });
+});

data/app/packs/src/decidim/editor/extensions/indent/index.js

@@ -13,7 +13,7 @@ const allowedNodeTypes = ["heading", "paragraph"];
 const allowedNodeActive = (editor) => allowedNodeTypes.some((type) => editor.isActive(type));
 
 /**
- * Finds the closest allowed type node from the given position. Traversese the
+ * Finds the closest allowed type node from the given position. Traverses the
  * document depth upwards to search through all the node parents.
  *
  * @param {Object} position The position where to look for

data/app/packs/src/decidim/editor/extensions/video_embed/index.js

@@ -9,7 +9,7 @@ const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu
 const VIMEO_REGEX = /^(https?:\/\/)?(www\.|player\.)?(vimeo\.com)(.+)?$/;
 const VIMEO_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|player\.)?(vimeo\.com)(.+)?$/g;
 
-const isValidYoutubeUrl = (url) => {
+const isValidYouTubeUrl = (url) => {
   return url.match(YOUTUBE_REGEX);
 }
 
@@ -17,7 +17,7 @@ const isValidVimeoUrl = (url) => {
   return url.match(VIMEO_REGEX);
 };
 
-const getEmbedUrlFromYoutubeUrl = (options) => {
+const getEmbedUrlFromYouTubeUrl = (options) => {
   const embedUrl = "https://www.youtube-nocookie.com/embed/";
 
   const { url } = options;
@@ -74,8 +74,8 @@ const getEmbedUrlFromVimeoUrl = (options) => {
 const getEmbedUrlFromVideoUrl = (options) => {
   const { url } = options;
 
-  if (isValidYoutubeUrl(url)) {
-    return getEmbedUrlFromYoutubeUrl(options);
+  if (isValidYouTubeUrl(url)) {
+    return getEmbedUrlFromYouTubeUrl(options);
   } else if (isValidVimeoUrl(url)) {
     return getEmbedUrlFromVimeoUrl(options);
   }

data/app/packs/src/decidim/editor/test/extensions/decidim_kit.test.js

@@ -1,24 +1,9 @@
-/* global jest */
-
 import { Editor } from "@tiptap/core";
 
 import DecidimKit from "src/decidim/editor/extensions/decidim_kit";
 
 import { createEditorContainer } from "src/decidim/editor/test/helpers";
 
-// Mock picmo as it is distributed as an ES6 module that is not fully compatible
-// with Jest without configuration changes.
-jest.mock("@picmo/popup-picker",
-  () => ({
-    createPopup: () => {
-      return {
-        addEventListener: () => {},
-        closeButton: {}
-      }
-    }
-  })
-);
-
 describe("DecidimKit", () => {
   const createEditor = (config = {}) => {
     const editorElement = document.querySelector(".editor .editor-input");

data/app/packs/src/decidim/editor/test/extensions/indent.test.js

@@ -141,7 +141,7 @@ describe("Indent", () => {
       expect(editor.getHTML()).toEqual("<p>Hello, world!</p>");
     });
 
-    it("does not oudent the content if the selection is not at the beginning of the line", async () => {
+    it("does not outdent the content if the selection is not at the beginning of the line", async () => {
       await updateContent(editorElement, '<p class="editor-indent-2">Hello, world!</p>');
 
       editorElement.focus();

data/app/packs/src/decidim/editor/test/fixtures/upload_templates.js

@@ -9,7 +9,7 @@ const dropzoneLocales = {
   uploaded: "Uploaded",
   validating: "Validating...",
   "title_required": "Title is required!",
-  "file_size_too_large": "File size is too large! Maximun file size: 10MB",
+  "file_size_too_large": "File size is too large! Maximum file size: 10MB",
   "validation_error": "Validation error!"
 };
 

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

@@ -34,26 +34,13 @@ window.DragEvent = class DragEvent extends Event {};
 
 const defaultEditorConfig = {
   contentTypes: {
-    image: ["image/jpeg", "image/png"]
+    image: ["image/jpeg", "image/png", "image/webp"]
   },
   uploadImagesPath: "/editor_images",
   dragAndDropHelpText: "Add images by dragging & dropping or pasting them.",
   uploadDialogSelector: "#upload_dialog"
 };
 
-// Mock picmo as it is distributed as an ES6 module that is not fully compatible
-// with Jest without configuration changes.
-jest.mock("@picmo/popup-picker",
-  () => ({
-    createPopup: () => {
-      return {
-        addEventListener: () => {},
-        closeButton: {}
-      }
-    }
-  })
-);
-
 // Mock the SVG icons import because jest tests are not running through webpack
 jest.mock("images/decidim/remixicon.symbol.svg", () => "test/url.svg");
 

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

@@ -40,7 +40,7 @@ const getMsoListStyle = (type, level, styleDefs) => {
   return Object.assign(typeStyle, levelStyle);
 };
 
-const converMsoListStyleToHtml = (listStyle) => {
+const convertMsoListStyleToHtml = (listStyle) => {
   let tag = "ol",
       type = null;
   switch (listStyle["mso-level-number-format"]) {
@@ -108,7 +108,7 @@ export const transformMsDesktop = (html) => {
   elements.forEach((paragraph) => {
     const { type: msoType, level } = detectMsoList(paragraph);
     const listStyle = getMsoListStyle(msoType, level, listStyles);
-    const { tag, type } = converMsoListStyleToHtml(listStyle);
+    const { tag, type } = convertMsoListStyleToHtml(listStyle);
 
     const li = document.createElement("li");
     const pa = document.createElement("p");

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

@@ -28,8 +28,8 @@ export default function updateExternalDomainLinks(element) {
   }
 
   const domain = parts[3].replace(/^www\./, "")
-  const whitelist = window.Decidim.config.get("external_domain_whitelist") || []
-  if (whitelist.includes(domain)) {
+  const allowlist = window.Decidim.config.get("external_domain_allowlist") || []
+  if (allowlist.includes(domain)) {
     return;
   }
 

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

@@ -4,7 +4,7 @@ describe("ExternalDomainLink", () => {
   const content = `
     <div id="links">
       <a href="https://github.com/" target="_blank">This is an external link</a>
-      <a href="https://example.com/" target="_blank">This is an external link from a whitelisted domain</a>
+      <a href="https://example.com/" target="_blank">This is an external link from a domain in the allowlist</a>
       <div class="editor-container">
         <a href="https://example.org/" target="_blank">This is an external link within an editor</a>
       </div>
@@ -12,7 +12,7 @@ describe("ExternalDomainLink", () => {
     </div>
   `;
   const config = {
-    "external_domain_whitelist": ["example.com"]
+    "external_domain_allowlist": ["example.com"]
   };
   window.Decidim = {
     config: {
@@ -33,11 +33,11 @@ describe("ExternalDomainLink", () => {
     );
   });
 
-  it("does not update the link to the external link URL when its whitelisted", () => {
+  it("does not update the link to the external link URL when its in the allow list", () => {
     const $link = $("#links a")[1];
 
     expect($link.outerHTML).toEqual(
-      '<a href="https://example.com/" target="_blank">This is an external link from a whitelisted domain</a>'
+      '<a href="https://example.com/" target="_blank">This is an external link from a domain in the allowlist</a>'
     );
   });
 

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

@@ -2,7 +2,7 @@
 /* eslint max-lines: ["error", {"max": 350, "skipBlankLines": true}] */
 
 /**
- * A plain Javascript component that handles the form filter.
+ * A plain JavaScript component that handles the form filter.
  * @class
  * @augments Component
  */
@@ -24,9 +24,9 @@ export default class FormFilterComponent {
     this._onPopState = this._onPopState.bind(this);
 
     if (window.Decidim.PopStateHandler) {
-      this.popStateSubmiter = false;
+      this.popStateSubmitter = false;
     } else {
-      this.popStateSubmiter = true;
+      this.popStateSubmitter = true;
       window.Decidim.PopStateHandler = this.id;
     }
   }
@@ -239,7 +239,7 @@ export default class FormFilterComponent {
     }
 
     // Only one instance should submit the form on browser history navigation
-    if (this.popStateSubmiter) {
+    if (this.popStateSubmitter) {
       Rails.fire(this.$form[0], "submit");
     }
 

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

@@ -1,7 +1,7 @@
 import dayjs from "dayjs"
 
 $(() => {
-  const $impersonationWarning = $(".impersonation-warning");
+  const $impersonationWarning = $("[data-impersonation-warning]");
   if ($impersonationWarning.length) {
     const endsAt = dayjs($impersonationWarning.data("session-ends-at"));
     const exitInterval = setInterval(() => {

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

@@ -17,9 +17,6 @@ import Rails from "@rails/ujs"
 import svg4everybody from "svg4everybody"
 import morphdom from "morphdom"
 
-// vendor customizated scripts (bad practice: these ones should be removed eventually)
-import "src/decidim/vendor/modernizr"
-
 /**
  * Local dependencies
  */
@@ -52,8 +49,11 @@ import "src/decidim/direct_uploads/upload_field"
 import "src/decidim/data_consent"
 import "src/decidim/abide_form_validator_fixer"
 import "src/decidim/sw"
+import "src/decidim/sticky_header"
+import "src/decidim/attachments"
 
 // local deps that require initialization
+import formDatePicker from "src/decidim/datepicker/form_datepicker"
 import Configuration from "src/decidim/configuration"
 import ExternalLink from "src/decidim/external_link"
 import updateExternalDomainLinks from "src/decidim/external_domain_warning"
@@ -65,6 +65,7 @@ import addInputEmoji, { EmojiButton } from "src/decidim/input_emoji"
 import FocusGuard from "src/decidim/focus_guard"
 import backToListLink from "src/decidim/back_to_list"
 import markAsReadNotifications from "src/decidim/notifications"
+import handleNotificationActions from "src/decidim/notifications_actions"
 import RemoteModal from "src/decidim/remote_modal"
 import selectActiveIdentity from "src/decidim/identity_selector_dialog"
 import createTooltip from "src/decidim/tooltips"
@@ -73,12 +74,13 @@ import {
   createAccordion,
   createDialog,
   createDropdown,
+  announceForScreenReader,
   Dialogs
 } from "src/decidim/a11y"
 import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
 
 // bad practice: window namespace should avoid be populated as much as possible
-// rails-translations could be referrenced through a single Decidim.I18n object
+// rails-translations could be referenced through a single Decidim.I18n object
 window.Decidim = window.Decidim || {
   config: new Configuration(),
   ExternalLink,
@@ -86,7 +88,8 @@ window.Decidim = window.Decidim || {
   FormValidator,
   addInputEmoji,
   EmojiButton,
-  Dialogs
+  Dialogs,
+  announceForScreenReader
 };
 
 window.morphdom = morphdom
@@ -136,6 +139,8 @@ const initializer = (element = document) => {
 
   svg4everybody();
 
+  element.querySelectorAll('input[type="datetime-local"],input[type="date"]').forEach((elem) => formDatePicker(elem))
+
   element.querySelectorAll(".editor-container").forEach((container) => window.createEditor(container));
 
   // initialize character counter
@@ -168,6 +173,7 @@ const initializer = (element = document) => {
   backToListLink(element.querySelectorAll(".js-back-to-list"));
 
   markAsReadNotifications(element)
+  handleNotificationActions(element)
 
   scrollToLastChild(element)
 

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

@@ -74,7 +74,7 @@ export default class InputCharacterCounter {
 
       // If input is a hidden for WYSIWYG editor add it at the end
       if (this.$input.parent().is(".editor")) {
-        this.$input.parent().append(container);
+        this.$input.parent().after(this.$target);
       } else {
         const wrapper = document.createElement("span")
         wrapper.className = "input-character-counter"
@@ -232,7 +232,7 @@ export default class InputCharacterCounter {
       } else if (this.maxCharacters - srLength === this.announceThreshold) {
         return this.announcedAt || currentLength;
       // The third branch checks that when deleting characters, we should
-      // announce the next threshold to get accurate annoucement. E.g. when we
+      // announce the next threshold to get accurate announcement. E.g. when we
       // have 750 characters left and the user deletes 100 characters at once,
       // we should announce "700 characters left" after that deletion.
       } else if (srLength < currentLength) {