refactor users bundle, remove inline javascript, and transform into an async chunk

app/assets/javascripts/dispatcher.js

@@ -516,6 +516,13 @@ import PerformanceBar from './performance_bar';
             case 'protected_branches':
               shortcut_handler = new ShortcutsNavigation();
           }
+          break;
+        case 'users':
+          const action = path[1];
+          import(/* webpackChunkName: 'user_profile' */ './users')
+            .then(user => user.default(action))
+            .catch(() => {});
+          break;
       }
       // If we haven't installed a custom shortcut handler, install the default one
       if (!shortcut_handler) {

app/assets/javascripts/users/index.js

@@ -1,5 +1,19 @@
-import User from './user';
+import Cookies from 'js-cookie';
+import UserTabs from './user_tabs';
 
-// use legacy exports until embedded javascript is refactored
-window.gl = window.gl || {};
-window.gl.User = User;
+export default function initUserProfile(action) {
+  // place profile avatars to top
+  $('.profile-groups-avatars').tooltip({
+    placement: 'top',
+  });
+
+  // eslint-disable-next-line no-new
+  new UserTabs({ parentEl: '.user-profile', action });
+
+  // hide project limit message
+  $('.hide-project-limit-message').on('click', (e) => {
+    e.preventDefault();
+    Cookies.set('hide_project_limit_message', 'false');
+    $(this).parents('.project-limit-message').remove();
+  });
+}

app/assets/javascripts/users/user.js

@@ -1,34 +0,0 @@
-/* eslint-disable class-methods-use-this */
-
-import Cookies from 'js-cookie';
-import UserTabs from './user_tabs';
-
-export default class User {
-  constructor({ action }) {
-    this.action = action;
-    this.placeProfileAvatarsToTop();
-    this.initTabs();
-    this.hideProjectLimitMessage();
-  }
-
-  placeProfileAvatarsToTop() {
-    $('.profile-groups-avatars').tooltip({
-      placement: 'top',
-    });
-  }
-
-  initTabs() {
-    return new UserTabs({
-      parentEl: '.user-profile',
-      action: this.action,
-    });
-  }
-
-  hideProjectLimitMessage() {
-    $('.hide-project-limit-message').on('click', (e) => {
-      e.preventDefault();
-      Cookies.set('hide_project_limit_message', 'false');
-      $(this).parents('.project-limit-message').remove();
-    });
-  }
-}

app/views/users/show.html.haml

@@ -1,8 +1,5 @@
 - page_title       @user.name
 - page_description @user.bio
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_d3')
-  = page_specific_javascript_bundle_tag('users')
 - header_title     @user.name, user_path(@user)
 - @no_container = true
 
@@ -129,10 +126,3 @@
 
     .loading-status
       = spinner
-
-:javascript
-  var userProfile;
-
-  userProfile = new gl.User({
-    action: "#{controller.action_name}"
-  });

config/webpack.config.js

@@ -66,7 +66,6 @@ var config = {
     stl_viewer:           './blob/stl_viewer.js',
     terminal:             './terminal/terminal_bundle.js',
     u2f:                  ['vendor/u2f'],
-    users:                './users/index.js',
     raven:                './raven/index.js',
     vue_merge_request_widget: './vue_merge_request_widget/index.js',
     test:                 './test.js',
@@ -184,7 +183,6 @@ var config = {
       name: 'common_d3',
       chunks: [
         'graphs',
-        'users',
         'monitoring',
       ],
     }),