DEP Update code to work with new dependencies

Upgrading webpack necessitated upgrading most dependencies, so there are
changes needed in the code, too.

Also remove the browser warning which is just super out of date at this
stage anyway.

client/src/boot/BootRoutes.js

@@ -4,18 +4,18 @@
 */
 import $ from 'jquery';
 import React from 'react';
-import { Provider } from 'react-redux';
-import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Prompt } from 'react-router-dom';
-import { renderRoutes } from 'react-router-config';
+import { Provider as ReduxProvider } from 'react-redux';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import Config from 'lib/Config';
 import pageRouter from 'lib/Router';
 import reactRouteRegister from 'lib/ReactRouteRegister';
 import App from 'containers/App/App';
-import { ApolloProvider } from 'react-apollo';
+import { ApolloProvider } from '@apollo/client'; // TODO If this doesn't work, checkout https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/#react-apollo
 import i18n from 'i18n';
 import { isDirty } from 'redux-form';
 import getFormState from 'lib/getFormState';
+import { Routes, Route } from 'react-router';
 
 /**
  * Bootstraps routes
@@ -106,23 +106,20 @@ class BootRoutes {
    * Initialise routing to use react-route powered routing
    */
   initReactRouter() {
-    reactRouteRegister.updateRootRoute({
-      component: App,
-    });
+    const routes = reactRouteRegister.getChildRoutes().map((route) => (
+      <Route key={route.path} path={route.path} element={<route.component />} />
+    ));
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementsByClassName('cms-content')[0]).render(
       <ApolloProvider client={this.client}>
-        <Provider store={this.store}>
-          <Router
-            basename={Config.get('baseUrl')}
-            getUserConfirmation={this.handleBeforeRoute}
-          >
-            <Prompt message={i18n._t('Admin.CONFIRMUNSAVEDSHORT', 'WARNING: Your changes have not been saved.')} />
-            {renderRoutes([reactRouteRegister.getRootRoute()])}
-          </Router>
-        </Provider>
-      </ApolloProvider>,
-      document.getElementsByClassName('cms-content')[0]
+        <ReduxProvider store={this.store}>
+          <BrowserRouter basename={`${Config.get('baseUrl')}${Config.get('adminUrl')}`}>
+            <Routes>
+              <Route path="/" element={<App />}>{routes}</Route>
+            </Routes>
+          </BrowserRouter>
+        </ReduxProvider>
+      </ApolloProvider>
     );
   }
 
