DEV: migrate ignore duration to Glimmer and DModal (#22687)

This PR migrates the ignore modal to a Glimmer component and DModal. Most of the code is lift-and-shift.

app/assets/javascripts/discourse/app/components/ignored-user-list.js

@@ -1,9 +1,11 @@
 import Component from "@ember/component";
+import { inject as service } from "@ember/service";
 import User from "discourse/models/user";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import showModal from "discourse/lib/show-modal";
+import IgnoreDurationModal from "./modal/ignore-duration-with-username";
 
 export default Component.extend({
+  modal: service(),
   item: null,
   actions: {
     removeIgnoredUser(item) {
@@ -20,13 +22,13 @@ export default Component.extend({
       });
     },
     newIgnoredUser() {
-      const modal = showModal("ignore-duration-with-username", {
+      this.modal.show(IgnoreDurationModal, {
-        model: this.model,
+        model: {
-      });
+          actingUser: this.model,
-      modal.setProperties({
+          ignoredUsername: null,
-        ignoredUsername: null,
+          onUserIgnored: (username) => {
-        onUserIgnored: (username) => {
+            this.items.addObject(username);
-          this.items.addObject(username);
+          },
         },
       });
     },

app/assets/javascripts/discourse/app/components/modal/ignore-duration-with-username.hbs

@@ -0,0 +1,36 @@
+<DModal
+  @closeModal={{@closeModal}}
+  @title={{i18n "user.user_notifications.ignore_duration_title"}}
+  @flash={{this.flash}}
+  @autoFocus="false"
+  class="ignore-duration-with-username-modal"
+>
+  <:body>
+    <div class="controls tracking-controls">
+      <label>{{d-icon "far-eye-slash" class="icon"}}
+        {{i18n "user.user_notifications.ignore_duration_username"}}</label>
+      <EmailGroupUserChooser
+        @value={{this.ignoredUsername}}
+        @onChange={{this.updateIgnoredUsername}}
+        @options={{hash excludeCurrentUser=true maximum=1}}
+      />
+    </div>
+    <FutureDateInput
+      @label="user.user_notifications.ignore_duration_when"
+      @input={{readonly this.ignoredUntil}}
+      @customShortcuts={{this.timeShortcuts}}
+      @includeDateTime={{false}}
+      @onChangeInput={{action (mut this.ignoredUntil)}}
+    />
+    <p>{{i18n "user.user_notifications.ignore_duration_note"}}</p>
+  </:body>
+  <:footer>
+    <DButton
+      @class="btn-primary"
+      @disabled={{this.saveDisabled}}
+      @label="user.user_notifications.ignore_duration_save"
+      @action={{this.ignore}}
+    />
+    <ConditionalLoadingSpinner @size="small" @condition={{this.loading}} />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/ignore-duration-with-username.js

@@ -0,0 +1,68 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import I18n from "I18n";
+import User from "discourse/models/user";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import { timeShortcuts } from "discourse/lib/time-shortcut";
+
+export default class IgnoreDurationModal extends Component {
+  @service currentUser;
+
+  @tracked flash;
+
+  @tracked loading = false;
+  @tracked ignoredUntil = null;
+  @tracked ignoredUsername = null;
+
+  get timeShortcuts() {
+    const timezone = this.currentUser.user_option.timezone;
+    const shortcuts = timeShortcuts(timezone);
+    return [
+      shortcuts.laterToday(),
+      shortcuts.tomorrow(),
+      shortcuts.laterThisWeek(),
+      shortcuts.thisWeekend(),
+      shortcuts.monday(),
+      shortcuts.twoWeeks(),
+      shortcuts.nextMonth(),
+      shortcuts.twoMonths(),
+      shortcuts.threeMonths(),
+      shortcuts.fourMonths(),
+      shortcuts.sixMonths(),
+      shortcuts.oneYear(),
+      shortcuts.forever(),
+    ];
+  }
+
+  @action
+  ignore() {
+    if (!this.ignoredUntil || !this.ignoredUsername) {
+      this.flash = I18n.t(
+        "user.user_notifications.ignore_duration_time_frame_required"
+      );
+      return;
+    }
+    this.loading = true;
+    User.findByUsername(this.ignoredUsername).then((user) => {
+      user
+        .updateNotificationLevel({
+          level: "ignore",
+          expiringAt: this.ignoredUntil,
+          actingUser: this.args.model.actingUser,
+        })
+        .then(() => {
+          this.args.model.onUserIgnored(this.ignoredUsername);
+          this.args.closeModal();
+        })
+        .catch(popupAjaxError)
+        .finally(() => (this.loading = false));
+    });
+  }
+
+  @action
+  updateIgnoredUsername(selected) {
+    this.ignoredUsername = selected.firstObject;
+  }
+}

app/assets/javascripts/discourse/app/controllers/ignore-duration-with-username.js

@@ -1,65 +0,0 @@
-import Controller from "@ember/controller";
-import I18n from "I18n";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import User from "discourse/models/user";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-import { timeShortcuts } from "discourse/lib/time-shortcut";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default Controller.extend(ModalFunctionality, {
-  loading: false,
-  ignoredUntil: null,
-  ignoredUsername: null,
-
-  @discourseComputed
-  timeShortcuts() {
-    const timezone = this.currentUser.user_option.timezone;
-    const shortcuts = timeShortcuts(timezone);
-    return [
-      shortcuts.laterToday(),
-      shortcuts.tomorrow(),
-      shortcuts.laterThisWeek(),
-      shortcuts.thisWeekend(),
-      shortcuts.monday(),
-      shortcuts.twoWeeks(),
-      shortcuts.nextMonth(),
-      shortcuts.twoMonths(),
-      shortcuts.threeMonths(),
-      shortcuts.fourMonths(),
-      shortcuts.sixMonths(),
-      shortcuts.oneYear(),
-      shortcuts.forever(),
-    ];
-  },
-
-  actions: {
-    ignore() {
-      if (!this.ignoredUntil || !this.ignoredUsername) {
-        this.flash(
-          I18n.t("user.user_notifications.ignore_duration_time_frame_required"),
-          "error"
-        );
-        return;
-      }
-      this.set("loading", true);
-      User.findByUsername(this.ignoredUsername).then((user) => {
-        user
-          .updateNotificationLevel({
-            level: "ignore",
-            expiringAt: this.ignoredUntil,
-            actingUser: this.model,
-          })
-          .then(() => {
-            this.onUserIgnored(this.ignoredUsername);
-            this.send("closeModal");
-          })
-          .catch(popupAjaxError)
-          .finally(() => this.set("loading", false));
-      });
-    },
-
-    updateIgnoredUsername(selected) {
-      this.set("ignoredUsername", selected.firstObject);
-    },
-  },
-});

app/assets/javascripts/discourse/app/templates/modal/ignore-duration-with-username.hbs

@@ -1,32 +0,0 @@
-<DModalBody
-  @title="user.user_notifications.ignore_duration_title"
-  @autoFocus="false"
->
-  <div class="controls tracking-controls">
-    <label>{{d-icon "far-eye-slash" class="icon"}}
-      {{i18n "user.user_notifications.ignore_duration_username"}}</label>
-    <EmailGroupUserChooser
-      @value={{this.ignoredUsername}}
-      @onChange={{action "updateIgnoredUsername"}}
-      @options={{hash excludeCurrentUser=true maximum=1}}
-    />
-  </div>
-  <FutureDateInput
-    @label="user.user_notifications.ignore_duration_when"
-    @input={{readonly this.ignoredUntil}}
-    @customShortcuts={{this.timeShortcuts}}
-    @includeDateTime={{false}}
-    @onChangeInput={{action (mut this.ignoredUntil)}}
-  />
-  <p>{{i18n "user.user_notifications.ignore_duration_note"}}</p>
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @class="btn-primary"
-    @disabled={{this.saveDisabled}}
-    @label="user.user_notifications.ignore_duration_save"
-    @action={{action "ignore"}}
-  />
-  <ConditionalLoadingSpinner @size="small" @condition={{this.loading}} />
-</div>