DEV: upgrade user-notes-modal to glimmer and new DModal API (#87)

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

* CSS cleanup

---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>

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 { getOwnerWithFallback } from "discourse-common/lib/get-owner";
 
 export function showUserNotes(store, userId, callback, opts) {
+  const modal = getOwnerWithFallback(this).lookup("service:modal");
   opts = opts || {};
 
   return store.find("user-note", { user_id: userId }).then((model) => {
-    const controller = showModal("user-notes", {
-      model,
-      title: "user_notes.title",
-      addModalBodyView: true,
-    });
-    controller.reset();
-
-    controller.setProperties({
+    return modal.show(UserNotesModal, {
+      model: {
+        note: model,
         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,32 @@
-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 userId = this.args.model.userId;
   @tracked saving = false;
+  postId = this.args.model.postId;
+  callback = this.args.model.callback;
 
   #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 +41,16 @@ export default class UserNotesController extends Controller {
       args.post_id = parseInt(this.postId, 10);
     }
 
-    note
-      .save(args)
-      .then(() => {
+    try {
+      await note.save(args);
       this.newNote = "";
-        this.model.insertAt(0, note);
+      this.args.model.note.insertAt(0, note);
       this.#refreshCount();
-      })
-      .catch(popupAjaxError)
-      .finally(() => (this.saving = false));
+    } catch (error) {
+      popupAjaxError(error);
+    } finally {
+      this.saving = false;
+    }
   }
 
   @action
@@ -64,7 +61,7 @@ export default class UserNotesController extends Controller {
         note
           .destroyRecord()
           .then(() => {
-            this.model.removeObject(note);
+            this.args.model.note.removeObject(note);
             this.#refreshCount();
           })
           .catch(popupAjaxError);

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

@@ -1,5 +1,5 @@
 <DButton
-  @class="btn btn-default"
+  class="btn-default show-user-notes-btn"
   @action={{@show}}
   @icon="pencil-alt"
   @translatedLabel={{this.label}}

assets/stylesheets/user_notes.scss

@@ -1,35 +1,6 @@
-#discourse-modal {
-  .modal-body.user-notes-modal {
-    max-height: 80vh !important;
-  }
-}
-
-.show-user-notes-on-flags {
-  display: inline-block;
-
-  button {
-    display: inline;
-    padding: 0;
-  }
-}
-
-.show-user-notes-on-card {
-  button {
-    display: inline;
-    padding: 0;
-  }
-}
-
-.modal-body.user-notes-modal {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  textarea {
-    width: 98%;
-    @include breakpoint(mobile, min-width) {
-      min-width: 400px;
-    }
+.d-modal.user-notes-modal {
+  .d-modal__container {
+    width: 100%;
   }
 
   .posted-by {
@@ -69,6 +40,22 @@
   }
 }
 
+.show-user-notes-on-flags {
+  display: inline-block;
+
+  button {
+    display: inline;
+    padding: 0;
+  }
+}
+
+.show-user-notes-on-card {
+  button {
+    display: inline;
+    padding: 0;
+  }
+}
+
 .user-notes-icon {
   .mobile-view & {
     order: 2;

test/javascripts/acceptance/user-notes-test.js

@@ -41,22 +41,25 @@ acceptance("User Notes", function (needs) {
   test("creates note from user's profile", async function (assert) {
     await visit("/admin/users/1/eviltrout");
 
-    assert.dom(".user-controls button").hasText(I18n.t("user_notes.title"));
-    assert.dom(".user-notes-modal.modal-body").isNotVisible();
+    const modalClass = ".user-notes-modal";
+    assert
+      .dom(".user-controls .show-user-notes-btn")
+      .hasText(I18n.t("user_notes.title"));
+    assert.dom(modalClass).doesNotExist();
 
-    await click(".user-controls button");
+    await click(".user-controls .show-user-notes-btn");
 
-    assert.dom(".user-notes-modal.modal-body").isVisible();
+    assert.dom(modalClass).exists();
 
-    await fillIn(".user-notes-modal textarea", "Helpful user");
+    await fillIn(`${modalClass} textarea`, "Helpful user");
 
-    assert.dom(".user-notes-modal.modal-body button").isEnabled();
+    assert.dom(`${modalClass} .btn-primary`).isEnabled();
 
-    await click(".user-notes-modal.modal-body button");
-    await click(".user-notes-modal button.modal-close");
+    await click(`${modalClass} .btn-primary`);
+    await click(`${modalClass} .modal-close`);
 
     assert
-      .dom(".user-controls button")
+      .dom(".user-controls .show-user-notes-btn")
       .hasText(I18n.t("user_notes.show", { count: 1 }));
   });
 });