EE port of groups-webpack-bundle

app/assets/javascripts/dispatcher.js

@@ -597,6 +597,10 @@ import initLDAPGroupsSelect from 'ee/ldap_groups_select'; // eslint-disable-line
             .then(callDefault)
             .catch(fail);
           break;
+        case 'dashboard:groups:index':
+          import('./pages/dashboard/groups/index')
+            .then(callDefault)
+            .catch(fail);
         case 'admin:licenses:new':
           import(/* webpackChunkName: "admin_licenses" */ 'ee/pages/admin/licenses/new').then(m => m.default()).catch(fail);
           break;

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/groups/service/groups_service.js

 import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import '../../vue_shared/vue_resource_interceptor';
 
 export default class GroupsService {
   constructor(endpoint) {

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

+import initGroupsList from '../../../../groups';
+
+export default () => {
+  initGroupsList();
+};

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

 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

 .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

 .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

-= 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')

app/views/shared/_group_form.html.haml

-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('group')
 - parent = @group.parent
 - group_path = root_url
 - group_path << parent.full_path + '/' if parent

config/webpack.config.js

@@ -49,9 +49,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',
     issuable:             './issuable/issuable_bundle.js',
     issues:               './issues/issues_bundle.js',
@@ -133,9 +130,9 @@ var config = {
       {
         test: /\_worker\.js$/,
         use: [
-          { 
+          {
             loader: 'worker-loader',
-            options: { 
+            options: {
               inline: true
             }
           },