Changed the javascript class from using the global scope to exporting it via webpack

Also improved accesibility and change the id from user_callouts to a class

app/assets/javascripts/dispatcher.js.es6

@@ -36,6 +36,7 @@
 /* global Shortcuts */
 
 const ShortcutsBlob = require('./shortcuts_blob');
+const UserCallout = require('./user_callout');
 
 (function() {
   var Dispatcher;
@@ -277,6 +278,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'ci:lints:show':
           new gl.CILintEditor();
           break;
+        case 'users:show':
+          new UserCallout();
+          break;
       }
       switch (path.first()) {
         case 'sessions':
@@ -313,6 +317,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'dashboard':
         case 'root':
           shortcut_handler = new ShortcutsDashboardNavigation();
+          new UserCallout();
           break;
         case 'profiles':
           new NotificationsForm();

app/assets/javascripts/user_callout.js

 /* eslint-disable arrow-parens, class-methods-use-this, no-param-reassign */
 /* global Cookies */
 
-((global) => {
-  const userCalloutElementName = '#user-callout';
-  const dismissIcon = '.dismiss-icon';
-  const userCalloutBtn = '.user-callout-btn';
+const userCalloutElementName = '.user-callout';
+const dismissIcon = '.dismiss-icon';
+const userCalloutBtn = '.user-callout-btn';
 
-  const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
 
-  class UserCallout {
+class UserCallout {
   constructor() {
     this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
     this.init();
+    this.isUserCalloutDismissed();
   }
 
   init() {
     $(document)
       .on('click', dismissIcon, () => this.closeAndDismissCallout())
-        .on('click', userCalloutBtn, () => this.closeAndDismissCallout())
-        .on('DOMContentLoaded', () => this.isUserCalloutDismissed());
+      .on('click', userCalloutBtn, () => this.closeAndDismissCallout());
   }
 
   closeAndDismissCallout() {
@@ -31,7 +30,6 @@
       $(userCalloutElementName).show();
     }
   }
-  }
+}
 
-  global.UserCallout = UserCallout;
-})(window.gl || (window.gl = {}));
+module.exports = UserCallout;

app/assets/stylesheets/pages/profile.scss

@@ -278,7 +278,7 @@ table.u2f-registrations {
   }
 }
 
-#user-callout {
+.user-callout {
   display: none;
   margin: 24px auto 0;
 
@@ -289,11 +289,13 @@ table.u2f-registrations {
 
   .landing {
     margin-bottom: $gl-padding;
-    overflow: hidden;
+
+    .close {
+      margin-right: 20px;
+    }
 
     .dismiss-icon {
       float: right;
-      margin-right: 20px;
       cursor: pointer;
       color: $cycle-analytics-dismiss-icon-color;
     }

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

@@ -17,6 +17,3 @@
   = render 'projects'
 - else
   = render "zero_authorized_projects"
-
-:javascript
-  var userCallout = new gl.UserCallout();

app/views/shared/_user_callout.html.haml

-#user-callout
+.user-callout
   .bordered-box.landing.content-block
+    %button.btn.btn-default.close{ type: "button" }
       = icon("times", class: "dismiss-icon")
     .row
       .col-sm-3.col-xs-12.svg-container

app/views/users/show.html.haml

@@ -129,11 +129,8 @@
       = spinner
 
 :javascript
-  var userProfile, userCallout;
+  var userProfile;
 
   userProfile = new gl.User({
     action: "#{controller.action_name}"
   });
-
-  userCallout = new gl.UserCallout();
-

spec/features/user_callout_spec.rb

@@ -18,18 +18,18 @@ describe 'User Callouts', js: true do
   describe 'user callout should appear in two routes' do
     it 'shows up on the user profile' do
       visit user_path(user)
-      expect(find('#user-callout')).to have_content 'Customize your experience'
+      expect(find('.user-callout')).to have_content 'Customize your experience'
     end
 
     it 'shows up on the dashboard projects' do
       visit dashboard_projects_path
-      expect(find('#user-callout')).to have_content 'Customize your experience'
+      expect(find('.user-callout')).to have_content 'Customize your experience'
     end
   end
 
   it 'hides the user callout when click on the dismiss icon' do
     visit user_path(user)
-    within('#user-callout') do
+    within('.user-callout') do
       find('.dismiss-icon').click
     end
     expect(page).not_to have_selector('#user-callout')

spec/javascripts/fixtures/user_callout.html.haml

-#user-callout
+.user-callout
   .bordered-box.landing.content-block
+    %button.btn.btn-default.close{ type: "button" }
       %i.fa.fa-times.dismiss-icon
     .row
       .col-sm-3.col-xs-12.svg-container

spec/javascripts/user_callout_spec.js

 /* esint-disable space-before-function-paren, arrow-body-style */
-require('~/user_callout');
+const UserCallout = require('~/user_callout');
 
-((global) => {
-  const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
-  const Cookie = window.Cookies;
+const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+const Cookie = window.Cookies;
 
-  describe('UserCallout', function () {
+describe('UserCallout', function () {
   const fixtureName = 'static/user_callout.html.raw';
   preloadFixtures(fixtureName);
 
-    it('should be defined in the global scope', () => {
-      expect(global.UserCallout).toBeDefined();
-    });
-
   beforeEach(() => {
     loadFixtures(fixtureName);
-      this.userCallout = new global.UserCallout();
+    this.userCallout = new UserCallout();
     this.dismissIcon = $('.dismiss-icon');
-      this.userCalloutContainer = $('#user-callout');
+    this.userCalloutContainer = $('.user-callout');
     this.userCalloutBtn = $('.user-callout-btn');
     Cookie.set(USER_CALLOUT_COOKIE, 0);
   });
@@ -38,5 +33,4 @@ require('~/user_callout');
     expect(this.userCalloutContainer.is(':visible')).toBe(false);
     expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
   });
-  });
-})(window.gl || (window.gl = {}));
+});