Restore code to make explore groups work

app/assets/javascripts/dispatcher.js

@@ -38,6 +38,7 @@ import BindInOut from './behaviors/bind_in_out';
 import DeleteModal from './branches/branches_delete_modal';
 import Group from './group';
 import GroupName from './group_name';
+import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import setupProjectEdit from './project_edit';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
@@ -160,6 +161,8 @@ import ShortcutsBlob from './shortcuts_blob';
           new ProjectsList();
           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/groups_list.js

@@ -0,0 +1,18 @@
+import FilterableList from './filterable_list';
+
+/**
+ * Makes search request for groups when user types a value in the search input.
+ * 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);
+      list.initSearch();
+    }
+  }
+}

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

@@ -5,5 +5,5 @@
     %template{ 'v-if' => '!isLoading && isEmpty' }
       %div{ 'v-cloak' => true }
         = render 'empty_state'
-    %template{ 'v-else-if' => '!isLoading && !isEmpty'}
+    %template{ 'v-else-if' => '!isLoading && !isEmpty' }
       %groups-component{ ':groups' => 'state.groups', ':page-info' => 'state.pageInfo' }

config/webpack.config.js

@@ -40,6 +40,7 @@ var config = {
     graphs:               './graphs/graphs_bundle.js',
     group:                './group.js',
     groups:               './groups/index.js',
+    groups_list:          './groups_list.js',
     issue_show:           './issue_show/index.js',
     locale:               './locale/index.js',
     main:                 './main.js',