@elyra/canvas 12.27.1 → 12.28.1

package/src/common-properties/controls/abstract-table.jsx

@@ -26,6 +26,7 @@ import * as PropertyUtils from "./../util/property-utils";
 import classNames from "classnames";
 import { Add16, TrashCan16, Edit16 } from "@carbon/icons-react";
 import { ControlType, EditStyle } from "./../constants/form-constants";
+import { v4 as uuid4 } from "uuid";
 
 import { MESSAGE_KEYS, STATES, TABLE_SUBPANEL_BUTTON_WIDTH, SORT_DIRECTION, ROW_SELECTION, UPDATE_TYPE } from "./../constants/constants";
 
@@ -80,6 +81,7 @@ export default class AbstractTable extends React.Component {
 		this.selectSummaryPropertyName = "table-multi-select-edit-property-" + props.control.name;
 		props.controller.saveControls([{ name: this.selectSummaryPropertyName }]);
 		this.setSelectedSummaryRowValue(props.selectedRows);
+		this.uuid = uuid4();
 	}
 
 	componentDidMount() {
@@ -697,9 +699,8 @@ export default class AbstractTable extends React.Component {
 
 	makeHeader(sortFields, filterFields) {
 		const headers = [];
-		for (var j = 0; j < this.props.control.subControls.length; j++) {
+		for (let j = 0; j < this.props.control.subControls.length; j++) {
 			const columnDef = this.props.control.subControls[j];
-			const checkboxName = this.props.control.name + j; // TODO might not be unique
 			// See if the entire column is disabled
 			const colState = this.props.controller.getControlState({ name: this.props.control.name, col: j });
 			const disabled = colState === STATES.DISABLED || colState === STATES.HIDDEN;
@@ -707,7 +708,7 @@ export default class AbstractTable extends React.Component {
 				? (
 					<Checkbox
 						disabled={disabled}
-						id={checkboxName}
+						id={`properties-at-header-cb-${this.uuid}-${this.props.control.name}=${j}`}
 						checked={this.checkedAll(j)}
 						onChange={this.checkedAllValue.bind(this, j)}
 						labelText={columnDef.label.text}
@@ -722,7 +723,9 @@ export default class AbstractTable extends React.Component {
 					"width": columnDef.width,
 					"description": (columnDef.description ? columnDef.description.text : null),
 					"resizable": columnDef.resizable ? columnDef.resizable : false,
-					"operation": (columnDef.generatedValues && columnDef.generatedValues.operation ? columnDef.generatedValues.operation : null) });
+					"operation": (columnDef.generatedValues && columnDef.generatedValues.operation ? columnDef.generatedValues.operation : null),
+					"disabled": disabled
+				});
 				if (columnDef.filterable) {
 					filterFields.push(columnDef.name);
 				}

package/src/common-properties/controls/checkbox/checkbox.jsx

@@ -23,7 +23,6 @@ import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES, CARBON_ICONS } from "./../../constants/constants.js";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
-import { v4 as uuid4 } from "uuid";
 import classNames from "classnames";
 import Icon from "./../../../icons/icon";
 
@@ -40,7 +39,7 @@ class CheckboxControl extends React.Component {
 
 	render() {
 		const label = this.props.control.label ? this.props.control.label.text : "";
-		const tooltipId = uuid4() + "-tooltip-" + this.props.control.name;
+		const tooltipId = "tooltip-" + this.props.control.name;
 		let tooltip = "";
 		if (this.props.control.description && !(this.props.state === STATES.DISABLED || this.props.state === STATES.HIDDEN) && !this.props.tableControl) {
 			tooltip = (

package/src/common-properties/controls/checkboxset/checkboxset.jsx

@@ -94,7 +94,7 @@ class CheckboxsetControl extends React.Component {
 					<span >{this.props.control.valueDescs[i]}</span>
 				);
 				tooltipIcon = (<Tooltip
-					id={`tooltip-${this.uuid}-${i}`}
+					id={`tooltip-${i}`}
 					tip={tooltip}
 					direction="bottom"
 					className="properties-tooltips"

package/src/common-properties/controls/control-factory.js

@@ -33,6 +33,8 @@ import ExpressionControl from "./expression";
 import PasswordControl from "./passwordfield";
 import NumberfieldControl from "./numberfield";
 import DatefieldControl from "./datefield";
+import DatepickerControl from "./datepicker";
+import DatepickerRangeControl from "./datepicker-range";
 import TimefieldControl from "./timefield";
 import CheckboxControl from "./checkbox";
 import ToggleControl from "./toggle";
@@ -59,6 +61,8 @@ const accessibleControls = [
 	ControlType.CHECKBOXSET,
 	ControlType.HIDDEN,
 	ControlType.DATEFIELD,
+	ControlType.DATEPICKER,
+	ControlType.DATEPICKERRANGE,
 	ControlType.NUMBERFIELD,
 	ControlType.SPINNER,
 	ControlType.PASSWORDFIELD,
@@ -224,6 +228,12 @@ export default class ControlFactory {
 		case (ControlType.DATEFIELD):
 			createdControl = (<DatefieldControl {...props} />);
 			break;
+		case (ControlType.DATEPICKER):
+			createdControl = (<DatepickerControl {...props} />);
+			break;
+		case (ControlType.DATEPICKERRANGE):
+			createdControl = (<DatepickerRangeControl {...props} />);
+			break;
 		case (ControlType.TIMEFIELD):
 			createdControl = (<TimefieldControl {...props} />);
 			break;

package/src/common-properties/controls/controls.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,6 +30,8 @@
 @import "./numberfield/numberfield";
 @import "./structureeditor/structureeditor";
 @import "./multiselect/multiselect";
+@import "./datepicker-range/datepicker-range";
+@import "./datepicker/datepicker";
 
 .properties-ctrl-wrapper {
 	padding-bottom: $spacing-05; // Adds padding to the control

package/src/common-properties/controls/datepicker/datepicker.jsx

@@ -0,0 +1,118 @@
+/*
+ * Copyright 2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { DatePicker, DatePickerInput } from "carbon-components-react";
+import classNames from "classnames";
+
+import ValidationMessage from "../../components/validation-message";
+import * as ControlUtils from "../../util/control-utils";
+import { getFormattedDate, getISODate } from "../../util/date-utils";
+import { STATES, DATEPICKER_TYPE } from "../../constants/constants.js";
+
+class DatepickerControl extends React.Component {
+	constructor(props) {
+		super(props);
+		this.id = ControlUtils.getControlId(props.propertyId);
+		this.locale = props.controller.getLocale();
+
+		this.dateFormat = ControlUtils.getDateTimeFormat(props.control);
+
+		this.state = {
+			value: props.value ? getFormattedDate(props.value, this.dateFormat) : ""
+		};
+
+		this.getDatepickerSize = this.getDatepickerSize.bind(this);
+	}
+
+	getDatepickerSize() {
+		return this.props.tableControl ? "sm" : "md";
+	}
+
+	handleChange(evt) {
+		if (evt.length > 0) {
+			const isoDate = getISODate(evt[0]);
+			const value = getFormattedDate(evt[0], this.dateFormat); // display value
+			this.props.controller.updatePropertyValue(this.props.propertyId, isoDate); // internal format
+			this.setState({ value });
+		} else {
+			this.props.controller.updatePropertyValue(this.props.propertyId, "");
+			this.setState({ value: "" });
+		}
+	}
+
+	// Allows user to manually type in the input
+	// Once the calendar closes, it will trigger an onChange evt that will correct any invalid dates
+	handleInputChange(evt) {
+		const value = evt.target.value; // Display value as what user enters
+		this.setState({ value });
+	}
+
+	render() {
+		const helperText = this.props.controller.getResource(`${this.props.control.name}.helper`, null);
+		const className = classNames("properties-datepicker", "properties-input-control", { "hide": this.props.state === STATES.HIDDEN },
+			this.props.messageInfo ? this.props.messageInfo.type : null);
+		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
+
+		return (
+			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
+				<DatePicker
+					className="properties-datepicker-wrapper-parent"
+					datePickerType={DATEPICKER_TYPE.SINGLE}
+					dateFormat={this.dateFormat}
+					light={this.props.controller.getLight() && this.props.control.light}
+					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>
+		);
+	}
+}
+
+DatepickerControl.propTypes = {
+	control: PropTypes.object.isRequired,
+	propertyId: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	controlItem: PropTypes.element,
+	tableControl: PropTypes.bool,
+	state: PropTypes.string, // pass in by redux
+	value: PropTypes.string, // pass in by redux
+	messageInfo: PropTypes.object // pass in by redux
+};
+
+const mapStateToProps = (state, ownProps) => ({
+	value: ownProps.controller.getPropertyValue(ownProps.propertyId),
+	state: ownProps.controller.getControlState(ownProps.propertyId),
+	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId)
+});
+
+export default connect(mapStateToProps, null)(DatepickerControl);

package/src/common-properties/controls/datepicker/datepicker.scss

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.properties-table-cell-control {
+	.properties-datepicker {
+		.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
+			width: unset; // Unset width when displayed within a table
+		}
+	}
+}

package/src/common-properties/controls/datepicker/index.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DatePicker from "./datepicker.jsx";
+export default DatePicker;

package/src/common-properties/controls/datepicker-range/datepicker-range.jsx

@@ -0,0 +1,194 @@
+/*
+ * Copyright 2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { DatePicker, DatePickerInput } from "carbon-components-react";
+import classNames from "classnames";
+import { v4 as uuid4 } from "uuid";
+
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import Icon from "./../../../icons/icon.jsx";
+import ValidationMessage from "../../components/validation-message";
+import * as ControlUtils from "../../util/control-utils";
+import { getFormattedDate, getISODate } from "../../util/date-utils";
+import { STATES, DATEPICKER_TYPE, MESSAGE_KEYS, CARBON_ICONS } from "../../constants/constants.js";
+import { formatMessage } from "./../../util/property-utils";
+
+class DatepickerRangeControl extends React.Component {
+	constructor(props) {
+		super(props);
+		this.reactIntl = props.controller.getReactIntl();
+		this.id = ControlUtils.getControlId(this.props.propertyId);
+		this.locale = props.controller.getLocale();
+		this.uuid = uuid4();
+
+		this.dateFormat = ControlUtils.getDateTimeFormat(props.control);
+
+		this.state = {
+			valueStart: props.value && props.value[0] ? getFormattedDate(props.value[0], this.dateFormat) : "",
+			valueEnd: props.value && props.value[1] ? getFormattedDate(props.value[1], this.dateFormat) : ""
+		};
+
+		this.getDatepickerSize = this.getDatepickerSize.bind(this);
+		this.createInfoDesc = this.createInfoDesc.bind(this);
+	}
+
+	onStartBlur(evt) {
+		const isoStartDate = getISODate(evt.target.value, this.dateFormat);
+		const isoEndDate = getISODate(this.state.valueEnd, this.dateFormat);
+		this.props.controller.updatePropertyValue(this.props.propertyId, [isoStartDate, isoEndDate]);
+	}
+
+	onEndBlur(evt) {
+		const isoStartDate = getISODate(evt.target.value, this.dateFormat);
+		const isoEndDate = getISODate(this.state.valueEnd, this.dateFormat);
+		this.props.controller.updatePropertyValue(this.props.propertyId, [isoStartDate, isoEndDate]);
+	}
+
+	getDatepickerSize() {
+		return this.props.tableControl ? "sm" : "md";
+	}
+
+	// This handles changes for simple, single, and the start range date
+	handleDateRangeChange(evt) {
+		if (evt[0]) {
+			const isoStartDate = getISODate(evt[0]); // internal format
+			const valueStart = getFormattedDate(evt[0], this.dateFormat); // display value
+			let isoEndDate = "";
+			let valueEnd = "";
+
+			if (evt[1]) { // Cannot enter end date without specifying start date
+				isoEndDate = getISODate(evt[1]); // internal format
+				valueEnd = getFormattedDate(evt[1], this.dateFormat); // display value
+			}
+			this.props.controller.updatePropertyValue(this.props.propertyId, [isoStartDate, isoEndDate]);
+			this.setState({ valueStart, valueEnd });
+		}
+	}
+
+	// Allows user to manually type in the input
+	// Once the calendar closes, it will trigger an onChange evt that will correct any invalid dates
+	handleInputStartChange(evt) {
+		this.setState({ valueStart: evt.target.value }); // Display value as what user enters
+	}
+	handleInputEndChange(evt) {
+		this.setState({ valueEnd: evt.target.value }); // Display value as what user enters
+	}
+
+	createInfoDesc(label, description, range) {
+		return description
+			? (<div className="properties-label-container">
+				{label}
+				<Tooltip
+					id={`${this.uuid}-tooltip-label-${this.props.control.name}-${range}`}
+					tip={description}
+					tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
+					direction="bottom"
+					disable={this.props.state === STATES.DISABLED}
+					showToolTipOnClick
+				>
+					<Icon type={CARBON_ICONS.INFORMATION} className="properties-control-description-icon-info" />
+				</Tooltip>
+			</div>)
+			: label;
+	}
+
+	render() {
+		const datepickerRangeStartLabel = `${this.props.control.name}.range.start.label`;
+		const datepickerRangeStartDesc = `${this.props.control.name}.range.start.desc`;
+		const datepickerRangeStartHelper = `${this.props.control.name}.range.start.helper`;
+		const datepickerRangeEndLabel = `${this.props.control.name}.range.end.label`;
+		const datepickerRangeEndDesc = `${this.props.control.name}.range.end.desc`;
+		const datepickerRangeEndHelper = `${this.props.control.name}.range.end.helper`;
+
+		const defaultDatepickerRangeStartLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.DATEPICKER_RANGE_START_LABEL);
+		const defaultDatepickerRangeEndLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.DATEPICKER_RANGE_END_LABEL);
+
+		let startLabel = this.props.controller.getResource(datepickerRangeStartLabel, defaultDatepickerRangeStartLabel);
+		const startDesc = this.props.controller.getResource(datepickerRangeStartDesc, null);
+		const startHelperText = this.props.controller.getResource(datepickerRangeStartHelper, null);
+		let endLabel = this.props.controller.getResource(datepickerRangeEndLabel, defaultDatepickerRangeEndLabel);
+		const endDesc = this.props.controller.getResource(datepickerRangeEndDesc, null);
+		const endHelperText = this.props.controller.getResource(datepickerRangeEndHelper, null);
+
+		startLabel = this.createInfoDesc(startLabel, startDesc, "start");
+		endLabel = this.createInfoDesc(endLabel, endDesc, "end");
+
+		const className = classNames("properties-datepicker-range", "properties-input-control", { "hide": this.props.state === STATES.HIDDEN },
+			this.props.messageInfo ? this.props.messageInfo.type : null);
+		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
+
+		return (
+			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
+				<DatePicker
+					datePickerType={DATEPICKER_TYPE.RANGE}
+					dateFormat={this.dateFormat}
+					light={this.props.controller.getLight() && this.props.control.light}
+					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>
+		);
+	}
+}
+
+DatepickerRangeControl.propTypes = {
+	control: PropTypes.object.isRequired,
+	propertyId: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	controlItem: PropTypes.element,
+	tableControl: PropTypes.bool,
+	state: PropTypes.string, // pass in by redux
+	value: PropTypes.array, // pass in by redux
+	messageInfo: PropTypes.object // pass in by redux
+};
+
+const mapStateToProps = (state, ownProps) => ({
+	value: ownProps.controller.getPropertyValue(ownProps.propertyId),
+	state: ownProps.controller.getControlState(ownProps.propertyId),
+	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId)
+});
+
+export default connect(mapStateToProps, null)(DatepickerRangeControl);

package/src/common-properties/controls/datepicker-range/datepicker-range.scss

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.properties-datepicker-range {
+	.bx--date-picker-container {
+		justify-content: normal; // Override carbon to fix layout when only one has helper text
+	}
+}

package/src/common-properties/controls/datepicker-range/index.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DatePickerRange from "./datepicker-range.jsx";
+export default DatePickerRange;

package/src/common-properties/controls/dropdown/dropdown.jsx

@@ -196,7 +196,8 @@ class DropDown extends React.Component {
 
 		const listBoxMenuIconTranslationIds = {
 			"close.menu": formatMessage(this.reactIntl, MESSAGE_KEYS.DROPDOWN_TOOLTIP_CLOSEMENU),
-			"open.menu": formatMessage(this.reactIntl, MESSAGE_KEYS.DROPDOWN_TOOLTIP_OPENMENU)
+			"open.menu": formatMessage(this.reactIntl, MESSAGE_KEYS.DROPDOWN_TOOLTIP_OPENMENU),
+			"clear.selection": formatMessage(this.reactIntl, MESSAGE_KEYS.DROPDOWN_TOOLTIP_CLEARSELECTION)
 		};
 
 		let dropdownComponent = null;

package/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx

@@ -29,6 +29,7 @@ const FIELDS_SPECIAL_CHARACTERS_REGEX = new RegExp("[0-9- _$]", "g");
 export default class ExpressionSelectFieldOrFunction extends React.Component {
 	constructor(props) {
 		super(props);
+		this.uuid = uuid4();
 		this.reactIntl = props.controller.getReactIntl();
 		this.valueColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN);
 		this.valueColumnDesc = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN_DESCRIPTION);
@@ -549,7 +550,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		return (
 			<div className="properties-expression-function-select">
 				<Dropdown
-					id={"properties-expression-function-select-dropdown-" + uuid4()}
+					id={"properties-expression-function-select-dropdown-" + this.uuid}
 					light={this.props.controller.getLight()}
 					label={label}
 					items={items}
@@ -578,7 +579,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		return (
 			<div className="properties-expression-field-select">
 				<Dropdown
-					id={"properties-expression-field-select-dropdown-" + uuid4()}
+					id={"properties-expression-field-select-dropdown-" + this.uuid}
 					light={this.props.controller.getLight()}
 					label={label}
 					items={newItems}

package/src/common-properties/controls/expression/expression-builder/expression-select-operator.jsx

@@ -19,12 +19,10 @@ import PropTypes from "prop-types";
 import { Button } from "carbon-components-react";
 
 import Tooltip from "./../../../../tooltip/tooltip";
-import { v4 as uuid4 } from "uuid";
 import classNames from "classnames";
 
 
 export default class ExpressionSelectOperator extends React.Component {
-
 	onOperatorClick(value, evt) {
 		if (this.props.onChange) {
 			this.props.onChange(value);
@@ -35,7 +33,7 @@ export default class ExpressionSelectOperator extends React.Component {
 		if (this.props.operatorList) {
 			const operatorButtons = [];
 			this.props.operatorList.forEach((operator, index) => {
-				const tooltipId = uuid4() + "-tooltip-expression-operator";
+				const tooltipId = `tooltip-expression-operator-${index}`;
 				const tooltip = (
 					<div className="properties-tooltips">
 						{operator.help}

package/src/common-properties/controls/radioset/radioset.jsx

@@ -179,7 +179,7 @@ class RadiosetControl extends React.Component {
 				);
 				tooltipIcon = (
 					<Tooltip
-						id={`tooltip-${this.uuid}-${i}`}
+						id={`tooltip-${i}`}
 						tip={tooltip}
 						direction="bottom"
 						className="properties-tooltips"

package/src/common-properties/controls/readonly/readonly.jsx

@@ -30,6 +30,7 @@ import Icon from "./../../../icons/icon";
 
 import { ControlType } from "./../../constants/form-constants";
 import { stringifyFieldValue } from "./../../util/property-utils";
+import { getFormattedDate } from "./../../util/date-utils";
 
 class ReadonlyControl extends React.Component {
 	constructor(props) {
@@ -96,6 +97,12 @@ class ReadonlyControl extends React.Component {
 			} else {
 				controlValue = ""; // invalid timestamp
 			}
+		} else if (this.props.control.controlType === ControlType.DATEPICKER) {
+			controlValue = controlValue ? getFormattedDate(controlValue, this.props.control.dateFormat) : "";
+		} else if (this.props.control.controlType === ControlType.DATEPICKERRANGE) {
+			const startDate = this.props.value && this.props.value[0] ? getFormattedDate(this.props.value[0], this.props.control.dateFormat) : "";
+			const endDate = this.props.value && this.props.value[1] ? getFormattedDate(this.props.value[1], this.props.control.dateFormat) : "";
+			controlValue = [startDate, endDate].toString();
 		}
 		const readOnly = <span className="properties-field-type" disabled={this.props.state === STATES.DISABLED}>{controlValue}</span>;
 		let display = readOnly;

package/src/common-properties/controls/textarea/textarea.jsx

@@ -34,7 +34,8 @@ class TextareaControl extends React.Component {
 		super(props);
 		this.reactIntl = props.controller.getReactIntl();
 		this.charLimit = ControlUtils.getCharLimit(props.control, props.controller.getMaxLengthForMultiLineControls());
-		this.id = ControlUtils.getControlId(this.props.propertyId);
+		this.uuid = uuid4();
+		this.id = ControlUtils.getControlId(this.props.propertyId, this.uuid);
 	}
 
 	handleChange(evt) {
@@ -98,7 +99,7 @@ class TextareaControl extends React.Component {
 
 		let display = textArea;
 		if (this.props.tableControl) {
-			const tooltipId = uuid4() + "-tooltip-column-" + this.props.propertyId.toString();
+			const tooltipId = "tooltip-column-textarea";
 			let disabled = true;
 			if (value && this.props.state !== STATES.DISABLED) {
 				disabled = false;