@elyra/canvas 12.25.0 → 12.26.0

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

@@ -957,7 +957,11 @@ export default class CanvasUtils {
 	// all properties set to zero if no valid objects were provided.
 	// nodeHighlightGap may be 0 or undefined. If it is undefined we use the
 	// nodeHighlightGap in the node's layout.
-	static getCanvasDimensions(nodes, comments, links, commentHighlightGap, nodeHighlightGap) {
+	// If allLinks is set to true, we include the start and end coordinates of all
+	// links passed in. If set to false (or is undefined), we only inlcude
+	// the unconnected ends of semi-detached or fully-detached links. That is,
+	//  where the link has a srcPos and/or a trgPos field.
+	static getCanvasDimensions(nodes, comments, links, commentHighlightGap, nodeHighlightGap, allLinks) {
 		var canvLeft = Infinity;
 		let canvTop = Infinity;
 		var canvRight = -Infinity;
@@ -988,17 +992,29 @@ export default class CanvasUtils {
 		// Take into account semi-detached and fully-detached links, if any.
 		if (links) {
 			links.forEach((link) => {
-				if (link.srcPos) {
-					canvLeft = Math.min(canvLeft, link.srcPos.x_pos);
-					canvTop = Math.min(canvTop, link.srcPos.y_pos);
-					canvRight = Math.max(canvRight, link.srcPos.x_pos);
-					canvBottom = Math.max(canvBottom, link.srcPos.y_pos);
-				}
-				if (link.trgPos) {
-					canvLeft = Math.min(canvLeft, link.trgPos.x_pos);
-					canvTop = Math.min(canvTop, link.trgPos.y_pos);
-					canvRight = Math.max(canvRight, link.trgPos.x_pos);
-					canvBottom = Math.max(canvBottom, link.trgPos.y_pos);
+				if (allLinks) {
+					canvLeft = Math.min(canvLeft, link.x1);
+					canvTop = Math.min(canvTop, link.y1);
+					canvRight = Math.max(canvRight, link.x1);
+					canvBottom = Math.max(canvBottom, link.y1);
+
+					canvLeft = Math.min(canvLeft, link.x2);
+					canvTop = Math.min(canvTop, link.y2);
+					canvRight = Math.max(canvRight, link.x2);
+					canvBottom = Math.max(canvBottom, link.y2);
+				} else {
+					if (link.srcPos) {
+						canvLeft = Math.min(canvLeft, link.srcPos.x_pos);
+						canvTop = Math.min(canvTop, link.srcPos.y_pos);
+						canvRight = Math.max(canvRight, link.srcPos.x_pos);
+						canvBottom = Math.max(canvBottom, link.srcPos.y_pos);
+					}
+					if (link.trgPos) {
+						canvLeft = Math.min(canvLeft, link.trgPos.x_pos);
+						canvTop = Math.min(canvTop, link.trgPos.y_pos);
+						canvRight = Math.max(canvRight, link.trgPos.x_pos);
+						canvBottom = Math.max(canvBottom, link.trgPos.y_pos);
+					}
 				}
 			});
 		}

package/src/common-canvas/common-canvas.scss

@@ -197,7 +197,7 @@ $bottom-panel-border-color: $ui-03;
 
 .empty-canvas-image {
 	color: $text-03; // Picked up by fill attribute in the icon.
-	opacity: 0.4;
+	opacity: 0.75;
 	display: block;
 	text-align: center;
 	& svg {
@@ -209,7 +209,7 @@ $bottom-panel-border-color: $ui-03;
 .empty-canvas-text1 {
 	@include carbon--type-style("productive-heading-03");
 	padding-top: $spacing-02;
-	color: $text-03;
+	color: $text-02;
 	display: block;
 	text-align: center;
 }
@@ -217,7 +217,7 @@ $bottom-panel-border-color: $ui-03;
 .empty-canvas-text2 {
 	@include carbon--type-style("body-short-02");
 	padding-top: $spacing-03;
-	color: $text-03;
+	color: $text-02;
 	display: block;
 	text-align: center;
 }

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

@@ -106,6 +106,17 @@ export default class SVGCanvasPipeline {
 		return (typeof com === "undefined") ? null : com;
 	}
 
+	getComments(commentIds) {
+		const comments = [];
+		commentIds.forEach((cId) => {
+			const c = this.getComment(cId);
+			if (c) {
+				comments.push(c);
+			}
+		});
+		return comments;
+	}
+
 	getNodesAndComments() {
 		return this.pipeline.nodes.concat(this.pipeline.comments);
 	}
@@ -123,6 +134,17 @@ export default class SVGCanvasPipeline {
 		return (typeof link === "undefined") ? null : link;
 	}
 
+	getLinks(linkIds) {
+		const links = [];
+		linkIds.forEach((lId) => {
+			const l = this.getLink(lId);
+			if (l) {
+				links.push(l);
+			}
+		});
+		return links;
+	}
+
 	// Replaces the link in the links array with the one passed in.
 	replaceLink(oldLink) {
 		const index = this.pipeline.links.findIndex((l) => l.id === oldLink.id);

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

@@ -184,7 +184,7 @@ export default class SVGCanvasRenderer {
 
 		// Keep track of when text editing has been closed, so we don't remove
 		// selections when that happens during a zoom gesture.
-		this.textEditingClosedfOnZoom = false;
+		this.textEditingClosedOnZoom = false;
 
 		// Used to monitor the region selection rectangle.
 		this.regionSelect = false;
@@ -1789,41 +1789,46 @@ export default class SVGCanvasRenderer {
 		return this.zoomTransform ? this.zoomTransform.k === this.minScaleExtent : false;
 	}
 
-	getZoomToReveal(nodeIDs, xPos, yPos) {
+	getZoomToReveal(objectIDs, xPos, yPos) {
 		const transformedSVGRect = this.getTransformedViewportDimensions();
-		const nodes = this.activePipeline.getNodes(nodeIDs);
-		const canvasDimensions = CanvasUtils.getCanvasDimensions(nodes, [], [], 0);
-		const canv = this.convertCanvasDimensionsAdjustedForScaleWithPadding(canvasDimensions, 1, 10);
-		const xPosInt = parseInt(xPos, 10);
-		const yPosInt = typeof yPos === "undefined" ? xPosInt : parseInt(yPos, 10);
+		const nodes = this.activePipeline.getNodes(objectIDs);
+		const comments = this.activePipeline.getComments(objectIDs);
+		const links = this.activePipeline.getLinks(objectIDs);
 
-		if (canv) {
-			let xOffset;
-			let yOffset;
+		if (nodes.length > 0 || comments.length > 0 || links.length > 0) {
+			const canvasDimensions = CanvasUtils.getCanvasDimensions(nodes, comments, links, 0, 0, true);
+			const canv = this.convertCanvasDimensionsAdjustedForScaleWithPadding(canvasDimensions, 1, 10);
+			const xPosInt = parseInt(xPos, 10);
+			const yPosInt = typeof yPos === "undefined" ? xPosInt : parseInt(yPos, 10);
 
-			if (!Number.isNaN(xPosInt) && !Number.isNaN(yPosInt)) {
-				xOffset = transformedSVGRect.x + (transformedSVGRect.width * (xPosInt / 100)) - (canv.left + (canv.width / 2));
-				yOffset = transformedSVGRect.y + (transformedSVGRect.height * (yPosInt / 100)) - (canv.top + (canv.height / 2));
+			if (canv) {
+				let xOffset;
+				let yOffset;
 
-			} else {
-				if (canv.right > transformedSVGRect.x + transformedSVGRect.width) {
-					xOffset = transformedSVGRect.x + transformedSVGRect.width - canv.right;
-				}
-				if (canv.left < transformedSVGRect.x) {
-					xOffset = transformedSVGRect.x - canv.left;
-				}
-				if (canv.bottom > transformedSVGRect.y + transformedSVGRect.height) {
-					yOffset = transformedSVGRect.y + transformedSVGRect.height - canv.bottom;
-				}
-				if (canv.top < transformedSVGRect.y) {
-					yOffset = transformedSVGRect.y - canv.top;
+				if (!Number.isNaN(xPosInt) && !Number.isNaN(yPosInt)) {
+					xOffset = transformedSVGRect.x + (transformedSVGRect.width * (xPosInt / 100)) - (canv.left + (canv.width / 2));
+					yOffset = transformedSVGRect.y + (transformedSVGRect.height * (yPosInt / 100)) - (canv.top + (canv.height / 2));
+
+				} else {
+					if (canv.right > transformedSVGRect.x + transformedSVGRect.width) {
+						xOffset = transformedSVGRect.x + transformedSVGRect.width - canv.right;
+					}
+					if (canv.left < transformedSVGRect.x) {
+						xOffset = transformedSVGRect.x - canv.left;
+					}
+					if (canv.bottom > transformedSVGRect.y + transformedSVGRect.height) {
+						yOffset = transformedSVGRect.y + transformedSVGRect.height - canv.bottom;
+					}
+					if (canv.top < transformedSVGRect.y) {
+						yOffset = transformedSVGRect.y - canv.top;
+					}
 				}
-			}
 
-			if (typeof xOffset !== "undefined" || typeof yOffset !== "undefined") {
-				const x = this.zoomTransform.x + ((xOffset || 0)) * this.zoomTransform.k;
-				const y = this.zoomTransform.y + ((yOffset || 0)) * this.zoomTransform.k;
-				return { x: x || 0, y: y || 0, k: this.zoomTransform.k };
+				if (typeof xOffset !== "undefined" || typeof yOffset !== "undefined") {
+					const x = this.zoomTransform.x + ((xOffset || 0)) * this.zoomTransform.k;
+					const y = this.zoomTransform.y + ((yOffset || 0)) * this.zoomTransform.k;
+					return { x: x || 0, y: y || 0, k: this.zoomTransform.k };
+				}
 			}
 		}
 
@@ -1882,7 +1887,7 @@ export default class SVGCanvasRenderer {
 		// if the user clicks on the canvas background. So we set this flag to
 		// prevent the selection being lost in the zoomEnd (mouseup) event.
 		if (this.svgCanvasTextArea.isEditingText()) {
-			this.textEditingClosedfOnZoom = true;
+			this.textEditingClosedOnZoom = true;
 		}
 
 		this.regionSelect = this.shouldDoRegionSelect(d3Event);
@@ -1890,15 +1895,15 @@ export default class SVGCanvasRenderer {
 		if (this.regionSelect) {
 			// Add a delay so, if the user just clicks, they don't see the crosshair.
 			// This will be cleared in zoomEnd if the user's click takes less than 200 ms.
-			this.addingCrossHairCursor = setTimeout(() => this.addTempCursorOverlay("crosshair"), 200);
+			this.addingCursorOverlay = setTimeout(() => this.addTempCursorOverlay("crosshair"), 200);
 			this.regionStartTransformX = d3Event.transform.x;
 			this.regionStartTransformY = d3Event.transform.y;
 
 		} else {
 			if (this.isDragActivated(d3Event)) {
-				this.addTempCursorOverlay("grabbing");
+				this.addingCursorOverlay = setTimeout(() => this.addTempCursorOverlay("grabbing"), 200);
 			} else {
-				this.addTempCursorOverlay("default");
+				this.addingCursorOverlay = setTimeout(() => this.addTempCursorOverlay("default"), 200);
 			}
 		}
 
@@ -1933,8 +1938,8 @@ export default class SVGCanvasRenderer {
 	zoomEnd(d3Event) {
 		this.logger.log("zoomEnd - " + JSON.stringify(d3Event.transform));
 
-		// Clears the display of the crosshair cursor if the user clicks within 200 ms
-		clearTimeout(this.addingCrossHairCursor);
+		// Clears the display of the cursor overlay if the user clicks within 200 ms
+		clearTimeout(this.addingCursorOverlay);
 
 		const transPos = this.getTransformedMousePos(d3Event);
 
@@ -1962,7 +1967,7 @@ export default class SVGCanvasRenderer {
 		this.resetCanvasCursor(d3Event);
 		this.removeTempCursorOverlay();
 		this.contextMenuClosedOnZoom = false;
-		this.textEditingClosedfOnZoom = false;
+		this.textEditingClosedOnZoom = false;
 		this.regionSelect = false;
 	}
 
@@ -2032,7 +2037,7 @@ export default class SVGCanvasRenderer {
 		// 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.textEditingClosedfOnZoom) {
+		if (this.dispUtils.isDisplayingCurrentPipeline() && !this.contextMenuClosedOnZoom && !this.textEditingClosedOnZoom) {
 			this.canvasController.clearSelections();
 		}
 	}

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

@@ -231,6 +231,7 @@ CommonProperties.propTypes = {
 	propertiesInfo: PropTypes.object.isRequired,
 	propertiesConfig: PropTypes.shape({
 		applyOnBlur: PropTypes.bool,
+		trimSpaces: PropTypes.bool,
 		disableSaveOnRequiredErrors: PropTypes.bool,
 		rightFlyout: PropTypes.bool,
 		containerType: PropTypes.string,
@@ -245,7 +246,8 @@ CommonProperties.propTypes = {
 		conditionHiddenPropertyHandling: PropTypes.oneOf(["null", "value"]),
 		conditionDisabledPropertyHandling: PropTypes.oneOf(["null", "value"]),
 		maxLengthForMultiLineControls: PropTypes.number,
-		maxLengthForSingleLineControls: PropTypes.number
+		maxLengthForSingleLineControls: PropTypes.number,
+		convertValueDataTypes: PropTypes.bool
 	}),
 	callbacks: PropTypes.shape({
 		controllerHandler: PropTypes.func,
@@ -273,13 +275,15 @@ CommonProperties.defaultProps = {
 		containerType: "Custom",
 		rightFlyout: true,
 		applyOnBlur: false,
+		trimSpaces: true,
 		disableSaveOnRequiredErrors: false,
 		enableResize: true,
 		conditionReturnValueHandling: "value",
 		schemaValidation: false,
 		applyPropertiesWithoutEdit: false,
 		maxLengthForMultiLineControls: 1024,
-		maxLengthForSingleLineControls: 128
+		maxLengthForSingleLineControls: 128,
+		convertValueDataTypes: false
 	},
 	callbacks: {
 	},

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

@@ -18,13 +18,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import classNames from "classnames";
-import { STATES, CARBON_ICONS } from "./../../constants/constants.js";
+import { STATES, CARBON_ICONS, MESSAGE_KEYS } from "./../../constants/constants.js";
 import { ControlType } from "./../../constants/form-constants";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { isEmpty } 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";
 
 class ControlItem extends React.Component {
 	constructor(props) {
@@ -66,14 +67,24 @@ class ControlItem extends React.Component {
 					</Tooltip>);
 				}
 			}
-			let requiredIndicator;
-			if (this.props.control.required) {
-				requiredIndicator = <span className="properties-required-indicator">*</span>;
+			let indicator;
+			if (this.props.control.showRequiredLabel && this.props.control.required) {
+				indicator = (
+					<span className="properties-indicator">
+						{formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.LABEL_INDICATOR_REQUIRED)}
+					</span>
+				);
+			} else if (!this.props.control.showRequiredLabel && !("required" in this.props.control)) {
+				indicator = (
+					<span className="properties-indicator">
+						{formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.LABEL_INDICATOR_OPTIONAL)}
+					</span>
+				);
 			}
 			label = (
 				<div className={classNames("properties-label-container", { "table-control": this.props.tableControl === true })}>
 					<label className="properties-control-label">{this.props.control.label.text}</label>
-					{requiredIndicator}
+					{indicator}
 					{tooltip}
 				</div>);
 		}

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

@@ -40,12 +40,13 @@
 	display: flex;
 	align-items: center;
 	padding-bottom: $spacing-03;
-	label, .properties-required-indicator {
+	label, .properties-indicator {
 		@include carbon--type-style("label-01");
 		color: $text-02;
+		padding-left: $spacing-02;
 	}
 	&.table-control {
-		label, .properties-required-indicator {
+		label, .properties-indicator {
 			@include carbon--type-style("productive-heading-01");
 			color: $text-01;
 		}

package/src/common-properties/components/editor-form/editor-form.jsx

@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { setActiveTab } from "./../../actions";
-import { Tab, Tabs } from "carbon-components-react";
+import { Tab, Tabs, Link } from "carbon-components-react";
 import * as PropertyUtil from "./../../util/property-utils";
 import { MESSAGE_KEYS, CARBON_ICONS, CONDITION_MESSAGE_TYPE, STATES } from "./../../constants/constants";
 import { cloneDeep, isEmpty, sortBy, get } from "lodash";
@@ -338,9 +338,9 @@ class EditorForm extends React.Component {
 				icon = <Icon type={CONDITION_MESSAGE_TYPE.ERROR} />;
 			}
 			text = (
-				<a className="properties-link-text" onClick={this._handleMessageClick.bind(this, uiItem.controlId)}>
+				<Link className="properties-link-text" onClick={this._handleMessageClick.bind(this, uiItem.controlId)} >
 					{PropertyUtil.evaluateText(uiItem.text, this.props.controller)}
-				</a>);
+				</Link>);
 			return <div key={"link-text." + key} className={textClass} >{icon}{text}</div>;
 		case ("hSeparator"):
 			return <hr key={"h-separator." + key} className="properties-h-separator" />;

package/src/common-properties/components/editor-form/editor-form.scss

@@ -105,16 +105,13 @@ $primary-tab-height: $spacing-08;
 
 .properties-link-text-container {
 	display: flex;
+	align-items: center;
 	padding: $spacing-04 0 0 0;
 	svg {
-		margin-right: $spacing-05;
-		margin-top: 1px;
-		width: $spacing-05;
-		height: $spacing-05;
-		flex-shrink: 0;
+		margin-right: $spacing-03;
 	}
 	.properties-link-text {
-		@include carbon--type-style("body-short-01");
+		cursor: pointer;
 	}
 }
 

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

@@ -113,6 +113,9 @@ class FlexibleTable extends React.Component {
 		if (row.columns && has(row.columns[0], "content.props.children.props.propertyId.propertyId")) {
 			// this is a nested control
 			rowIndex = this.getLastChildPropertyIdRow(row.columns[0].content.props.children.props.propertyId, index);
+		} else if (row.columns && has(row.columns[0], "content.props.children.props.propertyId.index")) {
+			// for rows that have multi-select controls in them
+			rowIndex = row.columns[0].content.props.children.props.propertyId.index;
 		} else if (row.columns && has(row.columns[0], "content.props.children.props.propertyId.row")) {
 			rowIndex = row.columns[0].content.props.children.props.propertyId.row;
 		} else if (typeof row.rowKey === "number") { // expression tables uses rowKey
@@ -354,7 +357,7 @@ class FlexibleTable extends React.Component {
 		const checked = data.selected;
 		const overSelectOption = data.isOverSelectOption;
 
-		if (!this.props.data[displayedRowIndex].disabled) {
+		if (!this.props.data[displayedRowIndex].disabled && typeof this.props.updateRowSelections === "function") {
 			if (overSelectOption) { // Checkbox is clicked
 				let current = this.props.selectedRows ? this.props.selectedRows : [];
 				if (data.selectMultipleRows) { // multiple rows selected/deselected using shift key
@@ -372,7 +375,7 @@ class FlexibleTable extends React.Component {
 				// Sort ascending because we want to add selected rows in the same order as they're displayed in the table
 				current.sort((a, b) => a - b);
 				this.props.updateRowSelections(current);
-			} else if (this.props.rowSelection === ROW_SELECTION.SINGLE && typeof this.props.updateRowSelections !== "undefined") { // Table row is clicked
+			} else if (this.props.rowSelection === ROW_SELECTION.SINGLE) { // Table row is clicked
 				this.props.updateRowSelections(data.index, evt, this.props.data[data.index].rowKey);
 			}
 		}

package/src/common-properties/components/moveable-table-rows/moveable-table-rows.jsx

@@ -39,7 +39,7 @@ class MoveableTableRows extends React.Component {
 	}
 
 	getMoveableTableRows() {
-		var moveCol = null;
+		let moveCol = null;
 		if (typeof this.props.control.moveableRows !== "undefined" && this.props.control.moveableRows) {
 			const moveImages = this.getTableRowMoveImages();
 			moveCol = (
@@ -52,7 +52,7 @@ class MoveableTableRows extends React.Component {
 		}
 
 		// Added role presentation to fix a11y violation - no headers in the table
-		var content = (<table role="presentation" className="properties-mr-table-container">
+		const content = (<table role="presentation" className="properties-mr-table-container">
 			<tbody>
 				<tr className={classNames("properties-mr-table-content", { "disabled": this.props.disabled })}>
 					<td>

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

@@ -112,7 +112,10 @@ export const MESSAGE_KEYS = {
 	TOGGLE_ON_LABEL: "toggle.on.label",
 	TOGGLE_OFF_LABEL: "toggle.off.label",
 	SHOW_PASSWORD_TOOLTIP: "passwordShow.tooltip",
-	HIDE_PASSWORD_TOOLTIP: "passwordHide.tooltip"
+	HIDE_PASSWORD_TOOLTIP: "passwordHide.tooltip",
+	LABEL_INDICATOR_REQUIRED: "label.indicator.required",
+	LABEL_INDICATOR_OPTIONAL: "label.indicator.optional",
+	EMPTY_LIST_PLACEHOLDER: "emptyList.placeholder"
 };
 
 export const TRUNCATE_LIMIT = 10000;

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

@@ -49,7 +49,7 @@ import ReadonlyTableControl from "./readonlytable";
 
 import ControlItem from "./../components/control-item";
 import ActionFactory from "./../actions/action-factory.js";
-import { has } from "lodash";
+import { has, get } from "lodash";
 
 /*
 * <ControlItem /> should be called from every control.
@@ -93,7 +93,7 @@ const tableControls = [
 export default class ControlFactory {
 
 	constructor(controller) {
-		this.rightFlyout = true;
+		this.rightFlyout = controller ? get(controller.getPropertiesConfig(), "rightFlyout", false) : false;
 		this.controller = controller;
 		this.actionFactory = new ActionFactory(this.controller);
 	}
@@ -113,8 +113,12 @@ export default class ControlFactory {
 	* @param tableInfo
 	*/
 	createControlItem(control, propertyId, tableInfo) {
-		const controlObj = this.createControl(control, propertyId, tableInfo);
 		const hidden = this.controller.getControlState(propertyId) === STATES.HIDDEN;
+		if (hidden) {
+			return null; // Do not render hidden controls
+		}
+
+		const controlObj = this.createControl(control, propertyId, tableInfo);
 		const className = control.className ? control.className : "";
 
 		/*
@@ -128,7 +132,7 @@ export default class ControlFactory {
 		// When control-item displays other controls, add padding on control-item
 		return (
 			<div key={"properties-ctrl-" + control.name} data-id={"properties-ctrl-" + control.name}
-				className={classNames("properties-ctrl-wrapper", { "hide": hidden }, className)}
+				className={classNames("properties-ctrl-wrapper", className)}
 			>
 				<ControlItem
 					key={"ctrl-item-" + control.name}

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

@@ -39,7 +39,4 @@
 			width: 100%;
 		}
 	}
-	&.hide {
-		display: none;
-	}
 }

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

@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { SelectItem, Select, Dropdown, ComboBox } from "carbon-components-react";
-import { isEqual } from "lodash";
+import { isEqual, isEmpty } from "lodash";
 import * as ControlUtils from "./../../util/control-utils";
 import ValidationMessage from "./../../components/validation-message";
 import classNames from "classnames";
@@ -30,11 +30,22 @@ import { formatMessage } from "./../../util/property-utils";
 class DropDown extends React.Component {
 	constructor(props) {
 		super(props);
+		this.reactIntl = props.controller.getReactIntl();
 		this.emptyLabel = "...";
-		if (props.control.additionalText) {
+		this.disableEmptyListDropdown = false;
+		if (isEmpty(props.controlOpts)) {
+			// For empty dropdown, get placeholder text from resources
+			const overrideEmptyListPlaceholder = `${this.props.control.name}.emptyList.placeholder`;
+			const defaultEmptyListPlaceholder = formatMessage(this.reactIntl, MESSAGE_KEYS.EMPTY_LIST_PLACEHOLDER);
+			this.emptyLabel = props.controller.getResource(overrideEmptyListPlaceholder, defaultEmptyListPlaceholder);
+			// Disable empty dropdown when [property_id].emptyList.placeholder is set in resources
+			if (this.emptyLabel !== defaultEmptyListPlaceholder) {
+				this.disableEmptyListDropdown = true;
+			}
+		} else if (props.control.additionalText) {
+			// For non-empty dropdown, get placeholder text from place_holder_text in parameter_info
 			this.emptyLabel = props.control.additionalText;
 		}
-		this.reactIntl = props.controller.getReactIntl();
 		this.id = ControlUtils.getControlId(this.props.propertyId);
 		this.handleChange = this.handleChange.bind(this);
 		this.handleComboOnChange = this.handleComboOnChange.bind(this);
@@ -205,7 +216,7 @@ class DropDown extends React.Component {
 				hideLabel
 				inline
 				labelText={this.props.control.label ? this.props.control.label.text : ""}
-				disabled={this.props.state === STATES.DISABLED}
+				disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
 				onChange={this.handleChange}
 				value={selection}
 				light={this.props.controller.getLight() && this.props.control.light}
@@ -217,7 +228,7 @@ class DropDown extends React.Component {
 				{...validationProps}
 				ariaLabel={this.props.control.label ? this.props.control.label.text : ""}
 				id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
-				disabled={this.props.state === STATES.DISABLED}
+				disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
 				placeholder={dropDown.selectedOption.label}
 				selectedItem={dropDown.selectedOption.label}
 				items={dropDown.options}
@@ -231,7 +242,7 @@ class DropDown extends React.Component {
 			dropdownComponent = (<Dropdown
 				{...validationProps}
 				id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
-				disabled={this.props.state === STATES.DISABLED}
+				disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
 				type="default"
 				items={dropDown.options}
 				onChange={this.handleChange}

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

@@ -43,7 +43,7 @@ class SelectColumnsControl extends AbstractTable {
 	makeRows(controlValue, tableState) {
 		const rows = [];
 		if (controlValue) {
-			for (var rowIndex = 0; rowIndex < controlValue.length; rowIndex++) {
+			for (let rowIndex = 0; rowIndex < controlValue.length; rowIndex++) {
 				const columns = [];
 				// If the propertyId contains 'row' then this selectcolumns control is part of a table.
 				// Need to add an additional 'index' to retrieve the correct value from the control within a table.
@@ -141,7 +141,7 @@ class SelectColumnsControl extends AbstractTable {
 				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 
-		var content = (
+		const content = (
 			<div>
 				<div className="properties-column-select-table">
 					{table}

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

@@ -183,6 +183,9 @@ export class Control {
 		if (settings.className) {
 			this.className = settings.className;
 		}
+		if (settings.showRequiredLabel) {
+			this.showRequiredLabel = settings.showRequiredLabel;
+		}
 		if (settings.buttons) {
 			this.buttons = settings.buttons;
 		}

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

@@ -649,6 +649,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.action = action;
 	settings.customValueAllowed = parameter.customValueAllowed;
 	settings.className = parameter.className;
+	settings.showRequiredLabel = parameter.showRequiredLabel;
 	settings.buttons = buttons;
 	settings.light = _isControlLight(additionalInfo.light, additionalInfo.containerType, parameter.isSubPanelEdit());
 	if (isSubControl) {

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

@@ -20,6 +20,7 @@ import { makePrimaryTab } from "./EditorForm";
 import { UIItem } from "./UIItem";
 import { L10nProvider } from "../util/L10nProvider";
 import { translateMessages } from "./Conditions";
+import { convertValueDataTypes } from "../util/property-utils";
 import { Size } from "../constants/form-constants";
 import { CONTAINER_TYPE } from "../constants/constants";
 
@@ -44,8 +45,9 @@ export default class Form {
 	* Returns a new Form
 	* @param paramDef Parameter definition
 	* @param containerType Type of container common properties will be displayed in, set in propertiesConfig
+	* @param shouldConvertValueDataTypes Boolean, if true, convert the currentParameters values into the type defined in parameterDef
 	*/
-	static makeForm(paramDef, containerType) {
+	static makeForm(paramDef, containerType, shouldConvertValueDataTypes) {
 		const propDef = PropertyDef.makePropertyDef(propertyOf(paramDef)("titleDefinition"), propertyOf(paramDef)("parameters"), propertyOf(paramDef)("complex_types"),
 			propertyOf(paramDef)("uihints"));
 		const resources = propertyOf(paramDef)("resources");
@@ -59,8 +61,13 @@ export default class Form {
 				}
 			}
 
+			let currentParameters = propertyOf(paramDef)("current_parameters");
+			if (shouldConvertValueDataTypes) {
+				currentParameters = convertValueDataTypes(currentParameters, propDef.parameterMetadata.paramDefs);
+			}
+
 			const data = {
-				currentParameters: propertyOf(paramDef)("current_parameters"),
+				currentParameters: currentParameters,
 				uiCurrentParameters: propertyOf(paramDef)("current_ui_parameters"),
 				datasetMetadata: propertyOf(paramDef)("dataset_metadata")
 			};