From 71ab70c6d5b9a0f2a9738f9274a65c92069e0312 Mon Sep 17 00:00:00 2001
From: Joseph Ryan IV <joseph.ryan.iv@gmail.com>
Date: Sun, 16 Mar 2025 20:14:02 -0700
Subject: [PATCH 1/3] Refactor UNSAFE components

UNSAFE_componentWillReceiveProps is a deprecated lifecycle method in React 16.3+ and has been removed in Strict Mode and React 18+
---
 src/core/components/content-type.jsx       | 46 ++++++++++++++--------
 src/core/containers/OperationContainer.jsx | 12 +++---
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/core/components/content-type.jsx b/src/core/components/content-type.jsx
index 45b63a25907..17211eb22a2 100644
--- a/src/core/components/content-type.jsx
+++ b/src/core/components/content-type.jsx
@@ -6,7 +6,6 @@ import { fromJS } from "immutable"
 const noop = ()=>{}
 
 export default class ContentType extends React.Component {
-
   static propTypes = {
     ariaControls: PropTypes.string,
     contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
@@ -24,38 +23,51 @@ export default class ContentType extends React.Component {
   }
 
   componentDidMount() {
-    // Needed to populate the form, initially
-    if(this.props.contentTypes) {
-      this.props.onChange(this.props.contentTypes.first())
+    // Populate the form initially
+    const { contentTypes, onChange } = this.props
+    if (contentTypes && contentTypes.size) {
+      onChange(contentTypes.first())
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if(!nextProps.contentTypes || !nextProps.contentTypes.size) {
+  componentDidUpdate(prevProps) {
+    const { contentTypes, value, onChange } = this.props
+
+    if (!contentTypes || !contentTypes.size) {
       return
     }
 
-    if(!nextProps.contentTypes.includes(nextProps.value)) {
-      nextProps.onChange(nextProps.contentTypes.first())
+    if (contentTypes !== prevProps.contentTypes || !contentTypes.includes(value)) {
+      onChange(contentTypes.first())
     }
   }
 
-  onChangeWrapper = e => this.props.onChange(e.target.value)
+  onChangeWrapper = (e) => this.props.onChange(e.target.value)
 
   render() {
-    let { ariaControls, ariaLabel, className, contentTypes, controlId, value } = this.props
+    const { ariaControls, ariaLabel, className, contentTypes, controlId, value } = this.props
 
-    if ( !contentTypes || !contentTypes.size )
+    if (!contentTypes || !contentTypes.size) 
       return null
 
     return (
-      <div className={ "content-type-wrapper " + ( className || "" ) }>
-        <select aria-controls={ariaControls} aria-label={ariaLabel} className="content-type" id={controlId} onChange={this.onChangeWrapper} value={value || ""} >
-          { contentTypes.map( (val) => {
-            return <option key={ val } value={ val }>{ val }</option>
-          }).toArray()}
+      <div className={`content-type-wrapper ${className || ""}`}>
+        <select 
+          aria-controls={ariaControls} 
+          aria-label={ariaLabel} 
+          className="content-type" 
+          id={controlId} 
+          onChange={this.onChangeWrapper} 
+          value={value || ""}
+        >
+          {contentTypes.map((val) => (
+            <option key={ val } value={ val }>
+              { val }
+            </option>
+          )).toArray()}
         </select>
       </div>
     )
   }
-}
+  
+}
\ No newline at end of file
diff --git a/src/core/containers/OperationContainer.jsx b/src/core/containers/OperationContainer.jsx
index 6efd7dfc2fb..5802176b0d8 100644
--- a/src/core/containers/OperationContainer.jsx
+++ b/src/core/containers/OperationContainer.jsx
@@ -90,15 +90,15 @@ export default class OperationContainer extends PureComponent {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { response, isShown } = nextProps
+  componentDidUpdate(prevProps) {
+    const { response, isShown } = this.props
     const resolvedSubtree = this.getResolvedSubtree()
-
-    if(response !== this.props.response) {
+  
+    if (response !== prevProps.response) {
       this.setState({ executeInProgress: false })
     }
-
-    if(isShown && resolvedSubtree === undefined) {
+  
+    if (isShown && resolvedSubtree === undefined && !prevProps.isShown) {
       this.requestResolvedSubtree()
     }
   }

From 0181ac007ff536e618d4d76851cf1c429e42a429 Mon Sep 17 00:00:00 2001
From: Joseph Ryan IV <joseph.ryan.iv@gmail.com>
Date: Sun, 16 Mar 2025 20:24:00 -0700
Subject: [PATCH 2/3] Fix reactDOM import error

Fix reactDOM inmport error:
Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
---
 src/core/plugins/view/root-injects.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/plugins/view/root-injects.jsx b/src/core/plugins/view/root-injects.jsx
index 96a130d56fd..a833c4e6c7d 100644
--- a/src/core/plugins/view/root-injects.jsx
+++ b/src/core/plugins/view/root-injects.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import ReactDOM from "react-dom"
+import ReactDOM from "react-dom/client"
 import { compose } from "redux"
 import { connect, Provider } from "react-redux"
 import omit from "lodash/omit"

From 2c68d82e9029e62116f2a641d7fa0f886920fc0f Mon Sep 17 00:00:00 2001
From: Joseph Ryan IV <joseph.ryan.iv@gmail.com>
Date: Fri, 25 Apr 2025 15:08:26 -0700
Subject: [PATCH 3/3] Revert change

Addressing the ReactDOM warning would lead to the loss of support for React 16 and 17, given that the client API was introduced in React 18
---
 src/core/plugins/view/root-injects.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/plugins/view/root-injects.jsx b/src/core/plugins/view/root-injects.jsx
index a833c4e6c7d..96a130d56fd 100644
--- a/src/core/plugins/view/root-injects.jsx
+++ b/src/core/plugins/view/root-injects.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import ReactDOM from "react-dom/client"
+import ReactDOM from "react-dom"
 import { compose } from "redux"
 import { connect, Provider } from "react-redux"
 import omit from "lodash/omit"