DUOS-1060[risk=no] Upgrade to Babel 7, React 17, and react-scripts 4 (#…

…915) * DUOS-1060 eslint/babel setup complete, need to move assets to src folder for webpack bundling * DUOS-1060 babel/eslint config setup, warning placed on specific rulesets, resolved rule violations, currently updating src attributes to use imported images rather than strings, updated to react 17 * DUOS-1060 swapped out src link assignment with equivalent import statements and variable references for webpack * DUOS-1060 used explicit versions for react and react-dom * DUOS-1060 removed react-scripts installation (listed as dependency, should be installed alongside npm install) * DUOS-1060 corrected function call on getInputProps * DUOS-1060 removed inquirer dependency, no longer used by react-scripts
DataBiosphere · Mar 4, 2021 · 4827777 · 4827777
1 parent 856b92b
commit 4827777
Show file tree

Hide file tree

Showing 135 changed files with 7,306 additions and 5,872 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-react"],
+  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-jsx"]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -1,41 +1,47 @@
 {
-  "extends": "react-app",
-  "parser": "babel-eslint",
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parser": "@babel/eslint-parser",
   "env": {
     "node": true,
     "es6": true,
     "browser": true
   },
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
+  "settings": {
+    "react": {
+      "version": "detect"
     }
   },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": ["@babel"],
   "rules": {
+    "no-trailing-spaces": "warn",
+    "no-unreachable": "warn",
+    "no-console": "warn",
+    "array-bracket-spacing": "warn",
+    "no-unused-vars": "warn",
+    "no-extra-semi": "warn",
     "react/jsx-filename-extension": [
       1,
       {
         "extensions": [
-          ".js",
-          ".jsx"
+          ".js", ".jsx"
         ]
       }
     ],
+    "react/prop-types": "off",
     "indent": [
       "warn",
       2,
       {
         "SwitchCase": 1
       }
     ],
-    "implicit-arrow-linebreak": "off",
-    "array-bracket-newline": "off",
-    "brace-style": "off",
-    "no-trailing-spaces": "warn",
-    "semi": "warn",
-    "no-unreachable": "warn",
-    "no-await-in-loop": "warn",
-    "no-console": "warn",
-    "array-bracket-spacing": "warn"
+    "@babel/implicit-arrow-linebreak": "off",
+    "@babel/array-bracket-newline": "off",
+    "@babel/brace-style": "off",
+    "@babel/semi": "warn"
   }
 }
diff --git a/Dockerfile b/Dockerfile
@@ -15,7 +15,6 @@ COPY public /usr/src/app/public
 COPY package.json /usr/src/app/package.json
 COPY config/base_config.json /usr/src/app/public/config.json
 RUN npm install --silent
-RUN npm install [email protected] -g --silent
 RUN npm run build --silent
 
 FROM nginxinc/nginx-unprivileged:1.19.7-alpine

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,6 @@
     "chart.js": "2.9.4",
     "classnames": "2.2.6",
     "country-list": "2.2.0",
-    "inquirer": "7.3.3",
     "jquery": "3.5.1",
     "js-file-download": "0.4.12",
     "lodash": "4.17.21",
@@ -20,8 +19,8 @@
     "noty": "3.2.0-beta",
     "popper.js": "1.16.1",
     "query-string": "6.14.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-dropzone": "11.3.1",
     "react-ga": "3.3.0",
     "react-google-charts": "3.0.15",
@@ -35,7 +34,7 @@
     "react-router": "5.2.0",
     "react-router-bootstrap": "0.25.0",
     "react-router-dom": "5.2.0",
-    "react-scripts": "3.4.4",
+    "react-scripts": "4.0.3",
     "react-select": "4.1.0",
     "react-tooltip": "4.2.15",
     "set-value": "3.0.2",
@@ -56,11 +55,12 @@
     "cypress:verify": "cypress verify"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.13.0",
-    "@babel/types": "^7.13.0",
-    "cypress": "6.6.0",
-    "eslint": "6.8.0",
-    "eslint-config-react-app": "5.2.1",
+    "@babel/eslint-parser": "^7.13.4",
+    "@babel/eslint-plugin": "^7.13.0",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/preset-react": "^7.12.13",
+    "cypress": "6.5.0",
+    "eslint": "^7.20.0",
     "eslint-plugin-flowtype": "4.7.0",
     "eslint-plugin-react": "7.22.0",
     "start-server-and-test": "1.12.0"

diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,7 @@ import { Config } from './libs/config';
 import DuosFooter from './components/DuosFooter';
 import DuosHeader from './components/DuosHeader';
 import {useHistory} from 'react-router-dom';
