DEV: Convert dismiss modal to component-based API (#481)

assets/javascripts/discourse/components/user-menu/assigns-list.js

@@ -4,7 +4,6 @@ import UserMenuNotificationItem from "discourse/lib/user-menu/notification-item"
 import UserMenuAssignItem from "../../lib/user-menu/assign-item";
 import Notification from "discourse/models/notification";
 import I18n from "I18n";
-import showModal from "discourse/lib/show-modal";
 import Topic from "discourse/models/topic";
 import UserMenuAssignsListEmptyState from "./assigns-list-empty-state";
 
@@ -37,6 +36,25 @@ export default class UserMenuAssignNotificationsList extends UserMenuNotificatio
     return UserMenuAssignsListEmptyState;
   }
 
+  get alwaysRenderDismissConfirmation() {
+    return true;
+  }
+
+  get _unreadAssignedNotificationsCount() {
+    const key = `grouped_unread_notifications.${this.site.notification_types.assigned}`;
+    // we're retrieving the value with get() so that Ember tracks the property
+    // and re-renders the UI when it changes.
+    // we can stop using `get()` when the User model is refactored into native
+    // class with @tracked properties.
+    return this.currentUser.get(key) || 0;
+  }
+
+  get dismissConfirmationText() {
+    return I18n.t("notifications.dismiss_confirmation.body.assigns", {
+      count: this._unreadAssignedNotificationsCount,
+    });
+  }
+
   async fetchItems() {
     const data = await ajax("/assign/user-menu-assigns.json");
     const content = [];
@@ -59,24 +77,4 @@ export default class UserMenuAssignNotificationsList extends UserMenuNotificatio
     content.push(...topics.map((assign) => new UserMenuAssignItem({ assign })));
     return content;
   }
-
-  dismissWarningModal() {
-    const modalController = showModal("dismiss-notification-confirmation");
-    modalController.set(
-      "confirmationMessage",
-      I18n.t("notifications.dismiss_confirmation.body.assigns", {
-        count: this._unreadAssignedNotificationsCount,
-      })
-    );
-    return modalController;
-  }
-
-  get _unreadAssignedNotificationsCount() {
-    const key = `grouped_unread_notifications.${this.site.notification_types.assigned}`;
-    // we're retrieving the value with get() so that Ember tracks the property
-    // and re-renders the UI when it changes.
-    // we can stop using `get()` when the User model is refactored into native
-    // class with @tracked properties.
-    return this.currentUser.get(key) || 0;
-  }
 }

test/javascripts/acceptance/assigns-tab-user-menu-test.js

@@ -422,7 +422,9 @@ acceptance("Discourse Assign | user menu", function (needs) {
     await click(".notifications-dismiss");
     assert.false(markRead, "mark-read request isn't sent");
     assert.strictEqual(
-      query(".dismiss-notification-confirmation.modal-body").textContent.trim(),
+      query(
+        ".dismiss-notification-confirmation .modal-body"
+      ).textContent.trim(),
       I18n.t("notifications.dismiss_confirmation.body.assigns", { count: 173 }),
       "dismiss confirmation modal is shown"
     );
@@ -494,4 +496,15 @@ acceptance("Discourse Assign | user menu", function (needs) {
       "topicModelTransformer Howdy this my test topic with emoji !"
     );
   });
+
+  test("renders the confirmation modal when dismiss assign notifications", async function (assert) {
+    await visit("/");
+    await click(".d-header-icons .current-user");
+    await click("#user-menu-button-assign-list");
+    await click(".notifications-dismiss");
+    assert.false(markRead, "a request to the server is not made");
+    assert
+      .dom(".dismiss-notification-confirmation .modal-body")
+      .exists("the dismiss notification confirmation modal is present");
+  });
 });