Added dispatcher imports for groups webpack bundle

app/assets/javascripts/dispatcher.js

@@ -530,6 +530,11 @@ import SearchAutocomplete from './search_autocomplete';
             .then(callDefault)
             .catch(fail);
           break;
+        case 'dashboard:groups:index':
+          import('./pages/dashboard/groups/index')
+            .then(callDefault)
+            .catch(fail);
+          break;
       }
       switch (path[0]) {
         case 'sessions':

app/assets/javascripts/groups/index.js

@@ -10,7 +10,7 @@ import groupItemComponent from './components/group_item.vue';
 
 Vue.use(Translate);
 
-document.addEventListener('DOMContentLoaded', () => {
+export default () => {
   const el = document.getElementById('js-groups-tree');
 
   // Don't do anything if element doesn't exist (No groups)
@@ -71,4 +71,4 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     },
   });
-});
+};

app/assets/javascripts/pages/dashboard/groups/index/index.js

@@ -0,0 +1,5 @@
+import initGroupsList from '../../../../groups';
+
+export default () => {
+  initGroupsList();
+};

app/assets/javascripts/pages/explore/groups/index.js

@@ -1,8 +1,10 @@
 import GroupsList from '~/groups_list';
 import Landing from '~/landing';
+import initGroupsList from '../../../groups';
 
 export default function () {
   new GroupsList(); // eslint-disable-line no-new
+  initGroupsList();
   const landingElement = document.querySelector('.js-explore-groups-landing');
   if (!landingElement) return;
   const exploreGroupsLanding = new Landing(

app/assets/javascripts/pages/groups/show/index.js

@@ -5,6 +5,7 @@ import notificationsDropdown from '~/notifications_dropdown';
 import NotificationsForm from '~/notifications_form';
 import ProjectsList from '~/projects_list';
 import ShortcutsNavigation from '~/shortcuts_navigation';
+import initGroupsList from '../../../groups';
 
 export default () => {
   const newGroupChildWrapper = document.querySelector('.js-new-project-subgroup');
@@ -16,4 +17,6 @@ export default () => {
   if (newGroupChildWrapper) {
     new NewGroupChild(newGroupChildWrapper);
   }
+
+  initGroupsList();
 };

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

@@ -1,2 +1,4 @@
 .js-groups-list-holder
   #js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
+    .loading-container.text-center
+      = icon('spinner spin 2x', class: 'loading-animation prepend-top-20')

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

@@ -3,9 +3,6 @@
 - header_title  "Groups", dashboard_groups_path
 = render 'dashboard/groups_head'
 
-= webpack_bundle_tag 'common_vue'
-= webpack_bundle_tag 'groups'
-
 - if params[:filter].blank? && @groups.empty?
   = render 'shared/groups/empty_state'
 - else

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

@@ -1,2 +1,4 @@
 .js-groups-list-holder
   #js-groups-tree{ data: { hide_projects: 'true', endpoint: explore_groups_path(format: :json), path: explore_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
+    .loading-container.text-center
+      = icon('spinner spin 2x', class: 'loading-animation prepend-top-20')

app/views/explore/groups/index.html.haml

@@ -2,9 +2,6 @@
 - page_title    "Groups"
 - header_title  "Groups", dashboard_groups_path
 
-= webpack_bundle_tag 'common_vue'
-= webpack_bundle_tag 'groups'
-
 - if current_user
   = render 'dashboard/groups_head'
 - else

app/views/groups/_children.html.haml

@@ -1,5 +1,4 @@
-= webpack_bundle_tag 'common_vue'
-= webpack_bundle_tag 'groups'
-
 .js-groups-list-holder
   #js-groups-tree{ data: { hide_projects: 'false', group_id: group.id, endpoint: group_children_path(group, format: :json), path: group_path(group), form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
+    .loading-container.text-center
+      = icon('spinner spin 2x', class: 'loading-animation prepend-top-20')

config/webpack.config.js

@@ -44,9 +44,6 @@ var config = {
     graphs:               './graphs/graphs_bundle.js',
     graphs_charts:        './graphs/graphs_charts.js',
     graphs_show:          './graphs/graphs_show.js',
-    group:                './group.js',
-    groups:               './groups/index.js',
-    groups_list:          './groups_list.js',
     help:                 './help/help.js',
     how_to_merge:         './how_to_merge.js',
     issue_show:           './issue_show/index.js',
@@ -119,9 +116,9 @@ var config = {
       {
         test: /\_worker\.js$/,
         use: [
-          { 
+          {
             loader: 'worker-loader',
-            options: { 
+            options: {
               inline: true
             }
           },