refactor: upgrade components

.eslintrc.json

@@ -4,9 +4,16 @@
     "node": true,
     "browser": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "extends": "eslint:recommended",
   "parserOptions": {
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"],
+      "plugins": [
+        [ "@babel/plugin-proposal-decorators", { "legacy": true } ]
+      ]
+    },
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,
       "jsx": true

package.json

@@ -34,78 +34,83 @@
     "README.md",
     "LICENSE"
   ],
+  "resolutions": {
+    "chokidar": "^3.5.1"
+  },
   "dependencies": {
-    "@babel/runtime": "7.13.10",
-    "bcryptjs": "2.3.0",
-    "body-parser": "1.19.0",
-    "codemirror-graphql": "github:timsuchanek/codemirror-graphql#details-fix",
-    "commander": "6.2.1",
-    "connect-flash": "0.1.1",
-    "cookie-session": "2.0.0-beta.3",
-    "copy-to-clipboard": "3.2.0",
-    "create-react-class": "15.7.0",
-    "csurf": "1.11.0",
-    "express": "4.17.1",
-    "graphql": "14.6.0",
-    "graphql-playground-react": "1.7.20",
-    "history": "4.10.1",
-    "immutable": "4.0.0-rc.9",
-    "immutable-devtools": "0.1.5",
-    "js-beautify": "1.11.0",
-    "json-file-plus": "3.2.0",
-    "package-json": "6.5.0",
-    "parse": "2.19.0",
-    "passport": "0.4.1",
-    "passport-local": "1.0.0",
-    "prismjs": "1.23.0",
-    "prop-types": "15.7.2",
-    "query-string": "6.14.1",
-    "react": "16.14.0",
-    "react-ace": "9.3.0",
-    "react-dnd": "10.0.2",
-    "react-dnd-html5-backend": "10.0.2",
-    "react-dom": "16.14.0",
-    "react-helmet": "6.0.0",
-    "react-json-view": "1.21.3",
-    "react-redux": "5.1.2",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
-    "regenerator-runtime": "0.13.5",
-    "semver": "7.3.4"
+    "@babel/runtime": "^7.13.10",
+    "bcryptjs": "^2.4.3",
+    "body-parser": "^1.19.0",
+    "codemirror-graphql": "^1.0.0",
+    "commander": "^7.1.0",
+    "connect-flash": "^0.1.1",
+    "cookie-session": "^2.0.0-rc.1",
+    "create-react-class": "^15.7.0",
+    "csurf": "^1.11.0",
+    "express": "^4.17.1",
+    "graphql": "^15.5.0",
+    "graphql-playground-react": "^1.7.27",
+    "immutable": "^4.0.0-rc.12",
+    "immutable-devtools": "^0.1.5",
+    "js-beautify": "^1.13.5",
+    "json-file-plus": "^3.3.1",
+    "package-json": "^6.5.0",
+    "parse": "^2.19.0",
+    "passport": "^0.4.1",
+    "passport-local": "^1.0.0",
+    "prismjs": "^1.23.0",
+    "prop-types": "^15.7.2",
+    "query-string": "^7.0.0",
+    "react": "^16.14.0",
+    "react-ace": "^9.3.0",
+    "react-copy-to-clipboard": "^5.0.3",
+    "react-dnd": "^14.0.1",
+    "react-dnd-html5-backend": "^14.0.0",
+    "react-dom": "^16.14.0",
+    "react-helmet": "^6.1.0",
+    "react-input-autosize": "^3.0.0",
+    "react-json-view": "^1.21.3",
+    "react-modal": "^3.12.1",
+    "react-redux": "^7.2.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-sortable-hoc": "^2.0.0",
+    "regenerator-runtime": "^0.13.7",
+    "semver": "^7.3.4",
+    "styled-components": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.8.7",
-    "@babel/plugin-proposal-decorators": "7.8.3",
-    "@babel/plugin-transform-regenerator": "7.8.7",
-    "@babel/plugin-transform-runtime": "7.8.3",
-    "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.8.3",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "8.1.0",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "core-js": "3.6.5",
-    "cross-env": "7.0.2",
-    "css-loader": "3.5.2",
-    "eslint": "6.8.0",
-    "eslint-plugin-jest": "23.8.2",
-    "eslint-plugin-react": "7.19.0",
-    "file-loader": "6.0.0",
-    "http-server": "0.12.0",
-    "jest": "24.8.0",
-    "marked": "0.8.2",
-    "node-sass": "4.13.1",
-    "null-loader": "3.0.0",
+    "@babel/core": "^7.13.10",
+    "@babel/eslint-parser": "^7.13.10",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
+    "@babel/plugin-transform-regenerator": "^7.12.13",
+    "@babel/plugin-transform-runtime": "7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "core-js": "^3.9.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.1.3",
+    "eslint": "^7.22.0",
+    "eslint-plugin-jest": "^24.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "file-loader": "^6.2.0",
+    "http-server": "^0.12.3",
+    "jest": "^26.6.3",
+    "marked": "^2.0.1",
+    "node-sass": "^5.0.0",
+    "null-loader": "^4.0.1",
     "parse-server": "github:parseplatform/parse-server#master",
-    "path-to-regexp": "3.2.0",
-    "puppeteer": "3.0.0",
-    "react-test-renderer": "16.13.1",
-    "request": "2.88.2",
-    "request-promise": "4.2.5",
-    "sass-loader": "8.0.0",
-    "style-loader": "1.1.2",
-    "svg-prep": "1.0.4",
-    "webpack": "4.42.1",
-    "webpack-cli": "3.3.10"
+    "puppeteer": "^8.0.0",
+    "react-test-renderer": "^16.14.0",
+    "request": "^2.88.2",
+    "request-promise": "^4.2.6",
+    "sass-loader": "^10.0.5",
+    "style-loader": "^2.0.0",
+    "svg-prep": "^1.0.4",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.10"
   },
   "scripts": {
     "dev": "node ./Parse-Dashboard/index.js & webpack --config webpack/build.config.js --devtool eval-source-map --progress --watch",

src/components/BrowserCell/BrowserCell.react.js

@@ -13,7 +13,8 @@ import Parse                     from 'parse';
 import Pill                      from 'components/Pill/Pill.react';
 import React, { Component }      from 'react';
 import styles                    from 'components/BrowserCell/BrowserCell.scss';
-import { unselectable }          from 'stylesheets/base.scss';
+import baseStyles                from 'stylesheets/base.scss';
+const { unselectable } = baseStyles;
 
 export default class BrowserCell extends Component {
   constructor() {

src/components/Button/Button.react.js

@@ -5,7 +5,8 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { unselectable } from 'stylesheets/base.scss';
+import baseStyles       from 'stylesheets/base.scss';
+const { unselectable } = baseStyles;
 import PropTypes        from 'lib/PropTypes';
 import React            from 'react';
 import styles           from 'components/Button/Button.scss';

src/components/CascadingView/CascadingView.react.js

@@ -5,7 +5,8 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { center } from 'stylesheets/base.scss'
+import baseStyles from 'stylesheets/base.scss';
+const { center } = baseStyles;
 import PropTypes from 'lib/PropTypes';
 import React     from 'react';
 import styles    from 'components/CascadingView/CascadingView.scss';

src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js

@@ -8,7 +8,8 @@ const DND_TYPE = 'ColumnConfigurationItem';
 
 export default ({ name, handleColumnDragDrop, index, onChangeVisible, visible }) => {
   const [ { isDragging}, drag ] = useDrag({
-    item: { type: DND_TYPE, index },
+    type: DND_TYPE,
+    item: { index },
 		collect: monitor => ({ isDragging: !!monitor.isDragging() })
   });
 

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DndProvider } from 'react-dnd'
-import HTML5Backend from 'react-dnd-html5-backend'
+import { HTML5Backend } from 'react-dnd-html5-backend'
 import ReactDOM from 'react-dom';
 
 import Button from 'components/Button/Button.react';

src/components/DataBrowserHeader/DataBrowserHeader.example.js

@@ -6,7 +6,7 @@
  * the root directory of this source tree.
  */
 import DataBrowserHeader   from 'components/DataBrowserHeader/DataBrowserHeader.react';
-import HTML5Backend        from 'react-dnd-html5-backend';
+import { HTML5Backend }    from 'react-dnd-html5-backend';
 import React               from 'react';
 import { DndProvider }     from 'react-dnd'
 

src/components/DataBrowserHeader/DataBrowserHeader.react.js

@@ -8,7 +8,8 @@
 import PropTypes                  from 'lib/PropTypes';
 import React                      from 'react';
 import styles                     from 'components/DataBrowserHeader/DataBrowserHeader.scss';
-import { unselectable }           from 'stylesheets/base.scss';
+import baseStyles                 from 'stylesheets/base.scss';
+const { unselectable } = baseStyles;
 import { DragSource, DropTarget } from 'react-dnd';
 
 const Types = {

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -7,7 +7,7 @@
  */
 import DataBrowserHeader   from 'components/DataBrowserHeader/DataBrowserHeader.react';
 import DragHandle          from 'components/DragHandle/DragHandle.react';
-import HTML5Backend        from 'react-dnd-html5-backend';
+import { HTML5Backend }    from 'react-dnd-html5-backend';
 import React               from 'react';
 import styles              from 'components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss';
 import { DndProvider }     from 'react-dnd'
@@ -65,7 +65,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       if (headers.length % 2) {
         finalStyle.background = 'rgba(224,224,234,0.10)';
       }
-  
+
       elements.push(
         readonly || preventSchemaEdits ? null : (
           <div key='add' className={styles.addColumn} style={finalStyle}>

src/components/DragHandle/DragHandle.example.js

@@ -7,7 +7,7 @@
  */
 import DataBrowserHeader   from 'components/DataBrowserHeader/DataBrowserHeader.react';
 import DragHandle          from 'components/DragHandle/DragHandle.react';
-import HTML5Backend        from 'react-dnd-html5-backend';
+import { HTML5Backend }    from 'react-dnd-html5-backend';
 import React               from 'react';
 import { DndProvider }     from 'react-dnd'
 

src/components/EmptyState/EmptyState.react.js

@@ -11,7 +11,8 @@ import PropTypes    from 'lib/PropTypes';
 import React        from 'react';
 import styles       from 'components/EmptyState/EmptyState.scss';
 import stylesButton from 'components/Button/Button.scss';
-import { center }   from 'stylesheets/base.scss';
+import baseStyles   from 'stylesheets/base.scss';
+const { center } = baseStyles;
 
 let ctaButton = (cta, action) => {
   if (cta) {

src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js

@@ -14,7 +14,8 @@ import PropTypes             from 'lib/PropTypes';
 import React                 from 'react';
 import ReactDOM              from 'react-dom';
 import styles                from 'components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss';
-import { verticalCenter }    from 'stylesheets/base.scss';
+import baseStyles            from 'stylesheets/base.scss';
+const { verticalCenter } = baseStyles;
 
 export default class ExplorerActiveChartButton extends React.Component {
   constructor() {

src/components/Label/Label.react.js

@@ -5,7 +5,8 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { centered } from 'components/Field/Field.scss';
+import fieldStyles  from 'components/Field/Field.scss';
+const { centered } = fieldStyles;
 import PropTypes    from 'lib/PropTypes';
 import React        from 'react';
 import styles       from 'components/Label/Label.scss';

src/components/Loader/Loader.example.js

@@ -5,7 +5,8 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { center } from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
+const { center } = baseStyles;
 import Loader from 'components/Loader/Loader.react';
 import React  from 'react';
 

src/components/LoaderContainer/LoaderContainer.react.js

@@ -5,7 +5,8 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { center }   from 'stylesheets/base.scss';
+import baseStyles   from 'stylesheets/base.scss';
+const { center } = baseStyles;
 import Loader       from 'components/Loader/Loader.react';
 import PropTypes    from 'lib/PropTypes';
 import React        from 'react';

src/components/LoginForm/LoginForm.react.js

@@ -9,7 +9,8 @@ import CSRFInput from 'components/CSRFInput/CSRFInput.react';
 import Icon               from 'components/Icon/Icon.react';
 import React              from 'react';
 import styles             from 'components/LoginForm/LoginForm.scss';
-import { verticalCenter } from 'stylesheets/base.scss';
+import baseStyles         from 'stylesheets/base.scss';
+const { verticalCenter } = baseStyles;
 
 // Class-style component, because we need refs
 export default class LoginForm extends React.Component {

src/components/PermissionsDialog/PermissionsDialog.react.js

@@ -5,9 +5,8 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import {
-   unselectable,
-   verticalCenter }     from 'stylesheets/base.scss';
+import baseStyles       from 'stylesheets/base.scss';
+const { unselectable, verticalCenter } = baseStyles;
 import Button           from 'components/Button/Button.react';
 import Checkbox         from 'components/Checkbox/Checkbox.react';
 import Icon             from 'components/Icon/Icon.react';

src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js

@@ -19,9 +19,8 @@ import styles             from 'components/ProtectedFieldsDialog/ProtectedFields
 import MultiSelect        from 'components/MultiSelect/MultiSelect.react';
 import MultiSelectOption  from 'components/MultiSelect/MultiSelectOption.react';
 import TrackVisibility    from 'components/TrackVisibility/TrackVisibility.react';
-import { 
-  unselectable,
-  verticalCenter }        from 'stylesheets/base.scss';
+import baseStyles         from 'stylesheets/base.scss';
+const { unselectable, verticalCenter } = baseStyles;
 
 let origin = new Position(0, 0);
 const intersectionMargin = '10px 0px 0px 20px';

src/components/Range/Range.react.js

@@ -5,7 +5,8 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { input } from 'components/Field/Field.scss';
+import fieldStyles from 'components/Field/Field.scss';
+const { input } = fieldStyles;
 import PropTypes from 'lib/PropTypes';
 import React     from 'react';
 import styles    from 'components/Range/Range.scss';

src/components/SaveButton/SaveButton.react.js

@@ -9,7 +9,8 @@ import Button from 'components/Button/Button.react';
 import keyMirror from 'lib/keyMirror';
 import PropTypes from 'lib/PropTypes';
 import React from 'react';
-import { shake } from 'components/SaveButton/SaveButton.scss';
+import saveButtonStyles from 'components/SaveButton/SaveButton.scss';
+const { shake } = saveButtonStyles;
 
 let SaveButton = ({
   state = SaveButton.States.WAITING,

src/components/Sidebar/AppsMenu.react.js

@@ -11,7 +11,8 @@ import html             from 'lib/htmlString';
 import { Link }         from 'react-router-dom';
 import React            from 'react';
 import styles           from 'components/Sidebar/Sidebar.scss';
-import { unselectable } from 'stylesheets/base.scss';
+import baseStyles       from 'stylesheets/base.scss';
+const { unselectable } = baseStyles;
 
 let AppsMenu = ({ apps, current, height, onSelect }) => (
   <div style={{ height }} className={[styles.appsMenu, unselectable].join(' ')}>

src/components/Toggle/Toggle.react.js

@@ -5,11 +5,13 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import { input }        from 'components/Field/Field.scss';
+import fieldStyles from 'components/Field/Field.scss';
+const { input } = fieldStyles;
 import PropTypes        from 'lib/PropTypes';
 import React            from 'react';
 import styles           from 'components/Toggle/Toggle.scss';
-import { unselectable } from 'stylesheets/base.scss';
+import baseStyles       from 'stylesheets/base.scss';
+const { unselectable } = baseStyles;
 
 export default class Toggle extends React.Component {
   toLeft() {