DEP Update javascript dependencies for CMS 5 compatability

.eslintrc.js

@@ -1 +1,7 @@
-module.exports = require('@silverstripe/eslint-config/.eslintrc');
+module.exports = {
+  extends: '@silverstripe/eslint-config',
+  // Allows null coalescing and optional chaining operators.
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+};

client/src/boot/index.js

@@ -4,6 +4,5 @@ import registerReducers from 'boot/registerReducers';
 
 window.document.addEventListener('DOMContentLoaded', () => {
   registerComponents();
-
   registerReducers();
 });

client/src/boot/registerComponents.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import Injector from 'lib/Injector';
 import HistoryViewer from 'components/HistoryViewer/HistoryViewer';
 import SnapshotViewerContainer from 'components/HistoryViewer/SnapshotViewerContainer';

client/src/boot/registerReducers.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import Injector from 'lib/Injector';
 import { combineReducers } from 'redux';
 import historyViewerReducer from 'state/historyviewer/HistoryViewerReducer';

client/src/bundles/bundle.js

@@ -5,19 +5,18 @@
  */
 
 // Expose fields (see webpack config for matching "externals" config)
-require('expose-loader?SnapshotsViewer!components/HistoryViewer/HistoryViewer');
-
-require('expose-loader?versionType!types/versionType');
+import 'expose-loader?exposes=SnapshotsViewer!components/HistoryViewer/HistoryViewer';
+import 'expose-loader?exposes=versionType!types/versionType';
 
 // Legacy CMS
-require('../legacy/ArchiveAdmin/ArchiveAdmin');
+import '../legacy/ArchiveAdmin/ArchiveAdmin';
 
 // Legacy form fields
 // Fields used by core legacy UIs, or available to users
 // To do: determine better way of using webpack to pull in optional javascript
-require('../legacy/HistoryViewer/HistoryViewerEntwine');
+import '../legacy/HistoryViewer/HistoryViewerEntwine';
 
 // Legacy publish/unpublish popup confirmation - copy from versioned-admin
-require('../legacy/VersionedEditForm/VersionedEditForm');
+import '../legacy/VersionedEditForm/VersionedEditForm';
 
-require('boot');
+import 'boot';

client/src/components/HistoryViewer/HistoryViewer.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 /* global window */
 
 import React, { Component } from 'react';
@@ -17,7 +16,7 @@ import {
 import { versionType } from 'types/versionType';
 import { compareType } from 'types/compareType';
 import classNames from 'classnames';
-import ResizeAware from 'react-resize-aware';
+import ResizeAware from 'components/ResizeAware/ResizeAwareHoc';
 import * as viewModeActions from 'state/viewMode/ViewModeActions';
 import PropTypes from 'prop-types';
 

client/src/components/HistoryViewer/HistoryViewerCompareWarning.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';

client/src/components/HistoryViewer/HistoryViewerHeading.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import i18n from 'i18n';
 import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';

client/src/components/HistoryViewer/HistoryViewerSnapshot.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject } from 'lib/Injector';

client/src/components/HistoryViewer/HistoryViewerSnapshotState.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import { inject } from 'lib/Injector';
 import React from 'react';
 import { Component as VersionedState } from './HistoryViewerVersionState';

client/src/components/HistoryViewer/HistoryViewerToolbar.js

@@ -7,18 +7,16 @@ import { connect } from 'react-redux';
 import i18n from 'i18n';
 import { inject } from 'lib/Injector';
 import { addMessage, showList } from 'state/historyviewer/HistoryViewerActions';
-import { Tooltip } from 'reactstrap';
+import { UncontrolledTooltip as Tooltip } from 'reactstrap';
 
 class HistoryViewerToolbar extends Component {
   constructor(props) {
     super(props);
 
     this.handleRevert = this.handleRevert.bind(this);
-    this.handleToggleRevertTooltip = this.handleToggleRevertTooltip.bind(this);
 
     this.state = {
       isReverting: false,
-      revertTooltipOpen: false,
       tooltipTimer: null,
     };
   }
@@ -40,12 +38,6 @@ class HistoryViewerToolbar extends Component {
     } }).then(() => handler(versionId));
   }
 
