Remove Build code from global namespace

app/assets/javascripts/build_artifacts.js

-/* 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;
-})();
+  }
+}

app/assets/javascripts/build_variables.js

-/* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren */
-$(function() {
-  $('.reveal-variables').off('click').on('click', function() {
-    $('.js-build-variables').toggle();
-    $(this).hide();
-  });
-});
+/* eslint-disable func-names*/
+export default function handleRevealVariables() {
+  $('.js-reveal-variables')
+    .off('click')
+    .on('click', function () {
+      $('.js-build-variables').toggle();
+      $(this).hide();
+    });
+}

app/assets/javascripts/ci_lint_editor.js

-
-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;

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();

app/assets/javascripts/build.js → app/assets/javascripts/job.js

-/* 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;
-})();
+  }
+}

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() {

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';

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|

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

spec/javascripts/build_spec.js → spec/javascripts/job_spec.js

-/* 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);