From 1c4f2aab8f5ad89395f267a4a0a1f6e282e5f039 Mon Sep 17 00:00:00 2001 From: ricky Date: Fri, 6 Dec 2019 10:40:07 -0500 Subject: [PATCH] React 16 upgrade (#7476) * Use arrow property initializer functions * Use pure components where applicable * Add UNSAFE_ prefix for deprecated lifecycle hooks * Add allow UNSAFE_ * Removed unused "Component" * Replace boron with 'fade-modal' * Upgrade react/no-deprecated to an error * Paste react-tooltip-component source directly * Use arrow functions to bind `this` * Add UNSAFE_ prefix * Update react-redux, react-router-dom * Remove things from inlined 'fade-modal' * Adjust mountWithRouter to get unit tests passing again * Remove domkit * Add Wrapper to render-helpers * Upgrade @storybook/addon-knobs --- .eslintrc | 4 +- package.json | 20 +- test/helper.js | 2 +- test/lib/render-helpers.js | 9 +- .../app/customize-gas-modal/index.js | 2 +- ui/app/components/app/menu-droppo.js | 14 +- ui/app/components/app/modals/fade-modal.js | 289 ++++++ ui/app/components/app/modals/modal.js | 5 +- ...mission-page-container-header.component.js | 18 +- ui/app/components/app/tab-bar.js | 44 +- ui/app/components/ui/alert/index.js | 2 +- ui/app/components/ui/tooltip.js | 169 ++- ui/app/css/itcss/components/modal.scss | 27 + .../with-token-tracker.component.js | 6 +- .../create-account/connect-hardware/index.js | 2 +- .../import-with-seed-phrase.component.js | 2 +- .../draggable-seed.component.js | 2 +- ui/app/pages/home/home.component.js | 2 +- ui/app/pages/index.js | 30 +- ui/app/pages/routes/index.js | 2 +- ui/app/pages/send/send.component.js | 4 +- .../add-contact/add-contact.component.js | 2 +- .../networks-tab/networks-tab.component.js | 2 +- .../unlock-page/unlock-page.component.js | 2 +- yarn.lock | 965 +++++++++++------- 25 files changed, 1146 insertions(+), 480 deletions(-) create mode 100644 ui/app/components/app/modals/fade-modal.js diff --git a/.eslintrc b/.eslintrc index 18368d552..47c40deb0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -51,7 +51,7 @@ "arrow-spacing": [2, { "before": true, "after": true }], "block-spacing": [2, "always"], "brace-style": 2, - "camelcase": [2, { "properties": "never" }], + "camelcase": [2, { "properties": "never", "allow": ["^UNSAFE_"] }], "comma-dangle": [2, "always-multiline"], "comma-spacing": [2, { "before": false, "after": true }], "comma-style": [2, "last"], @@ -157,7 +157,7 @@ "react/jsx-boolean-value": 2, "react/jsx-curly-brace-presence": [2, { "props": "never", "children": "never" }], "react/jsx-equals-spacing": 2, - "react/no-deprecated": 0, + "react/no-deprecated": 2, "react/default-props-match-prop-types": 2, "react/jsx-closing-tag-location": 2, "react/jsx-no-duplicate-props": 2, diff --git a/package.json b/package.json index 48683a14e..bfbac3773 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,6 @@ "bip39": "^2.2.0", "bluebird": "^3.5.0", "bn.js": "^4.11.7", - "boron": "^0.2.3", "browser-passworder": "^2.0.3", "browserify-derequire": "^0.9.4", "browserify-unibabel": "^3.0.0", @@ -150,16 +149,16 @@ "punycode": "^2.1.1", "qrcode-generator": "1.4.1", "ramda": "^0.24.1", - "react": "^15.6.2", + "react": "^16.12.0", "react-dnd": "^3.0.2", "react-dnd-html5-backend": "^7.4.4", - "react-dom": "^15.6.2", + "react-dom": "^16.12.0", "react-hyperscript": "^3.0.0", "react-idle-timer": "^4.2.5", "react-inspector": "^2.3.0", "react-media": "^1.8.0", - "react-redux": "^5.0.5", - "react-router-dom": "^4.2.2", + "react-redux": "^7.1.3", + "react-router-dom": "^5.1.2", "react-select": "^1.0.0", "react-simple-file-input": "^2.0.0", "react-tippy": "^1.2.2", @@ -167,7 +166,6 @@ "react-tooltip-component": "^0.3.0", "react-transition-group": "^1.2.1", "react-trigger-change": "^1.0.2", - "reactify": "^1.1.1", "readable-stream": "^2.3.3", "recompose": "^0.25.0", "redux": "^3.0.5", @@ -201,7 +199,7 @@ "@sentry/cli": "^1.30.3", "@storybook/addon-actions": "^5.2.6", "@storybook/addon-info": "^5.1.1", - "@storybook/addon-knobs": "^3.4.2", + "@storybook/addon-knobs": "^5.1.1", "@storybook/react": "^5.1.1", "addons-linter": "1.14.0", "babel-eslint": "^10.0.2", @@ -219,8 +217,8 @@ "del": "^3.0.0", "deps-dump": "^1.1.0", "envify": "^4.0.0", - "enzyme": "^3.4.4", - "enzyme-adapter-react-15": "^1.0.6", + "enzyme": "^3.10.0", + "enzyme-adapter-react-16": "^1.15.1", "eslint": "^6.0.1", "eslint-plugin-chai": "0.0.1", "eslint-plugin-import": "^2.18.2", @@ -278,8 +276,8 @@ "qs": "^6.2.0", "qunitjs": "^2.4.1", "radgrad-jsdoc-template": "^1.1.3", - "react-devtools": "^3.6.1", - "react-test-renderer": "^15.6.2", + "react-devtools": "^4.2.1", + "react-test-renderer": "^16.12.0", "read-installed": "^4.0.3", "redux-mock-store": "^1.5.3", "redux-test-utils": "^0.2.2", diff --git a/test/helper.js b/test/helper.js index bea0b326c..0a1bdeacb 100644 --- a/test/helper.js +++ b/test/helper.js @@ -1,7 +1,7 @@ const Ganache = require('ganache-core') const nock = require('nock') import Enzyme from 'enzyme' -import Adapter from 'enzyme-adapter-react-15' +import Adapter from 'enzyme-adapter-react-16' nock.disableNetConnect() nock.enableNetConnect('localhost') diff --git a/test/lib/render-helpers.js b/test/lib/render-helpers.js index 64ae61cae..f2332826e 100644 --- a/test/lib/render-helpers.js +++ b/test/lib/render-helpers.js @@ -1,4 +1,5 @@ const { shallow, mount } = require('enzyme') +import React from 'react' import { BrowserRouter } from 'react-router-dom' import { shape } from 'prop-types' @@ -38,5 +39,11 @@ function mountWithRouter (node) { childContextTypes: { router: shape({}), t: () => {} }, }) - return mount(node, createContext()) + const Wrapper = () => ( + + {node} + + ) + + return mount(, createContext()) } diff --git a/ui/app/components/app/customize-gas-modal/index.js b/ui/app/components/app/customize-gas-modal/index.js index 7bbe725b2..b7f0df5b6 100644 --- a/ui/app/components/app/customize-gas-modal/index.js +++ b/ui/app/components/app/customize-gas-modal/index.js @@ -117,7 +117,7 @@ CustomizeGasModal.contextTypes = { module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) -CustomizeGasModal.prototype.componentWillReceiveProps = function (nextProps) { +CustomizeGasModal.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) { const currentState = getFreshState(this.props) const { gasPrice: currentGasPrice, diff --git a/ui/app/components/app/menu-droppo.js b/ui/app/components/app/menu-droppo.js index 57a0df2fe..9c723c710 100644 --- a/ui/app/components/app/menu-droppo.js +++ b/ui/app/components/app/menu-droppo.js @@ -12,21 +12,21 @@ function MenuDroppoComponent () { } MenuDroppoComponent.prototype.render = function () { - const { containerClassName = '' } = this.props + const { containerClassName = '', style } = this.props const speed = this.props.speed || '300ms' const useCssTransition = this.props.useCssTransition const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0 this.manageListeners() - const style = this.props.style || {} - if (!('position' in style)) { - style.position = 'fixed' - } - style.zIndex = zIndex + const baseStyle = Object.assign( + { position: 'fixed' }, + style, + { zIndex }, + ) return ( -
+