Merge pull request #15464 from opf/feature/54464-snappier-progress-po…

…pover-backport

Feature/54464 snappier progress popover backport

app/forms/work_packages/progress_form.rb

@@ -171,6 +171,7 @@ def default_field_options(name)
     data = { "work-packages--progress--preview-progress-target": "progressInput",
              "work-packages--progress--touched-field-marker-target": "progressInput",
              action: "input->work-packages--progress--touched-field-marker#markFieldAsTouched" }
+
     if @focused_field == name
       data[:"work-packages--progress--focus-field-target"] = "fieldToFocus"
     end

frontend/package.json

@@ -124,6 +124,7 @@
     "glob": "^7.1.4",
     "hammerjs": "^2.0.8",
     "i18n-js": "^4.3.0",
+    "idiomorph": "^0.3.0",
     "jquery": "^3.5.1",
     "jquery-ui": "1.13.2",
     "jquery-ujs": "^1.2.2",
@@ -135,7 +136,6 @@
     "mime": "^2.5.2",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
-    "morphdom": "^2.7.2",
     "mousetrap": "~1.6.3",
     "ng-dynamic-component": "^10.7.0",
     "ng2-charts": "^4.1.1",

frontend/src/stimulus/controllers/dynamic/work-packages/progress/preview-progress.controller.ts

@@ -30,7 +30,7 @@
 
 import { Controller } from '@hotwired/stimulus';
 import { debounce } from 'lodash';
-import morphdom from 'morphdom';
+import Idiomorph from 'idiomorph/dist/idiomorph.cjs';
 
 interface TurboBeforeFrameRenderEventDetail {
   render:(currentElement:HTMLElement, newElement:HTMLElement) => void;
@@ -48,15 +48,15 @@ export default class PreviewProgressController extends Controller {
   private frameMorphRenderer:(event:CustomEvent<TurboBeforeFrameRenderEventDetail>) => void;
 
   connect() {
-    this.debouncedPreview = debounce((event:Event) => { void this.preview(event); }, 500);
+    this.debouncedPreview = debounce((event:Event) => { void this.preview(event); }, 100);
     // TODO: Ideally morphing in this single controller should not be necessary.
     // Turbo supports morphing, by adding the <turbo-frame refresh="morph"> attribute.
     // However, it has a bug, and it doesn't morphs when reloading the frame via javascript.
     // See https://github.com/hotwired/turbo/issues/1161 . Once the issue is solved, we can remove
     // this code and just use <turbo-frame refresh="morph"> instead.
     this.frameMorphRenderer = (event:CustomEvent<TurboBeforeFrameRenderEventDetail>) => {
       event.detail.render = (currentElement:HTMLElement, newElement:HTMLElement) => {
-        morphdom(currentElement, newElement, { childrenOnly: true });
+        Idiomorph.morph(currentElement, newElement, { ignoreActiveValue: true });
       };
     };
 

frontend/src/turbo/setup.ts

@@ -1,5 +1,4 @@
 import * as Turbo from '@hotwired/turbo';
-import morphdom from 'morphdom';
 import { ModalDialogElement } from '@openproject/primer-view-components/app/components/primer/alpha/modal_dialog';
 
 // Disable default turbo-drive for now as we don't need it for now AND it breaks angular routing
@@ -25,13 +24,3 @@ document.addEventListener('turbo:submit-end', (event:CustomEvent) => {
     dialog && dialog.close(true);
   }
 });
-
-interface TurboBeforeFrameRenderEventDetail {
-  render:(currentElement:HTMLElement, newElement:HTMLElement) => void;
-}
-
-document.addEventListener('turbo:before-frame-render', (event:CustomEvent<TurboBeforeFrameRenderEventDetail>) => {
-  event.detail.render = (currentElement:HTMLElement, newElement:HTMLElement) => {
-    morphdom(currentElement, newElement, { childrenOnly: true });
-  };
-});

frontend/src/typings/idiomorph.d.ts

@@ -0,0 +1,52 @@
+/*
+ * -- copyright
+ * OpenProject is an open source project management software.
+ * Copyright (C) 2024 the OpenProject GmbH
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See COPYRIGHT and LICENSE files for more details.
+ * ++
+ */
+
+declare module 'idiomorph/dist/idiomorph.cjs' {
+  export const Idiomorph:{
+      morph(oldNode:Element|Document, newContent?:string|Element|Iterable<Element>|null, options?:{
+        morphStyle?:'innerHTML'|'outerHTML';
+        ignoreActive?:boolean;
+        ignoreActiveValue?:boolean;
+        head?:{
+          style?:'merge'|'append'|'morph'|'none';
+        };
+        callbacks?:{
+          beforeNodeAdded?:(node:ChildNode) => void|boolean;
+          afterNodeAdded?:(node:ChildNode) => void;
+          beforeNodeMorphed?:(oldNode:Element, newNode:Element) => void|boolean;
+          afterNodeMorphed?:(oldNode:Element, newNode:Element) => void;
+          beforeNodeRemoved?:(node:ChildNode) => void|boolean;
+          afterNodeRemoved?:(node:ChildNode) => void;
+        };
+      })
+  };
+
+  export = Idiomorph;
+}