DEV: upgrade user-notes-modal to glimmer and new DModal API

assets/javascripts/discourse-user-notes/lib/user-notes.js

@@ -1,22 +1,18 @@
-import showModal from "discourse/lib/show-modal";
+import UserNotesModal from "../../discourse/components/modal/user-notes";
+import { getOwner } from "discourse-common/lib/get-owner";
 
 export function showUserNotes(store, userId, callback, opts) {
+  const modal = getOwner(this).lookup("service:modal");
   opts = opts || {};
 
   return store.find("user-note", { user_id: userId }).then((model) => {
-    const controller = showModal("user-notes", {
+    return modal.show(UserNotesModal, {
-      model,
+      model: {
-      title: "user_notes.title",
+        note: model,
-      addModalBodyView: true,
+        userId,
+        callback,
+        postId: opts.postId,
+      },
     });
-    controller.reset();
-
-    controller.setProperties({
-      userId,
-      callback,
-      postId: opts.postId,
-    });
-
-    return controller;
   });
 }

assets/javascripts/discourse/components/modal/user-notes.hbs

@@ -1,13 +1,17 @@
-<DModalBody @class="user-notes-modal">
+<DModal
+  @closeModal={{@closeModal}}
+  @title={{i18n "user_notes.title"}}
+  class="user-notes-modal"
+>
   <Textarea @value={{this.newNote}} />
   <DButton
-    @action={{action "attachNote"}}
+    @action={{this.attachNote}}
     @label="user_notes.attach"
     @class="btn-primary"
     @disabled={{this.attachDisabled}}
   />
 
-  {{#each model as |n|}}
+  {{#each @model.note as |n|}}
     <div class="user-note">
       <div class="posted-by">
         <UserLink @user={{n.created_by}}>
@@ -22,7 +26,7 @@
           {{#if n.can_delete}}
             <span class="controls">
               <DButton
-                @action={{action "removeNote" n}}
+                @action={{(fn this.removeNote n)}}
                 @icon="far-trash-alt"
                 @class="btn-small btn-danger"
                 @title="user_notes.remove"
@@ -45,4 +49,4 @@
       <div class="clearfix"></div>
     </div>
   {{/each}}
-</DModalBody>
+</DModal>

assets/javascripts/discourse/components/modal/user-notes.js

@@ -1,36 +1,38 @@
-import Controller from "@ember/controller";
+import Component from "@glimmer/component";
 import I18n from "I18n";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { tracked } from "@glimmer/tracking";
 
-export default class UserNotesController extends Controller {
+export default class UserNotesModal extends Component {
   @service dialog;
+  @service store;
 
   @tracked newNote;
   @tracked userId;
   @tracked saving = false;
+  postId;
+  callback;
 
+  constructor() {
+    super(...arguments);
+    this.userId = this.args.model.userId;
+    this.callback = this.args.model.callback;
+    this.postId = this.args.model.postId;
+  }
   #refreshCount() {
     if (this.callback) {
-      this.callback(this.model.length);
+      this.callback(this.args.model.note.length);
     }
   }
 
-  reset() {
-    this.newNote = null;
-    this.userId = null;
-    this.callback = null;
-    this.saving = false;
-  }
-
   get attachDisabled() {
     return this.saving || !this.newNote || this.newNote.length === 0;
   }
 
   @action
-  attachNote() {
+  async attachNote() {
     const note = this.store.createRecord("user-note");
     const userId = parseInt(this.userId, 10);
 
@@ -45,15 +47,16 @@ export default class UserNotesController extends Controller {
       args.post_id = parseInt(this.postId, 10);
     }
 
-    note
+    try {
-      .save(args)
+      await note.save(args);
-      .then(() => {
+      this.newNote = "";
-        this.newNote = "";
+      this.args.model.note.insertAt(0, note);
-        this.model.insertAt(0, note);
+      this.#refreshCount();
-        this.#refreshCount();
+    } catch (error) {
-      })
+      popupAjaxError(error);
-      .catch(popupAjaxError)
+    } finally {
-      .finally(() => (this.saving = false));
+      this.saving = false;
+    }
   }
 
   @action
@@ -64,7 +67,7 @@ export default class UserNotesController extends Controller {
         note
           .destroyRecord()
           .then(() => {
-            this.model.removeObject(note);
+            this.args.model.note.removeObject(note);
             this.#refreshCount();
           })
           .catch(popupAjaxError);