fix(1684): update ember to 3.16

.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

.eslintrc.js

@@ -1,8 +1,14 @@
+'use strict';
+
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: ['ember', 'prettier'],
   extends: [
@@ -45,6 +51,9 @@ module.exports = {
     'ember/avoid-leaking-state-in-ember-objects': 'off',
     'ember/jquery-ember-run': 'off',
     'ember/no-global-jquery': 'off',
+    'ember/no-jquery': 'off',
+    'ember/no-new-mixins': 'off',
+    'ember/no-observers': 'off',
     'ember/no-side-effects': 'off',
     'prettier/prettier': 'error'
   },
@@ -61,6 +70,9 @@ module.exports = {
         'lib/*/index.js',
         'server/**/*.js'
       ],
+      parserOptions: {
+        sourceType: 'script'
+      },
       env: {
         browser: false,
         node: true

.template-lintrc.js

@@ -1,3 +1,5 @@
+'use strict';
+
 module.exports = {
   extends: 'recommended',
   rules: {

app/app.js

@@ -1,7 +1,7 @@
 import Application from '@ember/application';
 import loadInitializers from 'ember-load-initializers';
 import { run } from '@ember/runloop';
-import Resolver from './resolver';
+import Resolver from 'ember-resolver';
 import config from './config/environment';
 
 const App = Application.extend({

app/application/adapter.js

@@ -135,6 +135,7 @@ export default DS.RESTAdapter.extend(DataAdapterMixin, {
     }
 
     let data = {};
+
     let key;
 
     const requestUrl = new URL(requestData.url);

app/build-artifact/service.js

@@ -37,6 +37,7 @@ function changeFiles(tree) {
  */
 function arrangeIntoTree(paths, baseUrl) {
   const tree = [];
+
   let currentLevel;
 
   paths.forEach(path => {

app/build-logs/service.js

@@ -28,6 +28,7 @@ export default Service.extend({
     started = false
   }) {
     let lines = [];
+
     let done = false;
     const inProgress = sortOrder === 'ascending';
 

app/build/adapter.js

@@ -5,6 +5,7 @@ export default BaseAdapter.extend({
   queryRecord(store, type, data) {
     this.modelKey = 'build';
     let url = `${ENV.APP.SDAPI_HOSTNAME}/${ENV.APP.SDAPI_NAMESPACE}/jobs/${data.jobId}/latestBuild`;
+
     let query = { status: data.status };
 
     return this.ajax(url, 'GET', { data: query });

app/build/model.js

@@ -10,6 +10,7 @@ import DS from 'ember-data';
  */
 function calcDuration(start, end) {
   let endTime = new Date();
+
   let startTime = this.get(start);
 
   if (end !== 'now') {

app/command/service.js

@@ -24,6 +24,7 @@ export default Service.extend({
   },
   getAllCommands(namespace) {
     const url = `${ENV.APP.SDAPI_HOSTNAME}/${ENV.APP.SDAPI_NAMESPACE}/commands`;
+
     let params = { compact: true, sortBy: 'createTime' };
 
     if (namespace) {

app/commands/controller.js

@@ -5,6 +5,7 @@ export default Controller.extend({
   routeParams: computed('model', {
     get() {
       let route = this.model;
+
       let params = Object.assign(
         {},
         route.paramsFor('commands.namespace'),
@@ -17,6 +18,7 @@ export default Controller.extend({
   crumbs: computed('routeParams', {
     get() {
       let breadcrumbs = [];
+
       let params = this.routeParams;
 
       if (params.namespace || params.detail) {

app/commands/detail/route.js

@@ -12,6 +12,7 @@ export default Route.extend({
       this.command.getCommandTags(params.namespace, params.name)
     ]).then(arr => {
       const [verPayload, tagPayload] = arr;
+
       let version;
 
       if (params.version) {

app/components/404-display/component.js

@@ -0,0 +1,3 @@
+import Component from '@ember/component';
+
+export default Component.extend({});

app/components/artifact-tree/component.js

@@ -57,7 +57,9 @@ export default Component.extend({
       const artifactPath = this.getWithDefault('selectedArtifact', '');
       const paths = artifactPath.split('/');
       const jstree = this.jstreeActionReceiver.target.treeObject.jstree(true);
+
       let nodeList = jstree.get_json();
+
       let targetNode = null;
 
       // traversing jstree to find target artifact node

app/components/build-log/component.js

@@ -37,6 +37,7 @@ export default Component.extend({
   }),
   getPageSize(fetchMax = false) {
     const { totalLine, inProgress, justFinished } = this;
+
     let itemSize = this.logService.getCache(this.buildId, this.stepName, 'nextLine') || totalLine;
 
     if (justFinished) {
@@ -259,7 +260,7 @@ export default Component.extend({
    * @method scrollTop
    */
   scrollTop() {
-    this.$('.wrap')[0].scrollTop = 0;
+    this.element.querySelectorAll('.wrap')[0].scrollTop = 0;
   },
 
   /**
@@ -268,9 +269,9 @@ export default Component.extend({
    */
   scrollDown() {
     if (this.autoscroll) {
-      const bottom = this.$('.bottom').prop('offsetTop');
+      const bottom = this.element.querySelector('.bottom').offsetTop;
 
-      this.$('.wrap').prop('scrollTop', bottom);
+      this.element.querySelector('.wrap').scrollTop = bottom;
       set(this, 'lastScrollTop', bottom);
     }
   },
@@ -280,7 +281,7 @@ export default Component.extend({
    * @method scrollStill
    */
   scrollStill() {
-    const container = this.$('.wrap')[0];
+    const container = this.element.querySelectorAll('.wrap')[0];
 
     set(
       this,
@@ -320,7 +321,7 @@ export default Component.extend({
         .then(({ done }) => {
           // prevent updating logs when component is being destroyed
           if (!this.isDestroyed && !this.isDestroying) {
-            const container = this.$('.wrap')[0];
+            const container = this.element.querySelectorAll('.wrap')[0];
             const { inProgress, justFinished } = this;
 
             set(this, 'isFetching', false);
@@ -369,18 +370,17 @@ export default Component.extend({
         set(this, 'isDownloading', true);
 
         this.getLogs(true).then(() => {
-          this.$('#downloadLink')
-            .attr({
-              download: `${buildId}-${stepName}.log`,
-              href: this.logService.buildLogBlobUrl(buildId, stepName)
-            })[0]
-            .click();
+          const el = this.element.querySelector('#downloadLink');
+
+          el.setAttribute('download', `${buildId}-${stepName}.log`);
+          el.setAttribute('href', this.logService.buildLogBlobUrl(buildId, stepName));
+          el.click();
           set(this, 'isDownloading', false);
         });
       }
     },
     logScroll() {
-      const container = this.$('.wrap')[0];
+      const container = this.element.querySelectorAll('.wrap')[0];
 
       if (
         !this.inProgress &&
@@ -394,7 +394,11 @@ export default Component.extend({
       }
 
       // autoscroll when the bottom of the logs is roughly in view
-      set(this, 'autoscroll', this.$('.bottom')[0].getBoundingClientRect().top < 1500);
+      set(
+        this,
+        'autoscroll',
+        this.element.querySelectorAll('.bottom')[0].getBoundingClientRect().top < 1500
+      );
     },
     toggleTimeDisplay() {
       let index = timeTypes.indexOf(this.timeFormat);

app/components/collection-view/component.js

@@ -1,4 +1,3 @@
-/* eslint ember/avoid-leaking-state-in-components: [2, ["sortBy", "selectedPipelines", "searchedPipelines", "selectedSearchedPipelines", "metricsMap"]] */
 import { sort } from '@ember/object/computed';
 import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';

app/components/create-pipeline/component.js

@@ -56,6 +56,7 @@ export default Component.extend({
         checkoutUrl: scmUrl,
         rootDir
       };
+
       let pipeline;
 
       try {
@@ -102,6 +103,7 @@ export default Component.extend({
           }
         } catch (err) {
           const { payload: responsePayload } = err;
+
           let { message } = responsePayload;
 
           this.setProperties({

app/components/events-thumbnail/component.js

@@ -22,8 +22,10 @@ export default Component.extend({
     };
 
     const svg = select(this.element.getElementsByTagName('svg')[0]);
+
     let [barSpace, barWidth, paddingLeft, paddingRight] = getParameters(svg);
     const totalNumberOfEvents = this.events.length;
+
     let maxDuration = Math.max(...this.events.map(event => event.duration));
 
     if (maxDuration === -Infinity) {

app/components/home-hero/component.js

@@ -13,7 +13,7 @@ export default Component.extend({
   languages: langs,
   actions: {
     changeLanguage() {
-      this.set('forkUrl', this.$('select').val());
+      this.set('forkUrl', this.element.querySelector('select').value);
     }
   },
   forkUrl: langs[0].url

app/components/loading-view/component.js

@@ -1,4 +1,3 @@
-/* eslint ember/avoid-leaking-state-in-components: [2, ["funnies"]] */
 import { computed } from '@ember/object';
 import Component from '@ember/component';
 

app/components/pipeline-create-form/template.hbs

@@ -86,4 +86,4 @@
   delayHide="1000"}}
     What is a <a href="https://docs.screwdriver.cd/user-guide/configuration/" target="_blank" rel="noopener">screwdriver.yaml</a>
   {{/bs-tooltip}}
-</div>
+</div>

app/components/pipeline-event-row/component.js

@@ -41,6 +41,7 @@ export default Component.extend({
     get() {
       const startFrom = this.get('event.startFrom');
       const pipelineId = this.get('event.pipelineId');
+
       let isExternal = false;
 
       if (startFrom && startFrom.match(/^~sd@(\d+):([\w-]+)$/)) {
@@ -65,6 +66,7 @@ export default Component.extend({
       // using underscore because router.js doesn't pick up camelcase
       /* eslint-disable camelcase */
       let pipeline_id = this.get('event.startFrom').match(/^~sd@(\d+):[\w-]+$/);
+
       let build_id = this.get('event.causeMessage').match(/\s(\d+)$/);
 
       if (build_id) {

app/components/pipeline-list-coverage-cell/component.js

@@ -6,7 +6,7 @@ export default Component.extend({
   shuttle: service(),
 
   result: computed('value', {
-    async get() {
+    get: async () => {
       const {
         buildId,
         jobId,

app/components/pipeline-list-view/component.js

@@ -46,7 +46,8 @@ export default Component.extend({
   init() {
     this._super(...arguments);
     const sortedRows = this.getRows(this.jobsDetails);
-    const table = new Table(this.get('columns'), sortedRows);
+    const table = Table.create({ columns: this.get('columns'), rows: sortedRows });
+
     let sortColumn = table.get('allColumns').findBy('valuePath', this.get('sortingValuePath'));
 
     // Setup initial sort column
@@ -146,16 +147,17 @@ export default Component.extend({
       const prNumMatch = jobName.match(prRegex);
 
       let duration;
+
       let startTime;
-      let status;
+
       let buildId;
+
       let coverageData = {};
 
       if (latestBuild) {
         startTime = moment(latestBuild.startTime).format('lll');
-        status = latestBuild.status;
         buildId = latestBuild.id;
-        duration = this.getDuration(latestBuild.startTime, latestBuild.endTime, status);
+        duration = this.getDuration(latestBuild.startTime, latestBuild.endTime, latestBuild.status);
 
         coverageData = {
           jobId,

app/components/pipeline-list-view/template.hbs

@@ -1,5 +1,5 @@
 <button {{action "refreshListViewJobs"}} class="refresh-btn">Refresh</button>
-{{#light-table table as |t|}}
+{{#light-table table height="inherit" as |t|}}
   {{t.head
     onColumnClick=(action "onColumnClick")
     iconSortable="fa fa-sort"
@@ -27,4 +27,4 @@
       onSave=(action "startBuild")
       onClose=(action "closeModal")}}
   {{/modal-dialog}}
-{{/if}}
+{{/if}}

app/components/pipeline-options/component.js

@@ -1,4 +1,3 @@
-/* eslint ember/avoid-leaking-state-in-components: [2, ["jobSorting"]] */
 import $ from 'jquery';
 import { inject as service } from '@ember/service';
 import { not, or, sort } from '@ember/object/computed';
@@ -124,6 +123,7 @@ export default Component.extend({
     },
     clearCache(scope, id) {
       const pipelineId = this.get('pipeline.id');
+
       let config = {
         scope,
         cacheId: id,

app/components/pipeline-rootdir/component.js

@@ -0,0 +1,3 @@
+import Component from '@ember/component';
+
+export default Component.extend({});

app/components/pipeline-rootdir/template.hbs

@@ -9,4 +9,4 @@
       key-up=updateRootDir
     }}
   </div>
-{{/if}}
+{{/if}}

app/components/pipeline-search-panel/template.hbs

@@ -19,4 +19,4 @@
       </div>
     {{/each}}
   </div>
-</div>
+</div>

app/components/pipeline-secret-settings/component.js

@@ -1,4 +1,3 @@
-/* eslint ember/avoid-leaking-state-in-components: [2, ["secretsSorting"]] */
 import { sort } from '@ember/object/computed';
 import { computed } from '@ember/object';
 import Component from '@ember/component';

app/components/pipeline-workflow/component.js

@@ -57,7 +57,9 @@ export default Component.extend({
       const EXTERNAL_TRIGGER_REGEX = /^~?sd@(\d+):([\w-]+)$/;
       const edges = get(this, 'directedGraph.edges');
       const isTrigger = job ? /(^~)|(^~?sd@)/.test(job.name) : false;
+
       let isRootNode = true;
+
       let toolTipProperties = {};
 
       // Find root nodes to determine position of tooltip