@@ -185,10 +182,8 @@ class BootRoutes {
     // with an event handler is rendered, which means the page router will intercept
     // events that should be caught by react component event handlers.
     // Note that this empty link is rendered into an element that doesn't exist in the DOM.
-    ReactDOM.render(
-      <a role="none" onClick={() => {}} />,
-      document.createElement('div')
-    );
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    root.render(<a role="none" onClick={() => {}} />);
 
     // Start the page router
     pageRouter.start();

client/src/boot/apollo/buildCache.js

@@ -1,16 +1,20 @@
-import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
+import { InMemoryCache } from '@apollo/client/cache';
 import dataIdFromObject from './dataIdFromObject';
 
-const buildCache = (introspectionQueryResultData) => (
-  new InMemoryCache({
-    fragmentMatcher: introspectionQueryResultData
-      ? new IntrospectionFragmentMatcher({
-          introspectionQueryResultData,
-        })
-      : null,
+const buildCache = (introspectionQueryResultData) => {
+  const possibleTypes = {};
+  if (introspectionQueryResultData) {
+    introspectionQueryResultData.__schema.types.forEach(supertype => {
+      if (supertype.possibleTypes) {
+        possibleTypes[supertype.name] = supertype.possibleTypes.map(subtype => subtype.name);
+      }
+    });
+  }
+  return new InMemoryCache({
+    possibleTypes,
     dataIdFromObject,
     addTypename: true,
-  })
-);
+  });
+};
 
 export default buildCache;

client/src/boot/apollo/buildClient.js

@@ -1,11 +1,9 @@
-/* global window */
-import ApolloClient from 'apollo-client';
-import { withClientState } from 'apollo-link-state';
-import { from } from 'apollo-link';
+// import { withClientState } from '@apollo/client/link/state'; // probably doesn't work
+import { ApolloClient, from } from '@apollo/client';
+import Config from 'lib/Config';
 import getGraphqlFragments from './getGraphqlFragments';
 import buildNetworkComponents from './buildNetworkComponents';
 import buildCache from './buildCache';
-import Config from 'lib/Config';
 
 const buildClient = async (baseUrl) => {
     const graphQLConfig = Config.getSection('SilverStripe\\Admin\\LeftAndMain').graphql;
@@ -19,11 +17,7 @@ const buildClient = async (baseUrl) => {
     }
     const cache = buildCache(fragmentData);
     const components = buildNetworkComponents(baseUrl);
-    const stateLink = withClientState({
-      cache,
-      resolvers: {}
-    });
-    const link = from([stateLink, ...components]);
+    const link = from(components);
     return new ApolloClient({ cache, link });
 };
 

client/src/boot/apollo/buildNetworkComponents.js

@@ -1,6 +1,5 @@
-import { HttpLink } from 'apollo-link-http';
-import { onError } from 'apollo-link-error';
-import { ApolloLink } from 'apollo-link';
+import { ApolloLink, HttpLink } from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
 import Config from 'lib/Config';
 
 const buildNetworkComponents = (baseUrl) => {
@@ -24,7 +23,7 @@ const buildNetworkComponents = (baseUrl) => {
   const middlewareLink = new ApolloLink((operation, forward) => {
     operation.setContext({
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+        // 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         'X-CSRF-TOKEN': Config.get('SecurityID'),
       },
     });

client/src/boot/index.js

@@ -1,5 +1,4 @@
 /* global window */
-import BootRoutes from './BootRoutes';
 import Injector from 'lib/Injector';
 import { combineReducers, createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
@@ -10,6 +9,7 @@ import registerComponents from 'boot/registerComponents';
 import registerReducers from 'boot/registerReducers';
 import applyDevtools from 'boot/applyDevtools';
 import applyTransforms from 'boot/applyTransforms';
+import BootRoutes from './BootRoutes';
 
 window.ss = window.ss || {};
 

client/src/bundles/bundle.js

@@ -3,118 +3,116 @@
  import/no-extraneous-dependencies,
  import/no-unresolved
  */
+
 // Legacy translation handler
-require('i18n.js');
+import 'i18n.js';
 
 // Expose fields (see webpack config for matching "externals" config)
-require('expose-loader?SilverStripeComponent!lib/SilverStripeComponent');
-require('expose-loader?Backend!lib/Backend');
-require('expose-loader?schemaFieldValues!lib/schemaFieldValues');
-require('expose-loader?FormAlert!components/FormAlert/FormAlert');
-require('expose-loader?Injector!lib/Injector');
-require('expose-loader?reduxFieldReducer!lib/reduxFieldReducer');
-require('expose-loader?getFormState!lib/getFormState');
-require('expose-loader?PopoverField!components/PopoverField/PopoverField');
-require('expose-loader?FieldHolder!components/FieldHolder/FieldHolder');
-require('expose-loader?Form!components/Form/Form');
-require('expose-loader?FormConstants!components/Form/FormConstants');
-require('expose-loader?FormAction!components/FormAction/FormAction');
-require('expose-loader?SchemaActions!state/schema/SchemaActions');
-require('expose-loader?ToastsActions!state/toasts/ToastsActions');
-require('expose-loader?FileStatusIcon!components/FileStatusIcon/FileStatusIcon');
-require('expose-loader?FormBuilder!components/FormBuilder/FormBuilder');
-require('expose-loader?FormBuilderLoader!containers/FormBuilderLoader/FormBuilderLoader');
-require('expose-loader?FormBuilderModal!components/FormBuilderModal/FormBuilderModal');
-require('expose-loader?FileSchemaModalHandler!containers/InsertLinkModal/fileSchemaModalHandler');
-require('expose-loader?InsertLinkModal!containers/InsertLinkModal/InsertLinkModal');
-require('expose-loader?RecordsActions!state/records/RecordsActions');
-require('expose-loader?GridField!components/GridField/GridField');
-require('expose-loader?GridFieldCell!components/GridField/GridFieldCell');
-require('expose-loader?GridFieldHeader!components/GridField/GridFieldHeader');
-require('expose-loader?GridFieldHeaderCell!components/GridField/GridFieldHeaderCell');
-require('expose-loader?GridFieldRow!components/GridField/GridFieldRow');
-require('expose-loader?GridFieldTable!components/GridField/GridFieldTable');
-require('expose-loader?Accordion!components/Accordion/Accordion');
-require('expose-loader?AccordionBlock!components/Accordion/AccordionBlock');
-require('expose-loader?Button!components/Button/Button');
-require('expose-loader?BackButton!components/Button/BackButton');
-require('expose-loader?HiddenField!components/HiddenField/HiddenField');
-require('expose-loader?ListGroup!components/ListGroup/ListGroup');
-require('expose-loader?ListGroupItem!components/ListGroup/ListGroupItem');
-require('expose-loader?Loading!components/Loading/Loading');
-require('expose-loader?TextField!components/TextField/TextField');
-require('expose-loader?LiteralField!components/LiteralField/LiteralField');
-require('expose-loader?Toolbar!components/Toolbar/Toolbar');
-require('expose-loader?FileStatusIcon!components/FileStatusIcon/FileStatusIcon');
-require('expose-loader?Breadcrumb!components/Breadcrumb/Breadcrumb');
-require('expose-loader?ResizeAware!components/ResizeAware/ResizeAware');
-require('expose-loader?TabsActions!state/tabs/TabsActions');
-require('expose-loader?Tag!components/Tag/Tag');
-require('expose-loader?TagList!components/Tag/TagList');
-require('expose-loader?CompactTagList!components/Tag/CompactTagList');
-require('expose-loader?Tip!components/Tip/Tip');
-require('expose-loader?Search!components/Search/Search');
-require('expose-loader?SearchToggle!components/Search/SearchToggle');
-require('expose-loader?TreeDropdownFieldNode!components/TreeDropdownField/TreeDropdownFieldNode');
-require('expose-loader?TreeDropdownFieldMenu!components/TreeDropdownField/TreeDropdownFieldMenu');
-require('expose-loader?TreeDropdownField!components/TreeDropdownField/TreeDropdownField');
-require('expose-loader?BreadcrumbsActions!state/breadcrumbs/BreadcrumbsActions');
-require('expose-loader?RecordsActionTypes!state/records/RecordsActionTypes');
-require('expose-loader?UnsavedFormsActions!state/unsavedForms/UnsavedFormsActions');
-require('expose-loader?Badge!components/Badge/Badge');
-require('expose-loader?Button!components/Button/Button');
-require('expose-loader?BackButton!components/Button/BackButton');
-require('expose-loader?VersionedBadge!components/VersionedBadge/VersionedBadge');
-require('expose-loader?CheckboxSetField!components/CheckboxSetField/CheckboxSetField');
-require('expose-loader?Preview!components/Preview/Preview');
-require('expose-loader?ViewModeStates!state/viewMode/ViewModeStates');
-require('expose-loader?ViewModeActions!state/viewMode/ViewModeActions');
-require('expose-loader?ViewModeToggle!components/ViewModeToggle/ViewModeToggle');
-require('expose-loader?Focusedzone!components/Focusedzone/Focusedzone');
-require('expose-loader?Config!lib/Config');
-require('expose-loader?DataFormat!lib/DataFormat');
-require('expose-loader?ReactRouteRegister!lib/ReactRouteRegister');
-require('expose-loader?Router!lib/Router');
-require('expose-loader?TinyMCEActionRegistrar!lib/TinyMCEActionRegistrar');
-require('expose-loader?ShortcodeSerialiser!lib/ShortcodeSerialiser');
-require('expose-loader?formatWrittenNumber!lib/formatWrittenNumber');
-require('expose-loader?withDragDropContext!lib/withDragDropContext');
+import 'expose-loader?exposes=SilverStripeComponent!lib/SilverStripeComponent';
+import 'expose-loader?exposes=Backend!lib/Backend';
+import 'expose-loader?exposes=schemaFieldValues!lib/schemaFieldValues';
+import 'expose-loader?exposes=FormAlert!components/FormAlert/FormAlert';
+import 'expose-loader?exposes=Injector!lib/Injector';
+import 'expose-loader?exposes=reduxFieldReducer!lib/reduxFieldReducer';
+import 'expose-loader?exposes=getFormState!lib/getFormState';
+import 'expose-loader?exposes=PopoverField!components/PopoverField/PopoverField';
+import 'expose-loader?exposes=FieldHolder!components/FieldHolder/FieldHolder';
+import 'expose-loader?exposes=Form!components/Form/Form';
+import 'expose-loader?exposes=FormConstants!components/Form/FormConstants';
+import 'expose-loader?exposes=FormAction!components/FormAction/FormAction';
+import 'expose-loader?exposes=SchemaActions!state/schema/SchemaActions';
+import 'expose-loader?exposes=ToastsActions!state/toasts/ToastsActions';
+import 'expose-loader?exposes=FileStatusIcon!components/FileStatusIcon/FileStatusIcon';
+import 'expose-loader?exposes=FormBuilder!components/FormBuilder/FormBuilder';
+import 'expose-loader?exposes=FormBuilderLoader!containers/FormBuilderLoader/FormBuilderLoader';
+import 'expose-loader?exposes=FormBuilderModal!components/FormBuilderModal/FormBuilderModal';
+import 'expose-loader?exposes=FileSchemaModalHandler!containers/InsertLinkModal/fileSchemaModalHandler';
+import 'expose-loader?exposes=InsertLinkModal!containers/InsertLinkModal/InsertLinkModal';
+import 'expose-loader?exposes=RecordsActions!state/records/RecordsActions';
+import 'expose-loader?exposes=GridField!components/GridField/GridField';
+import 'expose-loader?exposes=GridFieldCell!components/GridField/GridFieldCell';
+import 'expose-loader?exposes=GridFieldHeader!components/GridField/GridFieldHeader';
+import 'expose-loader?exposes=GridFieldHeaderCell!components/GridField/GridFieldHeaderCell';
+import 'expose-loader?exposes=GridFieldRow!components/GridField/GridFieldRow';
+import 'expose-loader?exposes=GridFieldTable!components/GridField/GridFieldTable';
+import 'expose-loader?exposes=Accordion!components/Accordion/Accordion';
+import 'expose-loader?exposes=AccordionBlock!components/Accordion/AccordionBlock';
+import 'expose-loader?exposes=Button!components/Button/Button';
+import 'expose-loader?exposes=BackButton!components/Button/BackButton';
+import 'expose-loader?exposes=HiddenField!components/HiddenField/HiddenField';
+import 'expose-loader?exposes=ListGroup!components/ListGroup/ListGroup';
+import 'expose-loader?exposes=ListGroupItem!components/ListGroup/ListGroupItem';
+import 'expose-loader?exposes=Loading!components/Loading/Loading';
+import 'expose-loader?exposes=TextField!components/TextField/TextField';
+import 'expose-loader?exposes=LiteralField!components/LiteralField/LiteralField';
+import 'expose-loader?exposes=Toolbar!components/Toolbar/Toolbar';
+import 'expose-loader?exposes=Breadcrumb!components/Breadcrumb/Breadcrumb';
+import 'expose-loader?exposes=ResizeAware!components/ResizeAware/ResizeAware';
+import 'expose-loader?exposes=TabsActions!state/tabs/TabsActions';
+import 'expose-loader?exposes=Tag!components/Tag/Tag';
+import 'expose-loader?exposes=TagList!components/Tag/TagList';
+import 'expose-loader?exposes=CompactTagList!components/Tag/CompactTagList';
+import 'expose-loader?exposes=Tip!components/Tip/Tip';
+import 'expose-loader?exposes=Search!components/Search/Search';
+import 'expose-loader?exposes=SearchToggle!components/Search/SearchToggle';
+import 'expose-loader?exposes=TreeDropdownFieldNode!components/TreeDropdownField/TreeDropdownFieldNode';
+import 'expose-loader?exposes=TreeDropdownFieldMenu!components/TreeDropdownField/TreeDropdownFieldMenu';
+import 'expose-loader?exposes=TreeDropdownField!components/TreeDropdownField/TreeDropdownField';
+import 'expose-loader?exposes=BreadcrumbsActions!state/breadcrumbs/BreadcrumbsActions';
+import 'expose-loader?exposes=RecordsActionTypes!state/records/RecordsActionTypes';
+import 'expose-loader?exposes=UnsavedFormsActions!state/unsavedForms/UnsavedFormsActions';
+import 'expose-loader?exposes=Badge!components/Badge/Badge';
+import 'expose-loader?exposes=VersionedBadge!components/VersionedBadge/VersionedBadge';
+import 'expose-loader?exposes=CheckboxSetField!components/CheckboxSetField/CheckboxSetField';
+import 'expose-loader?exposes=Preview!components/Preview/Preview';
+import 'expose-loader?exposes=ViewModeStates!state/viewMode/ViewModeStates';
+import 'expose-loader?exposes=ViewModeActions!state/viewMode/ViewModeActions';
+import 'expose-loader?exposes=ViewModeToggle!components/ViewModeToggle/ViewModeToggle';
+import 'expose-loader?exposes=Focusedzone!components/Focusedzone/Focusedzone';
+import 'expose-loader?exposes=Config!lib/Config';
+import 'expose-loader?exposes=DataFormat!lib/DataFormat';
+import 'expose-loader?exposes=ReactRouteRegister!lib/ReactRouteRegister';
+import 'expose-loader?exposes=Router!lib/Router';
+import 'expose-loader?exposes=TinyMCEActionRegistrar!lib/TinyMCEActionRegistrar';
+import 'expose-loader?exposes=ShortcodeSerialiser!lib/ShortcodeSerialiser';
+import 'expose-loader?exposes=formatWrittenNumber!lib/formatWrittenNumber';
+import 'expose-loader?exposes=withDragDropContext!lib/withDragDropContext';
+import 'expose-loader?exposes=withRouter!lib/withRouter';
 
 // Legacy CMS
-require('../legacy/jquery.changetracker');
-require('../legacy/sspath');
-require('../legacy/ssui.core');
-require('../legacy/LeftAndMain');
-require('../legacy/LeftAndMain.ActionTabSet');
-require('../legacy/LeftAndMain.Panel');
-require('../legacy/LeftAndMain.Tree');
-require('../legacy/LeftAndMain.Content');
-require('../legacy/LeftAndMain.EditForm');
-require('../legacy/LeftAndMain.Menu');
-require('../legacy/LeftAndMain.MobileMenuToggle');
-require('../legacy/LeftAndMain.Preview');
-require('../legacy/LeftAndMain.BatchActions');
-require('../legacy/LeftAndMain.FieldHelp');
-require('../legacy/LeftAndMain.FieldDescriptionToggle');
-require('../legacy/LeftAndMain.TreeDropdownField');
-require('../legacy/AddToCampaignForm');
-require('../legacy/SecurityAdmin');
-require('../legacy/ModelAdmin');
-require('../legacy/ToastsContainer');
+import '../legacy/jquery.changetracker';
+import '../legacy/sspath';
+import '../legacy/ssui.core';
+import '../legacy/LeftAndMain';
+import '../legacy/LeftAndMain.ActionTabSet';
+import '../legacy/LeftAndMain.Panel';
+import '../legacy/LeftAndMain.Tree';
+import '../legacy/LeftAndMain.Content';
+import '../legacy/LeftAndMain.EditForm';
+import '../legacy/LeftAndMain.Menu';
+import '../legacy/LeftAndMain.MobileMenuToggle';
+import '../legacy/LeftAndMain.Preview';
+import '../legacy/LeftAndMain.BatchActions';
+import '../legacy/LeftAndMain.FieldHelp';
+import '../legacy/LeftAndMain.FieldDescriptionToggle';
+import '../legacy/LeftAndMain.TreeDropdownField';
+import '../legacy/AddToCampaignForm';
+import '../legacy/SecurityAdmin';
+import '../legacy/ModelAdmin';
+import '../legacy/ToastsContainer';
 
 // 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/ConfirmedPasswordField');
-require('../legacy/SelectionGroup');
-require('../legacy/DateField');
-require('../legacy/ToggleCompositeField');
-require('../legacy/TreeDropdownField/TreeDropdownFieldEntwine');
-require('../legacy/UsedOnTable/UsedOnTableEntwine');
-require('../legacy/DateField');
-require('../legacy/DatetimeField');
-require('../legacy/HtmlEditorField');
-require('../legacy/TabSet');
-require('../legacy/GridField');
+import '../legacy/ConfirmedPasswordField';
+import '../legacy/SelectionGroup';
+import '../legacy/DateField';
+import '../legacy/ToggleCompositeField';
+import '../legacy/TreeDropdownField/TreeDropdownFieldEntwine';
+import '../legacy/UsedOnTable/UsedOnTableEntwine';
+import '../legacy/DatetimeField';
+import '../legacy/HtmlEditorField';
+import '../legacy/TabSet';
+import '../legacy/GridField';
 
-require('boot');
+import 'boot';