-
Notifications
You must be signed in to change notification settings - Fork 53
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(1684): update ember to 3.16 #576
Conversation
Looks like few tests failed. cc @adong |
package.json
Outdated
@@ -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", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
Nice. I like 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:
Thank you for taking a stab at it 👍 Refer:
|
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 "ember-sinon": "^5.0.0",
"ember-sinon-qunit": "^5.0.0", Also we need to have the following for 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(); |
I also noticed that
in
I tested on babel It seems the first way of written was never supported. 🤷♂️ Refer: |
Looks like Do the following in
Wrap with run.later will make sure it is executed until other actions were called, in this case, it is exactly what we need. |
Cool! That's exactly what I was looking for right now. |
package.json
Outdated
"ember-export-application-global": "^2.0.0", | ||
"ember-data": "~3.16.0", | ||
"ember-export-application-global": "^2.0.1", | ||
"ember-fetch": "^7.0.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please remove ember-fetch
, since we already have ember-ajax
2 questions,
Thanks |
|
Very strange. If I run the following command to run test locally.
Output:
All tests passed. Not sure whats going on. |
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested locally, and have not found any issues. Approved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For config/environment.js
'script-src': ["'unsafe-eval'"],
I removed this locally, and not see the effect of removing. Do we need it?
let left = this.left ? event.layerX - 20 : event.layerX - el.offsetWidth / 2; | ||
|
||
el.style.top = top; | ||
el.style.left = left; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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`;
href: this.logService.buildLogBlobUrl(buildId, stepName) | ||
})[0] | ||
.click(); | ||
const el = this.element.querySelectorAll('#downloadLink'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
"application-template-wrapper": false, | ||
"default-async-observers": true, | ||
"jquery-integration": true, | ||
"template-only-glimmer-components": true |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"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({});
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, I think that's fine for now, too. Thanks!
I don't remember why I added |
@@ -5,7 +5,9 @@ export default Component.extend({ | |||
actions: { | |||
nameClick() { | |||
this.toggleProperty('isOpen'); | |||
this.$('#validator-ace-editor').toggle('hidden'); | |||
this.element |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Similar here, this.querySelector
is preferred when querying for #id
app/styles/app.scss
Outdated
@@ -178,3 +178,5 @@ body { | |||
} | |||
|
|||
@import 'ember-power-select'; | |||
|
|||
@import 'ember-bootstrap/bootstrap'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@import 'ember-bootstrap/bootstrap'
is duplicated in L67 app/styles/app.scss
Maybe my locally is just weird. I agree with that policy. |
Merged as @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. |
@adong I appreciate the many comments and advice. Thank you so much! I hope this commit works well🙏 |
Context
Fix this issue screwdriver-cd/screwdriver#1684.
We can reproduce it by entering the following yaml into validator.
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.