UX: Allow users to filter by different group types on groups page.

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

@@ -1,13 +1,24 @@
-import { observes } from 'ember-addons/ember-computed-decorators';
 import debounce from 'discourse/lib/debounce';
+import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Controller.extend({
   application: Ember.inject.controller(),
-  queryParams: ["order", "asc", "filter"],
+  queryParams: ["order", "asc", "filter", "type"],
   order: null,
   asc: null,
   filter: "",
-  filterInput: "",
+  type: "",
+
+  @computed("model.extras.type_filters")
+  types(typeFilters) {
+    const types = [];
+
+    typeFilters.forEach(type => {
+      types.push({ id: type, name: I18n.t(`groups.index.${type}_groups`) });
+    });
+
+    return types;
+  },
 
   @observes("filterInput")
   _setFilter: debounce(function() {

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

@@ -1,21 +1,26 @@
 export default Discourse.Route.extend({
-  queryParams: {
-    order: { refreshModel: true, replace: true },
-    asc: { refreshModel: true, replace: true },
-    filter: { refreshModel: true }
-  },
-
-  refreshQueryWithoutTransition: true,
-
   titleToken() {
     return I18n.t('groups.index.title');
   },
 
+  queryParams: {
+    order: { refreshModel: true, replace: true },
+    asc: { refreshModel: true, replace: true },
+    filter: { refreshModel: true },
+    type: { refreshModel: true, replace: true },
+  },
+
+  refreshQueryWithoutTransition: true,
+
   model(params) {
-    return this.store.findAll('group', params);
+    this._params = params;
+    return this.store.findAll("group", params);
   },
 
   setupController(controller, model) {
-    controller.set('model', model);
-  }
+    controller.setProperties({
+      model,
+      filterInput: this._params.filter
+    });
+  },
 });

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

@@ -3,7 +3,13 @@
 
   {{text-field value=filterInput
       placeholderKey="groups.filter_name"
-      class="group-filter-name no-blur"}}
+      class="groups-name-filter no-blur"}}
+
+  {{combo-box value=type
+              content=types
+              clearable=true
+              none="groups.index.all_groups"
+              class="groups-type-filter"}}
 
   {{#if model}}
     {{#conditional-loading-spinner condition=model.loading}}
@@ -56,7 +62,7 @@
                         showLogin='showLogin'}}
 
                       {{d-button icon="ban"
-                          label=(if group.automatic 'groups.automatic_group' 'groups.closed_group')
+                          label=(if group.automatic 'groups.automatic_group' 'groups.close_group')
                           disabled=true}}
                     {{/group-membership-button}}
                   </td>

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

@@ -5,8 +5,7 @@
   }
 }
 
-.group-filter-name {
-  display: inline-block;
+.groups-name-filter, .groups-type-filter {
   float: right;
 }
 
@@ -34,6 +33,10 @@
       padding: 0.8em;
     }
 
+    td.groups-info {
+      width: 50%;
+    }
+
     td.group-user-status {
       i {
         color: $primary;

app/assets/stylesheets/desktop/group.scss

@@ -1,4 +1,3 @@
-
 .group-nav {
   li {
     float: left;

app/assets/stylesheets/mobile/groups.scss

@@ -3,7 +3,7 @@
     margin-top: 20px;
   }
 
-  .group-filter-name {
+  .groups-name-filter {
     margin-top: 20px;
   }
 }

app/controllers/groups_controller.rb

@@ -13,6 +13,29 @@ class GroupsController < ApplicationController
   skip_before_action :preload_json, :check_xhr, only: [:posts_feed, :mentions_feed]
   skip_before_action :check_xhr, only: [:show]
 
+  TYPE_FILTERS = {
+    my: Proc.new { |groups, current_user|
+      raise Discourse::NotFound unless current_user
+      Group.member_of(groups, current_user)
+    },
+    owner: Proc.new { |groups, current_user|
+      raise Discourse::NotFound unless current_user
+      Group.owner_of(groups, current_user)
+    },
+    public: Proc.new { |groups|
+      groups.where(public_admission: true, automatic: false)
+    },
+    close: Proc.new { |groups|
+      groups.where(
+        public_admission: false,
+        automatic: false
+      )
+    },
+    automatic: Proc.new { |groups|
+      groups.where(automatic: true)
+    }
+  }
+
   def index
     unless SiteSetting.enable_group_directory?
       raise Discourse::InvalidAccess.new(:enable_group_directory)
@@ -28,9 +51,12 @@ class GroupsController < ApplicationController
       groups = Group.search_groups(filter, groups: groups)
     end
 
+    type_filters = TYPE_FILTERS.keys
+
     unless guardian.is_staff?
       # hide automatic groups from all non stuff to de-clutter page
       groups = groups.where(automatic: false)
+      type_filters.delete(:automatic)
     end
 
     count = groups.count
@@ -40,6 +66,10 @@ class GroupsController < ApplicationController
       Group.preload_custom_fields(groups, Group.preloaded_custom_field_names)
     end
 
+    if type = params[:type]&.to_sym
+      groups = TYPE_FILTERS[type].call(groups, current_user)
+    end
+
     if current_user
       group_users = GroupUser.where(group: groups, user: current_user)
       user_group_ids = group_users.pluck(:group_id)
@@ -52,8 +82,11 @@ class GroupsController < ApplicationController
         user_group_ids: user_group_ids || [],
         owner_group_ids: owner_group_ids || []
       ),
+      extras: {
+        type_filters: current_user ? type_filters : type_filters - [:my, :owner]
+      },
       total_rows_groups: count,
-      load_more_groups: groups_path(page: page + 1)
+      load_more_groups: groups_path(page: page + 1, type: type),
     )
   end
 

app/models/group.rb

@@ -561,6 +561,16 @@ class Group < ActiveRecord::Base
     STAFF_GROUPS.include?(self.name.to_sym)
   end
 
+  def self.member_of(groups, user)
+    groups.joins(
+      "LEFT JOIN group_users gu ON gu.group_id = groups.id
+    ").where("gu.user_id = ?", user.id)
+  end
+
+  def self.owner_of(groups, user)
+    self.member_of(groups, user).where("gu.owner")
+  end
+
   protected
 
     def name_format_validator