-  handleToggleRevertTooltip() {
-    this.setState(state => ({
-      revertTooltipOpen: !state.revertTooltipOpen,
-    }));
-  }
-
   render() {
     const {
       FormActionComponent,
@@ -57,11 +49,14 @@ class HistoryViewerToolbar extends Component {
       rollbackMessage,
       typeName,
     } = this.props;
-    const { isReverting, revertTooltipOpen } = this.state;
+    const { isReverting } = this.state;
 
-    const revertButtonTitle = isReverting
-      ? i18n._t('HistoryViewerToolbar.REVERT_IN_PROGRESS', 'Revert in progress...')
-      : i18n._t('HistoryViewerToolbar.REVERT_UNAVAILABLE', 'Unavailable for the current version');
+    let revertButtonTitle = '';
+    if (isReverting) {
+      revertButtonTitle = i18n._t('HistoryViewerToolbar.REVERT_IN_PROGRESS', 'Revert in progress...');
+    } else if (isLatestVersion) {
+      revertButtonTitle = i18n._t('HistoryViewerToolbar.REVERT_UNAVAILABLE', 'Unavailable for the current version');
+    }
 
     return (
       <RollbackMutation typeName={typeName}>
@@ -87,8 +82,6 @@ class HistoryViewerToolbar extends Component {
               <Tooltip
                 trigger="click hover focus"
                 placement="top"
-                isOpen={revertTooltipOpen}
-                toggle={this.handleToggleRevertTooltip}
                 target="HistoryRevertButton"
               >
                 {rollbackMessage}

client/src/components/HistoryViewer/HistoryViewerVersion.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';

client/src/components/HistoryViewer/HistoryViewerVersionList.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

client/src/components/HistoryViewer/HistoryViewerVersionState.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import i18n from 'i18n';

client/src/components/HistoryViewer/RollbackMutation.js

@@ -1,7 +1,5 @@
-/* eslint-disable import/no-unresolved */
-
 import React, { useMemo } from 'react';
-import { Mutation } from 'react-apollo';
+import { Mutation } from '@apollo/client/react/components';
 import createRollbackMutation from '../../graphql/createRollbackMutation';
 
 const RollbackMutation = ({ typeName, children }) => {

client/src/components/HistoryViewer/SnapshotViewerContainer.js

@@ -1,8 +1,6 @@
-/* eslint-disable import/no-unresolved */
-
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Query } from 'react-apollo';
+import { Query } from '@apollo/client/react/components';
 import { inject } from 'lib/Injector';
 import createSnapshotsQuery from '../../graphql/createSnapshotsQuery';
 

client/src/components/ResizeAware/ResizeAwareHoc.js

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import useResizeAware from 'react-resize-aware';
+
+const ResizeAwareHoc = ({ children, className, onResize }) => {
+  const [resizeListener, sizes] = useResizeAware();
+
+  useEffect(() => {
+    onResize({ width: sizes?.width, height: sizes?.height });
+  }, [sizes?.width, sizes?.height]);
+
+  return (
+    <div className={className}>
+      {resizeListener}
+      {children}
+    </div>
+  );
+};
+
+export default ResizeAwareHoc;

client/src/containers/HistoryViewer/HistoryViewerConfig.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import React from 'react';
 import Config from 'lib/Config';
 import { inject } from 'lib/Injector';

client/src/helpers/getDateFromVersion.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import i18n from 'i18n';
 import moment from 'moment';
 

client/src/legacy/HistoryViewer/HistoryViewerEntwine.js

@@ -2,7 +2,7 @@
 
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 /**
@@ -11,6 +11,8 @@ import { loadComponent } from 'lib/Injector';
  */
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .snapshot-history-viewer__container').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const cmsContent = this.closest('.cms-content').attr('id');
       const context = (cmsContent)
@@ -25,14 +27,20 @@ jQuery.entwine('ss', ($) => {
         isInGridField: schemaData.data.isInGridField || !this.hasClass('history-viewer--standalone'),
       };
 
-      ReactDOM.render(
-        <HistoryViewerComponent {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = ReactDOM.createRoot(this[0]);
+      }
+      root.render(<HistoryViewerComponent {...props} />);
+      this.setReactRoot(root);
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 

client/src/legacy/VersionedEditForm/VersionedEditForm.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import i18n from 'i18n';
 import jQuery from 'jquery';
 

client/src/state/historyviewer/HistoryViewerActions.js

@@ -1,6 +1,4 @@
-/* eslint-disable import/no-unresolved */
-
-import uuidv1 from 'uuid/v1';
+import { v1 as uuidv1 } from 'uuid';
 import HISTORY_VIEWER from './HistoryViewerActionTypes';
 
 /**

package.json

@@ -17,7 +17,7 @@
     "node": "^18.x"
   },
   "scripts": {
-    "build": "NODE_ENV=development yarn && yarn lint && yarn test && NODE_ENV=production webpack --mode production --bail --progress",
+    "build": "yarn && yarn lint && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
     "dev": "NODE_ENV=development webpack --progress",
     "watch": "NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
@@ -70,7 +70,7 @@
     "classnames": "^2.3.2",
     "graphql": "^16.6.0",
     "graphql-fragments": "^0.1.0",
-    "graphql-tag": "^2.10.0",
+    "graphql-tag": "^2.12.6",
     "griddle-react": "^1.13.1",
     "jquery": "^3.5.0",
     "moment": "^2.21.0",
@@ -79,7 +79,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
-    "react-resize-aware": "^3.1.2",
+    "react-resize-aware": "^4.0.0",
     "react-router": "^6.7",
     "react-router-redux": "^4.0.5",
     "reactstrap": "^8.9.0",

yarn.lock

@@ -4297,7 +4297,7 @@ graphql-fragments@^0.1.0:
   dependencies:
     graphql-anywhere "^0.2.4"
 
-graphql-tag@^2.10.0, graphql-tag@^2.12.6:
+graphql-tag@^2.12.6:
   version "2.12.6"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
   integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
@@ -7077,10 +7077,10 @@ react-redux@^8.0.5:
     react-is "^18.0.0"
     use-sync-external-store "^1.0.0"
 
-react-resize-aware@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/react-resize-aware/-/react-resize-aware-3.1.2.tgz#a5e6fe4691a3ac8d3b0fadd37008339db2294c4f"
-  integrity sha512-sBtMIEy/9oI+Xf2o7IdWdkTokpZSPo9TWn60gqWKPG3BXg44Rg3FCIMiIjmgvRUF4eQptw6pqYTUhYwkeVSxXA==
+react-resize-aware@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-resize-aware/-/react-resize-aware-4.0.0.tgz#9a2e002c0a3d15285ccd81c2d3d17aff64e8a597"
+  integrity sha512-42aoj3uGcqhsMQE7yssxuy0+YYNp38CSzoGxRXUV80WUm6uYJKhAwBlOSBltxTbdZSkJXZwgq43iyywjVI9ZgA==
 
 react-router-redux@^4.0.5:
   version "4.0.8"