UX: Enabled sorting for more columns in admin user list (#7208)

app/assets/javascripts/admin/controllers/admin-users-list-show.js.es6

@@ -87,8 +87,8 @@ export default Ember.Controller.extend(CanCheckEmails, {
       );
     },
 
-    showEmails: function() {
-      this.set("showEmails", true);
+    toggleEmailVisibility: function() {
+      this.toggleProperty("showEmails");
       this._refreshUsers();
     }
   }

app/assets/javascripts/admin/routes/admin-users-list-show.js.es6

@@ -18,7 +18,6 @@ export default Discourse.Route.extend({
           order: transition.to.queryParams.order,
           ascending: transition.to.queryParams.ascending,
           query: params.filter,
-          showEmails: false,
           refreshing: false
         });
 

app/assets/javascripts/admin/templates/users-list-show.hbs

@@ -8,12 +8,16 @@
 <div class="admin-title">
   <h2>{{title}}</h2>
   {{#if canCheckEmails}}
-      <button {{action "showEmails"}} class="show-emails btn btn-default">{{i18n 'admin.users.show_emails'}}</button>
+      {{#if showEmails}}
+        <button {{action "toggleEmailVisibility"}} class="hide-emails btn btn-default">{{i18n 'admin.users.hide_emails'}}</button>
+      {{else}}
+        <button {{action "toggleEmailVisibility"}} class="show-emails btn btn-default">{{i18n 'admin.users.show_emails'}}</button>
+      {{/if}}
   {{/if}}
 </div>
 <div class='username controls'>
   {{text-field value=listFilter placeholder=searchHint}}
-  
+
 </div>
 
 {{#conditional-loading-spinner condition=refreshing}}
@@ -23,9 +27,9 @@
         {{#if showApproval}}
           <th>{{input type="checkbox" checked=selectAll}}</th>
         {{/if}}
-        <th>{{i18n 'username'}}</th>
-        <th class='email-heading'>{{i18n 'email'}}</th>
-        <th>{{i18n 'admin.users.last_emailed'}}</th>
+        {{admin-directory-toggle field="username" i18nKey='username' order=order ascending=ascending}}
+        {{admin-directory-toggle field="email" i18nKey='email' order=order ascending=ascending}}
+        {{admin-directory-toggle field="last_emailed" i18nKey='admin.users.last_emailed' order=order ascending=ascending}}
         {{admin-directory-toggle field="seen" i18nKey='last_seen' order=order ascending=ascending}}
         {{admin-directory-toggle field="topics_viewed" i18nKey="admin.user.topics_entered" order=order ascending=ascending}}
         {{admin-directory-toggle field="posts_read" i18nKey="admin.user.posts_read_count" order=order ascending=ascending}}

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

@@ -435,7 +435,7 @@ $mobile-breakpoint: 700px;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  .show-emails {
+  .show-emails, .hide-emails {
     margin-left: auto;
   }
 }

config/locales/client.en.yml

@@ -3788,6 +3788,7 @@ en:
         id_not_found: "Sorry, that user id doesn't exist in our system."
         active: "Activated"
         show_emails: "Show Emails"
+        hide_emails: "Hide Emails"
         nav:
           new: "New"
           active: "Active"

test/javascripts/acceptance/admin-users-list-test.js.es6

@@ -9,6 +9,52 @@ QUnit.test("lists users", async assert => {
   assert.ok(!exists(".user:eq(0) .email small"), "escapes email");
 });
 
+QUnit.test("sorts users", async assert => {
+  await visit("/admin/users/list/active");
+
+  assert.ok(exists(".users-list .user"));
+
+  await click(".users-list .sortable:nth-child(1)");
+
+  assert.ok(
+    find(".users-list .user:nth-child(1) .username")
+      .text()
+      .includes("eviltrout"),
+    "list should be sorted by username"
+  );
+
+  await click(".users-list .sortable:nth-child(1)");
+
+  assert.ok(
+    find(".users-list .user:nth-child(1) .username")
+      .text()
+      .includes("discobot"),
+    "list should be sorted ascending by username"
+  );
+});
+
+QUnit.test("toggles email visibility", async assert => {
+  await visit("/admin/users/list/active");
+
+  assert.ok(exists(".users-list .user"));
+
+  await click(".show-emails");
+
+  assert.equal(
+    find(".users-list .user:nth-child(1) .email").text(),
+    "<small>eviltrout@example.com</small>",
+    "shows the emails"
+  );
+
+  await click(".hide-emails");
+
+  assert.equal(
+    find(".users-list .user:nth-child(1) .email").text(),
+    "",
+    "hides the emails"
+  );
+});
+
 QUnit.test("switching tabs", async assert => {
   const activeUser = "eviltrout@example.com";
   const suspectUser = "sam@example.com";

test/javascripts/helpers/create-pretender.js.es6

@@ -448,14 +448,32 @@ export default function() {
       overridden: true
     };
 
-    this.get("/admin/users/list/active.json", () => {
-      return response(200, [
+    this.get("/admin/users/list/active.json", request => {
+      let store = [
         {
           id: 1,
           username: "eviltrout",
           email: "<small>eviltrout@example.com</small>"
+        },
+        {
+          id: 3,
+          username: "discobot",
+          email: "<small>discobot_email</small>"
         }
-      ]);
+      ];
+      const ascending = request.queryParams.ascending;
+      const order = request.queryParams.order;
+
+      if (order) {
+        store = store.sort(function(a, b) {
+          return a[order] - b[order];
+        });
+      }
+      if (ascending) {
+        store = store.reverse();
+      }
+
+      return response(200, store);
     });
 
     this.get("/admin/users/list/suspect.json", () => {