Use eventHub to update groups from GroupFilterableList class

app/assets/javascripts/groups/groups_filterable_list.js

 import FilterableList from '~/filterable_list';
+import eventHub from './event_hub';
 
 export default class GroupFilterableList extends FilterableList {
-  constructor({ form, filter, holder, store }) {
+  constructor(form, filter, holder) {
     super(form, filter, holder);
 
-    this.store = store;
     this.$dropdown = $('.js-group-filter-dropdown-wrap');
   }
 
@@ -41,15 +41,16 @@ export default class GroupFilterableList extends FilterableList {
 
   onFilterSuccess(data, xhr) {
     super.onFilterSuccess(data);
-
-    this.store.setGroups(data);
-    this.store.storePagination({
+    const paginationData = {
       'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
       'X-Page': xhr.getResponseHeader('X-Page'),
       'X-Total': xhr.getResponseHeader('X-Total'),
       'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
       'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
       'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
-    });
+    };
+
+    eventHub.$emit('updateGroups', data);
+    eventHub.$emit('updatePagination', paginationData);
   }
 }

app/assets/javascripts/groups/index.js

@@ -10,11 +10,18 @@ import eventHub from './event_hub';
 document.addEventListener('DOMContentLoaded', () => {
   const el = document.querySelector('#dashboard-group-app');
 
+  // Don't do anything if element doesn't exist (No groups)
+  // This is for when the user enters directly to the page via URL
+  if (!el) {
+    return;
+  }
+
   Vue.component('groups-component', GroupsComponent);
   Vue.component('group-folder', GroupFolder);
   Vue.component('group-item', GroupItem);
 
-  return new Vue({
+  // eslint-disable-next-line no-new
+  new Vue({
     el,
     data() {
       this.store = new GroupsStore();
@@ -31,20 +38,26 @@ document.addEventListener('DOMContentLoaded', () => {
         let getGroups = null;
         let page = null;
         let pageParam = null;
+        let filterGroups = null;
+        let filterGroupsParam = null;
 
         if (parentGroup) {
           parentId = parentGroup.id;
         }
 
         pageParam = gl.utils.getParameterByName('page');
-
         if (pageParam) {
           page = pageParam;
         }
 
-        getGroups = this.service.getGroups(parentId, page);
+        filterGroupsParam = gl.utils.getParameterByName('filter_groups');
+        if (filterGroupsParam) {
+          filterGroups = filterGroupsParam;
+        }
+
+        getGroups = this.service.getGroups(parentId, page, filterGroups);
         getGroups.then((response) => {
-          this.store.setGroups(response.json(), parentGroup);
+          eventHub.$emit('updateGroups', response.json(), parentGroup);
         })
         .catch(() => {
           // TODO: Handle error
@@ -69,6 +82,12 @@ document.addEventListener('DOMContentLoaded', () => {
             // TODO: Handle error
           });
       },
+      updateGroups(groups, parentGroup) {
+        this.store.setGroups(groups, parentGroup);
+      },
+      updatePagination(headers) {
+        this.store.storePagination(headers);
+      },
     },
     beforeMount() {
       let groupFilterList = null;
@@ -76,22 +95,18 @@ document.addEventListener('DOMContentLoaded', () => {
       const filter = document.querySelector('.js-groups-list-filter');
       const holder = document.querySelector('.js-groups-list-holder');
 
-      const options = {
-        form,
-        filter,
-        holder,
-        store: this.store,
-      };
-      groupFilterList = new GroupFilterableList(options);
+      groupFilterList = new GroupFilterableList(form, filter, holder);
       groupFilterList.initSearch();
 
       eventHub.$on('toggleSubGroups', this.toggleSubGroups);
       eventHub.$on('leaveGroup', this.leaveGroup);
+      eventHub.$on('updateGroups', this.updateGroups);
+      eventHub.$on('updatePagination', this.updatePagination);
     },
     mounted() {
       this.fetchGroups()
         .then((response) => {
-          this.store.storePagination(response.headers);
+          eventHub.$emit('updatePagination', response.headers);
         })
         .catch(() => {
           // TODO: Handle error

app/assets/javascripts/groups/services/groups_service.js

@@ -8,14 +8,20 @@ export default class GroupsService {
     this.groups = Vue.resource(endpoint);
   }
 
-  getGroups(parentId, page) {
+  getGroups(parentId, page, filterGroups) {
     const data = {};
 
     if (parentId) {
       data.parent_id = parentId;
-      // Do not send this param for sub groups
-    } else if (page) {
-      data.page = page;
+    } else {
+      // Do not send the following param for sub groups
+      if (page) {
+        data.page = page;
+      }
+
+      if (filterGroups) {
+        data.filter_groups = filterGroups;
+      }
     }
 
     return this.groups.get(data);

app/assets/javascripts/groups/stores/groups_store.js

@@ -18,6 +18,7 @@ export default class GroupsStore {
     return tree;
   }
 
+  // eslint-disable-next-line class-methods-use-this
   resetGroups(parent) {
     const parentGroup = parent;
     parentGroup.subGroups = {};
@@ -107,6 +108,7 @@ export default class GroupsStore {
     return this.groups;
   }
 
+  // eslint-disable-next-line class-methods-use-this
   decorateGroup(rawGroup) {
     return {
       id: rawGroup.id,