Merge remote-tracking branch 'origin/1635-radio-group-radioset' into …

…1635-radio-group-radioset
veenas1 · Apr 18, 2024 · 7cf79c6 · 7cf79c6
2 parents 87da2b1 + da34fde
commit 7cf79c6
Show file tree

Hide file tree

Showing 19 changed files with 291 additions and 306 deletions.
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js
@@ -163,22 +163,6 @@ describe("datefield-control renders correctly", () => {
 		expect(input.getDOMNode().placeholder).to.equal(control.additionalText);
 	});
 
-	it("should render `DatefieldControl` with light mode enabled", () => {
-		controller.setLight(true);
-		const wrapper = mount(
-			<DatefieldControl
-				store={controller.getStore()}
-				control={control}
-				controller={controller}
-				propertyId={propertyId}
-				controlItem={controlItem}
-			/>
-		);
-		const dateWrapper = wrapper.find("div[data-id='properties-test-datefield']");
-		expect(dateWrapper.find(".cds--layer-two")).to.have.length(1); // light enabled
-		expect(dateWrapper.find(".cds--layer-one")).to.have.length(0); // light disabled
-	});
-
 	it("should render `DatefieldControl` with light mode disabled", () => {
 		controller.setLight(false);
 		const wrapper = mount(
@@ -341,6 +325,12 @@ describe("error messages renders correctly for datefield controls", () => {
 		dateWrapper = wrapper.find("div[data-id='properties-disabled_date']");
 		expect(dateWrapper.find("input").prop("disabled")).to.equal(false);
 	});
+
+	it("should render `DatefieldControl` with light mode enabled", () => {
+		const dateWrapper = wrapper.find("div[data-id='properties-ctrl-date_mdy']");
+		expect(dateWrapper.find(".cds--layer-two")).to.have.length(1); // light enabled
+		expect(dateWrapper.find(".cds--layer-one")).to.have.length(0); // light disabled
+	});
 });
 
 describe("datefield classnames appear correctly", () => {

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js
@@ -1765,7 +1765,15 @@ export default class SVGCanvasRenderer {
 	}
 
 	removeNodes(removeSel) {
-		// Remove any foreign objects for react nodes, if necessary.
+		// Remove any JSX decorations for the nodes being removed to
+		// unmount their React objects.
+		removeSel
+			.selectAll(".d3-foreign-object-dec-jsx")
+			.each((d, idx, exts) =>
+				this.externalUtils.removeExternalObject(d, idx, exts));
+
+		// Remove any foreign objects for React nodes to
+		// unmount their React objects.
 		removeSel
 			.selectChildren(".d3-foreign-object-external-node")
 			.each((d, idx, exts) =>

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-external.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-external.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Elyra Authors
+ * Copyright 2023-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,28 +25,39 @@ export default class SvgCanvasExternal {
 	}
 
 	addNodeExternalObject(node, i, foreignObjects) {
-		const container = foreignObjects[i];
-		const root = createRoot(container);
-
-		root.render(
+		const jsx = (
 			<node.layout.nodeExternalObject
 				nodeData={node}
 				canvasController={this.ren.canvasController}
 				externalUtils={this}
 			/>
 		);
+		this.renderExternalObject(jsx, foreignObjects[i]);
 	}
 
 	addDecExternalObject(dec, i, foreignObjects) {
-		const container = foreignObjects[i];
-		const root = createRoot(container);
-		root.render(dec.jsx);
+		this.renderExternalObject(dec.jsx, foreignObjects[i]);
+	}
+
+	renderExternalObject(jsx, container) {
+		if (!container.root) {
+			container.root = createRoot(container);
+		}
+		container.root.render(jsx);
 	}
 
 	removeExternalObject(obj, i, foreignObjects) {
 		const container = foreignObjects[i];
-		const root = createRoot(container);
-		root.unmount();
+		if (!container.root) {
+			container.root = createRoot(container);
+		}
+		// Unmount in Timeout to stop this warning from appearing:
+		// "Warning: Attempted to synchronously unmount a root while
+		// React was already rendering."
+		setTimeout(() => {
+			container.root.unmount();
+			container.root = null;
+		});
 	}
 
 	getActiveNodes() {

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/control-factory.js b/canvas_modules/common-canvas/src/common-properties/controls/control-factory.js
@@ -23,6 +23,7 @@ import { PropertyDef } from "./../form/PropertyDef";
 import { makeControl } from "./../form/EditorForm";
 import { L10nProvider } from "./../util/L10nProvider";
 import * as ControlUtils from "./../util/control-utils";
+import { Layer } from "@carbon/react";
 
 import TextfieldControl from "./textfield";
 import ReadonlyControl from "./readonly";
@@ -346,6 +347,12 @@ export default class ControlFactory {
 			createdControl = (<ReadonlyControl {...props} />);
 		}
 
+		const createdControlLayered = (
+			<Layer level={this.controller.getLight() && control.light ? 1 : 0} className="properties-control-layer">
+				{createdControl}
+			</Layer>
+		);
+
 		/*
 		* <ControlItem /> should be called from every control.
 		* Adding this temporary condition so that we can change one control at a time.
@@ -366,12 +373,12 @@ export default class ControlFactory {
 						className
 					)}
 				>
-					{createdControl}
+					{createdControlLayered}
 					{action}
 				</div>
 			);
 		}
-		return createdControl;
+		return createdControlLayered;
 	}
 
 	/**

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx
@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { TextInput, Layer } from "@carbon/react";
+import { TextInput } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { parse, format, isValid } from "date-fns";
@@ -73,19 +73,17 @@ class DatefieldControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<TextInput
-						{...validationProps}
-						autoComplete="off"
-						id={this.id}
-						disabled={this.props.state === STATES.DISABLED}
-						placeholder={this.props.control.additionalText}
-						onChange={this.handleChange.bind(this)}
-						value={this.value}
-						labelText={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-					/>
-				</Layer>
+				<TextInput
+					{...validationProps}
+					autoComplete="off"
+					id={this.id}
+					disabled={this.props.state === STATES.DISABLED}
+					placeholder={this.props.control.additionalText}
+					onChange={this.handleChange.bind(this)}
+					value={this.value}
+					labelText={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);

diff --git a/...odules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx b/...odules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx
@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { DatePicker, DatePickerInput, Layer } from "@carbon/react";
+import { DatePicker, DatePickerInput } from "@carbon/react";
 import classNames from "classnames";
 import { v4 as uuid4 } from "uuid";
 
@@ -135,40 +135,38 @@ class DatepickerRangeControl extends React.Component {
 
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<DatePicker
-						datePickerType={DATEPICKER_TYPE.RANGE}
-						dateFormat={this.dateFormat}
-						onChange={this.handleDateRangeChange.bind(this)}
-						locale={this.locale}
-						allowInput
-					>
-						<DatePickerInput
-							{...validationProps}
-							id={`${this.id}-start`}
-							placeholder={this.props.control.additionalText}
-							labelText={!this.props.tableControl && startLabel}
-							disabled={this.props.state === STATES.DISABLED}
-							size={this.getDatepickerSize()}
-							onChange={this.handleInputStartChange.bind(this)}
-							value={this.state.valueStart}
-							onBlur={this.onStartBlur.bind(this)}
-							helperText={!this.props.tableControl && startHelperText}
-						/>
-						<DatePickerInput
-							{...validationProps}
-							id={`${this.id}-end`}
-							placeholder={this.props.control.additionalText}
-							labelText={!this.props.tableControl && endLabel}
-							disabled={this.props.state === STATES.DISABLED}
-							size={this.getDatepickerSize()}
-							onChange={this.handleInputEndChange.bind(this)}
-							value={this.state.valueEnd}
-							onBlur={this.onEndBlur.bind(this)}
-							helperText={!this.props.tableControl && endHelperText}
-						/>
-					</DatePicker>
-				</Layer>
+				<DatePicker
+					datePickerType={DATEPICKER_TYPE.RANGE}
+					dateFormat={this.dateFormat}
+					onChange={this.handleDateRangeChange.bind(this)}
+					locale={this.locale}
+					allowInput
+				>
+					<DatePickerInput
+						{...validationProps}
+						id={`${this.id}-start`}
+						placeholder={this.props.control.additionalText}
+						labelText={!this.props.tableControl && startLabel}
+						disabled={this.props.state === STATES.DISABLED}
+						size={this.getDatepickerSize()}
+						onChange={this.handleInputStartChange.bind(this)}
+						value={this.state.valueStart}
+						onBlur={this.onStartBlur.bind(this)}
+						helperText={!this.props.tableControl && startHelperText}
+					/>
+					<DatePickerInput
+						{...validationProps}
+						id={`${this.id}-end`}
+						placeholder={this.props.control.additionalText}
+						labelText={!this.props.tableControl && endLabel}
+						disabled={this.props.state === STATES.DISABLED}
+						size={this.getDatepickerSize()}
+						onChange={this.handleInputEndChange.bind(this)}
+						value={this.state.valueEnd}
+						onBlur={this.onEndBlur.bind(this)}
+						helperText={!this.props.tableControl && endHelperText}
+					/>
+				</DatePicker>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx
@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { DatePicker, DatePickerInput, Layer } from "@carbon/react";
+import { DatePicker, DatePickerInput } from "@carbon/react";
 import classNames from "classnames";
 
 import ValidationMessage from "../../components/validation-message";
@@ -71,28 +71,26 @@ class DatepickerControl extends React.Component {
 
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<DatePicker
-						className="properties-datepicker-wrapper-parent"
-						datePickerType={DATEPICKER_TYPE.SINGLE}
-						dateFormat={this.dateFormat}
-						onChange={this.handleChange.bind(this)}
-						locale={this.locale}
-					>
-						<DatePickerInput
-							{...validationProps}
-							id={this.id}
-							className="properties-datepicker-wrapper-input"
-							placeholder={this.props.control.additionalText}
-							labelText={!this.props.tableControl && this.props.controlItem}
-							disabled={this.props.state === STATES.DISABLED}
-							size={this.getDatepickerSize()}
-							onChange={this.handleInputChange.bind(this)}
-							value={this.state.value}
-							helperText={!this.props.tableControl && helperText}
-						/>
-					</DatePicker>
-				</Layer>
+				<DatePicker
+					className="properties-datepicker-wrapper-parent"
+					datePickerType={DATEPICKER_TYPE.SINGLE}
+					dateFormat={this.dateFormat}
+					onChange={this.handleChange.bind(this)}
+					locale={this.locale}
+				>
+					<DatePickerInput
+						{...validationProps}
+						id={this.id}
+						className="properties-datepicker-wrapper-input"
+						placeholder={this.props.control.additionalText}
+						labelText={!this.props.tableControl && this.props.controlItem}
+						disabled={this.props.state === STATES.DISABLED}
+						size={this.getDatepickerSize()}
+						onChange={this.handleInputChange.bind(this)}
+						value={this.state.value}
+						helperText={!this.props.tableControl && helperText}
+					/>
+				</DatePicker>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);