+import loadingImage from './images/loading-indicator.svg';
 
 import { SpinnerComponent as Spinner } from './components/SpinnerComponent';
 import { StackdriverReporter } from './libs/stackdriverReporter';
@@ -77,7 +78,7 @@ function App() {
         div({ className: 'main' }, [
           h(DuosHeader, { onSignOut: signOut }),
           h(Spinner, {
-            name: 'mainSpinner', group: 'duos', loadingImage: '/images/loading-indicator.svg'
+            name: 'mainSpinner', group: 'duos', loadingImage
           }),
           h(Routes, { onSignIn: signIn, isLogged: isLoggedIn, env: env })
         ])

diff --git a/public/Data_Provider_Agreement.pdf → src/assets/Data_Provider_Agreement.pdf b/public/Data_Provider_Agreement.pdf → src/assets/Data_Provider_Agreement.pdf
diff --git a/public/Library_Card_Agreement_2021.pdf → src/assets/Library_Card_Agreement_2021.pdf b/public/Library_Card_Agreement_2021.pdf → src/assets/Library_Card_Agreement_2021.pdf
diff --git a/src/components/AdminConsoleBox.css b/src/components/AdminConsoleBox.css
@@ -21,7 +21,7 @@
     display: inline-block;
     width: 35px;
     height: 40px;
-    background: url('/images/admin_icons.png') no-repeat 0 0;
+    background: url('../images/admin_icons.png') no-repeat 0 0;
     overflow: hidden;
     vertical-align: top;
     margin: 8px 0 0 0;

diff --git a/src/components/Alert.css b/src/components/Alert.css
@@ -118,7 +118,7 @@ p.bottom-cta a {
   width: 54px; 
   height: 68px;
   margin: 20px auto 26px auto;
-  background-image: url('/images/icon-document.png');
+  background-image: url('../images/icon-document.png');
   background-repeat: no-repeat;
   background-position: center center;
 }

diff --git a/src/components/DuosFooter.js b/src/components/DuosFooter.js
@@ -1,4 +1,5 @@
 import { a, div, footer, img, li, ul } from 'react-hyperscript-helpers';
+import footerLogo from '../images/broad_logo_allwhite.png';
 
 function DuosFooter() {
 
@@ -27,7 +28,7 @@ function DuosFooter() {
   return (
     div({ style: footerStyle }, [
       footer({ style: mainFooterStyle }, [
-        img({ src: "/images/broad_logo_allwhite.png", style: footerLogoStyle, alt: "Broad Institute logo" }),
+        img({ src: footerLogo, style: footerLogoStyle, alt: "Broad Institute logo" }),
         ul({ className: "footer-links" }, [
           li({ className: "footer-links__item" }, ["\u00A9 Broad Institute"]),
           li({ className: "footer-links__item" }, [a({ target: '_blank', href: "https://www.broadinstitute.org/privacy-policy" }, ["Privacy Policy"]),]),

diff --git a/src/components/DuosHeader.css b/src/components/DuosHeader.css
@@ -44,19 +44,19 @@
 }
 
 .navbar-duos-icon-about {
-  background: url('/images/navbar_icon_about.svg') no-repeat 0 0;
+  background: url('../images/navbar_icon_about.svg') no-repeat 0 0;
 }
 
 .navbar-duos-link:hover .navbar-duos-icon-about {
-  background: url('/images/navbar_icon_about_hover.svg') no-repeat 0 0;
+  background: url('../images/navbar_icon_about_hover.svg') no-repeat 0 0;
 }
 
 .navbar-duos-icon-help {
-  background: url('/images/navbar_icon_help.svg') no-repeat 0 0;
+  background: url('../images/navbar_icon_help.svg') no-repeat 0 0;
 }
 
 .navbar-duos-link:hover .navbar-duos-icon-help {
-  background: url('/images/navbar_icon_help_hover.svg') no-repeat 0 0;
+  background: url('../images/navbar_icon_help_hover.svg') no-repeat 0 0;
 }
 
 .user-li {
@@ -102,11 +102,11 @@
 }
 
 .navbar-open-icon {
-  background: url('/images/burger-icon.svg') no-repeat 0 0;
+  background: url('../images/burger-icon.svg') no-repeat 0 0;
 }
 
 .navbar-close-icon {
-  background: url('/images/close-icon.svg') no-repeat 0 0;
+  background: url('../images/close-icon.svg') no-repeat 0 0;
 }
 
 @media (min-width: 768px) {

diff --git a/src/components/DuosHeader.js b/src/components/DuosHeader.js
@@ -13,6 +13,9 @@ import {NavigationUtils} from '../libs/utils';
 import { NotificationService } from '../libs/notificationService';
 import { Notification } from '../components/Notification';
 import { Styles } from '../libs/theme';
+import DuosLogo from '../images/duos_logo.svg';
+import contactUsHover from '../images/navbar_icon_contact_us_hover.svg';
+import contactUsStandard from '../images/navbar_icon_contact_us.svg';
 
 const styles = {
   drawerPaper: {
@@ -244,7 +247,7 @@ class DuosHeader extends Component {
       width: '100%'
     };
 
-    const contactUsSource = this.state.hover ? '/images/navbar_icon_contact_us_hover.svg' : '/images/navbar_icon_contact_us.svg';
+    const contactUsSource = this.state.hover ? contactUsHover : contactUsStandard;
     const contactUsIcon = isLogged ? '' : img({src: contactUsSource, style: {display: 'inline-block', margin: '0 8px 0 0', verticalAlign: 'baseline'}});
     const contactUsText = isLogged ? 'Contact Us': span({ style: navbarDuosText }, ['Contact Us']);
     const contactUsButton = button({
@@ -278,7 +281,7 @@ class DuosHeader extends Component {
           div({ className: 'row no-margin' }, [
             this.makeNotifications(),
             h(Link, { id: 'link_logo', to: '/home', className: 'navbar-brand' }, [
-              img({ style: duosLogoImage, src: '/images/duos_logo.svg', alt: 'DUOS Logo'})
+              img({ style: duosLogoImage, src: DuosLogo, alt: 'DUOS Logo'})
             ]),
             //Standard navbar for medium sized displays and higher (pre-existing navbar)
             div({}, [
@@ -372,7 +375,7 @@ class DuosHeader extends Component {
           this.makeNotifications(),
           div({style: {display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}, [
             img({
-              style: duosLogoImage, src: '/images/duos_logo.svg',
+              style: duosLogoImage, src: DuosLogo,
               alt: 'DUOS Logo',
               onClick: (e) => this.goToLink('/home')
             }),

diff --git a/src/components/SignIn.js b/src/components/SignIn.js
@@ -7,6 +7,7 @@ import { User } from '../libs/ajax';
 import { Config } from '../libs/config';
 import { Storage } from '../libs/storage';
 import { Navigation, setUserRoleStatuses, USER_ROLES } from '../libs/utils';
+import loadingIndicator from '../images/loading-indicator.svg';
 export const SignIn = hh(class SignIn extends Component {
 
   constructor(props) {
@@ -84,7 +85,7 @@ export const SignIn = hh(class SignIn extends Component {
     if (response.error === 'popup_closed_by_user') {
       this.setState(prev => {
         prev.error = {
-          description: span({}, ['Sign-in cancelled ... ', img({ height: '20px', src: '/images/loading-indicator.svg' })])
+          description: span({}, ['Sign-in cancelled ... ', img({ height: '20px', src: loadingIndicator })])
         };
         return prev;
       });
@@ -132,7 +133,7 @@ export const SignIn = hh(class SignIn extends Component {
     };
     return disabled ?
       div({ style: { textAlign: 'center', height: '44px', width: '180px' } }, [
-        img({ src: '/images/loading-indicator.svg', alt: 'spinner' })
+        img({ src: loadingIndicator, alt: 'spinner' })
       ]) :
       h(GoogleLogin,
         _.isNil(this.props.customStyle) ? defaultStyle : {
@@ -147,7 +148,7 @@ export const SignIn = hh(class SignIn extends Component {
 
     if (this.state.clientId === '') {
       googleLoginButton = div({ style: { textAlign: 'center', height: '44px', width: '180px' } }, [
-        img({ src: '/images/loading-indicator.svg', alt: 'spinner' })
+        img({ src: loadingIndicator, alt: 'spinner' })
       ]);
     } else {
       googleLoginButton = h(GoogleLogin, {

diff --git a/src/components/SpinnerComponent.js b/src/components/SpinnerComponent.js
@@ -15,14 +15,10 @@ export class SpinnerComponent extends React.Component {
     }
 
     this.state = {
-      show: this.props.hasOwnProperty('show') ? this.props.show : false
+      show: this.props.show || false
     };
 
-    if (this.props.hasOwnProperty('spinnerService')) {
-      this.spinnerService = this.props.spinnerService;
-    } else {
-      this.spinnerService = spinnerService;
-    }
+    this.spinnerService = spinnerService;
 
     this.spinnerService._register(this);
   }

diff --git a/src/components/eRACommons.js b/src/components/eRACommons.js
@@ -5,7 +5,7 @@ import React from 'react';
 import { a, button, div, hh, label, span } from 'react-hyperscript-helpers';
 import { AuthenticateNIH, User } from '../libs/ajax';
 import { Config } from '../libs/config';
-
+import eraIcon from "../images/era-commons-logo.png";
 
 export const eRACommons = hh(class eRACommons extends React.Component {
 
@@ -122,7 +122,7 @@ export const eRACommons = hh(class eRACommons extends React.Component {
       width: 38,
       backgroundRepeat: 'no-repeat',
       backgroundSize: 'contain',
-      backgroundImage: 'url("/images/era-commons-logo.png")',
+      backgroundImage: `url(${eraIcon})`,
       display: 'inline-block'
     };
     const buttonHoverState = {

diff --git a/src/components/modals/AddUserModal.js b/src/components/modals/AddUserModal.js
@@ -5,7 +5,8 @@ import { User } from '../../libs/ajax';
 import { USER_ROLES } from '../../libs/utils';
 import { Alert } from '../Alert';
 import { BaseModal } from '../BaseModal';
-
+import addUserIcon from '../../images/icon_add_user.png';
+import editUserIcon from '../../images/icon_edit_user.png';
 
 const adminRole = { 'roleId': 4, 'name': USER_ROLES.admin };
 const researcherRole = { 'roleId': 5, 'name': USER_ROLES.researcher };
@@ -91,16 +92,18 @@ export const AddUserModal = hh(class AddUserModal extends Component {
       roles: this.state.updatedRoles
     };
     switch (this.state.mode) {
-      case 'Add':
+      case 'Add': {
         const createdUser = await User.create(user);
         this.setState({ emailValid: createdUser });
         break;
-      case 'Edit':
+      }
+      case 'Edit': {
         user.dacUserId = this.state.user.dacUserId;
         const payload = { updatedUser: user };
         const updatedUser = await User.update(payload, this.state.user.dacUserId);
         this.setState({ emailValid: updatedUser });
         break;
+      }
       default:
         break;
     }
@@ -177,7 +180,7 @@ export const AddUserModal = hh(class AddUserModal extends Component {
         disableOkBtn: !validForm,
         onRequestClose: this.closeHandler,
         onAfterOpen: this.afterOpenHandler,
-        imgSrc: this.state.mode === 'Add' ? '/images/icon_add_user.png' : '/images/icon_edit_user.png',
+        imgSrc: this.state.mode === 'Add' ? addUserIcon : editUserIcon,
         color: 'common',
         title: this.state.mode === 'Add' ? 'Add User' : 'Edit User',
         description: this.state.mode === 'Add' ? 'Catalog a new User in the system' : 'Edit a User in the system',

diff --git a/src/components/modals/ConnectDatasetModal.js b/src/components/modals/ConnectDatasetModal.js
@@ -3,6 +3,7 @@ import { div, h, form, input, label, select, hh, option } from 'react-hyperscrip
 import { BaseModal } from '../BaseModal';
 import { Alert } from '../Alert';
 import { DatasetAssociation, DataSet } from '../../libs/ajax';
+import datasetLinkIcon from "../../images/icon_dataset_link.png";
 
 export const ConnectDatasetModal = hh(class ConnectDatasetModal extends Component {
 
@@ -231,7 +232,7 @@ export const ConnectDatasetModal = hh(class ConnectDatasetModal extends Componen
         id: "connectDatasetModal",
         showModal: this.props.showModal,
         onRequestClose: this.closeHandler,
-        imgSrc: "/images/icon_dataset_link.png",
+        imgSrc: datasetLinkIcon,
         color: "dataset",
         iconSize: 'large',
         title: "Connect Dataset with Data Owner",

diff --git a/src/components/modals/ElectionTimeoutModal.js b/src/components/modals/ElectionTimeoutModal.js
@@ -5,7 +5,7 @@ import { Alert } from '../Alert';
 import { ElectionTimeout } from '../../libs/ajax';
 import { Storage } from '../../libs/storage';
 import * as Utils from "../../libs/utils";
-
+import timeoutIcon from "../../images/icon_timeout.png";
 export const ElectionTimeoutModal = hh(class ElectionTimeoutModal extends Component {
 
   constructor(props) {
@@ -93,7 +93,7 @@ export const ElectionTimeoutModal = hh(class ElectionTimeoutModal extends Compon
         showModal: this.props.showModal,
         onRequestClose: this.closeHandler,
         onAfterOpen: this.afterOpenHandler,
-        imgSrc: "/images/icon_timeout.png",
+        imgSrc: timeoutIcon,
         color: "common",
         iconName: 'manage-timeout',
         title: 'Set Data Owner election Timeout',