DEP Upgrade frontend build stack

.nvmrc

@@ -1 +1 @@
-10
+18

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

client/src/boot/index.js

@@ -1,6 +1,6 @@
 /* global window */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Login from '../containers/Login';
 import registerComponents from 'boot/registerComponents';
 import registerReducers from 'boot/registerReducers';
@@ -22,11 +22,10 @@ window.document.addEventListener('DOMContentLoaded', () => {
       window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
     );
 
-    ReactDOM.render(
+    createRoot(element).render(
       <Provider store={store}>
         <Login schemaURL={schemaURL} />
-      </Provider>,
-      element
+      </Provider>
     );
   });
 

client/src/bundles/bundle-cms.js

@@ -1,2 +1,2 @@
-require('../legacy');
-require('../boot/cms');
+import '../legacy';
+import '../boot/cms';

client/src/bundles/bundle.js

@@ -1,7 +1,7 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
-require('es6-promise').polyfill();
-require('isomorphic-fetch');
+import 'es6-promise/auto';
+import 'isomorphic-fetch';
 
-require('boot');
+import 'boot';

client/src/components/FormField/RegisteredMFAMethodListField/AccountResetUI.js

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Config from 'lib/Config'; // eslint-disable-line
 import api from 'lib/api';
-import confirm from '@silverstripe/reactstrap-confirm';
+import confirm from 'reactstrap-confirm';
 import LoadingIndicator from '../../LoadingIndicator';
 import CircleDash from '../../Icons/CircleDash';
 import CircleTick from '../../Icons/CircleTick';
 
-const fallbacks = require('../../../../lang/src/en.json');
+import fallbacks from '../../../../lang/src/en.json';
 
 /**
  * The AccountResetUI component is used to submit an Account Reset request.
@@ -45,7 +45,7 @@ class AccountResetUI extends Component {
       'MultiFactorAuthentication.ACCOUNT_RESET_CONFIRMATION_BUTTON',
       fallbacks['MultiFactorAuthentication.ACCOUNT_RESET_CONFIRMATION_BUTTON']
     );
-    if (!await confirm(confirmMessage, { title: confirmTitle, confirmLabel: buttonLabel })) {
+    if (!await confirm({ title: confirmTitle, message: confirmMessage, confirmText: buttonLabel })) {
       return;
     }
 

client/src/components/FormField/RegisteredMFAMethodListField/MethodListItem.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import confirm from '@silverstripe/reactstrap-confirm';
+import confirm from 'reactstrap-confirm';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import moment from 'moment';
@@ -8,7 +8,7 @@ import Reset from './MethodListItem/Reset';
 import SetDefault from './MethodListItem/SetDefault';
 import methodShape from 'types/registeredMethod';
 
-const fallbacks = require('../../../../lang/src/en.json');
+import fallbacks from '../../../../lang/src/en.json';
 
 /**
  * Renders a single Registered MFA Method for a Member
@@ -88,7 +88,7 @@ class MethodListItem extends PureComponent {
       );
 
       props.onReset = async callback => {
-        if (!await confirm(confirmMessage, { title: confirmTitle, confirmLabel: buttonLabel })) {
+        if (!await confirm({ title: confirmTitle, message: confirmMessage, confirmText: buttonLabel })) {
           return;
         }
         callback();

client/src/components/FormField/RegisteredMFAMethodListField/MethodListItem/Remove.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import confirm from '@silverstripe/reactstrap-confirm';
+import confirm from 'reactstrap-confirm';
 import Config from 'lib/Config'; // eslint-disable-line
 import api from 'lib/api';
 import { addAvailableMethod } from 'state/mfaRegister/actions';
 import { deregisterMethod, setDefaultMethod } from 'state/mfaAdministration/actions';
 import registeredMethodShape from 'types/registeredMethod';
 
-const fallbacks = require('../../../../../lang/src/en.json');
+import fallbacks from '../../../../../lang/src/en.json';
 
 const Remove = ({
   method,
@@ -37,7 +37,7 @@ const Remove = ({
       fallbacks['MultiFactorAuthentication.DELETE_CONFIRMATION_BUTTON']
     );
 
-    if (!await confirm(confirmMessage, { title: confirmTitle, confirmLabel: buttonLabel })) {
+    if (!await confirm({ title: confirmTitle, message: confirmMessage, confirmText: buttonLabel })) {
       return;
     }
 

client/src/components/FormField/RegisteredMFAMethodListField/MethodListItem/Reset.js

@@ -11,7 +11,7 @@ import registeredMethodShape from 'types/registeredMethod';
 import availableMethodShape from 'types/availableMethod';
 import RegisterModal from 'components/RegisterModal';
 
-const fallbacks = require('../../../../../lang/src/en.json');
+import fallbacks from '../../../../../lang/src/en.json';
 
 class Reset extends Component {
   constructor(props) {

client/src/components/FormField/RegisteredMFAMethodListField/MethodListItem/SetDefault.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import api from 'lib/api';
 import { setDefaultMethod } from 'state/mfaAdministration/actions';
 
-const fallbacks = require('../../../../../lang/src/en.json');
+import fallbacks from '../../../../../lang/src/en.json';
 
 /**
  * An action to set the current method as the default registered method for a user

client/src/components/FormField/RegisteredMFAMethodListField/RegisteredMFAMethodListField.js

@@ -19,7 +19,7 @@ import {
 } from 'components/Register';
 import RegisterModal from '../../RegisterModal';
 
-const fallbacks = require('../../../../lang/src/en.json');
+import fallbacks from '../../../../lang/src/en.json';
 
 class RegisteredMFAMethodListField extends Component {
   constructor(props) {

client/src/components/FormField/RegisteredMFAMethodListField/tests/AccountResetUI-test.js

@@ -7,9 +7,9 @@ import Enzyme, { shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import AccountResetUI from '../AccountResetUI';
 
-import confirm from '@silverstripe/reactstrap-confirm';
+import confirm from 'reactstrap-confirm';
 
-jest.mock('@silverstripe/reactstrap-confirm', () => jest.fn().mockImplementation(
+jest.mock('reactstrap-confirm', () => jest.fn().mockImplementation(
   () => Promise.resolve(true)
 ));
 

client/src/components/FormField/RegisteredMFAMethodListField/tests/RegisteredMFAMethodListField-test.js

@@ -22,7 +22,7 @@ const onUpdateAvailableMethods = jest.fn();
 const onSetRegisteredMethods = jest.fn();
 const onSetDefaultMethod = jest.fn();
 
-const translationStrings = require('../../../../../lang/src/en.json');
+import translationStrings from '../../../../../lang/src/en.json';
 
 describe('RegisteredMFAMethodListField', () => {
   describe('baseMethods()', () => {

client/src/components/Icons/CircleTick.js

@@ -1,10 +1,11 @@
+/* eslint-disable max-len */
 import React from 'react';
 
 export default ({ color = 'currentColor', size = '3em' }) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height={size} width={size}>
     <g fill={color}>
