@elyra/canvas 12.27.1 → 12.28.1

package/locales/common-properties/locales/zh-CN.json

@@ -13,10 +13,10 @@
   "fieldPicker.dataTypeColumn.label": "数据类型",
   "fieldPicker.integer.label": "integer",
   "fieldPicker.double.label": "双精度",
-  "fieldPicker.string.label": "string",
+  "fieldPicker.string.label": "字符串",
   "fieldPicker.date.label": "日期",
-  "fieldPicker.time.label": "time",
-  "fieldPicker.timestamp.label": "timestamp",
+  "fieldPicker.time.label": "时间戳记",
+  "fieldPicker.timestamp.label": "时间戳记",
   "flyout.applyButton.label": "确定",
   "flyout.rejectButton.label": "取消",
   "propertiesEdit.closeButton.label": "关闭",
@@ -93,7 +93,8 @@
   "dropdown.tooltip.clear.all": "全部清除",
   "dropdown.tooltip.clear.selection": "清除选择",
   "truncate.long.string.error": "这些值超过了 {truncate_limit} 个字符的显示限制，无法编辑。",
-  "properties.label": "属性",
+  "properties.label": "{label} 属性",
+  "properties.error.label": "属性中存在错误",
   "readonlytable.edit.button.label": "编辑",
   "toggletext.icon.description": "{toggletext_label} 图标",
   "multiselect.dropdown.empty.label": "未选择任何项",

package/locales/common-properties/locales/zh-TW.json

@@ -93,7 +93,8 @@
   "dropdown.tooltip.clear.all": "全部清除",
   "dropdown.tooltip.clear.selection": "清除選項",
   "truncate.long.string.error": "這些值超出 {truncate_limit} 個字元的顯示限制，無法編輯。",
-  "properties.label": "屬性",
+  "properties.label": "{label} 內容",
+  "properties.error.label": "內容中發生錯誤",
   "readonlytable.edit.button.label": "編輯",
   "toggletext.icon.description": "{toggletext_label} 圖示",
   "multiselect.dropdown.empty.label": "沒有選取任何項目",

package/locales/notification-panel/locales/de.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "Schließen"
+}

package/locales/notification-panel/locales/es.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "Cerrar"
+}

package/locales/notification-panel/locales/fr.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "Fermer"
+}

package/locales/notification-panel/locales/it.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "Chiudi"
+}

package/locales/notification-panel/locales/ja.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "閉じる"
+}

package/locales/notification-panel/locales/ko.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "닫기"
+}

package/locales/notification-panel/locales/pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "Fechar"
+}

package/locales/notification-panel/locales/sv.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "Stäng"
+}

package/locales/notification-panel/locales/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "关闭"
+}

package/locales/notification-panel/locales/zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "notification.panel.close.button.description": "關閉"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.27.1",
+  "version": "12.28.1",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",

package/src/common-canvas/canvas-controller.js

@@ -1068,6 +1068,21 @@ export default class CanvasController {
 		return this.objectModel.getAPIPipeline(pipelineId).getCommentStyle(commentId, temporary);
 	}
 
+	// Hides all comments on the canvas.
+	hideComments() {
+		this.objectModel.hideComments();
+	}
+
+	// Shows all comments on the canvas - if they were previously hiding.
+	showComments() {
+		this.objectModel.showComments();
+	}
+
+	// Returns true if comments are currently hiding.
+	isHidingComments() {
+		return this.objectModel.isHidingComments();
+	}
+
 	// ---------------------------------------------------------------------------
 	// Links methods
 	// ---------------------------------------------------------------------------
@@ -2370,6 +2385,14 @@ export default class CanvasController {
 			this.zoomToFit();
 			break;
 		}
