#2012 Add support for helperText in all Common Properties controls. (#…

…2013) Signed-off-by: srikant <[email protected]>
elyra-ai · Jun 14, 2024 · d5e3b30 · d5e3b30
1 parent 25ed4e5
commit d5e3b30
Show file tree

Hide file tree

Showing 41 changed files with 558 additions and 316 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
@@ -199,6 +199,22 @@ describe("checkbox control tests", () => {
 		const messageWrapper = checkboxWrapper.find("div.properties-validation-message");
 		expect(messageWrapper).to.have.length(1);
 	});
+	it("Checkbox helperText is rendered correctly", () => {
+		control.helperText = "Checkbox helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<Checkbox
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-checkbox']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("checkbox classnames appear correctly", () => {

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
@@ -22,6 +22,7 @@ import { mount } from "../../_utils_/mount-utils.js";
 import { expect } from "chai";
 import Controller from "../../../src/common-properties/properties-controller";
 import datefieldParamDef from "../../test_resources/paramDefs/datefield_paramDef.json";
+import DateField from "../../../src/common-properties/controls/datefield";
 
 const DATEFIELD_PARAM_DEF = require("../../test_resources/paramDefs/datefield_paramDef.json");
 
@@ -177,6 +178,22 @@ describe("datefield-control renders correctly", () => {
 		const dateWrapper = wrapper.find("div[data-id='properties-test-datefield']");
 		expect(dateWrapper.find(".cds--text-input--light")).to.have.length(0);
 	});
+	it("Datefield helperText is rendered correctly", () => {
+		control.helperText = "Datefield helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<DateField
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-datefield']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("error messages renders correctly for datefield controls", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js
@@ -103,6 +103,24 @@ describe("datepicker-control renders correctly", () => {
 		expect(input.prop("value")).to.equal("10-29-2023");
 	});
 
+	it("should have helperText rendered correctly in `DatepickerControl`", () => {
+		control.helperText = "Datepicker helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<DatepickerControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				controlItem={controlItem}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-datepicker']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
+
 	it("should allow a valid date to be updated in `DatepickerControl`", () => {
 		const wrapper = mount(
 			<DatepickerControl

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js
@@ -216,6 +216,23 @@ describe("multiselect renders correctly", () => {
 		const messageWrapper = multiselectWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 	});
+
+	it("MultiSelectControl helperText is rendered correctly", () => {
+		control.helperText = "MultiSelectControl helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<MultiSelectControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-multiselect']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("multiselect paramDef works correctly", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js
@@ -144,6 +144,23 @@ describe("numberfield-control renders correctly", () => {
 		const messageWrapper = textWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 	});
+
+	it("NumberfieldControl helperText is rendered correctly", () => {
+		control.helperText = "NumberfieldControl helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<NumberfieldControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-number']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("numberfield control works correctly", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js
@@ -218,6 +218,22 @@ describe("oneofselect renders correctly", () => {
 		const messageWrapper = dropdownWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 	});
+	it("oneofselect helperText is rendered correctly", () => {
+		control.helperText = "Oneofselect helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<OneofselectControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-oneofselect']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("oneofselect paramDef works correctly", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js
@@ -200,6 +200,23 @@ describe("Passwordfield renders correctly", () => {
 		eyeIcon.simulate("click");
 		expect(passwordWrapper.find(`span[id='${eyeIconAriaLabelledBy}']`).text()).to.equal(control.tooltip.defaultHide);
 	});
+
+	it("Passwordfield helperText is rendered correctly", () => {
+		control.helperText = "Passwordfield helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<Passwordfield
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-password']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("passwordfield classnames appear correctly", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js
@@ -52,6 +52,11 @@ describe("radio renders and works correctly with different enum types", () => {
 		expect(renderedController.getPropertyValue({ name: "radioString" })).to.equal("gini");
 	});
 
+	it("radioset control with string enum helper text is visible", () => {
+		const controlDiv = wrapper.find("div[data-id='properties-ci-radioString']");
+		expect(controlDiv.find("div.cds--form__helper-text").text()).to.equal("RadioSet with enum string type");
+	});
+
 	it("radioset control with boolean enum", () => {
 		const controlDiv = wrapper.find("div[data-id='properties-ci-radioBooleanWithEnum']");
 		const label = controlDiv.find("label.properties-control-label");

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js
@@ -198,6 +198,22 @@ describe("selectcolumn control renders correctly", () => {
 		dropdownList.at(0).simulate("click");
 		expect(controller.getPropertyValue(propertyId)).to.equal("");
 	});
+	it("SelectColumn helperText is rendered correctly", () => {
+		control.helperText = "SelectColumn helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<SelectColumn
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-targetField']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("selectcolumn control renders correctly with paramDef", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js
@@ -300,6 +300,21 @@ describe("textarea control renders correctly", () => {
 		const validationMsg = textWrapper.find("div.cds--form-requirement");
 		expect(validationMsg).to.have.length(1);
 	});
+
+	it("textarea should have helper text", () => {
+		control.helperText = "Textarea helperText";
+		controller.setPropertyValues({});
+		const wrapper = mount(
+			<TextArea
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-textarea']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("textarea classnames appear correctly", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js
@@ -306,6 +306,23 @@ describe("textfield renders correctly", () => {
 		const messageWrapper = textWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 	});
+
+	it("textfield renders helpertext correctly", () => {
+		control.helperText = "textfield helpertext";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<Textfield
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-text']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("textfield list works correctly", () => {

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js
@@ -160,6 +160,24 @@ describe("timefield-control renders correctly", () => {
 		const input = timeWrapper.find("input");
 		expect(input.getDOMNode().placeholder).to.equal(control.additionalText);
 	});
+
+	it("should set helpertext text in `TimefieldControl`", () => {
+		control.helperText = "TimefieldControl helpertext";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<TimefieldControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				controlItem={controlItem}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-timefield']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("error messages renders correctly for timefield controls", () => {

diff --git a/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/radio_paramDef.json b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/radio_paramDef.json
@@ -273,7 +273,10 @@
           "default": "RadioSet with enum string type"
         },
         "resource_key": "withradioString",
-        "class_name": "radioset-control-class"
+        "class_name": "radioset-control-class",
+        "helper_text": {
+          "default": "RadioSet with enum string type"
+        }
       },
       {
         "parameter_ref": "radioBooleanWithEnum",

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
@@ -78,6 +78,7 @@ class CheckboxControl extends React.Component {
 						onChange={this.handleChange.bind(this)}
 						checked={Boolean(this.props.value)}
 						hideLabel={this.props.tableControl}
+						helperText={this.props.control.helperText}
 					/>
 					{tooltipIcon}
 				</div>

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
@@ -79,6 +79,7 @@ class DatefieldControl extends React.Component {
 					id={this.id}
 					disabled={this.props.state === STATES.DISABLED}
 					placeholder={this.props.control.additionalText}
+					helperText={this.props.control.helperText}
 					onChange={this.handleChange.bind(this)}
 					value={this.value}
 					labelText={this.props.controlItem}

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
@@ -88,7 +88,7 @@ class DatepickerControl extends React.Component {
 						size={this.getDatepickerSize()}
 						onChange={this.handleInputChange.bind(this)}
 						value={this.state.value}
-						helperText={!this.props.tableControl && helperText}
+						helperText={(!this.props.tableControl && helperText) || this.props.control.helperText}
 					/>
 				</DatePicker>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx
@@ -228,6 +228,7 @@ class DropDown extends React.Component {
 					disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
 					onChange={this.handleChange}
 					value={selection}
+					helperText={this.props.control.helperText}
 				>
 					{ options }
 				</Select>
@@ -246,6 +247,7 @@ class DropDown extends React.Component {
 					onInputChange={this.handleOnInputChange}
 					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 					titleText={this.props.controlItem}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		} else {
@@ -261,6 +263,7 @@ class DropDown extends React.Component {
 					label={this.emptyLabel}
 					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 					titleText={this.props.controlItem}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		}

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx b/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx
@@ -165,6 +165,7 @@ class MultiSelectControl extends React.Component {
 					onChange={this.handleOnChange}
 					placeholder={label}
 					titleText={this.props.tableControl ? null : this.props.controlItem}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		} else {
@@ -179,6 +180,7 @@ class MultiSelectControl extends React.Component {
 					onChange={this.handleOnChange}
 					label={label}
 					titleText={this.props.tableControl ? null : this.props.controlItem}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		}

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx
@@ -162,6 +162,7 @@ class NumberfieldControl extends React.Component {
 					hideLabel={this.props.tableControl}
 					allowEmpty
 					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
+					helperText={this.props.control.helperText}
 				/>
 				{numberGenerator}
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx
@@ -64,6 +64,7 @@ class PasswordControl extends React.Component {
 					tooltipAlignment="end"
 					showPasswordLabel={showPasswordLabel}
 					hidePasswordLabel={hidePasswordLabel}
+					helperText={this.props.control.helperText}
 				/>
 				<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/radioset/radioset.jsx b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx
@@ -229,6 +229,7 @@ class RadiosetControl extends React.Component {
 					disabled={this.props.state === STATES.DISABLED}
 					name="radio-button-group"
 					orientation={this.props.control.orientation}
+					helperText={this.props.control.helperText}
 				>
 					{buttons}
 				</RadioButtonGroup>

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx b/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx
@@ -79,6 +79,7 @@ class TextareaControl extends React.Component {
 					value={value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
+					helperText={this.props.control.helperText}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly={!showValidationMessage} state={""} messageInfo={errorMessage} />
 			</div>);
@@ -93,6 +94,7 @@ class TextareaControl extends React.Component {
 					value={value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		}