Restore code to make explore groups work

4 files changed, 23 insertions, 1 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index bb49c9c5aba..3d7b8d924ac 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/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(
diff --git a/app/assets/javascripts/groups_list.js b/app/assets/javascripts/groups_list.js
new file mode 100644
index 00000000000..56a8cbf6d03
--- /dev/null
+++ b/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();
+    }
+  }
+}
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
index ba7e0c21348..168e6272d8e 100644
--- a/app/views/dashboard/groups/_groups.html.haml
+++ b/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' }
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 55f6e0a704b..3b7f1c33c95 100644
--- a/config/webpack.config.js
+++ b/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',