DEP Upgrade front-end build stack

.nvmrc

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

babel.config.json

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

client/src/components/ElementActions/ArchiveAction.js

@@ -30,7 +30,9 @@ const ArchiveAction = (MenuComponent) => (props) => {
     if (handleArchiveBlock && window.confirm(archiveMessage)) {
       handleArchiveBlock(id).then(() => {
         const preview = window.jQuery('.cms-preview');
-        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+        if (preview && typeof preview.entwine === 'function') {
+          preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+        }
       });
     }
   };

client/src/components/ElementActions/SaveAction.js

@@ -1,4 +1,3 @@
-/* global window */
 import React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';

client/src/components/ElementActions/tests/ArchiveAction-test.js

@@ -13,6 +13,8 @@ describe('ArchiveAction', () => {
   const mockMutation = jest.fn(() => new Promise((resolve) => { resolve(); }));
   const WrappedComponent = (props) => <div>{props.children}</div>;
   const ActionComponent = ArchiveAction(WrappedComponent);
+  const jQuery = jest.fn();
+  window.jQuery = jQuery;
 
   beforeEach(() => {
     wrapper = mount(

client/src/components/ElementActions/tests/PublishAction-test.js

@@ -1,6 +1,12 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* global jest, describe, it, expect, window */
 
+jest.mock('isomorphic-fetch', () =>
+  () => Promise.resolve({
+    json: () => ({}),
+  })
+);
+
 import React from 'react';
 import { Component as PublishAction } from '../PublishAction';
 import Enzyme, { mount } from 'enzyme';

client/src/components/ElementActions/tests/SaveAction-test.js

@@ -1,6 +1,12 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* global jest, describe, it, expect */
 
+jest.mock('isomorphic-fetch', () =>
+  () => Promise.resolve({
+    json: () => ({}),
+  })
+);
+
 import React from 'react';
 import { Component as SaveAction } from '../SaveAction';
 import Enzyme, { mount } from 'enzyme';

client/src/components/ElementEditor/Content.js

@@ -65,8 +65,8 @@ Content.propTypes = {
   fileUrl: PropTypes.string,
   fileTitle: PropTypes.string,
   previewExpanded: PropTypes.bool,
-  SummaryComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  InlineEditFormComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  SummaryComponent: PropTypes.elementType,
+  InlineEditFormComponent: PropTypes.elementType,
   handleLoadingError: PropTypes.func,
   broken: PropTypes.bool,
 };

client/src/components/ElementEditor/Header.js

@@ -217,7 +217,7 @@ Header.propTypes = {
   areaId: PropTypes.number,
   activeTab: PropTypes.string,
   simple: PropTypes.bool,
-  ElementActionsComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  ElementActionsComponent: PropTypes.elementType,
   previewExpanded: PropTypes.bool,
   disableTooltip: PropTypes.bool,
   formDirty: PropTypes.bool,

client/src/components/ElementEditor/Toolbar.js

@@ -23,7 +23,7 @@ Toolbar.defaultProps = {};
 Toolbar.propTypes = {
   elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
   areaId: PropTypes.number.isRequired,
-  AddNewButtonComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  AddNewButtonComponent: PropTypes.elementType.isRequired,
   connectDropTarget: PropTypes.func.isRequired,
   onDragOver: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
   onDragDrop: PropTypes.func, // eslint-disable-line react/no-unused-prop-types

client/src/legacy/ElementEditor/entwine.js

@@ -2,7 +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 { getConfig } from 'state/editor/elementConfig';
 import { destroy } from 'redux-form';
@@ -40,6 +40,8 @@ const resetStores = () => {
  */
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .element-editor__container').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const context = {};
       const ElementEditorComponent = loadComponent('ElementEditor', context);
@@ -53,15 +55,21 @@ jQuery.entwine('ss', ($) => {
         elementTypes,
       };
 
-      ReactDOM.render(
-        <ElementEditorComponent {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(<ElementEditorComponent {...props} />);
     },
 
     onunmatch() {
       resetStores();
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     },
 
     /**

client/src/state/editor/addElementMutation.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 import { query as readBlocksQuery, config as readBlocksConfig } from './readBlocksForAreaQuery';
 

client/src/state/editor/archiveBlockMutation.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 import { config as readBlocksConfig, query as readBlocksQuery } from './readBlocksForAreaQuery';
 

client/src/state/editor/duplicateBlockMutation.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 import { config as readBlocksConfig, query as readBlocksQuery } from './readBlocksForAreaQuery';
 

client/src/state/editor/publishBlockMutation.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 import { config as readBlocksConfig, query as readBlocksQuery } from './readBlocksForAreaQuery';
 

client/src/state/editor/readBlocksForAreaQuery.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 
 // GraphQL query for retrieving the current state of elements for an area. The results of the query

client/src/state/editor/sortBlockMutation.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 import { query as readBlocksQuery, config as readBlocksConfig } from './readBlocksForAreaQuery';
 
@@ -26,7 +26,8 @@ const config = {
       optimisticResponse: {
         sortBlock: {
           id: blockId,
-          liveVersion: false,
+          isLiveVersion: false,
+          isPublished: false,
           __typename: 'Block',
         },
       },

client/src/state/editor/unpublishBlockMutation.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 import { config as readBlocksConfig, query as readBlocksQuery } from './readBlocksForAreaQuery';
 

client/src/state/history/readOneBlockQuery.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 
 // GraphQL query for retrieving the version history of a specific block. The results of

client/src/state/history/revertToBlockVersionMutation.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 
 const mutation = gql`

client/src/types/elementTypeType.js

@@ -9,7 +9,7 @@ const elementTypeType = PropTypes.shape({
   // A font-icon class to be used for the icon of the element
   icon: PropTypes.string,
   // Whether the element is in-line editable
-  inlineEditable: PropTypes.boolean,
+  inlineEditable: PropTypes.bool,
   // The top level edit tabs for this element (Usually "Content" and "Settings")
   editTabs: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,

package.json

@@ -2,8 +2,11 @@
   "name": "silverstripe-elemental",
   "version": "1.0.0",
   "description": "Compose your SilverStripe content of Elements",
+  "engines": {
+    "node": "^18.x"
+  },
   "scripts": {
-    "build": "yarn && yarn lint && yarn test && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && yarn test && 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",
@@ -31,45 +34,55 @@
   },
   "homepage": "https://github.com/dnadesign/silverstripe-elemental#readme",
   "dependencies": {
-    "apollo-client": "^2.3.1",
-    "bootstrap": "^4.3.1",
-    "classnames": "^2.2.5",
-    "graphql": "^14.0.0",
-    "graphql-tag": "^2.10.0",
-    "jquery": "^3.5.0",
-    "popper.js": "^1.14.7",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.1",
-    "react-apollo": "^2.1.0",
+    "@apollo/client": "^3.7.1",
+    "@popperjs/core": "^2.11.6",
+    "bootstrap": "^4.6.2",
+    "classnames": "^2.3.2",
+    "graphql": "^16.6.0",
+    "graphql-tag": "^2.12.6",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-dnd": "^5.0.0",
     "react-dnd-html5-backend": "^5.0.1",
-    "react-dom": "^16.6.1",
-    "react-redux": "^5.0.7",
-    "reactstrap": "^6.4.0",
-    "redux": "^4.0.0",
-    "redux-form": "^6.8.0"
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
+    "reactstrap": "^8.9.0",
+    "redux": "^4.2.0",
+    "redux-form": "^8.3.8"
   },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.1.0",
-    "@silverstripe/webpack-config": "^1.5.0",
-    "babel-jest": "^23.6.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
-    "jest-cli": "^23.6.0"
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "babel-jest": "^29.2.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest-cli": "^29.2.2",
+    "jest-environment-jsdom": "^29.3.1",
+    "react-16": "npm:react@^16.14.0",
+    "react-dom-16": "npm:react-dom@^16.14.0",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   },
   "resolutions": {
-    "colors": "1.1.2"
+    "colors": "1.4.0"
   },
+  "browserslist": [
+    "defaults"
+  ],
   "jest": {
+    "testEnvironment": "jsdom",
+    "moduleNameMapper": {
+      "^react-dom/client$": "react-dom-16",
+      "^react-dom((/.*)?)$": "react-dom-16$1",
+      "^react((/.*)?)$": "react-16$1"
+    },
     "roots": [
       "client/src"
     ],
     "moduleDirectories": [
       "client/src",
-      "node_modules",
-      "node_modules/@silverstripe/webpack-config/node_modules",
-      "../../admin/client/src",
-      "../../admin/node_modules",
+      "../admin/client/src",
+      "../admin/node_modules",
       "vendor/silverstripe/admin/client/src",
       "vendor/silverstripe/admin/node_modules"
     ],
@@ -79,17 +92,5 @@
     "transform": {
       ".*": "babel-jest"
     }
-  },
-  "babel": {
-    "presets": [
-      "env",
-      "react"
-    ],
-    "plugins": [
-      "transform-object-rest-spread"
-    ]
-  },
-  "engines": {
-    "node": "^10.x"
   }
 }

tests/Behat/Context/FixtureContext.php

@@ -4,14 +4,11 @@
 use DNADesign\Elemental\Models\BaseElement;
 use DNADesign\Elemental\Models\ElementalArea;
 use DNADesign\Elemental\Models\ElementContent;
-use SilverStripe\BehatExtension\Context\FixtureContext as BaseFixtureContext;
+use SilverStripe\CMS\Tests\Behaviour\FixtureContext as BaseFixtureContext;
 use SilverStripe\Core\ClassInfo;
 use SilverStripe\ORM\DB;
 use SilverStripe\ORM\Queries\SQLInsert;
 
-if (!class_exists(BaseFixtureContext::class)) {
-    return;
-}
 /**
  * Context used to create fixtures in the SilverStripe ORM.
  */

tests/Behat/features/add-link-to-anchor.feature

@@ -17,12 +17,10 @@ So that I can direct users directly to the relevant information
       And I press the "Insert link" HTML field button
       And I click "Anchor on a page" in the ".tox-menu" element
     Then I should see an "form#Form_editorAnchorLink" element
-      And I should see "No Blocks" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-    When I click "No Blocks" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-      And I click "Elemental" in the "#Form_editorAnchorLink_PageID_Holder .Select-menu-outer" element
-      And I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
-      And I click "element-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-    Then I should see "element-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
+      And I should see "No Blocks" in the ".treedropdownfield__value-container" element
+    When I select "Elemental" in the "#Form_editorAnchorLink_PageID_Holder" tree dropdown
+      And I select "element-anchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
+    Then I should see "element-anchor" in the ".anchorselectorfield__value-container" element
     # Close the dialog now that we're done with it.
     When I click on the "button.close" element
 
@@ -36,12 +34,10 @@ So that I can direct users directly to the relevant information
       And I press the "Insert link" HTML field button
       And I click "Anchor on a page" in the ".tox-menu" element
     Then I should see an "form#Form_editorAnchorLink" element
-      And I should see "Elemental" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-    When I click "Elemental" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-      And I click "No Blocks" in the "#Form_editorAnchorLink_PageID_Holder .Select-menu-outer" element
-      And I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
-      And I click "normal-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-    Then I should see "normal-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
+      And I should see "Elemental" in the ".treedropdownfield__value-container" element
+    When I select "No Blocks" in the "#Form_editorAnchorLink_PageID_Holder" tree dropdown
+      And I select "normal-anchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
+    Then I should see "normal-anchor" in the ".anchorselectorfield__value-container" element
     # Close the dialog now that we're done with it.
     When I click on the "button.close" element
 
@@ -55,9 +51,8 @@ So that I can direct users directly to the relevant information
       And I press the "Insert link" HTML field button
       And I click "Anchor on a page" in the ".tox-menu" element
     Then I should see an "form#Form_editorAnchorLink" element
-      And I should see "Elemental" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-    When I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
-      And I click "another-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-    Then I should see "another-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
+      And I should see "Elemental" in the ".treedropdownfield__value-container" element
+    When I select "another-anchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
+    Then I should see "another-anchor" in the ".anchorselectorfield__value-container" element
     # Close the dialog now that we're done with it.
     When I click on the "button.close" element