From 09961fadaa8bb833480ede4e2ee28b36aed2778b Mon Sep 17 00:00:00 2001
From: Guy Sartorelli <guy.sartorelli@silverstripe.com>
Date: Tue, 8 Nov 2022 15:54:23 +1300
Subject: [PATCH] DEP Update code to work with upgraded libraries

---
 client/src/legacy/CMSMain.EditForm.js            |  2 +-
 client/src/legacy/CMSMain.Tree.js                |  2 +-
 client/src/legacy/TinyMCE_sslink-anchor.js       | 16 +++++++++++-----
 client/src/legacy/TinyMCE_sslink-internal.js     | 16 +++++++++++-----
 client/src/state/history/readOnePageQuery.js     |  2 +-
 .../state/history/revertToPageVersionMutation.js |  2 +-
 client/src/state/history/rollbackPageMutation.js |  2 +-
 7 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/client/src/legacy/CMSMain.EditForm.js b/client/src/legacy/CMSMain.EditForm.js
index 908f52caa5..76fdcd6592 100644
--- a/client/src/legacy/CMSMain.EditForm.js
+++ b/client/src/legacy/CMSMain.EditForm.js
@@ -3,7 +3,7 @@
  */
 import $ from 'jquery';
 import i18n from 'i18n';
-import reactConfirm from "@silverstripe/reactstrap-confirm";
+import reactConfirm from 'reactstrap-confirm';
 
 $.entwine('ss', function($){
 	/**
diff --git a/client/src/legacy/CMSMain.Tree.js b/client/src/legacy/CMSMain.Tree.js
index fcd458814b..3f3d95678f 100644
--- a/client/src/legacy/CMSMain.Tree.js
+++ b/client/src/legacy/CMSMain.Tree.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import i18n from 'i18n';
-import reactConfirm from "@silverstripe/reactstrap-confirm";
+import reactConfirm from 'reactstrap-confirm';
 
 $.entwine('ss.tree', function($) {
   $('.cms-tree').entwine({
diff --git a/client/src/legacy/TinyMCE_sslink-anchor.js b/client/src/legacy/TinyMCE_sslink-anchor.js
index 4d12fed509..7ade0bc992 100644
--- a/client/src/legacy/TinyMCE_sslink-anchor.js
+++ b/client/src/legacy/TinyMCE_sslink-anchor.js
@@ -2,8 +2,8 @@
 import i18n from 'i18n';
 import TinyMCEActionRegistrar from 'lib/TinyMCEActionRegistrar';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { ApolloProvider } from 'react-apollo';
+import { createRoot } from 'react-dom/client';
+import { ApolloProvider } from '@apollo/client';
 import { Provider } from 'react-redux';
 import jQuery from 'jquery';
 import ShortcodeSerialiser from 'lib/ShortcodeSerialiser';
@@ -68,6 +68,8 @@ jQuery.entwine('ss', ($) => {
    * Assumes that $('.insert-link__dialog-wrapper').entwine({}); is defined for shared functions
    */
   $(`#${modalId}`).entwine({
+    ReactRoot: null,
+
     renderModal(isOpen) {
       const store = ss.store;
       const client = ss.apolloClient;
@@ -82,7 +84,12 @@ jQuery.entwine('ss', ($) => {
       const currentPageID = Number($('#Form_EditForm_ID').val() || 0);
 
       // create/update the react component
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(
         <ApolloProvider client={client}>
           <Provider store={store}>
             <InsertLinkInternalModal
@@ -98,8 +105,7 @@ jQuery.entwine('ss', ($) => {
               currentPageID={currentPageID}
             />
           </Provider>
-        </ApolloProvider>,
-        this[0]
+        </ApolloProvider>
       );
     },
 
diff --git a/client/src/legacy/TinyMCE_sslink-internal.js b/client/src/legacy/TinyMCE_sslink-internal.js
index be1b636212..83aaa57c60 100644
--- a/client/src/legacy/TinyMCE_sslink-internal.js
+++ b/client/src/legacy/TinyMCE_sslink-internal.js
@@ -2,8 +2,8 @@
 import i18n from 'i18n';
 import TinyMCEActionRegistrar from 'lib/TinyMCEActionRegistrar';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { ApolloProvider } from 'react-apollo';
+import { createRoot } from 'react-dom/client';
+import { ApolloProvider } from '@apollo/client';
 import { Provider } from 'react-redux';
 import jQuery from 'jquery';
 import ShortcodeSerialiser from 'lib/ShortcodeSerialiser';
@@ -60,6 +60,8 @@ jQuery.entwine('ss', ($) => {
    * Assumes that $('.insert-link__dialog-wrapper').entwine({}); is defined for shared functions
    */
   $(`#${modalId}`).entwine({
+    ReactRoot: null,
+
     renderModal(isOpen) {
       const store = ss.store;
       const client = ss.apolloClient;
@@ -69,7 +71,12 @@ jQuery.entwine('ss', ($) => {
       const requireLinkText = this.getRequireLinkText();
 
       // create/update the react component
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(
         <ApolloProvider client={client}>
           <Provider store={store}>
             <InsertLinkInternalModal
@@ -84,8 +91,7 @@ jQuery.entwine('ss', ($) => {
               requireLinkText={requireLinkText}
             />
           </Provider>
-        </ApolloProvider>,
-        this[0]
+        </ApolloProvider>
       );
     },
 
diff --git a/client/src/state/history/readOnePageQuery.js b/client/src/state/history/readOnePageQuery.js
index 4c10c7c839..1840398226 100644
--- a/client/src/state/history/readOnePageQuery.js
+++ b/client/src/state/history/readOnePageQuery.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 page. The
diff --git a/client/src/state/history/revertToPageVersionMutation.js b/client/src/state/history/revertToPageVersionMutation.js
index d0553d7c64..f11466c523 100644
--- a/client/src/state/history/revertToPageVersionMutation.js
+++ b/client/src/state/history/revertToPageVersionMutation.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`
diff --git a/client/src/state/history/rollbackPageMutation.js b/client/src/state/history/rollbackPageMutation.js
index 0867924dd4..69d92eb983 100644
--- a/client/src/state/history/rollbackPageMutation.js
+++ b/client/src/state/history/rollbackPageMutation.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`