Add support to filter by name to Group list

app/assets/javascripts/dispatcher.js

@@ -40,7 +40,6 @@ import Issue from './issue';
 import BindInOut from './behaviors/bind_in_out';
 import Group from './group';
 import GroupName from './group_name';
-import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
@@ -148,12 +147,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'admin:projects:index':
           new ProjectsList();
           break;
-        case 'dashboard:groups:index':
-          new GroupsList();
-          break;
         case 'explore:groups:index':
-          new GroupsList();
-
           const landingElement = document.querySelector('.js-explore-groups-landing');
           if (!landingElement) break;
           const exploreGroupsLanding = new Landing(

app/assets/javascripts/filterable_list.js

@@ -4,7 +4,8 @@
  */
 
 export default class FilterableList {
-  constructor(form, filter, holder) {
+  constructor(form, filter, holder, store) {
+    this.store = store;
     this.filterForm = form;
     this.listFilterElement = filter;
     this.listHolderElement = holder;
@@ -33,7 +34,7 @@ export default class FilterableList {
         $(this.listHolderElement).fadeTo(250, 1);
       },
       success(data) {
-        this.listHolderElement.innerHTML = data.html;
+        this.store.setGroups(data);
 
        // Change url so if user reload a page - search results are saved
         return window.history.replaceState({

app/assets/javascripts/groups/components/group_folder.vue

 <script>
-import eventHub from '../event_hub';
-
 export default {
   props: {
     groups: {

app/assets/javascripts/groups/components/groups.vue

 <script>
-import GroupsStore from '../stores/groups_store';
-import GroupsService from '../services/groups_service';
-import eventHub from '../event_hub';
-
 export default {
-  data() {
-    const store = new GroupsStore();
-
-    return {
-      store,
-      state: store.state,
-    };
-  },
-
-  created() {
-    const appEl = document.querySelector('#dashboard-group-app');
-
-    this.service = new GroupsService(appEl.dataset.endpoint);
-    this.fetchGroups();
-
-    eventHub.$on('toggleSubGroups', this.toggleSubGroups);
-  },
-
-  methods: {
-    fetchGroups() {
-      this.service.getGroups()
-        .then((response) => {
-          this.store.setGroups(response.json());
-        })
-        .catch(() => {
-          // TODO: Handler error
-        });
-    },
-    toggleSubGroups(group) {
-      GroupsStore.toggleSubGroups(group);
-
-      this.fetchGroups();
+  props: {
+    groups: {
+      type: Array,
+      required: true,
     },
   },
 };
@@ -43,6 +11,6 @@ export default {
 
 <template>
   <div>
-    <group-folder :groups="state.groups" />
+    <group-folder :groups="groups" />
   </div>
 </template>

app/assets/javascripts/groups/index.js

 /* eslint-disable no-unused-vars */
 
 import Vue from 'vue';
+import GroupsList from '~/groups_list';
 import GroupsComponent from './components/groups.vue';
 import GroupFolder from './components/group_folder.vue';
 import GroupItem from './components/group_item.vue';
+import GroupsStore from './stores/groups_store';
+import GroupsService from './services/groups_service';
+import eventHub from './event_hub';
 
 $(() => {
   const appEl = document.querySelector('#dashboard-group-app');
+  const form = document.querySelector('form#group-filter-form');
+  const filter = document.querySelector('.js-groups-list-filter');
+  const holder = document.querySelector('.js-groups-list-holder');
+
+  const store = new GroupsStore();
+  const service = new GroupsService(appEl.dataset.endpoint);
 
   Vue.component('groups-component', GroupsComponent);
   Vue.component('group-folder', GroupFolder);
@@ -14,6 +24,33 @@ $(() => {
 
   const GroupsApp = new Vue({
     el: appEl,
-    render: createElement => createElement('groups-component'),
+    data() {
+      return {
+        store,
+        state: store.state,
+      };
+    },
+    methods: {
+      fetchGroups() {
+        service.getGroups()
+          .then((response) => {
+            store.setGroups(response.json());
+          })
+          .catch(() => {
+            // TODO: Handler error
+          });
+      },
+      toggleSubGroups(group) {
+        GroupsStore.toggleSubGroups(group);
+
+        this.fetchGroups();
+      },
+    },
+    created() {
+      const groupFilterList = new GroupsList(form, filter, holder, store);
+      this.fetchGroups();
+
+      eventHub.$on('toggleSubGroups', this.toggleSubGroups);
+    },
   });
 });

app/assets/javascripts/groups_list.js

@@ -5,13 +5,9 @@ import FilterableList from './filterable_list';
  * Updates the html content of the page with the received one.
  */
 export default class GroupsList {
-  constructor() {
-    const form = document.querySelector('form#group-filter-form');
-    const filter = document.querySelector('.js-groups-list-filter');
-    const holder = document.querySelector('.js-groups-list-holder');
-
-    if (form && filter && holder) {
-      const list = new FilterableList(form, filter, holder);
+  constructor(form, filter, holder, store) {
+    if (form && filter && holder && store) {
+      const list = new FilterableList(form, filter, holder, store);
       list.initSearch();
     }
   }

app/views/dashboard/groups/_groups.html.haml

-.js-groups-list-holder#dashboard-group-app{ data: { endpoint: dashboard_groups_path(format: :json) } }
+.js-groups-list-holder
+  #dashboard-group-app{ data: { endpoint: dashboard_groups_path(format: :json) } }
+    %groups-component{ ':groups' => 'state.groups' }