+		case "commentsHide": {
+			this.hideComments();
+			break;
+		}
+		case "commentsShow": {
+			this.showComments();
+			break;
+		}
 		case "setNodeLabelEditingMode": {
 			this.setNodeLabelEditingMode(data.id, data.pipelineId);
 			break;
@@ -2382,6 +2405,14 @@ export default class CanvasController {
 			this.togglePalette();
 			break;
 		}
+		case "paletteOpen": {
+			this.openPalette();
+			break;
+		}
+		case "paletteClose": {
+			this.closePalette();
+			break;
+		}
 		case "toggleNotificationPanel": {
 			this.toggleNotificationPanel();
 			break;

package/src/common-canvas/cc-toolbar.jsx

@@ -162,12 +162,12 @@ class CommonCanvasToolbar extends React.Component {
 
 		// Add the new togglePalette icon if the palette is enabled.
 		if (this.props.isPaletteEnabled) {
+			const paletteOpenClose = this.props.isPaletteOpen
+				? { action: "paletteClose", label: paletteLabel, enable: true }
+				: { action: "paletteOpen", label: paletteLabel, enable: true };
+
 			const paletteTools = [
-				{ action: "togglePalette",
-					label: paletteLabel,
-					enable: true,
-					iconTypeOverride: this.props.isPaletteOpen ? "paletteClose" : "paletteOpen"
-				},
+				paletteOpenClose,
 				{ divider: true }
 			];
 			return paletteTools.concat(newLeftBar);

package/src/common-canvas/constants/canvas-constants.js

@@ -179,6 +179,8 @@ export const TOOLBAR_CUT = "cut";
 export const TOOLBAR_COPY = "copy";
 export const TOOLBAR_PASTE = "paste";
 export const TOOLBAR_CREATE_AUTO_COMMENT = "createAutoComment";
+export const TOOLBAR_SHOW_COMMENTS = "commentsShow";
+export const TOOLBAR_HIDE_COMMENTS = "commentsHide";
 export const TOOLBAR_DELETE_SELECTED_OBJECTS = "deleteSelectedObjects";
 export const TOOLBAR_ZOOM_IN = "zoomIn";
 export const TOOLBAR_ZOOM_OUT = "zoomOut";

package/src/common-canvas/svg-canvas-renderer.js

@@ -1953,7 +1953,7 @@ export default class SVGCanvasRenderer {
 		} else if (transPos.x === this.zoomStartPoint.startX &&
 							transPos.y === this.zoomStartPoint.startY &&
 							!this.zoomChanged()) {
-			this.zoomClick();
+			this.zoomClick(d3Event);
 
 		} else if (this.regionSelect) {
 			this.zoomEndRegionSelect(d3Event);
@@ -2032,12 +2032,22 @@ export default class SVGCanvasRenderer {
 	}
 
 	// Handles a zoom operation that is just a click on the canvas background.
-	zoomClick() {
-		// Only clear selections if clicked on the canvas of the current active pipeline.
-		// Clicking the canvas of an expanded supernode will select that node.
-		// Also, don't clear selections if we have closed a context menu or
-		// closed text editing.
-		if (this.dispUtils.isDisplayingCurrentPipeline() && !this.contextMenuClosedOnZoom && !this.textEditingClosedOnZoom) {
+	zoomClick(d3Event) {
+		// Only clear selections under these conditions:
+		// * if the click was on the canvas of the current active pipeline. (This
+		//   is because clicking on the canvas background of an expanded supernode
+		//   should select that node.)
+		// * if we have not just closed a context menu
+		// * if we have not just closed text editing
+		// * if editing actions are enabled OR the target is the canvas background.
+		//   (This condition is necessary because when editing actions are disabled,
+		//   for a read-only canvas, the mouse-up over a node can cause this method
+		//   to be called.)
+		if (this.dispUtils.isDisplayingCurrentPipeline() &&
+				!this.contextMenuClosedOnZoom &&
+				!this.textEditingClosedOnZoom &&
+				(this.config.enableEditingActions ||
+				d3Event.sourceEvent.target.classList.contains("d3-svg-background"))) {
 			this.canvasController.clearSelections();
 		}
 	}
@@ -3423,7 +3433,7 @@ export default class SVGCanvasRenderer {
 				(enter) => this.createDecorations(enter, objType, decGrpClassName)
 			)
 			.attr("transform", (dec) => this.decUtils.getDecTransform(dec, d, objType))
-			.on("mousedown", (d3Event, dec) => (dec.hotspot ? that.callDecoratorCallback(d3Event, d, dec) : null))
+			.on("mousedown", (d3Event, dec) => (dec.hotspot && d3Event.button === 0 ? that.callDecoratorCallback(d3Event, d, dec) : null))
 			.each((dec, i, elements) => this.updateDecoration(dec, d3.select(elements[i]), objType, d));
 	}
 
@@ -3797,9 +3807,7 @@ export default class SVGCanvasRenderer {
 				.on("mousedown", (d3Event) => {
 					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
 					this.ellipsisClicked = true;
-					if (!this.config.enableDragWithoutSelect) {
-						this.selectObjectD3Event(d3Event, d);
-					}
+					this.selectObjectD3Event(d3Event, d);
 					if (this.canvasController.isContextMenuDisplayed()) {
 						this.canvasController.closeContextMenu();
 					} else {
@@ -5187,8 +5195,9 @@ export default class SVGCanvasRenderer {
 	}
 
 	displayCommentsSubset(selection, data) {
+		const newData = this.canvasInfo.hideComments ? [] : data;
 		selection
-			.data(data, (c) => c.id)
+			.data(newData, (c) => c.id)
 			.join(
 				(enter) => this.createComments(enter)
 			)
@@ -6483,9 +6492,15 @@ export default class SVGCanvasRenderer {
 	}
 
 	// Returns true if a link should be displayed and false if not. The link
-	// should not be displayed if the displayLinkOnOverlap flag is false and the
-	// nodes are overlapping.
+	// should not be displayed if:
+	// * it is a comment link and comment links are switched off (comments are hiding)
+	// * the displayLinkOnOverlap flag is false and the objects at each end of
+	//   the link are overlapping.
 	shouldDisplayLink(srcNode, trgNode, linkType) {
+		if (linkType === COMMENT_LINK && this.canvasInfo.hideComments) {
+			return false;
+		}
+
 		if (this.canvasLayout.displayLinkOnOverlap === false) {
 			return !this.areLinkedObjectsOverlapping(srcNode, trgNode, linkType);
 		}

package/src/common-properties/actions/button/button.jsx

@@ -21,7 +21,6 @@ import { Button } from "carbon-components-react";
 import { STATES, CARBON_BUTTON_KIND, CARBON_BUTTON_SIZE } from "./../../constants/constants.js";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import classNames from "classnames";
-import { v4 as uuid4 } from "uuid";
 import { has } from "lodash";
 
 class ButtonAction extends React.Component {
@@ -30,7 +29,6 @@ class ButtonAction extends React.Component {
 		this.state = {
 		};
 		this.applyAction = this.applyAction.bind(this);
-		this.uuid = uuid4();
 	}
 
 	getActionButtonKind() {
@@ -90,7 +88,7 @@ class ButtonAction extends React.Component {
 
 		let display = button;
 		if (this.props.action.description) {
-			const tooltipId = this.uuid + "-tooltip-action-" + this.props.action.name;
+			const tooltipId = "tooltip-action-" + this.props.action.name;
 			const tooltip = (
 				<div className="properties-tooltips">
 					{this.props.action.description.text}

package/src/common-properties/actions/image/image.jsx

@@ -20,7 +20,6 @@ import { connect } from "react-redux";
 import { STATES } from "./../../constants/constants.js";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import classNames from "classnames";
-import { v4 as uuid4 } from "uuid";
 
 class ImageAction extends React.Component {
 	constructor(props) {
@@ -28,7 +27,6 @@ class ImageAction extends React.Component {
 		this.state = {
 		};
 		this.applyAction = this.applyAction.bind(this);
-		this.uuid = uuid4();
 	}
 
 	applyAction() {
@@ -68,7 +66,7 @@ class ImageAction extends React.Component {
 
 		let display = image;
 		if (this.props.action.description) {
-			const tooltipId = this.uuid + "-tooltip-action-" + this.props.action.name;
+			const tooltipId = "tooltip-action-" + this.props.action.name;
 			const tooltip = (
 				<div className="properties-tooltips">
 					{this.props.action.description.text}

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

@@ -21,7 +21,7 @@ import PropertiesMain from "./properties-main";
 import PropertiesModal from "./components/properties-modal";
 import ValidationMessage from "./components/validation-message";
 import { formatMessage } from "./util/property-utils";
-import { MESSAGE_KEYS } from "./constants/constants";
+import { MESSAGE_KEYS, DEFAULT_LOCALE } from "./constants/constants";
 
 import { injectIntl } from "react-intl";
 
@@ -237,18 +237,20 @@ CommonProperties.propTypes = {
 		containerType: PropTypes.string,
 		enableResize: PropTypes.bool,
 		conditionReturnValueHandling: PropTypes.oneOf(["null", "value"]),
+		returnValueFiltering: PropTypes.array,
 		buttonLabels: PropTypes.shape({
 			primary: PropTypes.string,
 			secondary: PropTypes.string
 		}),
 		schemaValidation: PropTypes.bool,
 		applyPropertiesWithoutEdit: PropTypes.bool,
-		conditionHiddenPropertyHandling: PropTypes.oneOf(["null", "value"]),
-		conditionDisabledPropertyHandling: PropTypes.oneOf(["null", "value"]),
+		conditionHiddenPropertyHandling: PropTypes.oneOf(["null", "undefined", "value"]),
+		conditionDisabledPropertyHandling: PropTypes.oneOf(["null", "undefined", "value"]),
 		maxLengthForMultiLineControls: PropTypes.number,
 		maxLengthForSingleLineControls: PropTypes.number,
 		convertValueDataTypes: PropTypes.bool,
-		showRequiredIndicator: PropTypes.bool
+		showRequiredIndicator: PropTypes.bool,
+		locale: PropTypes.string
 	}),
 	callbacks: PropTypes.shape({
 		controllerHandler: PropTypes.func,
@@ -285,7 +287,8 @@ CommonProperties.defaultProps = {
 		maxLengthForMultiLineControls: 1024,
 		maxLengthForSingleLineControls: 128,
 		convertValueDataTypes: false,
-		showRequiredIndicator: true
+		showRequiredIndicator: true,
+		locale: DEFAULT_LOCALE
 	},
 	callbacks: {
 	},

package/src/common-properties/components/control-item/control-item.jsx

@@ -22,7 +22,6 @@ import { STATES, CARBON_ICONS, MESSAGE_KEYS } from "./../../constants/constants.
 import { ControlType } from "./../../constants/form-constants";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { isEmpty, get } from "lodash";
-import { v4 as uuid4 } from "uuid";
 import Icon from "./../../../icons/icon.jsx";
 import ActionFactory from "./../../actions/action-factory.js";
 import { formatMessage } from "./../../util/property-utils";
@@ -32,7 +31,6 @@ class ControlItem extends React.Component {
 		super(props);
 		this.actionFactory = new ActionFactory(this.props.controller);
 		this.showRequiredIndicator = props.controller ? get(props.controller.getPropertiesConfig(), "showRequiredIndicator", true) : true;
-		this.uuid = uuid4();
 	}
 
 	render() {
@@ -56,7 +54,7 @@ class ControlItem extends React.Component {
 						this.props.control.description.link.propertyId = this.props.propertyId;
 					}
 					tooltip = (<Tooltip
-						id={`${this.uuid}-tooltip-label-${this.props.control.name}`}
+						id={`tooltip-label-${this.props.control.name}`}
 						tip={this.props.control.description.text}
 						link={this.props.control.description.link ? this.props.control.description.link : null}
 						tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}

package/src/common-properties/components/control-item/control-item.scss

@@ -43,6 +43,8 @@
 	label, .properties-indicator {
 		@include carbon--type-style("label-01");
 		color: $text-02;
+	}
+	.properties-indicator {
 		padding-left: $spacing-02;
 	}
 	&.table-control {

package/src/common-properties/components/field-picker/field-picker.jsx

@@ -33,8 +33,6 @@ import { has, isEmpty, sortBy, isEqual } from "lodash";
 
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 
-import { v4 as uuid4 } from "uuid";
-
 export default class FieldPicker extends React.Component {
 	static getDerivedStateFromProps(nextProps, prevState) {
 		if (!isEqual(nextProps.fields, prevState.origFields)) {
@@ -343,7 +341,7 @@ export default class FieldPicker extends React.Component {
 					break;
 				}
 			}
-			const filterTooltipId = uuid4() + "-tooltip-filters-" + ind;
+			const filterTooltipId = "tooltip-filters-" + ind;
 			const dataTypeLabel = PropertyUtils.formatMessage(that.props.controller.getReactIntl(), MESSAGE_KEYS[`FIELDPICKER_${filter.type.toUpperCase()}_LABEL`]);
 			const tooltip = (
 				<div className="properties-tooltips">

package/src/common-properties/components/truncated-content-tooltip/truncated-content-tooltip.jsx

@@ -16,18 +16,22 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { v4 as uuid4 } from "uuid";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { has } from "lodash";
+import { Checkbox } from "carbon-components-react";
 
 // Reusable component to show tooltip if the content is truncated
 export default class TruncatedContentTooltip extends React.Component {
 
 	render() {
 		let tooltipText = this.props.tooltipText;
+		let truncatedRef = this.props.truncatedRef;
 		if (typeof this.props.tooltipText !== "object") {
 			tooltipText = String(this.props.tooltipText);
 		}
+		if (this.props.content.type === Checkbox && this.tooltipRef && this.tooltipRef.firstChild) {
+			truncatedRef = this.tooltipRef.firstChild.lastChild; // checkbox label is in div -> label -> span
+		}
 		const tooltip = (
 			<div className="properties-tooltips">
 				{tooltipText}
@@ -36,14 +40,17 @@ export default class TruncatedContentTooltip extends React.Component {
 		return (
 			<div className="properties-truncated-tooltip">
 				<Tooltip
-					id={`${uuid4()}-properties`}
+					id="properties"
 					tip={tooltip}
 					direction="bottom"
 					className="properties-tooltips"
 					disable={has(this.props, "disabled") ? this.props.disabled : true}
 					showToolTipIfTruncated
+					truncatedRef={truncatedRef}
 				>
-					{this.props.content}
+					<div ref={(ref) => (this.tooltipRef = ref)}>
+						{this.props.content}
+					</div>
 				</Tooltip>
 			</div>
 		);
@@ -52,6 +59,7 @@ export default class TruncatedContentTooltip extends React.Component {
 
 TruncatedContentTooltip.propTypes = {
 	content: PropTypes.element.isRequired,
+	truncatedRef: PropTypes.object,
 	tooltipText: PropTypes.oneOfType([
 		PropTypes.string.isRequired,
 		PropTypes.object.isRequired,

package/src/common-properties/components/truncated-content-tooltip/truncated-content-tooltip.scss

@@ -16,7 +16,7 @@
 
 .properties-truncated-tooltip {
 	overflow: hidden;
-	.tooltip-trigger {
+	.tooltip-trigger div {
 		width: inherit;
 		overflow: hidden;
 		text-overflow: ellipsis;

package/src/common-properties/components/validation-message/validation-message.jsx

@@ -20,7 +20,6 @@ import Icon from "./../../../icons/icon.jsx";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { STATES } from "./../../constants/constants.js";
 import classNames from "classnames";
-import { v4 as uuid4 } from "uuid";
 
 export default class ValidationMessage extends React.Component {
 
@@ -36,7 +35,7 @@ export default class ValidationMessage extends React.Component {
 		const msgIcon = this.props.inTable
 			? (<div className="properties-tooltips-container table-cell-msg-icon">
 				<Tooltip
-					id={uuid4() + "-table-cell-msg-icon"}
+					id="table-cell-msg-icon"
 					tip={this.props.messageInfo.text}
 					direction="bottom"
 					className="properties-tooltips"

package/src/common-properties/components/virtualized-table/virtualized-table.jsx

@@ -19,16 +19,17 @@ import Draggable from "react-draggable";
 import { Checkbox, Loading } from "carbon-components-react";
 import { ArrowUp16, ArrowDown16, ArrowsVertical16, Information16 } from "@carbon/icons-react";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
+import TruncatedContentTooltip from "./../truncated-content-tooltip";
 import { SORT_DIRECTION, STATES, ROW_SELECTION, MINIMUM_COLUMN_WIDTH, MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL } from "./../../constants/constants";
 import { injectIntl } from "react-intl";
 import defaultMessages from "../../../../locales/common-properties/locales/en.json";
 
 import { isEmpty, differenceBy, mapValues } from "lodash";
-import { v4 as uuid4 } from "uuid";
 import classNames from "classnames";
 
 import PropTypes from "prop-types";
 import React from "react";
+import { v4 as uuid4 } from "uuid";
 
 class VirtualizedTable extends React.Component {
 
@@ -66,6 +67,7 @@ class VirtualizedTable extends React.Component {
 		this.onRowClick = this.onRowClick.bind(this);
 		this.overSelectOption = this.overSelectOption.bind(this);
 		this.resizeColumn = this.resizeColumn.bind(this);
+		this.uuid = uuid4();
 	}
 
 	componentDidUpdate() {
@@ -201,7 +203,7 @@ class VirtualizedTable extends React.Component {
 		const checkbox = this.props.selectable && this.props.rowSelection !== ROW_SELECTION.SINGLE
 			? (<div role="checkbox" aria-checked={this.props.checkedAll} className="properties-vt-header-checkbox">
 				<Checkbox
-					id={`properties-vt-hd-cb-${scrollKey}`}
+					id={`properties-vt-hd-cb-${this.uuid}-${scrollKey}`}
 					onChange={this.selectAll}
 					checked={this.props.checkedAll}
 					labelText={translatedHeaderCheckboxLabel}
@@ -235,17 +237,11 @@ class VirtualizedTable extends React.Component {
 			</span>);
 		}
 
-		const tooltip = columnData.headerLabel
-			? (<div className="properties-tooltips">
-				<span style= {{ fontWeight: "bold" }}>{columnData.headerLabel}</span>
-			</div>)
-			: null;
-
 		const infoIcon = isEmpty(columnData.description)
 			? null
 			: (<div className="properties-vt-info-icon-tip">
 				<Tooltip
-					id={`properties-tooltip-${columnData.headerLabel}-info`}
+					id="properties-tooltip-info"
 					tip={columnData.description}
 					direction="bottom"
 					className="properties-tooltips"
@@ -255,8 +251,6 @@ class VirtualizedTable extends React.Component {
 				</Tooltip>
 			</div>);
 
-		const tooltipId = uuid4() + "-tooltip-column-" + dataKey;
-
 		const resizeElem = columnData.resizable && !this.isLastColumn(dataKey)
 			? (<Draggable
 				axis="x"
@@ -276,26 +270,19 @@ class VirtualizedTable extends React.Component {
 				/>
 			</Draggable>)
 			: "";
-
-		const header = isEmpty(tooltip)
-			? (<div className="properties-vt-label-icon">
-				{label}
-				{infoIcon}
-			</div>)
-			: (<div className="properties-vt-label-tip-icon">
-				<Tooltip
-					id={tooltipId}
-					tip={tooltip}
-					direction="bottom"
-					className="properties-tooltips"
-				>
-					{label}
-				</Tooltip>
-				{infoIcon}
-			</div>);
-
+		const headerDisplayLabel = typeof label === "string" ? (<span>{label}</span>) : label;
+		const header = (<div className="properties-vt-label-tip-icon">
+			<TruncatedContentTooltip
+				tooltipText={columnData.headerLabel}
+				content={headerDisplayLabel}
+				disabled={columnData.disabled}
+			/>
+			{infoIcon}
+		</div>);
 		return (
-			<div className={classNames({ "properties-vt-column-with-resize": resizeElem !== "", "properties-vt-column-without-resize": resizeElem === "" })}>
+			<div data-id={`properties-vt-header-${dataKey}`}
+				className={classNames({ "properties-vt-column-with-resize": resizeElem !== "", "properties-vt-column-without-resize": resizeElem === "" })}
+			>
 				<div className={classNames("properties-vt-column properties-tooltips-container", { "sort-column-active": dataKey === this.props.sortBy })}>
 					{header}
 					{disableSort === false && sortIcon}
@@ -408,7 +395,7 @@ class VirtualizedTable extends React.Component {
 					}}
 				>
 					<Checkbox
-						id={`properties-vt-row-cb-${scrollKey}-${index}`}
+						id={`properties-vt-row-cb-${this.uuid}-${scrollKey}-${index}`}
 						key={`properties-vt-row-cb-${scrollKey}-${index}`}
 						labelText={translatedRowCheckboxLabel}
 						hideLabel

package/src/common-properties/constants/constants.js

@@ -115,7 +115,9 @@ export const MESSAGE_KEYS = {
 	SHOW_PASSWORD_TOOLTIP: "passwordShow.tooltip",
 	HIDE_PASSWORD_TOOLTIP: "passwordHide.tooltip",
 	LABEL_INDICATOR_REQUIRED: "label.indicator.required",
-	LABEL_INDICATOR_OPTIONAL: "label.indicator.optional"
+	LABEL_INDICATOR_OPTIONAL: "label.indicator.optional",
+	DATEPICKER_RANGE_START_LABEL: "datepickerRangeStart.default.label",
+	DATEPICKER_RANGE_END_LABEL: "datepickerRangeEnd.default.label"
 };
 
 export const TRUNCATE_LIMIT = 10000;
@@ -153,6 +155,13 @@ export const DATA_TYPE = {
 	TIMESTAMP: "timestamp"
 };
 
+export const DATEPICKER_TYPE = {
+	SINGLE: "single",
+	RANGE: "range"
+};
+
+export const DEFAULT_DATEPICKER_FORMAT = "Y-m-d"; // ISO format
+
 export const DEFAULT_DATE_FORMAT = "yyyy-mm-dd";
 
 export const DEFAULT_TIME_FORMAT = "H:m:s";
@@ -277,3 +286,5 @@ export const CONTAINER_TYPE = {
 	TEARSHEET: "Tearsheet",
 	MODAL: "Modal"
 };
+
+export const DEFAULT_LOCALE = "en";

package/src/common-properties/constants/form-constants.js

@@ -79,6 +79,8 @@ const ControlType = {
 	EXPRESSION: "expression",
 	NUMBERFIELD: "numberfield",
 	DATEFIELD: "datefield",
+	DATEPICKER: "datepicker",
+	DATEPICKERRANGE: "datepickerRange",
 	TIMEFIELD: "timefield",
 	TIMESTAMP: "timestampfield",
 	CHECKBOX: "checkbox",