FEATURE: Add group filter to user directory (#13330)

app/assets/javascripts/discourse/app/controllers/users.js

@@ -18,6 +18,7 @@ export default Controller.extend({
   exclude_usernames: null,
   isLoading: false,
   columns: null,
+  groupsOptions: null,
 
   showTimeRead: equal("period", "all"),
 
@@ -32,7 +33,7 @@ export default Controller.extend({
       .map((c) => c.user_field_id)
       .join("|");
 
-    this.store
+    return this.store
       .find("directoryItem", Object.assign(params, { user_field_ids }))
       .then((model) => {
         const lastUpdatedAt = model.get("resultSetMeta.last_updated_at");
@@ -47,13 +48,31 @@ export default Controller.extend({
       });
   },
 
+  loadGroups() {
+    return this.store.findAll("group").then((groups) => {
+      const groupOptions = groups.map((group) => {
+        return {
+          name: group.name,
+          id: group.id,
+        };
+      });
+      this.set("groupOptions", groupOptions);
+    });
+  },
+
+  @action
+  groupChanged(_, groupAttrs) {
+    // First param is the group name, which include none or 'all groups'. Ignore this and look at second param.
+    this.set("group", groupAttrs.id ? groupAttrs.name : null);
+  },
+
   @action
   showEditColumnsModal() {
     showModal("edit-user-directory-columns");
   },
 
   @action
-  onFilterChanged(filter) {
+  onUsernameFilterChanged(filter) {
     discourseDebounce(this, this._setName, filter, 500);
   },
 

app/assets/javascripts/discourse/app/routes/users.js

@@ -1,6 +1,7 @@
 import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "I18n";
 import PreloadStore from "discourse/lib/preload-store";
+import { Promise } from "rsvp";
 
 export default DiscourseRoute.extend({
   queryParams: {
@@ -44,7 +45,10 @@ export default DiscourseRoute.extend({
 
   setupController(controller, model) {
     controller.set("columns", model.columns);
-    controller.loadUsers(model.params);
+    return Promise.all([
+      controller.loadGroups(),
+      controller.loadUsers(model.params),
+    ]);
   },
 
   actions: {

app/assets/javascripts/discourse/app/templates/mobile/users.hbs

@@ -13,10 +13,19 @@
         {{/if}}
         {{input
           value=(readonly nameInput)
-          input=(action "onFilterChanged" value="target.value")
+          input=(action "onUsernameFilterChanged" value="target.value")
           placeholderKey="directory.filter_name"
           class="filter-name no-blur"
         }}
+        {{combo-box
+          class="directory-group-selector"
+          value=group
+          content=groupOptions
+          onChange=(action groupChanged)
+          options=(hash
+            none="directory.group.all"
+          )
+        }}
         {{#if currentUser.staff}}
           {{d-button
             icon="wrench"

app/assets/javascripts/discourse/app/templates/users.hbs

@@ -21,10 +21,19 @@
             </span>
             {{input
               value=(readonly nameInput)
-              input=(action "onFilterChanged" value="target.value")
+              input=(action "onUsernameFilterChanged" value="target.value")
               placeholderKey="directory.filter_name"
               class="filter-name no-blur"
             }}
+            {{combo-box
+              class="directory-group-selector"
+              value=group
+              content=groupOptions
+              onChange=(action groupChanged)
+              options=(hash
+                none="directory.group.all"
+              )
+            }}
             {{#if currentUser.staff}}
               {{d-button
                 icon="wrench"

app/assets/stylesheets/common/base/directory.scss

@@ -20,6 +20,9 @@
         margin: 0;
       }
     }
+    .directory-group-selector {
+      vertical-align: top;
+    }
   }
 
   .user-info {

app/assets/stylesheets/mobile/directory.scss

@@ -3,14 +3,9 @@
     font-size: $font-up-1;
   }
 
-  .open-edit-columns-btn {
-    margin: -0.7em 0 0.5em;
-  }
-
   &.users-directory {
     .filter-name {
       width: 100%;
-      margin-bottom: 1em;
     }
 
     .directory-last-updated {
@@ -59,4 +54,5 @@
 
 .edit-user-directory-columns-modal .modal-inner-container {
   width: 90%;
+  min-width: unset;
 }

config/locales/client.en.yml

@@ -650,6 +650,8 @@ en:
         title: "Edit Directory Columns"
         save: "Save"
         reset_to_default: "Reset to default"
+      group:
+        all: "all groups"
 
     group_histories:
       actions: