DEP Upgrade build stack (#1303)

* DEP Upgrade webpack config and deps

* FIX Set correct proptypes for react components

* DEP Update code to work with upgraded deps

* MNT Run yarn build

.nvmrc

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

client/src/boot/index.js

@@ -12,25 +12,25 @@ document.addEventListener('DOMContentLoaded', () => {
 
   applyTransform();
 
-  const sectionConfig = Config.getSection('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin');
+  const baseURL = Config.getSection('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin').reactRoutePath;
 
   reactRouteRegister.add({
     path: '/',
     routes: [
       {
-        path: `/${sectionConfig.url}/show/:folderId/:viewAction/:fileId`,
+        path: `${baseURL}/show/:folderId/:viewAction/:fileId`,
         component: AssetAdminRouter,
       },
       {
-        path: `/${sectionConfig.url}/show/:folderId/:viewAction`,
+        path: `${baseURL}/show/:folderId/:viewAction`,
         component: AssetAdminRouter,
       },
       {
-        path: `/${sectionConfig.url}/show/:folderId`,
+        path: `${baseURL}/show/:folderId`,
         component: AssetAdminRouter,
       },
       {
-        path: `/${sectionConfig.url}`,
+        path: `${baseURL}`,
         component: AssetAdminRouter,
       },
     ],

client/src/bundles/bundle.js

@@ -3,8 +3,8 @@
  import/no-extraneous-dependencies,
  import/no-unresolved
  */
-require('expose-loader?InsertMediaModal!containers/InsertMediaModal/InsertMediaModal');
-require('expose-loader?InsertEmbedModal!components/InsertEmbedModal/InsertEmbedModal');
+require('expose-loader?exposes=InsertMediaModal!containers/InsertMediaModal/InsertMediaModal');
+require('expose-loader?exposes=InsertEmbedModal!components/InsertEmbedModal/InsertEmbedModal');
 
 require('boot');
 require('entwine/UploadField/UploadFieldEntwine');

client/src/components/BulkActions/BulkActions.js

@@ -142,7 +142,7 @@ BulkActions.propTypes = {
     canApply: PropTypes.func,
     confirm: PropTypes.func,
   })),
-  ActionMenu: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  ActionMenu: PropTypes.elementType,
   showCount: PropTypes.bool,
 };
 

client/src/components/GalleryToolbar/GalleryToolbar.js

@@ -174,9 +174,9 @@ GalleryToolbar.propTypes = {
     message: PropTypes.node,
     status: PropTypes.string,
   })),
-  BackButton: PropTypes.func,
-  UploadButton: PropTypes.func,
-  AddFolderButton: PropTypes.func,
+  BackButton: PropTypes.elementType,
+  UploadButton: PropTypes.elementType,
+  AddFolderButton: PropTypes.elementType,
 };
 
 GalleryToolbar.defaultProps = {

client/src/components/ProportionConstraintField/ProportionConstraintField.js

@@ -187,7 +187,7 @@ ProportionConstraintField.propTypes = {
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   }).isRequired,
-  FieldGroup: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+  FieldGroup: PropTypes.elementType.isRequired,
   imageSizePresets: PropTypes.arrayOf(PropTypes.shape({
     width: PropTypes.number,
     text: PropTypes.string,

client/src/components/UploadField/UploadField.js

@@ -589,9 +589,9 @@ UploadField.propTypes = {
     canAttach: PropTypes.bool,
     maxFiles: PropTypes.number,
   }),
-  UploadFieldItem: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  AssetDropzone: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  InsertMediaModal: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  UploadFieldItem: PropTypes.elementType,
+  AssetDropzone: PropTypes.elementType,
+  InsertMediaModal: PropTypes.elementType,
   getItemProps: PropTypes.func,
 };
 

client/src/containers/AssetAdmin/AssetAdmin.js

@@ -12,9 +12,8 @@ import * as queuedFilesActions from 'state/queuedFiles/QueuedFilesActions';
 import * as displaySearchActions from 'state/displaySearch/DisplaySearchActions';
 import Editor from 'containers/Editor/Editor';
 import Gallery from 'containers/Gallery/Gallery';
-import AssetAdminBreadcrumb from './AssetAdminBreadcrumb';
 import Toolbar from 'components/Toolbar/Toolbar';
-import { withApollo } from 'react-apollo';
+import { withApollo } from '@apollo/client/react/hoc';
 import Search, { hasFilters } from 'components/Search/Search';
 import SearchToggle from 'components/Search/SearchToggle';
 import deleteFilesMutation from 'state/files/deleteFilesMutation';
@@ -23,13 +22,18 @@ import publishFilesMutation from 'state/files/publishFilesMutation';
 import CONSTANTS from 'constants/index';
 import configShape from 'lib/configShape';
 import { injectGraphql } from 'lib/Injector';
-import BulkDeleteConfirmation from '../BulkDeleteConfirmation/BulkDeleteConfirmation';
 import * as confirmDeletionActions from 'state/confirmDeletion/ConfirmDeletionActions';
 import getFormSchema from 'lib/getFormSchema';
+import BulkDeleteConfirmation from '../BulkDeleteConfirmation/BulkDeleteConfirmation';
+import AssetAdminBreadcrumb from './AssetAdminBreadcrumb';
 
 class AssetAdmin extends Component {
   constructor(props) {
     super(props);
+    // Needed to avoid warnings about missing state when getDerivedStateFromProps is called
+    if (!this.state) {
+      this.state = {};
+    }
 
     this.handleOpenFile = this.handleOpenFile.bind(this);
     this.handleCloseFile = this.handleCloseFile.bind(this);
@@ -54,10 +58,11 @@ class AssetAdmin extends Component {
     this.handleMoveFilesSuccess = this.handleMoveFilesSuccess.bind(this);
   }
 
-  componentWillReceiveProps(props) {
+  static getDerivedStateFromProps(props) {
     if (!props.loading && props.folder && props.folderId !== props.folder.id) {
       props.onReplaceUrl(props.folder.id, props.fileId, props.query, props.viewAction);
     }
+    return null;
   }
 
   /**

client/src/containers/AssetAdmin/AssetAdminRouter.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import withRouter, { routerPropTypes } from 'lib/withRouter';
 import AssetAdmin from 'containers/AssetAdmin/AssetAdmin';
 import { decodeQuery } from 'lib/DataFormat';
 import qs from 'qs';
@@ -78,7 +77,7 @@ class AssetAdminRouter extends Component {
     }
 
     return buildUrl({
-      base: `/${this.props.sectionConfig.url}`,
+      base: `/${this.props.sectionConfig.reactRoutePath}`,
       folderId: newFolderId,
       fileId: newFileId,
       query: newQuery,
@@ -90,8 +89,8 @@ class AssetAdminRouter extends Component {
    * @return {Number} Folder ID being viewed
    */
   getFolderId() {
-    if (this.props.match.params && this.props.match.params.folderId) {
-      return parseInt(this.props.match.params.folderId, 10);
+    if (this.props.router.params && this.props.router.params.folderId) {
+      return parseInt(this.props.router.params.folderId, 10);
     }
     return 0;
   }
@@ -100,15 +99,15 @@ class AssetAdminRouter extends Component {
    * @return {Number} File ID being viewed
    */
   getFileId() {
-    if (this.props.match.params && this.props.match.params.fileId) {
-      return parseInt(this.props.match.params.fileId, 10);
+    if (this.props.router.params && this.props.router.params.fileId) {
+      return parseInt(this.props.router.params.fileId, 10);
     }
     return 0;
   }
 
   getViewAction() {
-    if (this.props.match.params && this.props.match.params.viewAction) {
-      return this.props.match.params.viewAction;
+    if (this.props.router.params && this.props.router.params.viewAction) {
+      return this.props.router.params.viewAction;
     }
     return CONSTANTS.ACTIONS.EDIT_FILE;
   }
@@ -138,7 +137,7 @@ class AssetAdminRouter extends Component {
    * @returns {Object}
    */
   getQuery() {
-    return decodeQuery(this.props.location.search);
+    return decodeQuery(this.props.router.location.search);
   }
 
   /**
@@ -152,7 +151,7 @@ class AssetAdminRouter extends Component {
   handleBrowse(folderId, fileId, query, action) {
     const pathname = this.getUrl(folderId, fileId, query, action);
 
-    this.props.history.push(pathname);
+    this.props.router.navigate(pathname);
   }
 
   /**
@@ -167,7 +166,7 @@ class AssetAdminRouter extends Component {
   handleReplaceUrl(folderId, fileId, query, action) {
     const pathname = this.getUrl(folderId, fileId, query, action);
 
-    this.props.history.replace(pathname);
+    this.props.router.navigate(pathname, { replace: true });
   }
 
   render() {
@@ -182,13 +181,7 @@ class AssetAdminRouter extends Component {
 
 AssetAdminRouter.propTypes = {
   sectionConfig: configShape,
-  location: PropTypes.shape({
-    pathname: PropTypes.string,
-    query: PropTypes.object,
-    search: PropTypes.string,
-  }),
-  params: PropTypes.object,
-  router: PropTypes.object,
+  router: routerPropTypes,
 };
 
 function mapStateToProps(state) {

client/src/containers/AssetAdmin/stateRouter.js

@@ -52,7 +52,7 @@ class AssetAdminStateRouter extends Component {
     }
 
     return buildUrl({
-      base: this.props.sectionConfig.url,
+      base: this.props.sectionConfig.reactRoutePath,
       folderId: newFolderId,
       fileId: newFileId,
       query: newQuery,
@@ -135,7 +135,7 @@ class AssetAdminStateRouter extends Component {
 }
 
 AssetAdminStateRouter.propTypes = {
-  Component: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  Component: PropTypes.elementType,
   sectionConfig: PropTypes.shape({
     url: PropTypes.string.isRequired,
   }).isRequired,

client/src/containers/BulkDeleteConfirmation/BulkDeleteConfirmation.js

@@ -2,15 +2,15 @@ import React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { withApollo } from 'react-apollo';
+import { withApollo } from '@apollo/client/react/hoc';
 import { inject, injectGraphql } from 'lib/Injector';
 import * as confirmDeletionActions from 'state/confirmDeletion/ConfirmDeletionActions';
 import * as TRANSITIONS from 'state/confirmDeletion/ConfirmDeletionTransitions';
+import i18n from 'i18n';
+import fileShape from 'lib/fileShape';
 import DeletionModal from './DeletionModal';
 import BulkDeleteMessage from './BulkDeleteMessage';
 import { getFolderDescendantFileTotals, getFileTotalItems } from './helpers';
-import fileShape from 'lib/fileShape';
-import i18n from 'i18n';
 
 /**
  * Wires the Redux store and Apollo result set with the DeletionModal.
@@ -77,7 +77,7 @@ const BulkDeleteConfirmation = ({
 
 BulkDeleteConfirmation.propTypes = {
   loading: PropTypes.bool.isRequired,
-  LoadingComponent: PropTypes.func,
+  LoadingComponent: PropTypes.elementType,
   transition: PropTypes.oneOf(['canceling', 'deleting', false]),
   files: PropTypes.arrayOf(fileShape),
   descendantFileCounts: PropTypes.object,

client/src/containers/Gallery/Gallery.js

@@ -1,4 +1,3 @@
-/* global window */
 import $ from 'jquery';
 import i18n from 'i18n';
 import React, { Component } from 'react';
@@ -16,14 +15,14 @@ import * as toastsActions from 'state/toasts/ToastsActions';
 import * as queuedFilesActions from 'state/queuedFiles/QueuedFilesActions';
 import * as confirmDeletionActions from 'state/confirmDeletion/ConfirmDeletionActions';
 import moveFilesMutation from 'state/files/moveFilesMutation';
-import { withApollo } from 'react-apollo';
+import { withApollo } from '@apollo/client/react/hoc';
 import { SelectableGroup } from 'react-selectable';
-import GalleryDND from './GalleryDND';
 import configShape from 'lib/configShape';
 import getStatusCodeMessage from 'lib/getStatusCodeMessage';
-import MoveModal from '../MoveModal/MoveModal';
 import { inject } from 'lib/Injector';
 import PropTypes from 'prop-types';
+import MoveModal from '../MoveModal/MoveModal';
+import GalleryDND from './GalleryDND';
 
 /**
  * List of possible possible bulk actions.
@@ -1067,7 +1066,7 @@ Gallery.propTypes = Object.assign({}, sharedPropTypes, {
   search: PropTypes.object,
   enableDropzone: PropTypes.bool,
   concatenateSelect: PropTypes.bool,
-  GalleryToolbar: PropTypes.func,
+  GalleryToolbar: PropTypes.elementType,
   sorters: PropTypes.arrayOf(PropTypes.shape({
     field: PropTypes.string.isRequired,
     direction: PropTypes.oneOf(['asc', 'desc']).isRequired,

client/src/containers/TableView/TableView.js

@@ -431,7 +431,7 @@ TableView.defaultProps = galleryViewDefaultProps;
 TableView.propTypes = {
   ...galleryViewPropTypes,
   sort: PropTypes.string.isRequired,
-  VersionedBadge: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  VersionedBadge: PropTypes.elementType
 };
 
 export { TableView as Component };

client/src/containers/ThumbnailView/ThumbnailView.js

@@ -184,8 +184,8 @@ ThumbnailView.defaultProps = galleryViewDefaultProps;
 
 ThumbnailView.propTypes = {
   ...galleryViewPropTypes,
-  File: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  Folder: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  File: PropTypes.elementType.isRequired,
+  Folder: PropTypes.elementType.isRequired,
 };
 
 const injector = inject(

client/src/entwine/TinyMCE_ssembed.js

@@ -2,6 +2,7 @@
 import jQuery from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 import ShortcodeSerialiser, { sanitiseShortCodeProperties } from 'lib/ShortcodeSerialiser';
 import InsertEmbedModal from 'components/InsertEmbedModal/InsertEmbedModal';
@@ -178,13 +179,19 @@ jQuery.entwine('ss', ($) => {
 
     Data: {},
 
+    ReactRoot: null,
+
     onunmatch() {
       // solves errors given by ReactDOM "no matched root found" error.
       this._clearModal();
     },
 
     _clearModal() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
       // this.empty();
     },
 
@@ -213,7 +220,11 @@ jQuery.entwine('ss', ($) => {
       const attrs = this.getOriginalAttributes();
 
       // create/update the react component
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+      }
+      root.render(
         <InjectableInsertEmbedModal
           isOpen={isOpen}
           onCreate={handleCreate}
@@ -223,9 +234,9 @@ jQuery.entwine('ss', ($) => {
           bodyClassName="modal__dialog"
           className="insert-embed-react__dialog-wrapper"
           fileAttributes={attrs}
-        />,
-        this[0]
+        />
       );
+      this.setReactRoot(root);
     },
 
     _handleLoadingError() {