@elyra/canvas 12.28.2 → 12.30.0

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

@@ -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.
@@ -33,6 +33,7 @@ const markdownIt = require("markdown-it")({
 });
 
 import { cloneDeep, escape as escapeText, forOwn, get } from "lodash";
+import { addNodeExternalObject, addDecExternalObject, removeExternalObject } from "./svg-canvas-utils-external.js";
 import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	ASSOC_VAR_CURVE_LEFT, ASSOC_VAR_CURVE_RIGHT, ASSOC_VAR_DOUBLE_BACK_RIGHT,
 	LINK_TYPE_CURVE, LINK_TYPE_ELBOW, LINK_TYPE_STRAIGHT,
@@ -417,7 +418,9 @@ export default class SVGCanvasRenderer {
 
 		if (this.config.enablePositionNodeOnRightFlyoutOpen &&
 				this.canvasController.isRightFlyoutOpen()) {
-			const posInfo = this.config.enablePositionNodeOnRightFlyoutOpen;
+			const posInfo = (typeof this.config.enablePositionNodeOnRightFlyoutOpen === "boolean")
+				? { x: 50, y: 50 }
+				: this.config.enablePositionNodeOnRightFlyoutOpen;
 			const x = posInfo.x ? posInfo.x : 50;
 			const y = posInfo.y ? posInfo.y : 50;
 			const selNodeIds = this.activePipeline.getSelectedNodeIds();
@@ -866,29 +869,16 @@ export default class SVGCanvasRenderer {
 	// plus its width and height. This needs to be called each time a new node
 	// is dragged from the palette, in case the dimensions of the ghost node
 	// have changed because the canvas has been zoomed.
-	getGhostNode(nodeTemplate) {
+	getGhostNode(node) {
 		const that = this;
-		const ghost = this.getGhostDimensions();
-		const node = this.canvasController.convertNodeTemplate(nodeTemplate);
-		node.layout = this.nodeLayout;
-		if (node.is_expanded) {
-			node.width = node.expanded_width;
-			node.height = node.expanded_height;
-		} else if (node.isResized) {
-			node.width = node.resizeWidth;
-			node.height = node.resizeHeight;
-		} else {
-			node.width = ghost.width;
-			node.height = ghost.height;
-		}
-		const nodeImage = this.getNodeImage(node);
-		const nodeImageType = this.getImageType(nodeImage);
 		const ghostDivSel = this.getGhostDivSel();
 
 		// Calculate the ghost area width which is the maximum of either the node
 		// label or the default node width.
 		const ghostAreaWidth = Math.max(this.nodeLayout.labelWidth, node.width);
 
+		let xOffset = 0;
+
 		// Remove any existing SVG object from the div
 		ghostDivSel
 			.selectAll(".d3-ghost-svg")
@@ -915,75 +905,82 @@ export default class SVGCanvasRenderer {
 			.attr("width", node.width)
 			.attr("height", node.height);
 
-		ghostGrp
-			.append(nodeImageType)
-			.attr("class", "d3-node-image")
-			.each(function() { that.setNodeImageContent(this, node); })
-			.attr("x", this.nodeUtils.getNodeImagePosX(node))
-			.attr("y", this.nodeUtils.getNodeImagePosY(node))
-			.attr("width", this.nodeUtils.getNodeImageWidth(node))
-			.attr("height", this.nodeUtils.getNodeImageHeight(node));
-
-		const fObject = ghostGrp
-			.append("foreignObject")
-			.attr("x", this.nodeUtils.getNodeLabelPosX(node))
-			.attr("y", this.nodeUtils.getNodeLabelPosY(node))
-			.attr("width", this.nodeUtils.getNodeLabelWidth(node))
-			.attr("height", this.nodeUtils.getNodeLabelHeight(node))
-			.attr("class", "d3-foreign-object-ghost-label");
-
-		const fObjectDiv = fObject
-			.append("xhtml:div")
-			.attr("class", this.nodeUtils.getNodeLabelClass(node));
-
-		const fObjectSpan = fObjectDiv
-			.append("xhtml:span")
-			.html(node.label);
-
-		// At the time of writing, Firefox takes the ghost image from only those
-		// objects that are visible (ignoring any invisible objects like the div
-		// and SVG area) consequently we position the node and label so the label
-		// (if bigger than the node width) is positioned up against the left edge
-		// of the invisible div and SVG area. If the label is shorter than the node
-		// width, the node is positioned up against the left edge of the SVG. We do
-		// this by translating the group object in the x direction.
-
-		// First calculate the display width of the label. The span will be the
-		// full text but it may be constricted by the label width in the layout.
-		const labelSpanWidth = fObjectSpan.node().getBoundingClientRect().width + 4; // Include border for label
-		const nodeLabelWidth = this.nodeUtils.getNodeLabelWidth(node);
-		const labelDisplayLength = Math.min(nodeLabelWidth, labelSpanWidth);
-
-		// Next calculate the amount, if any, the label protrudes beyond the edge
-		// of the node width and move the ghost group by that amount.
-		const xOffset = Math.max(0, (labelDisplayLength - ghost.width) / 2) * this.zoomTransform.k;
-		ghostGrp.attr("transform", `translate(${xOffset}, 0) scale(${this.zoomTransform.k})`);
-
-		// If the label is center justified, restrict the label width to the
-		// display amount and adjust the x coordinate to compensate for the change
-		// in width.
-		if (node.layout.labelAlign === "center") {
-			const labelDiff = Math.max(0, (nodeLabelWidth - labelDisplayLength) / 2);
-
-			fObject
-				.attr("width", labelDisplayLength)
-				.attr("x", this.nodeUtils.getNodeLabelPosX(node) + labelDiff);
-			fObjectDiv.attr("width", labelDisplayLength);
+		if (!this.nodeLayout.nodeExternalObject) {
+			const nodeImage = this.getNodeImage(node);
+			const nodeImageType = this.getImageType(nodeImage);
+
+			ghostGrp
+				.append(nodeImageType)
+				.attr("class", "d3-node-image")
+				.each(function() { that.setNodeImageContent(this, node); })
+				.attr("x", this.nodeUtils.getNodeImagePosX(node))
+				.attr("y", this.nodeUtils.getNodeImagePosY(node))
+				.attr("width", this.nodeUtils.getNodeImageWidth(node))
+				.attr("height", this.nodeUtils.getNodeImageHeight(node));
+
+			const fObject = ghostGrp
+				.append("foreignObject")
+				.attr("x", this.nodeUtils.getNodeLabelPosX(node))
+				.attr("y", this.nodeUtils.getNodeLabelPosY(node))
+				.attr("width", this.nodeUtils.getNodeLabelWidth(node))
+				.attr("height", this.nodeUtils.getNodeLabelHeight(node))
+				.attr("class", "d3-foreign-object-ghost-label");
+
+			const fObjectDiv = fObject
+				.append("xhtml:div")
+				.attr("class", this.nodeUtils.getNodeLabelClass(node));
+
+			const fObjectSpan = fObjectDiv
+				.append("xhtml:span")
+				.html(node.label);
+
+			// At the time of writing, Firefox takes the ghost image from only those
+			// objects that are visible (ignoring any invisible objects like the div
+			// and SVG area) consequently we position the node and label so the label
+			// (if bigger than the node width) is positioned up against the left edge
+			// of the invisible div and SVG area. If the label is shorter than the node
+			// width, the node is positioned up against the left edge of the SVG. We do
+			// this by translating the group object in the x direction.
+
+			// First calculate the display width of the label. The span will be the
+			// full text but it may be constricted by the label width in the layout.
+			const labelSpanWidth = fObjectSpan.node().getBoundingClientRect().width + 4; // Include border for label
+			const nodeLabelWidth = this.nodeUtils.getNodeLabelWidth(node);
+			const labelDisplayLength = Math.min(nodeLabelWidth, labelSpanWidth);
+
+			// Next calculate the amount, if any, the label protrudes beyond the edge
+			// of the node width and move the ghost group by that amount.
+			xOffset = Math.max(0, (labelDisplayLength - node.width) / 2) * this.zoomTransform.k;
+
+			// If the label is center justified, restrict the label width to the
+			// display amount and adjust the x coordinate to compensate for the change
+			// in width.
+			if (node.layout.labelAlign === "center") {
+				const labelDiff = Math.max(0, (nodeLabelWidth - labelDisplayLength) / 2);
+
+				fObject
+					.attr("width", labelDisplayLength)
+					.attr("x", this.nodeUtils.getNodeLabelPosX(node) + labelDiff);
+				fObjectDiv.attr("width", labelDisplayLength);
+			}
 		}
 
+		ghostGrp.attr("transform", `translate(${xOffset}, 0) scale(${this.zoomTransform.k})`);
+
 		// Get the amount the actual browser page is 'zoomed'. This is differet
 		// to the zoom amount for the canvas objects.
 		const browserZoom = this.getBrowserZoom();
 
 		// Calculate the center of the node area for positioning the mouse pointer
 		// on the image when it is being dragged.
-		const centerX = (xOffset + ((ghost.width / 2) * this.zoomTransform.k)) * browserZoom;
-		const centerY = ((ghost.height / 2) * this.zoomTransform.k) * browserZoom;
+		const centerX = (xOffset + ((node.width / 2) * this.zoomTransform.k)) * browserZoom;
+		const centerY = ((node.height / 2) * this.zoomTransform.k) * browserZoom;
 
 		return {
 			element: ghostDivSel.node(),
 			centerX: centerX,
-			centerY: centerY
+			centerY: centerY,
+			nodeTemplate: node
 		};
 	}
 
@@ -1010,17 +1007,6 @@ export default class SVGCanvasRenderer {
 		return browserZoom;
 	}
 
-	// Returns an object containing the dimensions of the ghost node that hovers
-	// over canvas when a node is being dragged from the palette. The ghost node
-	// is based on the default node width and height so any change to these values
-	// that might be made to a node by the layoutHandler will not be reflected here.
-	getGhostDimensions() {
-		return {
-			width: this.nodeLayout.defaultNodeWidth,
-			height: this.nodeLayout.defaultNodeHeight
-		};
-	}
-
 	nodeTemplateDragStart(nodeTemplate) {
 		if (this.isNodeTemplateInsertableIntoLink(nodeTemplate)) {
 			this.setDataLinkSelectionAreaWider(true);
@@ -1049,12 +1035,11 @@ export default class SVGCanvasRenderer {
 
 		if (this.isNodeTemplateAttachableToDetachedLinks(nodeTemplate)) {
 			const mousePos = this.convertPageCoordsToCanvasCoords(x, y);
-			const ghost = this.getGhostDimensions();
 			const ghostArea = {
-				x1: mousePos.x - (ghost.width / 2),
-				y1: mousePos.y - (ghost.height / 2),
-				x2: mousePos.x + (ghost.width / 2),
-				y2: mousePos.y + (ghost.height / 2)
+				x1: mousePos.x - (nodeTemplate.width / 2),
+				y1: mousePos.y - (nodeTemplate.height / 2),
+				x2: mousePos.x + (nodeTemplate.width / 2),
+				y2: mousePos.y + (nodeTemplate.height / 2)
 			};
 			const template = this.canvasController.convertNodeTemplate(nodeTemplate);
 			const links = this.getAttachableLinksForNodeAtPos(template, ghostArea);
@@ -1204,12 +1189,13 @@ export default class SVGCanvasRenderer {
 		this.dragNewLinkOverNode = null;
 	}
 
-	// Processes the drop of a palette node template onto the canvas.
+	// Processes the drop of a palette node template onto the canvas. The
+	// nodeTemplate is in internal format.
 	nodeTemplateDropped(nodeTemplate, x, y) {
 		if (nodeTemplate === null) {
 			return;
 		}
-		const transPos = this.transformMousePosForNode(x, y);
+		const transPos = this.transformMousePosForNode(x, y, nodeTemplate);
 
 		// If the node template was dropped on a link
 		if (this.dragOverLink) {
@@ -1242,13 +1228,17 @@ export default class SVGCanvasRenderer {
 
 	// Transforms the mouse position passed in to be appropriate for a palette
 	// node or external object being dragged over the canvas.
-	transformMousePosForNode(x, y) {
+	transformMousePosForNode(x, y, node) {
 		const mousePos = this.convertPageCoordsToCanvasCoords(x, y);
 
 		// Offset mousePos so new node appears in center of mouse location.
-		const ghost = this.getGhostDimensions();
-		mousePos.x -= ghost.width / 2;
-		mousePos.y -= ghost.height / 2;
+		if (node && node.width && node.height) {
+			mousePos.x -= node.width / 2;
+			mousePos.y -= node.height / 2;
+		} else {
+			mousePos.x -= this.nodeLayout.defaultNodeWidth / 2;
+			mousePos.y -= this.nodeLayout.defaultNodeHeight / 2;
+		}
 
 		return this.getMousePosSnapToGrid(mousePos);
 	}
@@ -2670,7 +2660,9 @@ export default class SVGCanvasRenderer {
 		selection
 			.data(data, (d) => d.id)
 			.join(
-				(enter) => this.createNodes(enter)
+				(enter) => this.createNodes(enter),
+				null,
+				(remove) => this.removeNodes(remove)
 			)
 			.attr("transform", (d) => `translate(${d.x_pos}, ${d.y_pos})`)
 			.attr("class", (d) => this.getNodeGroupClass(d))
@@ -2703,10 +2695,15 @@ export default class SVGCanvasRenderer {
 			.attr("class", "d3-node-selection-highlight");
 
 		// Node Body
-		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d))
+		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d) && d.layout.nodeShapeDisplay)
 			.append("path")
 			.attr("class", "d3-node-body-outline");
 
+		// Optional foreign object to contain a React object
+		newNodeGroups.filter((d) => d.layout.nodeExternalObject)
+			.append("foreignObject")
+			.attr("class", "d3-foreign-object-external-node");
+
 		// Node Image
 		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d) && d.layout.imageDisplay)
 			.each((node, i, nodeGrps) => {
@@ -2718,7 +2715,7 @@ export default class SVGCanvasRenderer {
 			});
 
 		// Node Label
-		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d))
+		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d) && d.layout.labelDisplay)
 			.append("foreignObject")
 			.attr("class", "d3-foreign-object-node-label")
 			.call(this.attachNodeLabelListeners.bind(this))
@@ -2752,6 +2749,15 @@ export default class SVGCanvasRenderer {
 			.attr("d", (d) => this.getNodeShapePath(d))
 			.attr("style", (d) => this.getNodeBodyStyle(d, "default"));
 
+		// Optional foreign object to contain a React object
+		joinedNodeGrps.selectChildren(".d3-foreign-object-external-node")
+			.datum((d) => this.activePipeline.getNode(d.id))
+			.attr("width", (d) => d.width)
+			.attr("height", (d) => d.height)
+			.attr("x", 0)
+			.attr("y", 0)
+			.each(addNodeExternalObject.bind(this));
+
 		// Node Image
 		joinedNodeGrps.selectChildren(".d3-node-image")
 			.datum((d) => this.activePipeline.getNode(d.id))
@@ -2806,6 +2812,20 @@ export default class SVGCanvasRenderer {
 		this.logger.logEndTimer("updateNodes");
 	}
 
+	removeNodes(removeSel) {
+		// Remove any foreign objects for react nodes, if necessary.
+		removeSel
+			.selectChildren(".d3-foreign-object-external-node")
+			.each(removeExternalObject.bind(this));
+
+		// Remove all nodes in the selection.
+		removeSel.remove();
+	}
+
+	onClick() {
+		window.console.log("onClick");
+	}
+
 	// Handles the display of a supernode sub-flow contents or hides the contents
 	// as necessary.
 	displaySupernodeContents(d, supernodeD3Object) {
@@ -3138,6 +3158,10 @@ export default class SVGCanvasRenderer {
 	attachInputPortListeners(inputPorts, node) {
 		inputPorts
 			.on("mousedown", (d3Event, port) => {
+				if (!this.config.enableEditingActions) {
+					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+					return;
+				}
 				if (this.config.enableAssocLinkCreation) {
 					// Make sure this is just a left mouse button click - we don't want context menu click starting a line being drawn
 					if (d3Event.button === 0) {
@@ -3197,6 +3221,10 @@ export default class SVGCanvasRenderer {
 	attachOutputPortListeners(outputPorts, node) {
 		outputPorts
 			.on("mousedown", (d3Event, port) => {
+				if (!this.config.enableEditingActions) {
+					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
+					return;
+				}
 				// Make sure this is just a left mouse button click - we don't want context menu click starting a line being drawn
 				if (d3Event.button === 0) {
 					CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stops the node drag behavior when clicking on the handle/circle
@@ -3452,12 +3480,13 @@ export default class SVGCanvasRenderer {
 		this.updateDecPaths(dec, decSel, objType);
 		this.updateDecImages(dec, decSel, objType, d);
 		this.updateDecLabels(dec, decSel, objType, d);
+		this.updateDecJsxObjs(dec, decSel, objType, d);
 	}
 
 	updateDecOutlines(dec, decSel, objType, d) {
 		let outlnSel = decSel.selectChild("rect");
 
-		if (!dec.label && !dec.path && dec.outline !== false) {
+		if (!dec.label && !dec.path && !dec.jsx && dec.outline !== false) {
 			outlnSel = outlnSel.empty() ? decSel.append("rect") : outlnSel;
 			outlnSel
 				.attr("class", this.decUtils.getDecClass(dec, `d3-${objType}-dec-outline`))
@@ -3505,7 +3534,7 @@ export default class SVGCanvasRenderer {
 	}
 
 	updateDecLabels(dec, decSel, objType, d) {
-		let labelSel = decSel.selectChild("foreignObject");
+		let labelSel = decSel.selectChild(".d3-foreign-object-dec-label");
 
 		if (dec.label) {
 			if (labelSel.empty()) {
@@ -3532,6 +3561,29 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	updateDecJsxObjs(dec, decSel, objType, d) {
+		let extSel = decSel.selectChild(".d3-foreign-object-dec-jsx");
+
+		if (dec.jsx) {
+			if (extSel.empty()) {
+				extSel = decSel
+					.append("foreignObject")
+					.attr("class", "d3-foreign-object-dec-jsx")
+					.attr("tabindex", -1)
+					.attr("x", 0)
+					.attr("y", 0)
+					.call(this.attachDecLabelListeners.bind(this, d, objType));
+			}
+			extSel
+				.attr("width", this.decUtils.getDecWidth(dec, d, objType))
+				.attr("height", this.decUtils.getDecHeight(dec, d, objType))
+				.each(addDecExternalObject.bind(this));
+		} else {
+			extSel.each(removeExternalObject.bind(this));
+			extSel.remove();
+		}
+	}
+
 	attachDecLabelListeners(obj, objType, decLabels) {
 		decLabels
 			.on("dblclick", (d3Event, dec) => {
@@ -6859,7 +6911,8 @@ export default class SVGCanvasRenderer {
 	// "Curve" link to make it look presentable. I know, I tried!
 	getArrowHeadTransform(d) {
 		const angle =
-			this.canvasLayout.linkType === LINK_TYPE_ELBOW
+			this.canvasLayout.linkType === LINK_TYPE_ELBOW ||
+			this.canvasLayout.linkType === LINK_TYPE_CURVE
 				? this.getAngleBasedOnLinkDirection()
 				: Math.atan2((d.y2 - d.y1), (d.x2 - d.x1)) * (180 / Math.PI);
 

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

@@ -0,0 +1,34 @@
+/*
+ * 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 ReactDOM from "react-dom";
+
+export const addNodeExternalObject = (node, i, foreignObjects) => {
+	ReactDOM.render(
+		<node.layout.nodeExternalObject
+			nodeData={node}
+		/>,
+		foreignObjects[i]
+	);
+};
+
+export const addDecExternalObject = (dec, i, foreignObjects) => {
+	ReactDOM.render(dec.jsx, foreignObjects[i]);
+};
+
+export const removeExternalObject = (obj, i, foreignObjects) => {
+	ReactDOM.unmountComponentAtNode(foreignObjects[i]);
+};

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

@@ -70,7 +70,8 @@ class ButtonAction extends React.Component {
 	}
 
 	render() {
-		const className = classNames("properties-action-button", { "hide": this.props.state === STATES.HIDDEN });
+		const customClassName = this.props.action.className ? this.props.action.className : "";
+		const className = classNames("properties-action-button", { "hide": this.props.state === STATES.HIDDEN }, customClassName);
 		const disabled = this.props.state === STATES.DISABLED;
 		const actionButtonKind = this.getActionButtonKind();
 		const actionButtonSize = this.getActionButtonSize();

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

@@ -49,9 +49,10 @@ class ImageAction extends React.Component {
 		}
 
 		const disabled = this.props.state === STATES.DISABLED;
+		const customClassName = this.props.action.className ? this.props.action.className : "";
 		const className = classNames("properties-action-image", { "left": this.props.action.image.placement === "left" },
 			{ "right": this.props.action.image.placement === "right" }, { "hide": this.props.state === STATES.HIDDEN },
-			{ "disabled": disabled });
+			{ "disabled": disabled }, customClassName);
 
 		const image = (
 			<div data-id={this.props.action.name}>

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

@@ -93,6 +93,9 @@ class TitleEditor extends Component {
 	}
 
 	render() {
+		if (this.props.title === null) {
+			return null;
+		}
 		const propertiesTitleEditButtonLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.TITLE_EDITOR_LABEL);
 		const helpButtonLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.TITLE_EDITOR_HELPBUTTON_LABEL);
 		const closeButtonLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.PROPERTIESEDIT_CLOSEBUTTON_LABEL);

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

@@ -171,11 +171,9 @@
 			margin-left: 0;
 		}
 
-		// Override padding for sortable columns to show space between column label and sort icon
 		.ReactVirtualized__Table__sortableHeaderColumn {
-			.properties-tooltips-container {
-				padding: 0;
-				padding-left: $spacing-05;
+			.properties-vt-label-tip-icon {
+				padding-right: $spacing-03; // spacing between column label and sort icon
 			}
 			&:hover {
 				background-color: $active-ui;

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

@@ -21,3 +21,12 @@
 		}
 	}
 }
+
+.properties-datepicker {
+	.bx--date-picker-container {
+		.bx--form-requirement,
+		.bx--form__helper-text {
+			max-width: 18rem; // https://github.com/carbon-design-system/carbon/issues/12937
+		}
+	}
+}

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { PasswordInput, Form } from "carbon-components-react";
+import { PasswordInput } from "carbon-components-react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
@@ -49,23 +49,21 @@ class PasswordControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Form>
-					<PasswordInput
-						{...validationProps}
-						autoComplete="off"
-						id={this.id}
-						disabled={this.props.state === STATES.DISABLED}
-						placeholder={this.props.control.additionalText}
-						onChange={this.handleChange.bind(this)}
-						value={value}
-						labelText={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-						light={this.props.controller.getLight() && this.props.control.light}
-						tooltipAlignment="end"
-						showPasswordLabel={showPasswordLabel}
-						hidePasswordLabel={hidePasswordLabel}
-					/>
-				</Form>
+				<PasswordInput
+					{...validationProps}
+					autoComplete="off"
+					id={this.id}
+					disabled={this.props.state === STATES.DISABLED}
+					placeholder={this.props.control.additionalText}
+					onChange={this.handleChange.bind(this)}
+					value={value}
+					labelText={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+					light={this.props.controller.getLight() && this.props.control.light}
+					tooltipAlignment="end"
+					showPasswordLabel={showPasswordLabel}
+					hidePasswordLabel={hidePasswordLabel}
+				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>);
 	}

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

@@ -18,7 +18,7 @@
 import { ResourceDef } from "../util/L10nProvider";
 
 export class Action {
-	constructor(actionName, label, description, control, data, image, button) {
+	constructor(actionName, label, description, control, data, image, button, className) {
 		this.name = actionName;
 		this.label = label;
 		this.description = description;
@@ -26,6 +26,7 @@ export class Action {
 		this.data = data;
 		this.image = image;
 		this.button = button;
+		this.className = className;
 	}
 }
 
@@ -40,6 +41,7 @@ class ActionDef {
 			actionDef.data = action.data;
 			actionDef.image = action.image;
 			actionDef.button = action.button;
+			actionDef.className = action.class_name;
 			return actionDef;
 		}
 		return null;

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

@@ -763,7 +763,7 @@ function _makeAction(action, l10nProvider) {
 	if (action.description) {
 		actionDesc = new Description(l10nProvider.l10nDesc(action, action.id));
 	}
-	return new Action(action.id, actionLabel, actionDesc, action.control, action.data, action.image, action.button);
+	return new Action(action.id, actionLabel, actionDesc, action.control, action.data, action.image, action.button, action.className);
 }
 
 function _makeButtons(buttonMetadata, l10nProvider) {

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

@@ -62,7 +62,7 @@ export class PropertyDef {
 		const actionMetadata = ActionMetadata.makeActionMetadata(propertyOf(uihints)("action_info"));
 		const groupMetadata = GroupMetadata.makeGroupMetadata(propertyOf(uihints)("group_info"), parameterMetadata.getParameters());
 
-		const label = titleDefinition && titleDefinition.title ? titleDefinition.title : "";
+		const label = titleDefinition && titleDefinition.title ? titleDefinition.title : null;
 		const labelEditable = titleDefinition && typeof titleDefinition.editable !== "undefined" ? titleDefinition.editable : DEFAULT_LABEL_EDITABLE;
 
 		return new PropertyDef(

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

@@ -20,6 +20,7 @@ import classNames from "classnames";
 import { Tabs, Tab } from "carbon-components-react";
 import { getDataId } from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants.js";
+import { v4 as uuid4 } from "uuid";
 
 class Subtabs extends React.Component {
 	constructor(props) {
@@ -27,6 +28,7 @@ class Subtabs extends React.Component {
 		this.state = {
 			activeTabId: ""
 		};
+		this.uuid = uuid4();
 	}
 
 	onClick(tabId) {
@@ -50,8 +52,8 @@ class Subtabs extends React.Component {
 
 				subTabs.push(
 					<Tab
-						id={"subtabs.tab." + i}
-						key={"subtabs.tab." + i}
+						id={`subtabs.tab.${i}-${this.uuid}`}
+						key={`subtabs.tab.${i}-${this.uuid}`}
 						disabled={panelState === STATES.DISABLED}
 						className={classNames("properties-subtab", { "properties-leftnav-subtab-item": this.props.leftnav })}
 						tabIndex={tabIdx}