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

@@ -1,37 +1,35 @@
 /* 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 {
-    constructor() {
-      this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
-      this.init();
-    }
-
-    init() {
-      $(document)
-        .on('click', dismissIcon, () => this.closeAndDismissCallout())
-        .on('click', userCalloutBtn, () => this.closeAndDismissCallout())
-        .on('DOMContentLoaded', () => this.isUserCalloutDismissed());
-    }
-
-    closeAndDismissCallout() {
-      $(userCalloutElementName).hide();
-      Cookies.set(USER_CALLOUT_COOKIE, '1');
-    }
-
-    isUserCalloutDismissed() {
-      if (!this.isCalloutDismissed) {
-        $(userCalloutElementName).show();
-      }
-    }
+class UserCallout {
+  constructor() {
+    this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
+    this.init();
+    this.isUserCalloutDismissed();
   }
 
-  global.UserCallout = UserCallout;
-})(window.gl || (window.gl = {}));
+  init() {
+    $(document)
+      .on('click', dismissIcon, () => this.closeAndDismissCallout())
+      .on('click', userCalloutBtn, () => this.closeAndDismissCallout());
+  }
+
+  closeAndDismissCallout() {
+    $(userCalloutElementName).hide();
+    Cookies.set(USER_CALLOUT_COOKIE, '1');
+  }
+
+  isUserCalloutDismissed() {
+    if (!this.isCalloutDismissed) {
+      $(userCalloutElementName).show();
+    }
+  }
+}
+
+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

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

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

@@ -1,6 +1,7 @@
-#user-callout
+.user-callout
   .bordered-box.landing.content-block
-    %i.fa.fa-times.dismiss-icon
+    %button.btn.btn-default.close{ type: "button" }
+      %i.fa.fa-times.dismiss-icon
     .row
       .col-sm-3.col-xs-12.svg-container
       .col-sm-8.col-xs-12.inner-content
@@ -9,4 +10,4 @@
         %p
           Change syntax themes, default project pages, and more in preferences.
         %a{ href: 'foo', class:'user-callout-btn' }
-          Check it out
+          Check it out

spec/javascripts/user_callout_spec.js

@@ -1,42 +1,36 @@
 /* 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 () {
-    const fixtureName = 'static/user_callout.html.raw';
-    preloadFixtures(fixtureName);
+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.dismissIcon = $('.dismiss-icon');
-      this.userCalloutContainer = $('#user-callout');
-      this.userCalloutBtn = $('.user-callout-btn');
-      Cookie.set(USER_CALLOUT_COOKIE, 0);
-    });
-
-    it('shows when cookie is set to false', () => {
-      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
-      expect(this.userCalloutContainer.is(':visible')).toBe(true);
-    });
-
-    it('hides when user clicks on the dismiss-icon', () => {
-      this.dismissIcon.click();
-      expect(this.userCalloutContainer.is(':visible')).toBe(false);
-      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
-    });
-
-    it('hides when user clicks on the "check it out" button', () => {
-      this.userCalloutBtn.click();
-      expect(this.userCalloutContainer.is(':visible')).toBe(false);
-      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
-    });
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+    this.userCallout = new UserCallout();
+    this.dismissIcon = $('.dismiss-icon');
+    this.userCalloutContainer = $('.user-callout');
+    this.userCalloutBtn = $('.user-callout-btn');
+    Cookie.set(USER_CALLOUT_COOKIE, 0);
   });
-})(window.gl || (window.gl = {}));
+
+  it('shows when cookie is set to false', () => {
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
+    expect(this.userCalloutContainer.is(':visible')).toBe(true);
+  });
+
+  it('hides when user clicks on the dismiss-icon', () => {
+    this.dismissIcon.click();
+    expect(this.userCalloutContainer.is(':visible')).toBe(false);
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
+  });
+
+  it('hides when user clicks on the "check it out" button', () => {
+    this.userCalloutBtn.click();
+    expect(this.userCalloutContainer.is(':visible')).toBe(false);
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
+  });
+});