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

@@ -5,14 +5,14 @@
 import $ from 'jquery';
 import React from 'react';
 import { Provider } from 'react-redux';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Prompt } from 'react-router-dom';
-import { renderRoutes } from 'react-router-config';
+import renderReactRoutes from 'lib/renderReactRoutes';
 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';
@@ -110,19 +110,19 @@ class BootRoutes {
       component: App,
     });
 
-    ReactDOM.render(
+    const reactRoot = createRoot(document.getElementsByClassName('cms-content')[0]);
+    reactRoot.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()])}
+            {renderReactRoutes([reactRouteRegister.getRootRoute()])}
           </Router>
         </Provider>
-      </ApolloProvider>,
-      document.getElementsByClassName('cms-content')[0]
+      </ApolloProvider>
     );
   }
 
@@ -185,10 +185,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 = 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) => {

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';