-      {/* eslint-ignore-line max-len */}
       <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" />
     </g>
   </svg>
 );
+/* eslint-enable max-len */

client/src/components/Register.js

@@ -291,16 +291,16 @@ class Register extends Component {
     let content;
 
     switch (screen) {
-      default:
-      case SCREEN_INTRODUCTION:
-        content = this.renderIntroduction();
-        break;
       case SCREEN_CHOOSE_METHOD:
         content = this.renderOptions();
         break;
       case SCREEN_REGISTER_METHOD:
         content = this.renderMethod();
         break;
+      case SCREEN_INTRODUCTION:
+      default:
+        content = this.renderIntroduction();
+        break;
     }
 
     return (

client/src/components/Register/Introduction.js

@@ -7,7 +7,7 @@ import { SCREEN_REGISTER_METHOD } from '../Register';
 import { connect } from 'react-redux';
 import Title from './Title';
 
-const fallbacks = require('../../../lang/src/en.json');
+import fallbacks from '../../../lang/src/en.json';
 
 export const ActionList = ({ canSkip, onContinue, onSkip }) => {
   const { ss: { i18n } } = window;

client/src/components/Register/Title.js

@@ -7,7 +7,7 @@ import {
 } from '../Register';
 import { connect } from 'react-redux';
 
-const fallbacks = require('../../../lang/src/en.json');
+import fallbacks from '../../../lang/src/en.json';
 
 const Title = ({ screen, method, Tag = 'h2', className = 'mfa-section-title' }) => {
   const { ss: { i18n } } = window;

client/src/components/RegisterModal.js

@@ -9,7 +9,7 @@ import { registerMethod, setDefaultMethod } from 'state/mfaAdministration/action
 import registeredMethodShape from 'types/registeredMethod';
 import { SCREEN_INTRODUCTION } from 'components/Register';
 
-const fallbacks = require('../../lang/src/en.json');
+import fallbacks from '../../lang/src/en.json';
 
 /**
  * Renders a modal that contains a register component. Given endpoints it will register MFA methods

client/src/components/Verify.js

@@ -11,7 +11,7 @@ import SelectMethod from 'components/Verify/SelectMethod';
 import withMethodAvailability from 'state/methodAvailability/withMethodAvailability';
 import LoadingError from 'components/LoadingError';
 
-const fallbacks = require('../../lang/src/en.json');
+import fallbacks from '../../lang/src/en.json';
 
 class Verify extends Component {
   constructor(props) {

client/src/legacy/RegisteredMFAMethodListFieldEntwine.js

@@ -1,12 +1,14 @@
 // Manages rendering RegisteredMFAMethodListFields in lieu of React support in ModelAdmin
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector'; // eslint-disable-line
 
 const FIELD_SELECTOR = '.js-injector-boot [data-field-type="registered-mfa-method-list-field"]';
 
 window.jQuery.entwine('ss', ($) => {
   $(FIELD_SELECTOR).entwine({
+    ReactRoot: null,
+
     onmatch() {
       const RegisteredMFAMethodListField = loadComponent('RegisteredMFAMethodListField');
       const { readOnly, schema: {
@@ -22,7 +24,12 @@ window.jQuery.entwine('ss', ($) => {
         isMFARequired,
       } } = this.data('schema');
 
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(
         <RegisteredMFAMethodListField
           backupMethod={backupMethod}
           readOnly={readOnly}
@@ -35,9 +42,16 @@ window.jQuery.entwine('ss', ($) => {
           backupCreatedDate={backupCreatedDate}
           resetEndpoint={resetEndpoint}
           isMFARequired={isMFARequired}
-        />,
-        this[0]
+        />
       );
+    },
+
+    onunmatch() {
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 });

client/src/legacy/index.js

@@ -1,2 +1,2 @@
-require('./RegisteredMFAMethodListFieldEntwine');
-require('./SiteConfig');
+import './RegisteredMFAMethodListFieldEntwine';
+import './SiteConfig';