Merge branch '28874-user-callout-margin' into 'master'

remove extra whitespace on dashboard projects page

Closes #28874

See merge request !9617

app/assets/javascripts/user_callout.js

@@ -43,6 +43,8 @@ class UserCallout {
       this.userCalloutBody.append($template);
       $template.find(closeButton).on('click', e => this.dismissCallout(e));
       $template.find(userCalloutBtn).on('click', e => this.dismissCallout(e));
+    } else {
+      this.userCalloutBody.remove();
     }
   }
 
@@ -50,7 +52,7 @@ class UserCallout {
     Cookies.set(USER_CALLOUT_COOKIE, 'true');
     const $currentTarget = $(e.currentTarget);
     if ($currentTarget.hasClass('close-user-callout')) {
-      this.userCalloutBody.empty();
+      this.userCalloutBody.remove();
     }
   }
 }

app/assets/stylesheets/pages/profile.scss

@@ -279,7 +279,7 @@ table.u2f-registrations {
 }
 
 .user-callout {
-  margin: 24px auto 0;
+  margin: 0 auto;
 
   .bordered-box {
     border: 1px solid $border-color;
@@ -287,6 +287,7 @@ table.u2f-registrations {
   }
 
   .landing {
+    margin-top: $gl-padding;
     margin-bottom: $gl-padding;
 
     .close {

spec/javascripts/user_callout_spec.js.es6

@@ -3,35 +3,55 @@ const UserCallout = require('~/user_callout');
 const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
 const Cookie = window.Cookies;
 
-describe('UserCallout', () => {
+describe('UserCallout', function () {
   const fixtureName = 'static/user_callout.html.raw';
   preloadFixtures(fixtureName);
 
-  beforeEach(function () {
+  beforeEach(() => {
     loadFixtures(fixtureName);
+    Cookie.remove(USER_CALLOUT_COOKIE);
+
     this.userCallout = new UserCallout();
     this.closeButton = $('.close-user-callout');
     this.userCalloutBtn = $('.user-callout-btn');
     this.userCalloutContainer = $('.user-callout');
-    Cookie.set(USER_CALLOUT_COOKIE, 'false');
   });
 
-  afterEach(function () {
-    Cookie.set(USER_CALLOUT_COOKIE, 'false');
+  it('does not show when cookie is set not defined', () => {
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeUndefined();
+    expect(this.userCalloutContainer.is(':visible')).toBe(true);
   });
 
-  it('shows when cookie is set to false', function () {
+  it('shows when cookie is set to false', () => {
+    Cookie.set(USER_CALLOUT_COOKIE, 'false');
+
     expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
     expect(this.userCalloutContainer.is(':visible')).toBe(true);
   });
 
-  it('hides when user clicks on the dismiss-icon', function () {
+  it('hides when user clicks on the dismiss-icon', () => {
     this.closeButton.click();
     expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true');
   });
 
-  it('hides when user clicks on the "check it out" button', function () {
+  it('hides when user clicks on the "check it out" button', () => {
     this.userCalloutBtn.click();
     expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true');
   });
 });
+
+describe('UserCallout when cookie is present', function () {
+  const fixtureName = 'static/user_callout.html.raw';
+  preloadFixtures(fixtureName);
+
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+    Cookie.set(USER_CALLOUT_COOKIE, 'true');
+    this.userCallout = new UserCallout();
+    this.userCalloutContainer = $('.user-callout');
+  });
+
+  it('removes the DOM element', () => {
+    expect(this.userCalloutContainer.length).toBe(0);
+  });
+});