fix(1684): update ember to 3.16 #576

wahapo · 2020-07-31T12:25:45Z

Context

Fix this issue screwdriver-cd/screwdriver#1684.

We can reproduce it by entering the following yaml into validator.

jobs:
  main:
    image: node:10
    steps:
      - ls
    annotations:
      sd.cd: 1

Objective

This PR will fix it, as shown in the screenshot below.

It's because of this bug.
emberjs/ember.js#17529

We can fix it by updating to at least v3.13.0. I would suggest giving it up to a version of LTS.

References

screwdriver-cd/screwdriver#1684
https://emberjs.com/releases/lts
adopted-ember-addons/ember-light-table#701
https://deprecations.emberjs.com/v3.x/#toc_jquery-apis

License

I confirm that this contribution is made under the terms of the license found in the root directory of this repository's source tree and that I have the authority necessary to make this contribution on behalf of its copyright owner.

jithine · 2020-07-31T15:15:14Z

Looks like few tests failed.

cc @adong

jithine · 2020-07-31T15:16:53Z

package.json

@@ -69,7 +69,7 @@
    "ember-ace": "^2.0.1",
    "ember-ajax": "^5.0.0",
    "ember-bootstrap": "^2.8.1",
-    "ember-cli": "~3.10.1",
+    "ember-cli": "^3.20.0",


if we are planning to stick to LTS shouldn't it be 3.16 ? https://github.com/emberjs/ember.js/blob/v3.16.6/CHANGELOG.md

Missed one aspect

adong · 2020-07-31T18:01:57Z

Nice. I like 3.16, which is the latest LTS https://emberjs.com/releases/lts

cd screwdriver-cd/ui

# optional and important, some dependencies may not in enterprise npm registry yet
# npm config set registry https://registry.npmjs.org/

npm install -g ember-cli-update
ember-cli-update --to 3.16.0

Fix eslint styles:

node ./node_modules/eslint/bin/eslint.js --fix .

Thank you for taking a stab at it 👍

Refer:

https://github.com/ember-cli/ember-cli-update has more details.

use ember-cli-update

.travis.yml

wahapo · 2020-08-04T12:19:16Z

I feel like this stub is not being replaced correctly. 🤔

adong · 2020-08-04T23:20:01Z

I feel like this stub is not being replaced correctly. 🤔

ember-sinon-quint has a newer version for ember 3.16: https://github.com/elwayman02/ember-sinon-qunit/releases/tag/v5.0.0

To install the newer version, we need to upgrade package.json:

    "ember-sinon": "^5.0.0",
    "ember-sinon-qunit": "^5.0.0",

Also we need to have the following for tests/test-helper.js:

import { setApplication } from '@ember/test-helpers'; 
import { start } from 'ember-qunit'; 
import Application from '../app'; 
import config from '../config/environment'; 
import setupSinon from 'ember-sinon-qunit';
 
setApplication(Application.create(config.APP)); 
 
setupSinon();
 
start();

adong · 2020-08-04T23:55:37Z

