Commit b5029214 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Remove Build code from global namespace

parent 377c10b4
/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, no-return-assign, max-len */ /* eslint-disable func-names, prefer-arrow-callback, no-return-assign */
import { visitUrl } from './lib/utils/url_utility'; import { visitUrl } from './lib/utils/url_utility';
import { convertPermissionToBoolean } from './lib/utils/common_utils'; import { convertPermissionToBoolean } from './lib/utils/common_utils';
window.BuildArtifacts = (function() { export default class BuildArtifacts {
function BuildArtifacts() { constructor() {
this.disablePropagation(); this.disablePropagation();
this.setupEntryClick(); this.setupEntryClick();
this.setupTooltips(); this.setupTooltips();
} }
// eslint-disable-next-line class-methods-use-this
BuildArtifacts.prototype.disablePropagation = function() { disablePropagation() {
$('.top-block').on('click', '.download', function(e) { $('.top-block').on('click', '.download', function (e) {
return e.stopPropagation(); return e.stopPropagation();
}); });
return $('.tree-holder').on('click', 'tr[data-link] a', function(e) { return $('.tree-holder').on('click', 'tr[data-link] a', function (e) {
return e.stopImmediatePropagation(); return e.stopImmediatePropagation();
}); });
}; }
// eslint-disable-next-line class-methods-use-this
BuildArtifacts.prototype.setupEntryClick = function() { setupEntryClick() {
return $('.tree-holder').on('click', 'tr[data-link]', function(e) { return $('.tree-holder').on('click', 'tr[data-link]', function () {
visitUrl(this.dataset.link, convertPermissionToBoolean(this.dataset.externalLink)); visitUrl(this.dataset.link, convertPermissionToBoolean(this.dataset.externalLink));
}); });
}; }
// eslint-disable-next-line class-methods-use-this
BuildArtifacts.prototype.setupTooltips = function() { setupTooltips() {
$('.js-artifact-tree-tooltip').tooltip({ $('.js-artifact-tree-tooltip').tooltip({
placement: 'bottom', placement: 'bottom',
// Stop the tooltip from hiding when we stop hovering the element directly // Stop the tooltip from hiding when we stop hovering the element directly
...@@ -41,7 +41,5 @@ window.BuildArtifacts = (function() { ...@@ -41,7 +41,5 @@ window.BuildArtifacts = (function() {
.on('mouseleave', (e) => { .on('mouseleave', (e) => {
$(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('hide'); $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('hide');
}); });
}; }
}
return BuildArtifacts;
})();
/* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren */ /* eslint-disable func-names*/
$(function() { export default function handleRevealVariables() {
$('.reveal-variables').off('click').on('click', function() { $('.js-reveal-variables')
$('.js-build-variables').toggle(); .off('click')
$(this).hide(); .on('click', function () {
}); $('.js-build-variables').toggle();
}); $(this).hide();
});
}
export default class CILintEditor {
window.gl = window.gl || {};
class CILintEditor {
constructor() { constructor() {
this.editor = window.ace.edit('ci-editor'); this.editor = window.ace.edit('ci-editor');
this.textarea = document.querySelector('#content'); this.textarea = document.querySelector('#content');
...@@ -13,5 +10,3 @@ class CILintEditor { ...@@ -13,5 +10,3 @@ class CILintEditor {
}); });
} }
} }
gl.CILintEditor = CILintEditor;
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
/* global NotificationsDropdown */ /* global NotificationsDropdown */
/* global GroupAvatar */ /* global GroupAvatar */
/* global LineHighlighter */ /* global LineHighlighter */
/* global BuildArtifacts */ import BuildArtifacts from './build_artifacts';
import CILintEditor from './ci_lint_editor';
/* global GroupsSelect */ /* global GroupsSelect */
/* global Search */ /* global Search */
/* global Admin */ /* global Admin */
...@@ -90,8 +91,8 @@ import AjaxLoadingSpinner from './ajax_loading_spinner'; ...@@ -90,8 +91,8 @@ import AjaxLoadingSpinner from './ajax_loading_spinner';
} }
Dispatcher.prototype.initPageScripts = function() { Dispatcher.prototype.initPageScripts = function() {
var page, path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl; var path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl;
page = $('body').attr('data-page'); const page = $('body').attr('data-page');
if (!page) { if (!page) {
return false; return false;
} }
...@@ -505,7 +506,7 @@ import AjaxLoadingSpinner from './ajax_loading_spinner'; ...@@ -505,7 +506,7 @@ import AjaxLoadingSpinner from './ajax_loading_spinner';
break; break;
case 'ci:lints:create': case 'ci:lints:create':
case 'ci:lints:show': case 'ci:lints:show':
new gl.CILintEditor(); new CILintEditor();
break; break;
case 'users:show': case 'users:show':
new UserCallout(); new UserCallout();
......
/* eslint-disable func-names, wrap-iife, no-use-before-define,
consistent-return, prefer-rest-params */
import _ from 'underscore'; import _ from 'underscore';
import bp from './breakpoints'; import bp from './breakpoints';
import { bytesToKiB } from './lib/utils/number_utils'; import { bytesToKiB } from './lib/utils/number_utils';
import { setCiStatusFavicon } from './lib/utils/common_utils'; import { setCiStatusFavicon } from './lib/utils/common_utils';
window.Build = (function () { export default class Job {
Build.timeout = null; constructor(options) {
Build.state = null; this.timeout = null;
this.state = null;
function Build(options) {
this.options = options || $('.js-build-options').data(); this.options = options || $('.js-build-options').data();
this.pageUrl = this.options.pageUrl; this.pageUrl = this.options.pageUrl;
...@@ -19,9 +16,7 @@ window.Build = (function () { ...@@ -19,9 +16,7 @@ window.Build = (function () {
this.$document = $(document); this.$document = $(document);
this.logBytes = 0; this.logBytes = 0;
this.hasBeenScrolled = false; this.hasBeenScrolled = false;
this.updateDropdown = this.updateDropdown.bind(this); this.updateDropdown = this.updateDropdown.bind(this);
this.getBuildTrace = this.getBuildTrace.bind(this);
this.$buildTrace = $('#build-trace'); this.$buildTrace = $('#build-trace');
this.$buildRefreshAnimation = $('.js-build-refresh'); this.$buildRefreshAnimation = $('.js-build-refresh');
...@@ -33,7 +28,7 @@ window.Build = (function () { ...@@ -33,7 +28,7 @@ window.Build = (function () {
this.$scrollTopBtn = $('.js-scroll-up'); this.$scrollTopBtn = $('.js-scroll-up');
this.$scrollBottomBtn = $('.js-scroll-down'); this.$scrollBottomBtn = $('.js-scroll-down');
clearTimeout(Build.timeout); clearTimeout(this.timeout);
this.initSidebar(); this.initSidebar();
this.populateJobs(this.buildStage); this.populateJobs(this.buildStage);
...@@ -85,7 +80,7 @@ window.Build = (function () { ...@@ -85,7 +80,7 @@ window.Build = (function () {
this.getBuildTrace(); this.getBuildTrace();
} }
Build.prototype.initAffixTopArea = function () { initAffixTopArea() {
/** /**
If the browser does not support position sticky, it returns the position as static. If the browser does not support position sticky, it returns the position as static.
If the browser does support sticky, then we allow the browser to handle it, if not If the browser does support sticky, then we allow the browser to handle it, if not
...@@ -100,13 +95,14 @@ window.Build = (function () { ...@@ -100,13 +95,14 @@ window.Build = (function () {
top: offsetTop, top: offsetTop,
}, },
}); });
}; }
Build.prototype.canScroll = function () { // eslint-disable-next-line class-methods-use-this
canScroll() {
return $(document).height() > $(window).height(); return $(document).height() > $(window).height();
}; }
Build.prototype.toggleScroll = function () { toggleScroll() {
const currentPosition = $(document).scrollTop(); const currentPosition = $(document).scrollTop();
const scrollHeight = $(document).height(); const scrollHeight = $(document).height();
...@@ -119,7 +115,7 @@ window.Build = (function () { ...@@ -119,7 +115,7 @@ window.Build = (function () {
this.toggleDisableButton(this.$scrollTopBtn, false); this.toggleDisableButton(this.$scrollTopBtn, false);
this.toggleDisableButton(this.$scrollBottomBtn, false); this.toggleDisableButton(this.$scrollBottomBtn, false);
} else if (currentPosition === 0) { } else if (currentPosition === 0) {
// User is at Top of Build Log // User is at Top of Log
this.toggleDisableButton(this.$scrollTopBtn, true); this.toggleDisableButton(this.$scrollTopBtn, true);
this.toggleDisableButton(this.$scrollBottomBtn, false); this.toggleDisableButton(this.$scrollBottomBtn, false);
...@@ -133,38 +129,40 @@ window.Build = (function () { ...@@ -133,38 +129,40 @@ window.Build = (function () {
this.toggleDisableButton(this.$scrollTopBtn, true); this.toggleDisableButton(this.$scrollTopBtn, true);
this.toggleDisableButton(this.$scrollBottomBtn, true); this.toggleDisableButton(this.$scrollBottomBtn, true);
} }
}; }
Build.prototype.scrollDown = function () { // eslint-disable-next-line class-methods-use-this
scrollDown() {
$(document).scrollTop($(document).height()); $(document).scrollTop($(document).height());
}; }
Build.prototype.scrollToBottom = function () { scrollToBottom() {
this.scrollDown(); this.scrollDown();
this.hasBeenScrolled = true; this.hasBeenScrolled = true;
this.toggleScroll(); this.toggleScroll();
}; }
Build.prototype.scrollToTop = function () { scrollToTop() {
$(document).scrollTop(0); $(document).scrollTop(0);
this.hasBeenScrolled = true; this.hasBeenScrolled = true;
this.toggleScroll(); this.toggleScroll();
}; }
Build.prototype.toggleDisableButton = function ($button, disable) { // eslint-disable-next-line class-methods-use-this
toggleDisableButton($button, disable) {
if (disable && $button.prop('disabled')) return; if (disable && $button.prop('disabled')) return;
$button.prop('disabled', disable); $button.prop('disabled', disable);
}; }
Build.prototype.toggleScrollAnimation = function (toggle) { toggleScrollAnimation(toggle) {
this.$scrollBottomBtn.toggleClass('animate', toggle); this.$scrollBottomBtn.toggleClass('animate', toggle);
}; }
Build.prototype.initSidebar = function () { initSidebar() {
this.$sidebar = $('.js-build-sidebar'); this.$sidebar = $('.js-build-sidebar');
}; }
Build.prototype.getBuildTrace = function () { getBuildTrace() {
return $.ajax({ return $.ajax({
url: `${this.pageUrl}/trace.json`, url: `${this.pageUrl}/trace.json`,
data: { state: this.state }, data: { state: this.state },
...@@ -204,7 +202,7 @@ window.Build = (function () { ...@@ -204,7 +202,7 @@ window.Build = (function () {
this.toggleScrollAnimation(false); this.toggleScrollAnimation(false);
} }
Build.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.getBuildTrace(); this.getBuildTrace();
}, 4000); }, 4000);
} else { } else {
...@@ -225,14 +223,14 @@ window.Build = (function () { ...@@ -225,14 +223,14 @@ window.Build = (function () {
} }
}) })
.then(() => this.toggleScroll()); .then(() => this.toggleScroll());
}; }
// eslint-disable-next-line class-methods-use-this
Build.prototype.shouldHideSidebarForViewport = function () { shouldHideSidebarForViewport() {
const bootstrapBreakpoint = bp.getBreakpointSize(); const bootstrapBreakpoint = bp.getBreakpointSize();
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm'; return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
}; }
Build.prototype.toggleSidebar = function (shouldHide) { toggleSidebar(shouldHide) {
const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined; const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
const $toggleButton = $('.js-sidebar-build-toggle-header'); const $toggleButton = $('.js-sidebar-build-toggle-header');
...@@ -249,17 +247,17 @@ window.Build = (function () { ...@@ -249,17 +247,17 @@ window.Build = (function () {
} else { } else {
$toggleButton.removeClass('hidden'); $toggleButton.removeClass('hidden');
} }
}; }
Build.prototype.sidebarOnResize = function () { sidebarOnResize() {
this.toggleSidebar(this.shouldHideSidebarForViewport()); this.toggleSidebar(this.shouldHideSidebarForViewport());
}; }
Build.prototype.sidebarOnClick = function () { sidebarOnClick() {
if (this.shouldHideSidebarForViewport()) this.toggleSidebar(); if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
}; }
// eslint-disable-next-line class-methods-use-this, consistent-return
Build.prototype.updateArtifactRemoveDate = function () { updateArtifactRemoveDate() {
const $date = $('.js-artifacts-remove'); const $date = $('.js-artifacts-remove');
if ($date.length) { if ($date.length) {
const date = $date.text(); const date = $date.text();
...@@ -267,23 +265,21 @@ window.Build = (function () { ...@@ -267,23 +265,21 @@ window.Build = (function () {
gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '), gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '),
); );
} }
}; }
// eslint-disable-next-line class-methods-use-this
Build.prototype.populateJobs = function (stage) { populateJobs(stage) {
$('.build-job').hide(); $('.build-job').hide();
$(`.build-job[data-stage="${stage}"]`).show(); $(`.build-job[data-stage="${stage}"]`).show();
}; }
// eslint-disable-next-line class-methods-use-this
Build.prototype.updateStageDropdownText = function (stage) { updateStageDropdownText(stage) {
$('.stage-selection').text(stage); $('.stage-selection').text(stage);
}; }
Build.prototype.updateDropdown = function (e) { updateDropdown(e) {
e.preventDefault(); e.preventDefault();
const stage = e.currentTarget.text; const stage = e.currentTarget.text;
this.updateStageDropdownText(stage); this.updateStageDropdownText(stage);
this.populateJobs(stage); this.populateJobs(stage);
}; }
}
return Build;
})();
...@@ -5,7 +5,8 @@ import Visibility from 'visibilityjs'; ...@@ -5,7 +5,8 @@ import Visibility from 'visibilityjs';
import Poll from '../lib/utils/poll'; import Poll from '../lib/utils/poll';
import JobStore from './stores/job_store'; import JobStore from './stores/job_store';
import JobService from './services/job_service'; import JobService from './services/job_service';
import '../build'; import Job from '../job';
import handleRevealVariables from '../build_variables';
export default class JobMediator { export default class JobMediator {
constructor(options = {}) { constructor(options = {}) {
...@@ -20,7 +21,8 @@ export default class JobMediator { ...@@ -20,7 +21,8 @@ export default class JobMediator {
} }
initBuildClass() { initBuildClass() {
this.build = new Build(); this.build = new Job();
handleRevealVariables();
} }
fetchJob() { fetchJob() {
......
...@@ -61,10 +61,6 @@ import './autosave'; ...@@ -61,10 +61,6 @@ import './autosave';
import loadAwardsHandler from './awards_handler'; import loadAwardsHandler from './awards_handler';
import bp from './breakpoints'; import bp from './breakpoints';
import './broadcast_message'; import './broadcast_message';
import './build';
import './build_artifacts';
import './build_variables';
import './ci_lint_editor';
import './commits'; import './commits';
import './compare'; import './compare';
import './compare_autocomplete'; import './compare_autocomplete';
......
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
- if @build.trigger_variables.any? - if @build.trigger_variables.any?
%p %p
%button.btn.group.btn-group-justified.reveal-variables Reveal Variables %button.btn.group.btn-group-justified.js-reveal-variables Reveal Variables
%dl.js-build-variables.trigger-build-variables.hide %dl.js-build-variables.trigger-build-variables.hide
- @build.trigger_variables.each do |trigger_variable| - @build.trigger_variables.each do |trigger_variable|
......
...@@ -300,13 +300,13 @@ feature 'Jobs' do ...@@ -300,13 +300,13 @@ feature 'Jobs' do
shared_examples 'expected variables behavior' do shared_examples 'expected variables behavior' do
it 'shows variable key and value after click', :js do it 'shows variable key and value after click', :js do
expect(page).to have_css('.reveal-variables') expect(page).to have_css('.js-reveal-variables')
expect(page).not_to have_css('.js-build-variable') expect(page).not_to have_css('.js-build-variable')
expect(page).not_to have_css('.js-build-value') expect(page).not_to have_css('.js-build-value')
click_button 'Reveal Variables' click_button 'Reveal Variables'
expect(page).not_to have_css('.reveal-variables') expect(page).not_to have_css('.js-reveal-variables')
expect(page).to have_selector('.js-build-variable', text: 'TRIGGER_KEY_1') expect(page).to have_selector('.js-build-variable', text: 'TRIGGER_KEY_1')
expect(page).to have_selector('.js-build-value', text: 'TRIGGER_VALUE_1') expect(page).to have_selector('.js-build-value', text: 'TRIGGER_VALUE_1')
end end
......
/* eslint-disable no-new */
/* global Build */
import { bytesToKiB } from '~/lib/utils/number_utils'; import { bytesToKiB } from '~/lib/utils/number_utils';
import '~/lib/utils/datetime_utility'; import '~/lib/utils/datetime_utility';
import '~/lib/utils/url_utility'; import '~/lib/utils/url_utility';
import '~/build'; import Job from '~/job';
import '~/breakpoints'; import '~/breakpoints';
describe('Build', () => { describe('Job', () => {
const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`; const JOB_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`;
preloadFixtures('builds/build-with-artifacts.html.raw'); preloadFixtures('builds/build-with-artifacts.html.raw');
...@@ -26,14 +24,14 @@ describe('Build', () => { ...@@ -26,14 +24,14 @@ describe('Build', () => {
describe('setup', () => { describe('setup', () => {
beforeEach(function () { beforeEach(function () {
this.build = new Build(); this.job = new Job();
}); });
it('copies build options', function () { it('copies build options', function () {
expect(this.build.pageUrl).toBe(BUILD_URL); expect(this.job.pageUrl).toBe(JOB_URL);
expect(this.build.buildStatus).toBe('success'); expect(this.job.buildStatus).toBe('success');
expect(this.build.buildStage).toBe('test'); expect(this.job.buildStage).toBe('test');
expect(this.build.state).toBe(''); expect(this.job.state).toBe('');
}); });
it('only shows the jobs matching the current stage', () => { it('only shows the jobs matching the current stage', () => {
...@@ -87,15 +85,15 @@ describe('Build', () => { ...@@ -87,15 +85,15 @@ describe('Build', () => {
complete: true, complete: true,
}); });
this.build = new Build(); this.job = new Job();
expect($('#build-trace .js-build-output').text()).toMatch(/Update/); expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
expect(this.build.state).toBe('newstate'); expect(this.job.state).toBe('newstate');
jasmine.clock().tick(4001); jasmine.clock().tick(4001);
expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/); expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
expect(this.build.state).toBe('finalstate'); expect(this.job.state).toBe('finalstate');
}); });
it('replaces the entire build trace', () => { it('replaces the entire build trace', () => {
...@@ -122,7 +120,7 @@ describe('Build', () => { ...@@ -122,7 +120,7 @@ describe('Build', () => {
append: false, append: false,
}); });
this.build = new Build(); this.job = new Job();
expect($('#build-trace .js-build-output').text()).toMatch(/Update/); expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
...@@ -148,7 +146,7 @@ describe('Build', () => { ...@@ -148,7 +146,7 @@ describe('Build', () => {
total: 100, total: 100,
}); });
this.build = new Build(); this.job = new Job();
expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden'); expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
}); });
...@@ -167,7 +165,7 @@ describe('Build', () => { ...@@ -167,7 +165,7 @@ describe('Build', () => {
total: 100, total: 100,
}); });
this.build = new Build(); this.job = new Job();
expect( expect(
document.querySelector('.js-truncated-info-size').textContent.trim(), document.querySelector('.js-truncated-info-size').textContent.trim(),
...@@ -193,7 +191,7 @@ describe('Build', () => { ...@@ -193,7 +191,7 @@ describe('Build', () => {
deferred2.resolve(); deferred2.resolve();
this.build = new Build(); this.job = new Job();
expect( expect(
document.querySelector('.js-truncated-info-size').textContent.trim(), document.querySelector('.js-truncated-info-size').textContent.trim(),
...@@ -227,7 +225,7 @@ describe('Build', () => { ...@@ -227,7 +225,7 @@ describe('Build', () => {
total: 100, total: 100,
}); });
this.build = new Build(); this.job = new Job();
expect( expect(
document.querySelector('.js-raw-link').textContent.trim(), document.querySelector('.js-raw-link').textContent.trim(),
...@@ -249,7 +247,7 @@ describe('Build', () => { ...@@ -249,7 +247,7 @@ describe('Build', () => {
total: 100, total: 100,
}); });
this.build = new Build(); this.job = new Job();
expect(document.querySelector('.js-truncated-info').classList).toContain('hidden'); expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
}); });
...@@ -270,7 +268,7 @@ describe('Build', () => { ...@@ -270,7 +268,7 @@ describe('Build', () => {
total: 100, total: 100,
}); });
this.build = new Build(); this.job = new Job();
}); });
it('should render trace controls', () => { it('should render trace controls', () => {
...@@ -293,11 +291,12 @@ describe('Build', () => { ...@@ -293,11 +291,12 @@ describe('Build', () => {
describe('getBuildTrace', () => { describe('getBuildTrace', () => {
it('should request build trace with state parameter', (done) => { it('should request build trace with state parameter', (done) => {
spyOn(jQuery, 'ajax').and.callThrough(); spyOn(jQuery, 'ajax').and.callThrough();
new Build(); // eslint-disable-next-line no-new
new Job();
setTimeout(() => { setTimeout(() => {
expect(jQuery.ajax).toHaveBeenCalledWith( expect(jQuery.ajax).toHaveBeenCalledWith(
{ url: `${BUILD_URL}/trace.json`, data: { state: '' } }, { url: `${JOB_URL}/trace.json`, data: { state: '' } },
); );
done(); done();
}, 0); }, 0);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment