DEV: converts user-status modal to component (#23168)

app/assets/javascripts/discourse/app/components/modal/user-status.hbs

@@ -1,5 +1,9 @@
-<DModalBody>
-  <ConditionalLoadingSpinner @condition={{this.loading}}>
+<DModal
+  @closeModal={{@closeModal}}
+  class="user-status"
+  @title={{i18n "user_status.set_custom_status"}}
+>
+  <:body>
     <div class="control-group">
       <UserStatusPicker @status={{this.status}} />
     </div>
@@ -15,30 +19,31 @@
       <label class="control-label">
         {{i18n "user_status.remove_status"}}
       </label>
+
       <TimeShortcutPicker
         @timeShortcuts={{this.timeShortcuts}}
         @hiddenOptions={{this.hiddenTimeShortcutOptions}}
         @customLabels={{this.customTimeShortcutLabels}}
         @prefilledDatetime={{this.prefilledDateTime}}
-        @onTimeSelected={{action "onTimeSelected"}}
+        @onTimeSelected={{this.onTimeSelected}}
         @_itsatrap={{this._itsatrap}}
       />
     </div>
-    <div class="modal-footer control-group">
+  </:body>
+  <:footer>
+    <DButton
+      @label="user_status.save"
+      @class="btn-primary"
+      @disabled={{not this.statusIsSet}}
+      @action={{this.saveAndClose}}
+    />
+    <DModalCancel @close={{@closeModal}} />
+    {{#if this.showDeleteButton}}
       <DButton
-        @label="user_status.save"
-        @class="btn-primary"
-        @disabled={{not this.statusIsSet}}
-        @action={{action "saveAndClose"}}
+        @icon="trash-alt"
+        @class="delete-status btn-danger"
+        @action={{this.delete}}
       />
-      <DModalCancel @close={{action "closeModal"}} />
-      {{#if this.showDeleteButton}}
-        <DButton
-          @icon="trash-alt"
-          @class="delete-status btn-danger"
-          @action={{action "delete"}}
-        />
-      {{/if}}
-    </div>
-  </ConditionalLoadingSpinner>
-</DModalBody>
+    {{/if}}
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/user-status.js

@@ -1,5 +1,3 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { action } from "@ember/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -8,14 +6,17 @@ import {
   TIME_SHORTCUT_TYPES,
   timeShortcuts,
 } from "discourse/lib/time-shortcut";
+import Component from "@ember/component";
 
-export default Controller.extend(ModalFunctionality, {
-  showDeleteButton: false,
-  prefilledDateTime: null,
-  timeShortcuts: null,
-  _itsatrap: null,
+export default class ModalUserStatus extends Component {
+  showDeleteButton = false;
+  prefilledDateTime = null;
+  timeShortcuts = null;
+  _itsatrap = null;
+
+  init() {
+    super.init(...arguments);
 
-  onShow() {
     const currentStatus = { ...this.model.status };
     this.setProperties({
       status: currentStatus,
@@ -27,42 +28,42 @@ export default Controller.extend(ModalFunctionality, {
     });
 
     this.set("_itsatrap", new ItsATrap());
-  },
+  }
 
-  onClose() {
+  willDestroy() {
     this._itsatrap.destroy();
     this.set("_itsatrap", null);
     this.set("timeShortcuts", null);
-  },
+  }
 
   @discourseComputed("status.emoji", "status.description")
   statusIsSet(emoji, description) {
     return !!emoji && !!description;
-  },
+  }
 
   @discourseComputed
   customTimeShortcutLabels() {
     const labels = {};
     labels[TIME_SHORTCUT_TYPES.NONE] = "time_shortcut.never";
     return labels;
-  },
+  }
 
   @discourseComputed
   hiddenTimeShortcutOptions() {
     return [TIME_SHORTCUT_TYPES.LAST_CUSTOM];
-  },
+  }
 
   @action
   delete() {
     Promise.resolve(this.model.deleteAction())
-      .then(() => this.send("closeModal"))
+      .then(() => this.closeModal())
       .catch((e) => this._handleError(e));
-  },
+  }
 
   @action
   onTimeSelected(_, time) {
     this.set("status.endsAt", time);
-  },
+  }
 
   @action
   saveAndClose() {
@@ -73,9 +74,9 @@ export default Controller.extend(ModalFunctionality, {
     };
 
     Promise.resolve(this.model.saveAction(newStatus, this.pauseNotifications))
-      .then(() => this.send("closeModal"))
+      .then(() => this.closeModal())
       .catch((e) => this._handleError(e));
-  },
+  }
 
   _handleError(e) {
     if (typeof e === "string") {
@@ -83,11 +84,11 @@ export default Controller.extend(ModalFunctionality, {
     } else {
       popupAjaxError(e);
     }
-  },
+  }
 
   _buildTimeShortcuts() {
     const timezone = this.currentUser.user_option.timezone;
     const shortcuts = timeShortcuts(timezone);
     return [shortcuts.oneHour(), shortcuts.twoHours(), shortcuts.tomorrow()];
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js

@@ -1,9 +1,9 @@
 import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
 import { action } from "@ember/object";
-import showModal from "discourse/lib/show-modal";
 import DoNotDisturb from "discourse/lib/do-not-disturb";
 import DoNotDisturbModal from "discourse/components/modal/do-not-disturb";
+import UserStatusModal from "discourse/components/modal/user-status";
 
 const _extraItems = [];
 
@@ -81,9 +81,8 @@ export default class UserMenuProfileTabContent extends Component {
   @action
   setUserStatusClick() {
     this.args.closeUserMenu();
-    showModal("user-status", {
-      title: "user_status.set_custom_status",
-      modalClass: "user-status",
+
+    this.modal.show(UserStatusModal, {
       model: {
         status: this.currentUser.status,
         pauseNotifications: this.currentUser.isInDoNotDisturb(),

app/assets/javascripts/discourse/app/controllers/preferences/account.js

@@ -11,11 +11,12 @@ import getURL from "discourse-common/lib/get-url";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { inject as service } from "@ember/service";
 import { next } from "@ember/runloop";
-import showModal from "discourse/lib/show-modal";
 import { exportUserArchive } from "discourse/lib/export-csv";
+import UserStatusModal from "discourse/components/modal/user-status";
 
 export default Controller.extend(CanCheckEmails, {
   dialog: service(),
+  modal: service(),
   user: controller(),
   canDownloadPosts: alias("user.viewingSelf"),
 
@@ -164,9 +165,7 @@ export default Controller.extend(CanCheckEmails, {
 
   @action
   showUserStatusModal(status) {
-    showModal("user-status", {
-      title: "user_status.set_custom_status",
-      modalClass: "user-status",
+    this.modal.show(UserStatusModal, {
       model: {
         status,
         hidePauseNotifications: true,

app/assets/stylesheets/common/modal/user-status.scss

@@ -5,10 +5,6 @@
   }
 
   .modal-footer {
-    margin: 0;
-    border-top: 0;
-    padding: 10px 0;
-
     .delete-status {
       margin-left: auto;
       margin-right: 0;
@@ -34,5 +30,9 @@
     .control-label {
       font-weight: 700;
     }
+
+    .tap-tile:last-child {
+      border: 0;
+    }
   }
 }