diff options
| -rw-r--r-- | app/assets/javascripts/build_artifacts.js | 34 | ||||
| -rw-r--r-- | app/assets/javascripts/build_variables.js | 16 | ||||
| -rw-r--r-- | app/assets/javascripts/ci_lint_editor.js | 7 | ||||
| -rw-r--r-- | app/assets/javascripts/dispatcher.js | 9 | ||||
| -rw-r--r-- | app/assets/javascripts/job.js (renamed from app/assets/javascripts/build.js) | 106 | ||||
| -rw-r--r-- | app/assets/javascripts/jobs/job_details_mediator.js | 6 | ||||
| -rw-r--r-- | app/assets/javascripts/main.js | 4 | ||||
| -rw-r--r-- | app/views/projects/jobs/_sidebar.html.haml | 2 | ||||
| -rw-r--r-- | spec/features/projects/jobs_spec.rb | 4 | ||||
| -rw-r--r-- | spec/javascripts/job_spec.js (renamed from spec/javascripts/build_spec.js) | 43 |
10 files changed, 110 insertions, 121 deletions
diff --git a/app/assets/javascripts/build_artifacts.js b/app/assets/javascripts/build_artifacts.js index 19388f1f9ae..ace89398943 100644 --- a/app/assets/javascripts/build_artifacts.js +++ b/app/assets/javascripts/build_artifacts.js @@ -1,30 +1,30 @@ -/* 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 { convertPermissionToBoolean } from './lib/utils/common_utils'; -window.BuildArtifacts = (function() { - function BuildArtifacts() { +export default class BuildArtifacts { + constructor() { this.disablePropagation(); this.setupEntryClick(); this.setupTooltips(); } - - BuildArtifacts.prototype.disablePropagation = function() { - $('.top-block').on('click', '.download', function(e) { + // eslint-disable-next-line class-methods-use-this + disablePropagation() { + $('.top-block').on('click', '.download', function (e) { 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(); }); - }; - - BuildArtifacts.prototype.setupEntryClick = function() { - return $('.tree-holder').on('click', 'tr[data-link]', function(e) { + } + // eslint-disable-next-line class-methods-use-this + setupEntryClick() { + return $('.tree-holder').on('click', 'tr[data-link]', function () { visitUrl(this.dataset.link, convertPermissionToBoolean(this.dataset.externalLink)); }); - }; - - BuildArtifacts.prototype.setupTooltips = function() { + } + // eslint-disable-next-line class-methods-use-this + setupTooltips() { $('.js-artifact-tree-tooltip').tooltip({ placement: 'bottom', // Stop the tooltip from hiding when we stop hovering the element directly @@ -41,7 +41,5 @@ window.BuildArtifacts = (function() { .on('mouseleave', (e) => { $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('hide'); }); - }; - - return BuildArtifacts; -})(); + } +} diff --git a/app/assets/javascripts/build_variables.js b/app/assets/javascripts/build_variables.js index c955a9ac2ea..35edf3e0017 100644 --- a/app/assets/javascripts/build_variables.js +++ b/app/assets/javascripts/build_variables.js @@ -1,8 +1,10 @@ -/* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren */ +/* eslint-disable func-names*/ -$(function() { - $('.reveal-variables').off('click').on('click', function() { - $('.js-build-variables').toggle(); - $(this).hide(); - }); -}); +export default function handleRevealVariables() { + $('.js-reveal-variables') + .off('click') + .on('click', function () { + $('.js-build-variables').toggle(); + $(this).hide(); + }); +} diff --git a/app/assets/javascripts/ci_lint_editor.js b/app/assets/javascripts/ci_lint_editor.js index dd4a08a2f31..b9469e5b7cb 100644 --- a/app/assets/javascripts/ci_lint_editor.js +++ b/app/assets/javascripts/ci_lint_editor.js @@ -1,7 +1,4 @@ - -window.gl = window.gl || {}; - -class CILintEditor { +export default class CILintEditor { constructor() { this.editor = window.ace.edit('ci-editor'); this.textarea = document.querySelector('#content'); @@ -13,5 +10,3 @@ class CILintEditor { }); } } - -gl.CILintEditor = CILintEditor; diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index 1edd460f380..39f2232b6fd 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -12,7 +12,8 @@ /* global NotificationsDropdown */ /* global GroupAvatar */ /* global LineHighlighter */ -/* global BuildArtifacts */ +import BuildArtifacts from './build_artifacts'; +import CILintEditor from './ci_lint_editor'; /* global GroupsSelect */ /* global Search */ /* global Admin */ @@ -90,8 +91,8 @@ import AjaxLoadingSpinner from './ajax_loading_spinner'; } Dispatcher.prototype.initPageScripts = function() { - var page, path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl; - page = $('body').attr('data-page'); + var path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl; + const page = $('body').attr('data-page'); if (!page) { return false; } @@ -505,7 +506,7 @@ import AjaxLoadingSpinner from './ajax_loading_spinner'; break; case 'ci:lints:create': case 'ci:lints:show': - new gl.CILintEditor(); + new CILintEditor(); break; case 'users:show': new UserCallout(); diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/job.js index 3d27a3544eb..c6b5844dff6 100644 --- a/app/assets/javascripts/build.js +++ b/app/assets/javascripts/job.js @@ -1,15 +1,12 @@ -/* eslint-disable func-names, wrap-iife, no-use-before-define, -consistent-return, prefer-rest-params */ import _ from 'underscore'; import bp from './breakpoints'; import { bytesToKiB } from './lib/utils/number_utils'; import { setCiStatusFavicon } from './lib/utils/common_utils'; -window.Build = (function () { - Build.timeout = null; - Build.state = null; - - function Build(options) { +export default class Job { + constructor(options) { + this.timeout = null; + this.state = null; this.options = options || $('.js-build-options').data(); this.pageUrl = this.options.pageUrl; @@ -19,9 +16,7 @@ window.Build = (function () { this.$document = $(document); this.logBytes = 0; this.hasBeenScrolled = false; - this.updateDropdown = this.updateDropdown.bind(this); - this.getBuildTrace = this.getBuildTrace.bind(this); this.$buildTrace = $('#build-trace'); this.$buildRefreshAnimation = $('.js-build-refresh'); @@ -33,7 +28,7 @@ window.Build = (function () { this.$scrollTopBtn = $('.js-scroll-up'); this.$scrollBottomBtn = $('.js-scroll-down'); - clearTimeout(Build.timeout); + clearTimeout(this.timeout); this.initSidebar(); this.populateJobs(this.buildStage); @@ -85,7 +80,7 @@ window.Build = (function () { 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 support sticky, then we allow the browser to handle it, if not @@ -100,13 +95,14 @@ window.Build = (function () { top: offsetTop, }, }); - }; + } - Build.prototype.canScroll = function () { + // eslint-disable-next-line class-methods-use-this + canScroll() { return $(document).height() > $(window).height(); - }; + } - Build.prototype.toggleScroll = function () { + toggleScroll() { const currentPosition = $(document).scrollTop(); const scrollHeight = $(document).height(); @@ -119,7 +115,7 @@ window.Build = (function () { this.toggleDisableButton(this.$scrollTopBtn, false); this.toggleDisableButton(this.$scrollBottomBtn, false); } 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.$scrollBottomBtn, false); @@ -133,38 +129,40 @@ window.Build = (function () { this.toggleDisableButton(this.$scrollTopBtn, true); this.toggleDisableButton(this.$scrollBottomBtn, true); } - }; + } - Build.prototype.scrollDown = function () { + // eslint-disable-next-line class-methods-use-this + scrollDown() { $(document).scrollTop($(document).height()); - }; + } - Build.prototype.scrollToBottom = function () { + scrollToBottom() { this.scrollDown(); this.hasBeenScrolled = true; this.toggleScroll(); - }; + } - Build.prototype.scrollToTop = function () { + scrollToTop() { $(document).scrollTop(0); this.hasBeenScrolled = true; 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; $button.prop('disabled', disable); - }; + } - Build.prototype.toggleScrollAnimation = function (toggle) { + toggleScrollAnimation(toggle) { this.$scrollBottomBtn.toggleClass('animate', toggle); - }; + } - Build.prototype.initSidebar = function () { + initSidebar() { this.$sidebar = $('.js-build-sidebar'); - }; + } - Build.prototype.getBuildTrace = function () { + getBuildTrace() { return $.ajax({ url: `${this.pageUrl}/trace.json`, data: { state: this.state }, @@ -204,7 +202,7 @@ window.Build = (function () { this.toggleScrollAnimation(false); } - Build.timeout = setTimeout(() => { + this.timeout = setTimeout(() => { this.getBuildTrace(); }, 4000); } else { @@ -225,14 +223,14 @@ window.Build = (function () { } }) .then(() => this.toggleScroll()); - }; - - Build.prototype.shouldHideSidebarForViewport = function () { + } + // eslint-disable-next-line class-methods-use-this + shouldHideSidebarForViewport() { const bootstrapBreakpoint = bp.getBreakpointSize(); return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm'; - }; + } - Build.prototype.toggleSidebar = function (shouldHide) { + toggleSidebar(shouldHide) { const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined; const $toggleButton = $('.js-sidebar-build-toggle-header'); @@ -249,17 +247,17 @@ window.Build = (function () { } else { $toggleButton.removeClass('hidden'); } - }; + } - Build.prototype.sidebarOnResize = function () { + sidebarOnResize() { this.toggleSidebar(this.shouldHideSidebarForViewport()); - }; + } - Build.prototype.sidebarOnClick = function () { + sidebarOnClick() { if (this.shouldHideSidebarForViewport()) this.toggleSidebar(); - }; - - Build.prototype.updateArtifactRemoveDate = function () { + } + // eslint-disable-next-line class-methods-use-this, consistent-return + updateArtifactRemoveDate() { const $date = $('.js-artifacts-remove'); if ($date.length) { const date = $date.text(); @@ -267,23 +265,21 @@ window.Build = (function () { gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '), ); } - }; - - Build.prototype.populateJobs = function (stage) { + } + // eslint-disable-next-line class-methods-use-this + populateJobs(stage) { $('.build-job').hide(); $(`.build-job[data-stage="${stage}"]`).show(); - }; - - Build.prototype.updateStageDropdownText = function (stage) { + } + // eslint-disable-next-line class-methods-use-this + updateStageDropdownText(stage) { $('.stage-selection').text(stage); - }; + } - Build.prototype.updateDropdown = function (e) { + updateDropdown(e) { e.preventDefault(); const stage = e.currentTarget.text; this.updateStageDropdownText(stage); this.populateJobs(stage); - }; - - return Build; -})(); + } +} diff --git a/app/assets/javascripts/jobs/job_details_mediator.js b/app/assets/javascripts/jobs/job_details_mediator.js index cc014b815c4..14c7b96e54d 100644 --- a/app/assets/javascripts/jobs/job_details_mediator.js +++ b/app/assets/javascripts/jobs/job_details_mediator.js @@ -5,7 +5,8 @@ import Visibility from 'visibilityjs'; import Poll from '../lib/utils/poll'; import JobStore from './stores/job_store'; import JobService from './services/job_service'; -import '../build'; +import Job from '../job'; +import handleRevealVariables from '../build_variables'; export default class JobMediator { constructor(options = {}) { @@ -20,7 +21,8 @@ export default class JobMediator { } initBuildClass() { - this.build = new Build(); + this.build = new Job(); + handleRevealVariables(); } fetchJob() { diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 974121412bd..ac7b976f811 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -61,10 +61,6 @@ import './autosave'; import loadAwardsHandler from './awards_handler'; import bp from './breakpoints'; import './broadcast_message'; -import './build'; -import './build_artifacts'; -import './build_variables'; -import './ci_lint_editor'; import './commits'; import './compare'; import './compare_autocomplete'; diff --git a/app/views/projects/jobs/_sidebar.html.haml b/app/views/projects/jobs/_sidebar.html.haml index 43e23bb2200..d5c6d329ce4 100644 --- a/app/views/projects/jobs/_sidebar.html.haml +++ b/app/views/projects/jobs/_sidebar.html.haml @@ -48,7 +48,7 @@ - if @build.trigger_variables.any? %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 - @build.trigger_variables.each do |trigger_variable| diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb index 71702db860c..576870ea0f3 100644 --- a/spec/features/projects/jobs_spec.rb +++ b/spec/features/projects/jobs_spec.rb @@ -300,13 +300,13 @@ feature 'Jobs' do shared_examples 'expected variables behavior' 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-value') 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-value', text: 'TRIGGER_VALUE_1') end diff --git a/spec/javascripts/build_spec.js b/spec/javascripts/job_spec.js index d5b0f23e7b7..5e67911d338 100644 --- a/spec/javascripts/build_spec.js +++ b/spec/javascripts/job_spec.js @@ -1,13 +1,11 @@ -/* eslint-disable no-new */ -/* global Build */ import { bytesToKiB } from '~/lib/utils/number_utils'; import '~/lib/utils/datetime_utility'; import '~/lib/utils/url_utility'; -import '~/build'; +import Job from '~/job'; import '~/breakpoints'; -describe('Build', () => { - const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`; +describe('Job', () => { + const JOB_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`; preloadFixtures('builds/build-with-artifacts.html.raw'); @@ -26,14 +24,14 @@ describe('Build', () => { describe('setup', () => { beforeEach(function () { - this.build = new Build(); + this.job = new Job(); }); it('copies build options', function () { - expect(this.build.pageUrl).toBe(BUILD_URL); - expect(this.build.buildStatus).toBe('success'); - expect(this.build.buildStage).toBe('test'); - expect(this.build.state).toBe(''); + expect(this.job.pageUrl).toBe(JOB_URL); + expect(this.job.buildStatus).toBe('success'); + expect(this.job.buildStage).toBe('test'); + expect(this.job.state).toBe(''); }); it('only shows the jobs matching the current stage', () => { @@ -87,15 +85,15 @@ describe('Build', () => { complete: true, }); - this.build = new Build(); + this.job = new Job(); 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); 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', () => { @@ -122,7 +120,7 @@ describe('Build', () => { append: false, }); - this.build = new Build(); + this.job = new Job(); expect($('#build-trace .js-build-output').text()).toMatch(/Update/); @@ -148,7 +146,7 @@ describe('Build', () => { total: 100, }); - this.build = new Build(); + this.job = new Job(); expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden'); }); @@ -167,7 +165,7 @@ describe('Build', () => { total: 100, }); - this.build = new Build(); + this.job = new Job(); expect( document.querySelector('.js-truncated-info-size').textContent.trim(), @@ -193,7 +191,7 @@ describe('Build', () => { deferred2.resolve(); - this.build = new Build(); + this.job = new Job(); expect( document.querySelector('.js-truncated-info-size').textContent.trim(), @@ -227,7 +225,7 @@ describe('Build', () => { total: 100, }); - this.build = new Build(); + this.job = new Job(); expect( document.querySelector('.js-raw-link').textContent.trim(), @@ -249,7 +247,7 @@ describe('Build', () => { total: 100, }); - this.build = new Build(); + this.job = new Job(); expect(document.querySelector('.js-truncated-info').classList).toContain('hidden'); }); @@ -270,7 +268,7 @@ describe('Build', () => { total: 100, }); - this.build = new Build(); + this.job = new Job(); }); it('should render trace controls', () => { @@ -293,11 +291,12 @@ describe('Build', () => { describe('getBuildTrace', () => { it('should request build trace with state parameter', (done) => { spyOn(jQuery, 'ajax').and.callThrough(); - new Build(); + // eslint-disable-next-line no-new + new Job(); setTimeout(() => { expect(jQuery.ajax).toHaveBeenCalledWith( - { url: `${BUILD_URL}/trace.json`, data: { state: '' } }, + { url: `${JOB_URL}/trace.json`, data: { state: '' } }, ); done(); }, 0); |