#1995 deprecation findDOMNode in React.StrictMode prevents edit (#1996)

Signed-off-by: CTomlyn <[email protected]>
elyra-ai · May 29, 2024 · f7c9184 · f7c9184
1 parent 1a3d88e
commit f7c9184
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx
@@ -70,6 +70,9 @@ class CanvasContents extends React.Component {
 		this.dragX = null;
 		this.dragY = null;
 
+		// Reference for the contents <div>
+		this.contentsRef = React.createRef();
+
 		// Record whether we added the event listeners or not.
 		this.eventListenersAdded = false;
 
@@ -575,9 +578,10 @@ class CanvasContents extends React.Component {
 
 		return (
 			<main aria-label={this.getLabel("canvas.label")} role="main">
-				<ReactResizeDetector handleWidth handleHeight onResize={this.refreshOnSizeChange}>
+				<ReactResizeDetector handleWidth handleHeight onResize={this.refreshOnSizeChange} targetRef={this.contentsRef}>
 					<div
 						id={this.mainCanvasDivId}
+						ref={this.contentsRef}
 						className="common-canvas-drop-div"
 						onDrop={this.drop}
 						onDragOver={this.dragOver}

diff --git a/..._modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx b/..._modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx
@@ -53,6 +53,8 @@ class FlexibleTable extends React.Component {
 		this.rowHeight = this.rowHeight.bind(this);
 		this.rowGetter = this.rowGetter.bind(this);
 
+		this.tableRef = React.createRef();
+
 		this.getOriginalRowIndex = this.getOriginalRowIndex.bind(this);
 		this.getLastChildPropertyIdRow = this.getLastChildPropertyIdRow.bind(this);
 
@@ -557,8 +559,11 @@ class FlexibleTable extends React.Component {
 			<div data-id={"properties-ft-" + this.props.scrollKey} className={ftClassname} ref={ (ref) => (this.flexibleTable = ref) }>
 				{ftHeader}
 				<div className="properties-ft-container-panel">
-					<ReactResizeDetector handleWidth onResize={this._updateTableWidth}>
-						<div className={classNames("properties-ft-container-wrapper", this.props.messageInfo ? this.props.messageInfo.type : "")} style={ heightStyle }>
+					<ReactResizeDetector handleWidth onResize={this._updateTableWidth} targetRef={this.tableRef}>
+						<div className={classNames("properties-ft-container-wrapper", this.props.messageInfo ? this.props.messageInfo.type : "")}
+							style={ heightStyle }
+							ref={this.tableRef}
+						>
 							<div className={messageClass}>
 								<VirtualizedTable
 									tableLabel={this.props.tableLabel}

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar.jsx
@@ -526,7 +526,7 @@ class Toolbar extends React.Component {
 		const tabIndex = this.state.focusAction === "toolbar" ? 0 : -1;
 
 		const canvasToolbar = (
-			<ReactResizeDetector handleWidth onResize={this.onToolbarResize}>
+			<ReactResizeDetector handleWidth onResize={this.onToolbarResize} targetRef={this.toolbarRef}>
 				<div ref={this.toolbarRef} className={toolbarSizeClass} instanceid={this.props.instanceId}
 					tabIndex={tabIndex} onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown}
 				>

diff --git a/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx b/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx
@@ -126,8 +126,8 @@ export default class SidePanelForms extends React.Component {
 		this.tipConfigChange = this.tipConfigChange.bind(this);
 		this.onDragStart = this.onDragStart.bind(this);
 	}
-	// should be changed to componentDidMount but causes FVT tests to fail
-	UNSAFE_componentWillMount() { // eslint-disable-line camelcase, react/sort-comp
+
+	componentDidMount() { // eslint-disable-line camelcase, react/sort-comp
 		const that = this;
 
 		FormsService.getFiles("diagrams")

diff --git a/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties.jsx b/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties.jsx
@@ -118,8 +118,8 @@ export default class SidePanelProperties extends React.Component {
 			applyPropertyChanges: this.applyPropertyChanges
 		};
 	}
-	// should be changed to componentDidMount but causes FVT tests to fail
-	UNSAFE_componentWillMount() { // eslint-disable-line camelcase, react/sort-comp
+
+	componentDidMount() { // eslint-disable-line camelcase, react/sort-comp
 		const that = this;
 		FormsService.getFiles(FORMS)
 			.then(function(res) {