#1927 Fixed Checkbox error/warning message showing incorrectly (#1928)

elyra-ai · May 7, 2024 · 05c424b · 05c424b
1 parent eb3dff5
commit 05c424b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 17 deletions.
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js
@@ -154,7 +154,7 @@ describe("checkbox control tests", () => {
 				propertyId={propertyId}
 			/>
 		);
-		const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkbox']");
+		const checkboxWrapper = wrapper.find("div[data-id='properties-test-checkbox'] > div");
 		expect(checkboxWrapper.hasClass("hide")).to.equal(true);
 	});
 	it("checkbox renders correctly in a table", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/structuretable-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/structuretable-test.js
@@ -542,7 +542,7 @@ describe("condition renders correctly with structure table control", () => {
 		propertyUtils.openSummaryPanel(wrapper, "dummy_types-summary-panel");
 
 		// verify the table is HIDDEN
-		const cellControlDiv = wrapper.find("div[data-id='properties-dummy_types_0_4']");
+		const cellControlDiv = wrapper.find("div[data-id='properties-dummy_types_0_4']").find(".properties-checkbox");
 		expect(cellControlDiv.hasClass("hide")).to.be.true;
 		expect(renderedController.getControlState({ name: "dummy_types", row: 0, col: 4 })).to.equal("hidden");
 	});

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx b/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx
@@ -69,18 +69,18 @@ class CheckboxControl extends React.Component {
 			</span>
 		);
 		return (
-			<div className={classNames("properties-checkbox", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null)}
-				data-id={ControlUtils.getDataId(this.props.propertyId)}
-			>
-				<Checkbox
-					disabled={this.props.state === STATES.DISABLED}
-					id={this.id}
-					labelText={checkboxLabel}
-					onChange={this.handleChange.bind(this)}
-					checked={Boolean(this.props.value)}
-					hideLabel={this.props.tableControl}
-				/>
-				{tooltipIcon}
+			<div data-id={ControlUtils.getDataId(this.props.propertyId)}>
+				<div className={classNames("properties-checkbox", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null)}>
+					<Checkbox
+						disabled={this.props.state === STATES.DISABLED}
+						id={this.id}
+						labelText={checkboxLabel}
+						onChange={this.handleChange.bind(this)}
+						checked={Boolean(this.props.value)}
+						hideLabel={this.props.tableControl}
+					/>
+					{tooltipIcon}
+				</div>
 				<ValidationMessage inTable={this.props.tableControl} state={this.props.state} messageInfo={this.props.controller.getErrorMessage(this.props.propertyId)} />
 			</div>
 		);

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.scss b/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.scss
@@ -27,9 +27,6 @@
 	.bx--form-item.bx--checkbox-wrapper {
 		flex: initial; // override carbon style to show tooltipIcon next to checkbox label
 	}
-	.properties-validation-message {
-		flex: 0 1 100%;
-	}
 	&.hide {
 		display: none;
 	}