I also noticed that

  result: computed('value', {
    async get() {

in app/components/pipeline-list-coverage-cell/component.js needs to be changed to

  result: computed('value', {
    get: async function() {

I tested on babel

It seems the first way of written was never supported. 🤷‍♂️

Refer:

adong · 2020-08-05T00:50:29Z

Looks like ember-sinon-quit has deprecated https://github.com/elwayman02/ember-sinon-qunit#deprecated-features since https://github.com/elwayman02/ember-sinon-qunit/tree/aab1b20c198f104bd02e6fd4c1b610e5c7f88f30

Do the following in tests/unit/application/route-test.js will fix test

# These 2 are new
import { later } from '@ember/runloop';
import sinon from 'sinon';

  test('it should clear store and reload page on session change', function(assert) {
    const route = this.owner.lookup('route:application');
    const session = this.owner.lookup('service:session');
    const reloadStub = sinon.stub(route, 'reloadPage');

    session.set('data.sessionChanged', true);

    later(() => {
      assert.ok(reloadStub.calledOnce, 'reloadPage was not called');
    });
  });

  test('it should not clear store and reload page if no session change', function(assert) {
    const route = this.owner.lookup('route:application');
    const session = this.owner.lookup('service:session');
    const reloadStub = sinon.stub(route, 'reloadPage');

    session.set('data.sessionChanged', false);

    later(() => {
      assert.notOk(reloadStub.calledOnce, 'reloadPage was called');
    });
  });

Wrap with run.later will make sure it is executed until other actions were called, in this case, it is exactly what we need.

wahapo · 2020-08-05T02:21:15Z

Cool! That's exactly what I was looking for right now.

adong · 2020-08-05T02:43:26Z

package.json

-    "ember-export-application-global": "^2.0.0",
+    "ember-data": "~3.16.0",
+    "ember-export-application-global": "^2.0.1",
+    "ember-fetch": "^7.0.0",


Please remove ember-fetch, since we already have ember-ajax

adong · 2020-08-05T02:45:02Z

@wahapo

2 questions,

I found eslint . --fix is not fixing anything for me. It's very frustrating, and I'm curious how are you approaching the linter errors?
Do you happen to know which rule made an extra line between let variable declaration?

Thanks

wahapo · 2020-08-05T10:08:12Z

@adong

I just run npm run "lint:fix" command.
Eslint said error Expected blank line after variable declarations newline-after-var. It may have something to do with the fact that the version of eslint is v5.16.0.

$ ./node_modules/eslint/bin/eslint.js -v
v5.16.0

adong · 2020-08-05T21:49:49Z

Very strange. If I run the following command to run test locally.

CI=true npm test

Output:

1..1064
# tests 1064
# pass  1064
# skip  0
# fail  0

# ok

All tests passed. Not sure whats going on.

wahapo · 2020-08-06T02:18:37Z

All the tests are now passed. I'd like you to actually try running the UI and check if there are any problems. I'm going to check it now too.

adong

I tested locally, and have not found any issues. Approved

adong

For config/environment.js

      'script-src': ["'unsafe-eval'"],

I removed this locally, and not see the effect of removing. Do we need it?

adong · 2020-08-06T04:17:52Z

app/components/workflow-tooltip/component.js

+      let left = this.left ? event.layerX - 20 : event.layerX - el.offsetWidth / 2;
+
+      el.style.top = top;
+      el.style.left = left;


Please keep the old logics.

didUpdateAttrs() { this._super(...arguments); const event = get(this, 'tooltipData.mouseevent'); const el = this.$(); // setting tooltip position if (el && event) { let top = event.layerY + get(this, 'tooltipData.sizes.ICON_SIZE'); let left = this.left ? event.layerX - 20 : event.layerX - el.outerWidth() / 2; el.css({ top, left }); } }

This resulted tooltip not position correctly, after changed back to old code, it renders correctly.

I looked again, I think its this issue. el.css() add px for us, while handle css via style, we have to add px ourselves.

In that case, we can either use the old el.css behavior, or update to

el.style.top = `${top}px`; el.style.left = `${left}px`;

Ref: https://stackoverflow.com/questions/10351291/unable-to-set-div-style-left-and-div-style-top-css-properties-via-javascript

adong · 2020-08-06T04:35:42Z

app/components/build-log/component.js

-              href: this.logService.buildLogBlobUrl(buildId, stepName)
-            })[0]
-            .click();
+          const el = this.element.querySelectorAll('#downloadLink');


Minor optimization:

Because of the #, there ought to be only one element with that id, so I think this is the same as

const el = this.element.querySelector('#downloadLink'); el.setAttribute('download', `${buildId}-${stepName}.log`); el.setAttribute('href', this.logService.buildLogBlobUrl(buildId, stepName)); el.click();

While querySelectorAll('#downloadLink'); always returns an array with single element.

adong · 2020-08-06T05:04:25Z

config/optional-features.json

+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": true,
+  "template-only-glimmer-components": true


"template-only-glimmer-components": true

This feature breaks 404 page,

and changes html output to

Solution:

It is recommended that you enable this feature. Existing applications adopting this optional feature should add a .js file for any existing template-only components containing a basic Ember component class. This will maintain backwards compatibility for existing templates while new template-only components gain the advantages of this feature. (https://guides.emberjs.com/release/configuring-ember/optional-features/#toc_template-only-glimmer-components)

create a file app/components/404-display/component.js

import Component from '@ember/component'; export default Component.extend({});

One contributor ember-component-css from said this is an issue from "ember-component-css": "^0.6.9", there's an alpha version to resolve it, but we are not going to incorporate now. If you are interested in, please follow-up here: webark/ember-component-css#342 (comment)

Ok, I think that's fine for now, too. Thanks!

wahapo · 2020-08-06T05:26:13Z

I don't remember why I added 'script-src': ["'unsafe-eval'"], but now that I've tried it, it doesn't seem to be a problem, so I'll remove it. Thanks.

adong · 2020-08-06T05:44:37Z

app/components/validator-input/component.js

@@ -5,7 +5,9 @@ export default Component.extend({
  actions: {
    nameClick() {
      this.toggleProperty('isOpen');
-      this.$('#validator-ace-editor').toggle('hidden');
+      this.element


Similar here, this.querySelector is preferred when querying for #id

adong · 2020-08-06T05:46:41Z

app/styles/app.scss

@@ -178,3 +178,5 @@ body {
 }

 @import 'ember-power-select';
+
+@import 'ember-bootstrap/bootstrap';


@import 'ember-bootstrap/bootstrap' is duplicated in L67 app/styles/app.scss

wahapo · 2020-08-06T05:52:47Z

There may be something wrong with job-list-view. Select job-list-view and refresh it, and select job-graph-view. After doing it a few times, the list-view remained visible.

adong · 2020-08-06T06:11:05Z

There may be something wrong with job-list-view. Select job-list-view and refresh it, and select job-graph-view. After doing it a few times, the list-view remained visible.

I don't see this PR has logics changes to the list-view & graph-view
I'm not able to reproduce it locally 😅

I was thinking maybe we merge this PR, and see. We can always do a bug-fix, if it's reproducible :)

wahapo · 2020-08-06T06:23:29Z

Maybe my locally is just weird. I agree with that policy.

adong · 2020-08-06T06:33:47Z

Merged as feat(1684)

@wahapo Thank you for doing the ember migration, great job! Congrats. Now we don't have to worry about ember migration for this year. Truly amazing.
Next, we are going to pull ember-denali

ember install @denali-design/[email protected]

wahapo · 2020-08-06T06:46:12Z

@adong I appreciate the many comments and advice. Thank you so much! I hope this commit works well🙏

app/components/validator-pipeline/styles.scss

app/components/validator-job/styles.scss

fix: update ember to 3.16.6

ea58642

jithine previously approved these changes Jul 31, 2020

View reviewed changes

jithine reviewed Jul 31, 2020

View reviewed changes

v3.10.1...v3.16.0

403f8ac

wahapo mentioned this pull request Aug 1, 2020

use ember-cli-update sonic-screwdriver-cd/ui#2

Merged

wahapo and others added 3 commits August 1, 2020 15:51

Merge branch 'issue-1684' into wahapo-patch-2

affb61c

Merge pull request #2 from sonic-screwdriver-cd/wahapo-patch-2

6bf0bfe

use ember-cli-update

fix: update for ember 3.16 (#5)

45c8b6f

wahapo changed the title ~~fix(1684): update ember to 3.16.6~~ fix(1684): update ember to 3.16 Aug 3, 2020

wahapo and others added 4 commits August 3, 2020 10:43

fix: bringing back some of the unnecessary changes (#6)

5f5588f

fix: install ember-ajax

099875e

fix: add app/components/pipeline-rootdir/component.js

b7a6292

fix: for test

7c97a1b

jithine reviewed Aug 3, 2020

View reviewed changes

.travis.yml Outdated Show resolved Hide resolved

fix: for test

74cd5a1

wahapo force-pushed the issue-1684 branch from 4da0662 to 74cd5a1 Compare August 4, 2020 12:14

fix: update ember-sinon-qunit to 5.0.0

d6f7d3a

adong reviewed Aug 5, 2020

View reviewed changes

fix: remove ember-fetch

0889d03

fix: some tests to pass

eeb053c

fix: unit-controller-validator test

9b456d0

wahapo force-pushed the issue-1684 branch from bef3010 to 9b456d0 Compare August 6, 2020 01:36

adong approved these changes Aug 6, 2020

View reviewed changes

ibu1224 previously approved these changes Aug 6, 2020

View reviewed changes

adong approved these changes Aug 6, 2020

View reviewed changes

adong requested changes Aug 6, 2020

View reviewed changes

adong reviewed Aug 6, 2020

View reviewed changes

fix: for review

9ce95ae

wahapo dismissed ibu1224’s stale review via 9ce95ae August 6, 2020 05:24

adong reviewed Aug 6, 2020

View reviewed changes

fix: for review

89e5865

adong approved these changes Aug 6, 2020

View reviewed changes

adong merged commit 2f1531d into screwdriver-cd:master Aug 6, 2020

wahapo deleted the issue-1684 branch August 6, 2020 06:31

DekusDenial reviewed Aug 6, 2020

View reviewed changes

app/components/validator-pipeline/styles.scss Show resolved Hide resolved

DekusDenial reviewed Aug 6, 2020

View reviewed changes

app/components/validator-job/styles.scss Show resolved Hide resolved

This was referenced Aug 6, 2020

fix: typo in style #578

Merged

Remove unneeded async from mock-server.js embermap/ember-cli-fastboot-testing#370

Merged

fix: set forbidEval to true for autoImport #580

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(1684): update ember to 3.16 #576

fix(1684): update ember to 3.16 #576

wahapo commented Jul 31, 2020 •

edited

Loading

jithine commented Jul 31, 2020

jithine Jul 31, 2020 •

edited

Loading

adong commented Jul 31, 2020

wahapo commented Aug 4, 2020

adong commented Aug 4, 2020

adong commented Aug 4, 2020 •

edited

Loading

adong commented Aug 5, 2020 •

edited

Loading

wahapo commented Aug 5, 2020

adong Aug 5, 2020

adong commented Aug 5, 2020 •

edited

Loading

wahapo commented Aug 5, 2020 •

edited

Loading

adong commented Aug 5, 2020

wahapo commented Aug 6, 2020 •

edited

Loading

adong left a comment

adong left a comment •

edited

Loading

adong Aug 6, 2020

adong Aug 6, 2020 •

edited

Loading

adong Aug 6, 2020

adong Aug 6, 2020

adong Aug 6, 2020 •

edited

Loading

wahapo Aug 6, 2020 •

edited

Loading

wahapo commented Aug 6, 2020

adong Aug 6, 2020

adong Aug 6, 2020

wahapo commented Aug 6, 2020 •

edited

Loading

adong commented Aug 6, 2020

wahapo commented Aug 6, 2020

adong commented Aug 6, 2020

wahapo commented Aug 6, 2020

fix(1684): update ember to 3.16 #576

fix(1684): update ember to 3.16 #576

Conversation

wahapo commented Jul 31, 2020 • edited Loading

Context

Objective

References

License

jithine commented Jul 31, 2020

jithine Jul 31, 2020 • edited Loading

Choose a reason for hiding this comment

adong commented Jul 31, 2020

wahapo commented Aug 4, 2020

adong commented Aug 4, 2020

adong commented Aug 4, 2020 • edited Loading

adong commented Aug 5, 2020 • edited Loading

wahapo commented Aug 5, 2020

adong Aug 5, 2020

Choose a reason for hiding this comment

adong commented Aug 5, 2020 • edited Loading

wahapo commented Aug 5, 2020 • edited Loading

adong commented Aug 5, 2020

wahapo commented Aug 6, 2020 • edited Loading

adong left a comment

Choose a reason for hiding this comment

adong left a comment • edited Loading

Choose a reason for hiding this comment

adong Aug 6, 2020

Choose a reason for hiding this comment

adong Aug 6, 2020 • edited Loading

Choose a reason for hiding this comment

adong Aug 6, 2020

Choose a reason for hiding this comment

adong Aug 6, 2020

Choose a reason for hiding this comment

adong Aug 6, 2020 • edited Loading

Choose a reason for hiding this comment

wahapo Aug 6, 2020 • edited Loading

Choose a reason for hiding this comment

wahapo commented Aug 6, 2020

adong Aug 6, 2020

Choose a reason for hiding this comment

adong Aug 6, 2020

Choose a reason for hiding this comment

wahapo commented Aug 6, 2020 • edited Loading

adong commented Aug 6, 2020

wahapo commented Aug 6, 2020

adong commented Aug 6, 2020

wahapo commented Aug 6, 2020

wahapo commented Jul 31, 2020 •

edited

Loading

jithine Jul 31, 2020 •

edited

Loading

adong commented Aug 4, 2020 •

edited

Loading

adong commented Aug 5, 2020 •

edited

Loading

adong commented Aug 5, 2020 •

edited

Loading

wahapo commented Aug 5, 2020 •

edited

Loading

wahapo commented Aug 6, 2020 •

edited

Loading

adong left a comment •

edited

Loading

adong Aug 6, 2020 •

edited

Loading

adong Aug 6, 2020 •

edited

Loading

wahapo Aug 6, 2020 •

edited

Loading

wahapo commented Aug 6, 2020 •

edited

Loading