Refactored the user callout class
Instead of the JS being in charge of the HTML, the HAML now handles it. The HAML can then check the cookie & show it needed. It also allows the HAML access to the paths so we don't have to pass that through. Closes #29955
This commit is contained in:
parent
4a8e516c1f
commit
3eedb2aede
|
@ -1,57 +1,26 @@
|
|||
import Cookies from 'js-cookie';
|
||||
|
||||
const userCalloutElementName = '.user-callout';
|
||||
const closeButton = '.close-user-callout';
|
||||
const userCalloutBtn = '.user-callout-btn';
|
||||
const userCalloutSvgAttrName = 'callout-svg';
|
||||
|
||||
const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
|
||||
|
||||
const USER_CALLOUT_TEMPLATE = `
|
||||
<div class="bordered-box landing content-block">
|
||||
<button class="btn btn-default close close-user-callout" type="button">
|
||||
<i class="fa fa-times dismiss-icon"></i>
|
||||
</button>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-xs-12 svg-container">
|
||||
</div>
|
||||
<div class="col-sm-8 col-xs-12 inner-content">
|
||||
<h4>
|
||||
Customize your experience
|
||||
</h4>
|
||||
<p>
|
||||
Change syntax themes, default project pages, and more in preferences.
|
||||
</p>
|
||||
<a class="btn user-callout-btn" href="/profile/preferences">Check it out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class UserCallout {
|
||||
constructor() {
|
||||
this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
|
||||
this.userCalloutBody = $(userCalloutElementName);
|
||||
this.userCalloutSvg = $(userCalloutElementName).attr(userCalloutSvgAttrName);
|
||||
$(userCalloutElementName).removeAttr(userCalloutSvgAttrName);
|
||||
this.userCalloutBody = $('.user-callout');
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
const $template = $(USER_CALLOUT_TEMPLATE);
|
||||
if (!this.isCalloutDismissed || this.isCalloutDismissed === 'false') {
|
||||
$template.find('.svg-container').append(this.userCalloutSvg);
|
||||
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();
|
||||
$('.js-close-callout').on('click', e => this.dismissCallout(e));
|
||||
}
|
||||
}
|
||||
|
||||
dismissCallout(e) {
|
||||
Cookies.set(USER_CALLOUT_COOKIE, 'true');
|
||||
const $currentTarget = $(e.currentTarget);
|
||||
if ($currentTarget.hasClass('close-user-callout')) {
|
||||
|
||||
Cookies.set(USER_CALLOUT_COOKIE, 'true');
|
||||
|
||||
if ($currentTarget.hasClass('close')) {
|
||||
this.userCalloutBody.remove();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -306,4 +306,8 @@ module ApplicationHelper
|
|||
def active_when(condition)
|
||||
'active' if condition
|
||||
end
|
||||
|
||||
def show_user_callout?
|
||||
cookies[:user_callout_dismissed] == 'true'
|
||||
end
|
||||
end
|
||||
|
|
|
@ -4,7 +4,9 @@
|
|||
- page_title "Projects"
|
||||
- header_title "Projects", dashboard_projects_path
|
||||
|
||||
.user-callout{ 'callout-svg' => custom_icon('icon_customization') }
|
||||
- unless show_user_callout?
|
||||
= render 'shared/user_callout'
|
||||
|
||||
- if @projects.any? || params[:name]
|
||||
= render 'dashboard/projects_head'
|
||||
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
.user-callout
|
||||
.bordered-box.landing.content-block
|
||||
%button.btn.btn-default.close.js-close-callout{ type: 'button',
|
||||
'aria-label' => 'Dismiss customize experience box' }
|
||||
= icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
|
||||
.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 btn-default js-close-callout'
|
|
@ -97,8 +97,8 @@
|
|||
Snippets
|
||||
|
||||
%div{ class: container_class }
|
||||
- if @user == current_user
|
||||
.user-callout{ 'callout-svg' => custom_icon('icon_customization') }
|
||||
- if @user == current_user && !show_user_callout?
|
||||
= render 'shared/user_callout'
|
||||
.tab-content
|
||||
#activity.tab-pane
|
||||
.row-content-block.calender-block.white.second-block.hidden-xs
|
||||
|
|
|
@ -16,6 +16,18 @@ describe 'User Callouts', js: true do
|
|||
expect(current_path).to eq profile_preferences_path
|
||||
end
|
||||
|
||||
it 'does not show when cookie is set' do
|
||||
visit dashboard_projects_path
|
||||
|
||||
within('.user-callout') do
|
||||
find('.close').click
|
||||
end
|
||||
|
||||
visit dashboard_projects_path
|
||||
|
||||
expect(page).not_to have_selector('.user-callout')
|
||||
end
|
||||
|
||||
describe 'user callout should appear in two routes' do
|
||||
it 'shows up on the user profile' do
|
||||
visit user_path(user)
|
||||
|
@ -31,7 +43,7 @@ describe 'User Callouts', js: true do
|
|||
it 'hides the user callout when click on the dismiss icon' do
|
||||
visit user_path(user)
|
||||
within('.user-callout') do
|
||||
find('.close-user-callout').click
|
||||
find('.close').click
|
||||
end
|
||||
expect(page).not_to have_selector('.user-callout')
|
||||
end
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
require 'spec_helper'
|
||||
|
||||
describe Dashboard::ProjectsController, '(JavaScript fixtures)', type: :controller do
|
||||
include JavaScriptFixturesHelpers
|
||||
|
||||
let(:admin) { create(:admin) }
|
||||
let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
|
||||
let(:project) { create(:project, namespace: namespace, path: 'builds-project') }
|
||||
|
||||
render_views
|
||||
|
||||
before(:all) do
|
||||
clean_frontend_fixtures('dashboard/')
|
||||
end
|
||||
|
||||
before(:each) do
|
||||
sign_in(admin)
|
||||
end
|
||||
|
||||
it 'dashboard/user-callout.html.raw' do |example|
|
||||
rendered = render_template('shared/_user_callout')
|
||||
store_frontend_fixture(rendered, example.description)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def render_template(template_file_name)
|
||||
controller.prepend_view_path(JavaScriptFixturesHelpers::FIXTURE_PATH)
|
||||
controller.render_to_string(template_file_name, layout: false)
|
||||
end
|
||||
end
|
|
@ -1,2 +0,0 @@
|
|||
.user-callout{ 'callout-svg' => custom_icon('icon_customization') }
|
||||
|
|
@ -4,7 +4,7 @@ import UserCallout from '~/user_callout';
|
|||
const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
|
||||
|
||||
describe('UserCallout', function () {
|
||||
const fixtureName = 'static/user_callout.html.raw';
|
||||
const fixtureName = 'dashboard/user-callout.html.raw';
|
||||
preloadFixtures(fixtureName);
|
||||
|
||||
beforeEach(() => {
|
||||
|
@ -12,26 +12,22 @@ describe('UserCallout', function () {
|
|||
Cookies.remove(USER_CALLOUT_COOKIE);
|
||||
|
||||
this.userCallout = new UserCallout();
|
||||
this.closeButton = $('.close-user-callout');
|
||||
this.userCalloutBtn = $('.user-callout-btn');
|
||||
this.closeButton = $('.js-close-callout.close');
|
||||
this.userCalloutBtn = $('.js-close-callout:not(.close)');
|
||||
this.userCalloutContainer = $('.user-callout');
|
||||
});
|
||||
|
||||
it('does not show when cookie is set not defined', () => {
|
||||
expect(Cookies.get(USER_CALLOUT_COOKIE)).toBeUndefined();
|
||||
expect(this.userCalloutContainer.is(':visible')).toBe(true);
|
||||
});
|
||||
|
||||
it('shows when cookie is set to false', () => {
|
||||
Cookies.set(USER_CALLOUT_COOKIE, 'false');
|
||||
|
||||
expect(Cookies.get(USER_CALLOUT_COOKIE)).toBeDefined();
|
||||
expect(this.userCalloutContainer.is(':visible')).toBe(true);
|
||||
});
|
||||
|
||||
it('hides when user clicks on the dismiss-icon', () => {
|
||||
it('hides when user clicks on the dismiss-icon', (done) => {
|
||||
this.closeButton.click();
|
||||
expect(Cookies.get(USER_CALLOUT_COOKIE)).toBe('true');
|
||||
|
||||
setTimeout(() => {
|
||||
expect(
|
||||
document.querySelector('.user-callout'),
|
||||
).toBeNull();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('hides when user clicks on the "check it out" button', () => {
|
||||
|
@ -39,19 +35,3 @@ describe('UserCallout', function () {
|
|||
expect(Cookies.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);
|
||||
Cookies.set(USER_CALLOUT_COOKIE, 'true');
|
||||
this.userCallout = new UserCallout();
|
||||
this.userCalloutContainer = $('.user-callout');
|
||||
});
|
||||
|
||||
it('removes the DOM element', () => {
|
||||
expect(this.userCalloutContainer.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue