DEV: Consolidate ignore user modals (#22754)

We recently replaced another ignore user modal with a Glimmer and DModal based component. This change makes use of that same component in the user card ignore modal by adding an enableSelection flag.

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

@@ -6,15 +6,17 @@
   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>
+    {{#if this.enableSelection}}
+      <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>
+    {{/if}}
     <FutureDateInput
       @label="user.user_notifications.ignore_duration_when"
       @input={{readonly this.ignoredUntil}}

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

@@ -14,7 +14,9 @@ export default class IgnoreDurationModal extends Component {
 
   @tracked loading = false;
   @tracked ignoredUntil = null;
-  @tracked ignoredUsername = null;
+  @tracked ignoredUsername = this.args.model.ignoredUsername;
+
+  enableSelection = this.args.model.enableSelection ?? true;
 
   get timeShortcuts() {
     const timezone = this.currentUser.user_option.timezone;
@@ -53,7 +55,7 @@ export default class IgnoreDurationModal extends Component {
           actingUser: this.args.model.actingUser,
         })
         .then(() => {
-          this.args.model.onUserIgnored(this.ignoredUsername);
+          this.args.model.onUserIgnored?.(this.ignoredUsername);
           this.args.closeModal();
         })
         .catch(popupAjaxError)

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

@@ -1,60 +0,0 @@
-import Controller from "@ember/controller";
-import I18n from "I18n";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-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,
-
-  @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.flash(
-          I18n.t("user.user_notifications.ignore_duration_time_frame_required"),
-          "error"
-        );
-        return;
-      }
-      this.set("loading", true);
-      this.model
-        .updateNotificationLevel({
-          level: "ignore",
-          expiringAt: this.ignoredUntil,
-        })
-        .then(() => {
-          this.set("model.ignored", true);
-          this.set("model.muted", false);
-          if (this.onSuccess) {
-            this.onSuccess();
-          }
-          this.send("closeModal");
-        })
-        .catch(popupAjaxError)
-        .finally(() => this.set("loading", false));
-    },
-  },
-});

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

@@ -1,24 +0,0 @@
-<DModalBody
-  @title="user.user_notifications.ignore_duration_title"
-  @autoFocus="false"
->
-  <FutureDateInput
-    @label="user.user_notifications.ignore_duration_when"
-    @input={{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 ignore-duration-save"
-    @disabled={{this.saveDisabled}}
-    @label="user.user_notifications.ignore_duration_save"
-    @action={{action "ignore"}}
-  />
-
-  <ConditionalLoadingSpinner @size="small" @condition={{this.loading}} />
-</div>

app/assets/javascripts/discourse/tests/acceptance/user-test.js

@@ -318,14 +318,14 @@ acceptance(
       );
 
       await notificationLevelDropdown.selectRowByValue("changeToIgnored");
-      assert.ok(exists(".ignore-duration-modal"));
+      assert.ok(exists(".ignore-duration-with-username-modal"));
 
       const durationDropdown = selectKit(
-        ".ignore-duration-modal .future-date-input-selector"
+        ".ignore-duration-with-username-modal .future-date-input-selector"
       );
       await durationDropdown.expand();
       await durationDropdown.selectRowByIndex(0);
-      await click(".modal-footer .ignore-duration-save");
+      await click(".modal-footer .btn-primary");
       await notificationLevelDropdown.expand();
       assert.strictEqual(
         notificationLevelDropdown.selectedRow().value(),

app/assets/javascripts/select-kit/addon/components/user-notifications-dropdown.js

@@ -1,10 +1,13 @@
 import DropdownSelectBox from "select-kit/components/dropdown-select-box";
+import { inject as service } from "@ember/service";
 import I18n from "I18n";
 import { computed } from "@ember/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import showModal from "discourse/lib/show-modal";
+import IgnoreDurationModal from "discourse/components/modal/ignore-duration-with-username";
 
 export default DropdownSelectBox.extend({
+  modal: service(),
+
   classNames: ["user-notifications", "user-notifications-dropdown"],
 
   selectKitOptions: {
@@ -55,8 +58,11 @@ export default DropdownSelectBox.extend({
     this.updateNotificationLevel({ level: "mute" }).catch(popupAjaxError);
   },
   changeToIgnored() {
-    showModal("ignore-duration", {
-      model: this.user,
+    this.modal.show(IgnoreDurationModal, {
+      model: {
+        ignoredUsername: this.user.username,
+        enableSelection: false,
+      },
     });
   },