Tests + Refactoring for Suspension Modal

app/assets/javascripts/admin/controllers/admin-user-index.js.es6

@@ -58,7 +58,6 @@ export default Ember.Controller.extend(CanCheckEmails, {
     saveTrustLevel() { return this.get("model").saveTrustLevel(); },
     restoreTrustLevel() { return this.get("model").restoreTrustLevel(); },
     lockTrustLevel(locked) { return this.get("model").lockTrustLevel(locked); },
-    unsuspend() { return this.get("model").unsuspend(); },
     unblock() { return this.get("model").unblock(); },
     block() { return this.get("model").block(); },
     deleteAllPosts() { return this.get("model").deleteAllPosts(); },
@@ -68,6 +67,9 @@ export default Ember.Controller.extend(CanCheckEmails, {
     showSuspendModal() {
       this.get('adminTools').showSuspendModal(this.get('model'));
     },
+    unsuspend() {
+      this.get("model").unsuspend().catch(popupAjaxError);
+    },
 
 
     toggleUsernameEdit() {

app/assets/javascripts/admin/controllers/modals/admin-suspend-user.js.es6

@@ -1,24 +1,41 @@
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
+import computed from 'ember-addons/ember-computed-decorators';
+import { popupAjaxError } from 'discourse/lib/ajax-error';
 
 export default Ember.Controller.extend(ModalFunctionality, {
+  duration: null,
+  reason: null,
+  message: null,
+  loading: false,
 
-  submitDisabled: function() {
+  onShow() {
-    return (!this.get('reason') || this.get('reason').length < 1);
+    this.setProperties({
-  }.property('reason'),
+      duration: null,
+      reason: null,
+      message: null,
+      loading: false
+    });
+  },
+
+  @computed('reason', 'loading')
+  submitDisabled(reason, loading) {
+    return (loading || !reason || reason.length < 1);
+  },
 
   actions: {
-    suspend: function() {
+    suspend() {
-      if (this.get('submitDisabled')) return;
+      if (this.get('submitDisabled')) { return; }
-      var duration = parseInt(this.get('duration'), 10);
+
+      let duration = parseInt(this.get('duration'), 10);
       if (duration > 0) {
-        var self = this;
+        this.set('loading', true);
-        this.send('hideModal');
+        this.get('model').suspend({
-        this.get('model').suspend(duration, this.get('reason')).then(function() {
+          duration,
-          window.location.reload();
+          reason: this.get('reason'),
-        }, function(e) {
+          message: this.get('message')
-          var error = I18n.t('admin.user.suspend_failed', { error: "http: " + e.status + " - " + e.body });
+        }).then(() => {
-          bootbox.alert(error, function() { self.send('reopenModal'); });
+          this.send('closeModal');
-        });
+        }).catch(popupAjaxError).finally(() => this.set('loading', false));
       }
     }
   }

app/assets/javascripts/admin/models/admin-user.js.es6

@@ -240,21 +240,20 @@ const AdminUser = Discourse.User.extend({
     return suspended_at.format('L') + " - " + suspended_till.format('L');
   }.property('suspended_till', 'suspended_at'),
 
-  suspend(duration, reason) {
+  suspend(data) {
-    return ajax("/admin/users/" + this.id + "/suspend", {
+    return ajax(`/admin/users/${this.id}/suspend`, {
       type: 'PUT',
-      data: { duration: duration, reason: reason }
+      data
+    }).then(result => {
+      this.setProperties(result.suspension);
     });
   },
 
   unsuspend() {
-    return ajax("/admin/users/" + this.id + "/unsuspend", {
+    return ajax(`/admin/users/${this.id}/unsuspend`, {
       type: 'PUT'
-    }).then(function() {
+    }).then(result => {
-      window.location.reload();
+      this.setProperties(result.suspension);
-    }).catch(function(e) {
-      var error = I18n.t('admin.user.unsuspend_failed', { error: "http: " + e.status + " - " + e.body });
-      bootbox.alert(error);
     });
   },
 

app/assets/javascripts/admin/services/admin-tools.js.es6

@@ -22,7 +22,7 @@ export default Ember.Service.extend({
 
   showSuspendModal(user) {
     showModal('admin-suspend-user', {
-      user,
+      model: user,
       admin: true,
       modalClass: 'suspend-user-modal'
     });

app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs

@@ -44,4 +44,5 @@
     icon="ban"
     label="admin.user.suspend"}}
   {{d-modal-cancel close=(action "closeModal")}}
+  {{conditional-loading-spinner condition=loading size="small"}}
 </div>

app/assets/javascripts/admin/templates/user-index.hbs

@@ -296,29 +296,33 @@
     </div>
   </div>
 
-    <div class="display-row {{if model.isSuspended 'highlight-danger'}}">
+    <div class="user-suspended display-row {{if model.isSuspended 'highlight-danger'}}">
-    <div class='field'>{{i18n 'admin.user.suspended'}}</div>
+      <div class='field'>{{i18n 'admin.user.suspended'}}</div>
-    <div class='value'>{{i18n-yes-no model.isSuspended}}</div>
+      <div class='value'>{{i18n-yes-no model.isSuspended}}</div>
-    <div class='controls'>
+      <div class='controls'>
-    {{#if model.isSuspended}}
+      {{#if model.isSuspended}}
-      {{d-button class="btn-danger" action="unsuspend" icon="ban" label="admin.user.unsuspend"}}
-      {{suspendDuration}}
-      {{i18n 'admin.user.suspended_explanation'}}
-    {{else}}
-      {{#if model.canSuspend}}
         {{d-button
-          class="btn-danger suspend-user"
+          class="btn-danger unsuspend-user"
-          action="showSuspendModal"
+          action=(action "unsuspend")
           icon="ban"
-          label="admin.user.suspend"}}
+          label="admin.user.unsuspend"}}
+        {{suspendDuration}}
         {{i18n 'admin.user.suspended_explanation'}}
+      {{else}}
+        {{#if model.canSuspend}}
+          {{d-button
+            class="btn-danger suspend-user"
+            action=(action "showSuspendModal")
+            icon="ban"
+            label="admin.user.suspend"}}
+          {{i18n 'admin.user.suspended_explanation'}}
+        {{/if}}
       {{/if}}
-    {{/if}}
     </div>
   </div>
 
   {{#if model.isSuspended}}
-    <div class='display-row highlight-danger'>
+    <div class='display-row highlight-danger suspension-info'>
       <div class='field'>{{i18n 'admin.user.suspended_by'}}</div>
       <div class='value'>
         {{#link-to 'adminUser' suspendedBy}}{{avatar model.suspendedBy imageSize="tiny"}}{{/link-to}}

app/assets/stylesheets/common/admin/suspend.scss

@@ -16,4 +16,8 @@
     box-sizing: border-box;
     height: 2.5em;
   }
+
+  .inline-spinner {
+    float: right;
+  }
 }

app/controllers/admin/users_controller.rb

@@ -55,11 +55,20 @@ class Admin::UsersController < Admin::AdminController
     guardian.ensure_can_suspend!(@user)
     @user.suspended_till = params[:duration].to_i.days.from_now
     @user.suspended_at = DateTime.now
+
     @user.save!
     @user.revoke_api_key
     StaffActionLogger.new(current_user).log_user_suspend(@user, params[:reason])
     @user.logged_out
-    render body: nil
+
+    render_json_dump(
+      suspension: {
+        suspended: true,
+        suspend_reason: params[:reason],
+        suspended_till: @user.suspended_till,
+        suspended_at: @user.suspended_at
+      }
+    )
   end
 
   def unsuspend
@@ -68,7 +77,12 @@ class Admin::UsersController < Admin::AdminController
     @user.suspended_at = nil
     @user.save!
     StaffActionLogger.new(current_user).log_user_unsuspend(@user)
-    render body: nil
+
+    render_json_dump(
+      suspension: {
+        suspended: false
+      }
+    )
   end
 
   def log_out

test/javascripts/acceptance/admin-suspend-user-test.js.es6

@@ -1,6 +1,22 @@
 import { acceptance } from "helpers/qunit-helpers";
 
-acceptance("Admin - Suspend User", { loggedIn: true });
+acceptance("Admin - Suspend User", {
+  loggedIn: true,
+
+  pretend(server, helper) {
+    server.put('/admin/users/:user_id/suspend', () => helper.response(200, {
+      suspension: {
+        suspended: true
+      }
+    }));
+
+    server.put('/admin/users/:user_id/unsuspend', () => helper.response(200, {
+      suspension: {
+        suspended: false
+      }
+    }));
+  }
+});
 
 QUnit.test("suspend a user - cancel", assert => {
   visit("/admin/users/1234/regular");
@@ -16,8 +32,13 @@ QUnit.test("suspend a user - cancel", assert => {
   });
 });
 
-QUnit.test("suspend a user", assert => {
+QUnit.test("suspend, then unsuspend a user", assert => {
   visit("/admin/users/1234/regular");
+
+  andThen(() => {
+    assert.ok(!exists('.suspension-info'));
+  });
+
   click(".suspend-user");
 
   andThen(() => {
@@ -32,5 +53,11 @@ QUnit.test("suspend a user", assert => {
   click('.perform-suspend');
   andThen(() => {
     assert.equal(find('.suspend-user-modal:visible').length, 0);
+    assert.ok(exists('.suspension-info'));
+  });
+
+  click('.unsuspend-user');
+  andThen(() => {
+    assert.ok(!exists('.suspension-info'));
   });
 });