Skip to content
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

build(ui): Upgrade to React 16 #6984

Merged
merged 2 commits into from
Jan 22, 2018
Merged

build(ui): Upgrade to React 16 #6984

merged 2 commits into from
Jan 22, 2018

Conversation

lynnagara
Copy link
Member

@lynnagara lynnagara commented Jan 16, 2018

@lynnagara lynnagara requested a review from a team January 16, 2018 23:37
@ghost
Copy link

ghost commented Jan 17, 2018

1 Warning
⚠️ You should update CHANGES due to the size of this PR

Generated by 🚫 danger

@lynnagara lynnagara force-pushed the react-16 branch 3 times, most recently from 4ca83c8 to 556e0d0 Compare January 17, 2018 21:04
@lynnagara
Copy link
Member Author

I don't see any differences in the percy snapshots

@billyvg
Copy link
Member

billyvg commented Jan 18, 2018

Can we fix the requestionAnimationFrame errors? It seems it's fixed in a newer jest, but we could polyfill it until upgrade: jestjs/jest#4545

@billyvg
Copy link
Member

billyvg commented Jan 18, 2018

And have you tested on staging?

@lynnagara
Copy link
Member Author

@billyvg - Yep, just found 1 issue - https://github.com/getsentry/getsentry/pull/1662

@lynnagara
Copy link
Member Author

Gonna update and redeploy to staging

@lynnagara
Copy link
Member Author

@billyvg is there a reason we can't upgrade jest instead?

@billyvg
Copy link
Member

billyvg commented Jan 18, 2018

Yeah I'll throw up a jest 22 PR

@lynnagara lynnagara changed the title React 16 builf(ui): Upgrade to React 16 Jan 18, 2018
@lynnagara lynnagara changed the title builf(ui): Upgrade to React 16 build(ui): Upgrade to React 16 Jan 18, 2018
Copy link
Member

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clicked through on staging and everything looks good!

Copy link
Member

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discovered some context issues

Copy link
Contributor

@MaxBittker MaxBittker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

commit #2 looks good, reviewing the other one now.


import createReactClass from 'create-react-class';

import ApiMixin from '../../mixins/apiMixin';

import {update as projectUpdate} from '../../actionCreators/projects';

import LatestContextStore from '../../stores/latestContextStore';

const BookmarkToggle = createReactClass({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe leave a comment that this is coupled to the current project now? the implementation looks good

getInitialState() {
return {
orgId: null,
project: null,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

showing my ignorance of reflux, but do you need to pull the current state of the store out here in case it isn't updated after the component is mounted?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It always "just works" since the component is mounted faster than the API calls return and trigger onLatestContextUpdate. I could add it to the initial state to be safe though?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about just using connect?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That works. Updated for Reflux.connect


let isActive = this.state.project ? this.state.project.isBookmarked : false;

let projectIconClass = classNames('project-select-bookmark icon icon-star-solid', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's nicer that this handles its own class now

Copy link
Contributor

@MaxBittker MaxBittker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

awesome. snapshots and changes look good.
My main fears are
A) more context render triggering related issues
and
B) shifted behavior from bumped dependencies like react-bootstrap, which drives our modals. i notice they looked different in the snaps so i think they're also worth manually playing with.

if i was more afraid I would say some of these changes could be merged separately to break up the risk but i think it will be fine

@@ -61,20 +61,19 @@
"prop-types": "^15.6.0",
"query-string": "2.4.2",
"raven-js": "3.19.1",
"react": "15.6.2",
"react": "16.2.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⭐️

"react-bootstrap": "^0.29.5",
"react-document-title": "1.0.4",
"react-dom": "15.6.2",
"react-bootstrap": "^0.32.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice, does this fix the warnings?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i noticed it fixed some warnings relating to modals....

@@ -46,7 +46,7 @@ export default class ActionLink extends React.Component {
return (
<a
className={classNames(className, {disabled})}
onClick={!disabled && onAction}
onClick={disabled ? undefined : onAction}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react doesn't like false as a click handler now?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep

Context changes do not always trigger a rerender
@lynnagara lynnagara merged commit a01dc68 into master Jan 22, 2018
@lynnagara lynnagara deleted the react-16 branch January 22, 2018 18:47
@github-actions github-actions bot locked and limited conversation to collaborators Dec 22, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants