UX: Allow groups page to be searchable.

app/assets/javascripts/discourse/controllers/groups.js.es6

@@ -1,10 +1,18 @@
 import { observes } from 'ember-addons/ember-computed-decorators';
+import debounce from 'discourse/lib/debounce';
 
 export default Ember.Controller.extend({
   application: Ember.inject.controller(),
-  queryParams: ["order", "asc"],
+  queryParams: ["order", "asc", "filter"],
   order: null,
   asc: null,
+  filter: "",
+  filterInput: "",
+
+  @observes("filterInput")
+  _setFilter: debounce(function() {
+    this.set("filter", this.get("filterInput"));
+  }, 500),
 
   @observes("model.canLoadMore")
   _showFooter() {

app/assets/javascripts/discourse/routes/groups.js.es6

@@ -2,6 +2,7 @@ export default Discourse.Route.extend({
   queryParams: {
     order: { refreshModel: true, replace: true },
     asc: { refreshModel: true, replace: true },
+    filter: { refreshModel: true }
   },
 
   refreshQueryWithoutTransition: true,

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

@@ -1,7 +1,12 @@
 {{#d-section pageClass="groups"}}
   <h1>{{i18n "groups.index.title"}}</h1>
 
+  {{text-field value=filterInput
+      placeholderKey="groups.filter_name"
+      class="group-filter-name no-blur"}}
+
   {{#if model}}
+    {{#conditional-loading-spinner condition=model.loading}}
       {{#load-more selector=".groups-table .groups-table-row" action="loadMore"}}
         <div class='container'>
           <table class="groups-table">
@@ -63,6 +68,7 @@
       {{/load-more}}
 
       {{conditional-loading-spinner condition=model.loadingMore}}
+    {{/conditional-loading-spinner}}
   {{else}}
     <p>{{i18n "groups.index.empty"}}</p>
   {{/if}}

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

@@ -1,9 +1,15 @@
 .groups-page {
   h1 {
-    margin: 20px 0;
+    margin-bottom: 20px;
+    display: inline-block;
   }
 }
 
+.group-filter-name {
+  display: inline-block;
+  float: right;
+}
+
 .groups-table {
   width: 100%;
 

app/controllers/groups_controller.rb

@@ -24,6 +24,10 @@ class GroupsController < ApplicationController
     dir = params[:asc] ? 'ASC' : 'DESC'
     groups = Group.visible_groups(current_user, order ? "#{order} #{dir}" : nil)
 
+    if (filter = params[:filter]).present?
+      groups = Group.search_groups(filter, groups: groups)
+    end
+
     unless guardian.is_staff?
       # hide automatic groups from all non stuff to de-clutter page
       groups = groups.where(automatic: false)

config/locales/client.en.yml

@@ -432,6 +432,7 @@ en:
       join: "Join Group"
       leave: "Leave Group"
       request: "Request to Join Group"
+      filter_name: "filter by group name"
       message: "Message"
       automatic_group: Automatic Group
       closed_group: Closed Group

spec/requests/groups_controller_spec.rb

@@ -18,6 +18,16 @@ describe GroupsController do
       end
     end
 
+    context 'searchable' do
+      it 'should return the right response' do
+        other_group = Fabricate(:group, name: 'testing')
+        get "/groups.json", params: { filter: 'test' }
+
+        expect(response.status).to eq(200)
+        expect(JSON.parse(response.body)["groups"].first["id"]).to eq(other_group.id)
+      end
+    end
+
     context 'sortable' do
       let!(:other_group) { Fabricate(:group, name: "zzzzzz", users: [user]) }