Created unit tests, fixtures and integration tests

Also changed the user_callout haml to a partial and
added the corresponding SVG icon

app/assets/javascripts/user_callout.js

@@ -3,18 +3,33 @@
 
 ((global) => {
   const userCalloutElementName = '#user-callout';
+  const dismissIcon = '.dismiss-icon';
+  const userCalloutBtn = '.user-callout-btn';
+
+  const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
 
   class UserCallout {
     constructor() {
+      this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
       this.init();
     }
 
     init() {
       $(document)
-        .on('DOMContentLoaded', () => {
-          const element = $(userCalloutElementName);
-          console.log('element:', element);
-        });
+        .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();
+      }
     }
   }
 

app/assets/stylesheets/pages/profile.scss

@@ -279,6 +279,7 @@ table.u2f-registrations {
 }
 
 #user-callout {
+  display: none;
   margin: 24px auto 0;
 
   .bordered-box {
@@ -291,8 +292,8 @@ table.u2f-registrations {
     overflow: hidden;
 
     .dismiss-icon {
-      position: absolute;
-      right: $user-callout-right;
+      float: right;
+      margin-right: 20px;
       cursor: pointer;
       color: $cycle-analytics-dismiss-icon-color;
     }
@@ -306,4 +307,10 @@ table.u2f-registrations {
       }
     }
   }
+
+  @media(max-width: $screen-xs-max) {
+    .inner-content {
+      padding-left: 30px;
+    }
+  }
 }

app/views/dashboard/_projects_head.html.haml

@@ -1,18 +1,5 @@
 = content_for :flash_message do
   = render 'shared/project_limit'
-#user-callout
-  .bordered-box.landing.content-block
-    = icon("times", class: "dismiss-icon")
-    .row
-      .col-sm-3.col-xs-12.svg-container
-        = custom_icon('icon_cycle_analytics_splash')
-      .col-sm-8.col-xs-12.inner-content
-        %h4
-          Customize your experience
-        %p
-          Change syntax themes, default project pages, and more in preferences.
-
-        = link_to "Check it out",  profile_preferences_path, class: 'btn'
 .top-area
   %ul.nav-links
     = nav_link(page: [dashboard_projects_path, root_path]) do

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

@@ -5,6 +5,8 @@
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 
+= render partial: 'shared/user_callout'
+
 - if @projects.any? || params[:filter_projects]
   = render 'dashboard/projects_head'
 
@@ -15,3 +17,6 @@
   = render 'projects'
 - else
   = render "zero_authorized_projects"
+
+:javascript
+  var userCallout = new gl.UserCallout();

app/views/shared/_user_callout.html.haml

@@ -0,0 +1,13 @@
+#user-callout
+  .bordered-box.landing.content-block
+    = icon("times", class: "dismiss-icon")
+    .row
+      .col-sm-3.col-xs-12.svg-container
+        = custom_icon('icon_customization')
+      .col-sm-8.col-xs-12.inner-content
+        %h4
+          Customize your experience
+        %p
+          Change syntax themes, default project pages, and more in preferences.
+
+        = link_to "Check it out",  profile_preferences_path, class: 'btn user-callout-btn'

app/views/shared/icons/_icon_customization.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 90" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" fill-rule="evenodd"><rect width="112" height="90" fill="#fff" rx="6"/><path fill="#eee" fill-rule="nonzero" d="m4 6.01v77.98c0 1.11.899 2.01 2 2.01h100c1.105 0 2-.898 2-2.01v-77.98c0-1.11-.899-2.01-2-2.01h-100c-1.105 0-2 .898-2 2.01m-4 0c0-3.319 2.686-6.01 6-6.01h100c3.315 0 6 2.694 6 6.01v77.98c0 3.319-2.686 6.01-6 6.01h-100c-3.315 0-6-2.694-6-6.01v-77.98"/><g transform="translate(26 35)"><rect width="4" height="39" x="5" fill="#eee" rx="2" id="0"/><rect width="4" height="21" x="5" y="18" fill="#fef0ea" rx="2"/><circle cx="7" cy="13" r="5" fill="#fff"/><path fill="#fb722e" fill-rule="nonzero" d="m7 20c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g transform="translate(49 35)"><use xlink:href="#0"/><rect width="4" height="21" x="5" y="18" fill="#b5a7dd" rx="2"/><circle cx="7" cy="25" r="5" fill="#fff"/><path fill="#6b4fbb" fill-rule="nonzero" d="m7 32c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g transform="translate(72 33)"><rect width="4" height="39" x="5" y="2" fill="#eee" rx="2"/><rect width="4" height="34" x="5" y="7" fill="#fef0ea" rx="2"/><circle cx="7" cy="7" r="5" fill="#fff"/><path fill="#fb722e" fill-rule="nonzero" d="m7 14c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g fill="#6b4fbb"><circle cx="13.5" cy="11.5" r="2.5"/><circle cx="23.5" cy="11.5" r="2.5" opacity=".5"/><circle cx="33.5" cy="11.5" r="2.5" opacity=".5"/></g><path fill="#eee" d="m0 19h111v4h-111z"/></g></svg>

app/views/users/show.html.haml

@@ -98,19 +98,9 @@
           Snippets
 
   %div{ class: container_class }
-    #user-callout
-      .bordered-box.landing.content-block
-        = icon("times", class: "dismiss-icon")
-        .row
-          .col-sm-3.col-xs-12.svg-container
-            = custom_icon('icon_cycle_analytics_splash')
-          .col-sm-8.col-xs-12.inner-content
-            %h4
-              Customize your experience
-            %p
-              Change syntax themes, default project pages, and more in preferences.
-
-            = link_to "Check it out",  profile_preferences_path, class: 'btn'
+    = render partial: 'shared/user_callout'
+  %div{ class: container_class }
+    .tab-content
       #activity.tab-pane
         .row-content-block.calender-block.white.second-block.hidden-xs
           .user-calendar{ data: { href: user_calendar_path } }

spec/features/user_callout_spec.rb

@@ -0,0 +1,37 @@
+require 'spec_helper'
+
+describe 'User Callouts', js: true do
+  let(:user) { create(:user) }
+  let(:project) { create(:empty_project, path: 'gitlab', name: 'sample') }
+
+  before do
+    login_as(user)
+    project.team << [user, :master]    
+  end
+
+  it 'takes you to the profile preferences when the link is clicked' do    
+    visit dashboard_projects_path
+    click_link 'Check it out'
+    expect(current_path).to eq profile_preferences_path
+  end
+
+  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'
+    end
+
+    it 'shows up on the dashboard projects' do
+      visit dashboard_projects_path
+      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
+      find('.dismiss-icon').click
+    end
+    expect(page).not_to have_selector('#user-callout')
+  end
+end

spec/javascripts/fixtures/user_callout.html.haml

@@ -0,0 +1,12 @@
+#user-callout
+  .bordered-box.landing.content-block
+    %i.fa.fa-times.dismiss-icon
+    .row
+      .col-sm-3.col-xs-12.svg-container
+      .col-sm-8.col-xs-12.inner-content
+        %h4
+          Customize your experience
+        %p
+          Change syntax themes, default project pages, and more in preferences.
+        %a{ href: 'foo', class:'user-callout-btn' }
+          Check it out

spec/javascripts/user_callout_spec.js

@@ -0,0 +1,42 @@
+/* esint-disable space-before-function-paren, arrow-body-style */
+require('~/user_callout');
+
+((global) => {
+  const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+  const Cookie = window.Cookies;
+
+  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');
+    });
+  });
+})(window.gl || (window.gl = {}));