Merge branch 'main' into virtualized-table-double-click

canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js

@@ -215,6 +215,24 @@ describe("checkbox control tests", () => {
 		const helpTextWrapper = wrapper.find("div[data-id='properties-test-checkbox']");
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
+
+	it("Checkbox readonly is rendered correctly", () => {
+		control.readOnly = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<Checkbox
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				readOnly
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-checkbox']");
+		expect(readOnlyWrapper.find("Checkbox").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("checkbox classnames appear correctly", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js

@@ -194,6 +194,24 @@ describe("datefield-control renders correctly", () => {
 		const helpTextWrapper = wrapper.find("div[data-id='properties-test-datefield']");
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
+
+	it("DateField renders readonly correctly", () => {
+		control.readOnly = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<DateField
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				readOnly
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-datefield']");
+		expect(readOnlyWrapper.find("TextInput").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("error messages renders correctly for datefield controls", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-range-test.js

@@ -49,6 +49,7 @@ describe("datepicker-range-control renders correctly", () => {
 			{ "test-datepicker-range": ["2023-03-17T00:00:00.00", "2023-03-30T00:00:00.00"] }
 		);
 	});
+
 	it("props should have been defined", () => {
 		const wrapper = mount(
 			<DatepickerRangeControl
@@ -131,6 +132,26 @@ describe("datepicker-range-control renders correctly", () => {
 		expect(inputStart.prop("value")).to.equal("02-28-2023"); // Verify formatted value is displayed
 		expect(inputEnd.prop("value")).to.equal("02-28-2024"); // Verify formatted value is displayed
 	});
+
+	it("should render readonly props", () => {
+		control.readOnly = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<DatepickerRangeControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				controlItem={controlItem}
+				readOnly
+			/>
+		);
+
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-datepicker-range']");
+		expect(readOnlyWrapper.find("ForwardRef(DatePicker)").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("error messages renders correctly for datepickerRange controls", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js

@@ -121,6 +121,25 @@ describe("datepicker-control renders correctly", () => {
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
 
+	it("should have readonly rendered correctly in `DatepickerControl`", () => {
+		control.readOnly = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<DatepickerControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				controlItem={controlItem}
+				readOnly
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-datepicker']");
+		expect(readOnlyWrapper.find("ForwardRef(DatePicker)").prop("readOnly")).to.equal(control.readOnly);
+	});
+
 	it("should allow a valid date to be updated in `DatepickerControl`", () => {
 		const wrapper = mount(
 			<DatepickerControl

canvas_modules/common-canvas/__tests__/common-properties/controls/expression-test.js

@@ -725,7 +725,7 @@ describe("expression handles no expression builder resources correctly", () => {
 	it("CommonProperties renders with validateLink set true", () => {
 		propertiesInfo.expressionInfo = getCopy(ExpressionInfo.input);
 		const renderedObject = propertyUtils.flyoutEditorForm(ExpressionParamdef, propertiesConfig, callbacks, propertiesInfo);
-		expect(renderedObject.wrapper.find("button.validateLink")).to.have.length(7); // there are 8 expressions in this paramdef, 1 is hidden
+		expect(renderedObject.wrapper.find("button.validateLink")).to.have.length(8); // there are 9 (including one readonly) expressions in this paramdef, 1 is hidden
 	});
 
 	it("CommonProperties renders with validateLink and callback is called on click", () => {
@@ -736,6 +736,17 @@ describe("expression handles no expression builder resources correctly", () => {
 		expect(renderedObject.callbacks.validationHandler).to.have.property("callCount", 1);
 	});
 
+	it("CommonProperties renders with readonly expression", () => {
+		propertiesInfo.expressionInfo = getCopy(ExpressionInfo.input);
+		const renderedObject = propertyUtils.flyoutEditorForm(ExpressionParamdef, propertiesConfig, callbacks, propertiesInfo);
+		const wrapper = renderedObject.wrapper;
+		const readOnlyWrapper = wrapper.find(".expression-control-class-readonly");
+		const validateButton = readOnlyWrapper.find(".validateLink button");
+		const expButton = readOnlyWrapper.find("button.properties-expression-button");
+		expect(validateButton.prop("disabled")).to.equal(true);
+		expect(expButton.prop("disabled")).to.equal(true);
+	});
+
 
 });
 

canvas_modules/common-canvas/__tests__/common-properties/controls/list-test.js

@@ -568,6 +568,11 @@ describe("list renders correctly as a nested control", () => {
 		expected = [["Cholesterol", 5, "Ascending", ["new value list 0", "new value list 1"]], ["Na", 6, "Ascending", ["new value list 10"]]];
 		expect(JSON.stringify(tableData)).to.equal(JSON.stringify(expected));
 	});
+
+	it("readonly list should have button disabled", () => {
+		const readOnlyWrapper = wrapper.find(".string-list-control-class-readonly");
+		expect(readOnlyWrapper.find("button").prop("disabled")).to.equal(true);
+	});
 });
 
 describe("list classnames appear correctly", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js

@@ -233,6 +233,23 @@ describe("multiselect renders correctly", () => {
 		const helpTextWrapper = wrapper.find("div[data-id='properties-test-multiselect']");
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
+
+	it("MultiSelectControl readOnly is rendered correctly", () => {
+		control.helperText = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<MultiSelectControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-multiselect']");
+		expect(readOnlyWrapper.find("MultiSelect").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("multiselect paramDef works correctly", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js

@@ -161,6 +161,24 @@ describe("numberfield-control renders correctly", () => {
 		const helpTextWrapper = wrapper.find("div[data-id='properties-test-number']");
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
+
+	it("NumberfieldControl readOnly is rendered correctly", () => {
+		control.readOnly = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<NumberfieldControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				readOnly
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-number']");
+		expect(readOnlyWrapper.find("ForwardRef(NumberInput)").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("numberfield control works correctly", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js

@@ -57,6 +57,11 @@ describe("radio renders and works correctly with different enum types", () => {
 		expect(controlDiv.find("div.cds--form__helper-text").text()).to.equal("RadioSet with enum string type");
 	});
 
+	it("radioset control with string enum with readonly prop", () => {
+		const controlDivWrapper = wrapper.find("div[data-id='properties-ci-radioString_readonly']");
+		expect(controlDivWrapper.find("RadioButtonGroup").prop("readOnly")).to.equal(true);
+	});
+
 	it("radioset control with boolean enum", () => {
 		const controlDiv = wrapper.find("div[data-id='properties-ci-radioBooleanWithEnum']");
 		const label = controlDiv.find("label.properties-control-label");

canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js

@@ -214,6 +214,24 @@ describe("selectcolumn control renders correctly", () => {
 		const helpTextWrapper = wrapper.find("div[data-id='properties-targetField']");
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
+
+	it("SelectColumn readonly is rendered correctly", () => {
+		control.readOnly = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<SelectColumn
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				readOnly
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-targetField']");
+		expect(readOnlyWrapper.find("Dropdown").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("selectcolumn control renders correctly with paramDef", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js

@@ -122,6 +122,24 @@ describe("SliderControl renders correctly", () => {
 		expect(wrapper.find("ValidationMessage")).to.have.length(1);
 	});
 
+	it("renders Slider with readonly control", () => {
+		control.readOnly = true;
+		const wrapper = mount(
+			<Provider store = {
+				controller.getStore()
+			}
+			>
+				<SliderControl control = {control}
+					propertyId = {propertyId}
+					controller = {controller}
+					controlItem = "Slider Label"
+					readOnly
+				/>
+			</Provider>
+		);
+		expect(wrapper.find("Slider").prop("readOnly")).to.equal(control.readOnly);
+	});
+
 	it("handles change event correctly", () => {
 		const wrapper = mount(
 			<Provider store = {

canvas_modules/common-canvas/__tests__/common-properties/controls/someofselect-test.js

@@ -104,6 +104,26 @@ describe("SomeOfSelectControl renders correctly", () => {
 		tableUtils.selectCheckboxes(wrapper, [0]);
 		expect(controller.getPropertyValue(propertyId)).to.have.length(0);
 	});
+	it("SomeOfSelectControl handles readonly correctly", () => {
+		controller.setPropertyValues(
+			{ "test-someofselect": ["Order"] }
+		);
+		const wrapper = mountWithIntl(
+			<Provider store={controller.getStore()}>
+				<SomeOfSelectControl
+					control={control}
+					controller={controller}
+					propertyId={propertyId}
+					readOnly
+				/>
+			</Provider>
+		);
+		const someofselectWrapper = wrapper.find("div[data-id='properties-test-someofselect']");
+		const firstCheckbox = someofselectWrapper.find("Checkbox").first();
+		const secondCheckbox = someofselectWrapper.find("Checkbox").first();
+		expect(firstCheckbox.prop("readOnly")).to.equal(true);
+		expect(secondCheckbox.prop("readOnly")).to.equal(true);
+	});
 	it("SomeOfSelectControl handles null correctly", () => {
 		controller.setPropertyValues(
 			{ "test-someofselect": null }

canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js

@@ -315,6 +315,22 @@ describe("textarea control renders correctly", () => {
 		const helpTextWrapper = wrapper.find("div[data-id='properties-test-textarea']");
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
+
+	it("textarea should have readonly control", () => {
+		control.readOnly = true;
+		controller.setPropertyValues({});
+		const wrapper = mount(
+			<TextArea
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				readOnly
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-textarea']");
+		expect(readOnlyWrapper.find("TextArea").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("textarea classnames appear correctly", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js

@@ -323,6 +323,24 @@ describe("textfield renders correctly", () => {
 		const helpTextWrapper = wrapper.find("div[data-id='properties-test-text']");
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
+
+	it("textfield renders readonly correctly", () => {
+		control.readOnly = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<Textfield
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				readOnly
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-text']");
+		expect(readOnlyWrapper.find("TextInput").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("textfield list works correctly", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js

@@ -178,6 +178,25 @@ describe("timefield-control renders correctly", () => {
 		const helpTextWrapper = wrapper.find("div[data-id='properties-test-timefield']");
 		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
 	});
+
+	it("should set readonly control in `TimefieldControl`", () => {
+		control.readOnly = true;
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<TimefieldControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				controlItem={controlItem}
+				readOnly
+			/>
+		);
+		const readOnlyWrapper = wrapper.find("div[data-id='properties-test-timefield']");
+		expect(readOnlyWrapper.find("TextInput").prop("readOnly")).to.equal(control.readOnly);
+	});
 });
 
 describe("error messages renders correctly for timefield controls", () => {

canvas_modules/common-canvas/__tests__/common-properties/controls/toggle-test.js

@@ -92,6 +92,21 @@ describe("toggle renders correctly", () => {
 		expect(toggleWrapper.hasClass("hide")).to.equal(true);
 	});
 
+	it("toggle renders when readonly", () => {
+		control.readOnly = true;
+		const wrapper = mount(
+			<Toggle
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				readOnly
+			/>
+		);
+		const toggleWrapper = wrapper.find("div[data-id='properties-toggle']");
+		expect(toggleWrapper.find("Toggle").prop("readOnly")).to.equal(control.readOnly);
+	});
+
 });
 
 describe("toggle classnames appear correctly", () => {