@elyra/canvas 12.12.1 → 12.13.0

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

@@ -110,11 +110,6 @@ export default class SVGCanvasRenderer {
 		this.minScaleExtent = 0.2;
 		this.maxScaleExtent = 1.8;
 
-		// Allow us to keep track of the object (node or comment) being sized and
-		// its initial size and position at the start of the sizing event.
-		this.resizeObj = null;
-		this.resizeObjInitialInfo = null;
-
 		// Allows us to track the sizing behavior of comments
 		this.commentSizing = false;
 		this.commentSizingDirection = "";
@@ -123,9 +118,14 @@ export default class SVGCanvasRenderer {
 		this.nodeSizing = false;
 		this.nodeSizingDirection = "";
 		this.nodeSizingObjectsInfo = [];
-		this.nodeSizingLinksInfo = [];
+		this.nodeSizingDetLinksInfo = [];
+
+		// Keeps track of the size and position, at the start of the sizing event,
+		// of the object (node or comment) being sized.
+		this.resizeObjInitialInfo = null;
 
-		// General purpose variables to allow us to handle resize and snap to grid
+		// Keeps track of the size and position, during a sizing event, of the
+		// object (node or comment) being sized, before it is snapped to grid.
 		this.notSnappedXPos = 0;
 		this.notSnappedYPos = 0;
 		this.notSnappedWidth = 0;
@@ -2094,12 +2094,12 @@ export default class SVGCanvasRenderer {
 
 		// Note: Comment and Node resizing is started by the comment/node highlight rectangle.
 		if (this.commentSizing) {
-			this.resizeObj = this.activePipeline.getComment(d.id);
-			this.initializeResizeVariables(this.resizeObj);
+			const resizeObj = this.activePipeline.getComment(d.id);
+			this.initializeResizeVariables(resizeObj);
 
 		} else if (this.nodeSizing) {
-			this.resizeObj = this.activePipeline.getNode(d.id);
-			this.initializeResizeVariables(this.resizeObj);
+			const resizeObj = this.activePipeline.getNode(d.id);
+			this.initializeResizeVariables(resizeObj);
 
 		} else {
 			this.dragObjectsStart(d3Event, d);
@@ -2107,12 +2107,12 @@ export default class SVGCanvasRenderer {
 		this.logger.logEndTimer("dragStart", true);
 	}
 
-	dragMove(d3Event) {
+	dragMove(d3Event, d) {
 		this.logger.logStartTimer("dragMove");
 		if (this.commentSizing) {
-			this.resizeComment(d3Event);
+			this.resizeComment(d3Event, d);
 		} else if (this.nodeSizing) {
-			this.resizeNode(d3Event);
+			this.resizeNode(d3Event, d);
 		} else {
 			this.dragObjectsAction(d3Event);
 		}
@@ -2126,10 +2126,10 @@ export default class SVGCanvasRenderer {
 		this.removeTempCursorOverlay();
 
 		if (this.commentSizing) {
-			this.endCommentSizing();
+			this.endCommentSizing(d);
 
 		} else if (this.nodeSizing) {
-			this.endNodeSizing();
+			this.endNodeSizing(d);
 
 		} else if (this.dragging) {
 			this.dragObjectsEnd(d3Event, d);
@@ -5670,23 +5670,24 @@ export default class SVGCanvasRenderer {
 	// array based on the position of the pointer during the resize action
 	// then redraws the nodes and links (the link positions may move based
 	// on the node size change).
-	resizeNode(d3Event) {
-		const oldSupernode = Object.assign({}, this.resizeObj);
-		const minHeight = this.getMinHeight(this.resizeObj);
-		const minWidth = this.getMinWidth(this.resizeObj);
+	resizeNode(d3Event, d) {
+		const resizeObj = this.activePipeline.getNode(d.id);
+		const oldSupernode = Object.assign({}, resizeObj);
+		const minHeight = this.getMinHeight(resizeObj);
+		const minWidth = this.getMinWidth(resizeObj);
 
-		const delta = this.resizeObject(d3Event, this.resizeObj,
+		const delta = this.resizeObject(d3Event, resizeObj,
 			this.nodeSizingDirection, minWidth, minHeight);
 
 		if (delta && (delta.x_pos !== 0 || delta.y_pos !== 0 || delta.width !== 0 || delta.height !== 0)) {
-			if (CanvasUtils.isSupernode(this.resizeObj) &&
+			if (CanvasUtils.isSupernode(resizeObj) &&
 					this.config.enableMoveNodesOnSupernodeResize) {
 				const objectsInfo = CanvasUtils.moveSurroundingObjects(
 					oldSupernode,
 					this.activePipeline.getNodesAndComments(),
 					this.nodeSizingDirection,
-					this.resizeObj.width,
-					this.resizeObj.height,
+					resizeObj.width,
+					resizeObj.height,
 					true // Pass true to indicate that object positions should be updated.
 				);
 
@@ -5694,21 +5695,21 @@ export default class SVGCanvasRenderer {
 					oldSupernode,
 					this.activePipeline.links,
 					this.nodeSizingDirection,
-					this.resizeObj.width,
-					this.resizeObj.height,
+					resizeObj.width,
+					resizeObj.height,
 					true // Pass true to indicate that link positions should be updated.
 				);
 
 				// Overwrite the object and link info with any new info.
 				this.nodeSizingObjectsInfo = Object.assign(this.nodeSizingObjectsInfo, objectsInfo);
-				this.nodeSizingLinksInfo = Object.assign(this.nodeSizingLinksInfo, linksInfo);
+				this.nodeSizingDetLinksInfo = Object.assign(this.nodeSizingDetLinksInfo, linksInfo);
 			}
 
 			this.displayComments();
 			this.displayNodes();
 			this.displayLinks();
 
-			if (CanvasUtils.isSupernode(this.resizeObj)) {
+			if (CanvasUtils.isSupernode(resizeObj)) {
 				if (this.dispUtils.isDisplayingSubFlow()) {
 					this.displayBindingNodesToFitSVG();
 				}
@@ -5721,8 +5722,9 @@ export default class SVGCanvasRenderer {
 	// array based on the position of the pointer during the resize action
 	// then redraws the comment and links (the link positions may move based
 	// on the comment size change).
-	resizeComment(d3Event) {
-		this.resizeObject(d3Event, this.resizeObj, this.commentSizingDirection, 20, 20);
+	resizeComment(d3Event, d) {
+		const resizeObj = this.activePipeline.getComment(d.id);
+		this.resizeObject(d3Event, resizeObj, this.commentSizingDirection, 20, 20);
 		this.displayComments();
 		this.displayLinks();
 	}
@@ -5800,71 +5802,76 @@ export default class SVGCanvasRenderer {
 
 	// Finalises the sizing of a node by calling editActionHandler
 	// with an editNode action.
-	endNodeSizing() {
+	endNodeSizing(node) {
+		let resizeObj = this.activePipeline.getNode(node.id);
 		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-			this.resizeObj = this.snapToGridObject(this.resizeObj);
+			resizeObj = this.snapToGridObject(resizeObj);
 		}
 
 		// If the dimensions or position has changed, issue the command.
 		// Note: x_pos or y_pos might change on resize if the node is sized
 		// upwards or to the left.
-		if (this.resizeObjInitialInfo.x_pos !== this.resizeObj.x_pos ||
-				this.resizeObjInitialInfo.y_pos !== this.resizeObj.y_pos ||
-				this.resizeObjInitialInfo.width !== this.resizeObj.width ||
-				this.resizeObjInitialInfo.height !== this.resizeObj.height) {
+		if (this.resizeObjInitialInfo.x_pos !== resizeObj.x_pos ||
+				this.resizeObjInitialInfo.y_pos !== resizeObj.y_pos ||
+				this.resizeObjInitialInfo.width !== resizeObj.width ||
+				this.resizeObjInitialInfo.height !== resizeObj.height) {
 			// Add the dimensions of the object being resized to the array of object infos.
-			this.nodeSizingObjectsInfo[this.resizeObj.id] = {
-				width: this.resizeObj.width,
-				height: this.resizeObj.height,
-				x_pos: this.resizeObj.x_pos,
-				y_pos: this.resizeObj.y_pos
+			this.nodeSizingObjectsInfo[resizeObj.id] = {
+				width: resizeObj.width,
+				height: resizeObj.height,
+				x_pos: resizeObj.x_pos,
+				y_pos: resizeObj.y_pos
 			};
 
 			// If the node has been resized set the resize properties appropriately.
-			if (this.resizeObjInitialInfo.width !== this.resizeObj.width ||
-					this.resizeObjInitialInfo.height !== this.resizeObj.height) {
-				this.nodeSizingObjectsInfo[this.resizeObj.id].isResized = true;
-				this.nodeSizingObjectsInfo[this.resizeObj.id].resizeWidth = this.resizeObj.width;
-				this.nodeSizingObjectsInfo[this.resizeObj.id].resizeHeight = this.resizeObj.height;
+			if (this.resizeObjInitialInfo.width !== resizeObj.width ||
+					this.resizeObjInitialInfo.height !== resizeObj.height) {
+				this.nodeSizingObjectsInfo[resizeObj.id].isResized = true;
+				this.nodeSizingObjectsInfo[resizeObj.id].resizeWidth = resizeObj.width;
+				this.nodeSizingObjectsInfo[resizeObj.id].resizeHeight = resizeObj.height;
 			}
 
 			this.canvasController.editActionHandler({
 				editType: "resizeObjects",
 				editSource: "canvas",
 				objectsInfo: this.nodeSizingObjectsInfo,
-				linksInfo: this.nodeSizingLinksInfo,
+				detachedLinksInfo: this.nodeSizingDetLinksInfo,
 				pipelineId: this.pipelineId
 			});
 		}
-		this.resizeObj = null;
 		this.nodeSizing = false;
 		this.nodeSizingObjectsInfo = [];
-		this.nodeSizingLinksInfo = [];
+		this.nodeSizingDetLinksInfo = [];
 	}
 
 	// Finalises the sizing of a comment by calling editActionHandler
 	// with an editComment action.
-	endCommentSizing() {
+	endCommentSizing(comment) {
+		let resizeObj = this.activePipeline.getComment(comment.id);
 		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-			this.resizeObj = this.snapToGridObject(this.resizeObj);
+			resizeObj = this.snapToGridObject(resizeObj);
 		}
 
 		// If the dimensions or position has changed, issue the command.
 		// Note: x_pos or y_pos might change on resize if the node is sized
 		// upwards or to the left.
-		if (this.resizeObjInitialInfo.x_pos !== this.resizeObj.x_pos ||
-				this.resizeObjInitialInfo.y_pos !== this.resizeObj.y_pos ||
-				this.resizeObjInitialInfo.width !== this.resizeObj.width ||
-				this.resizeObjInitialInfo.height !== this.resizeObj.height) {
+		if (this.resizeObjInitialInfo.x_pos !== resizeObj.x_pos ||
+				this.resizeObjInitialInfo.y_pos !== resizeObj.y_pos ||
+				this.resizeObjInitialInfo.width !== resizeObj.width ||
+				this.resizeObjInitialInfo.height !== resizeObj.height) {
+			const commentSizingObjectsInfo = [];
+			commentSizingObjectsInfo[resizeObj.id] = {
+				width: resizeObj.width,
+				height: resizeObj.height,
+				x_pos: resizeObj.x_pos,
+				y_pos: resizeObj.y_pos
+			};
+
 			const data = {
-				editType: "editComment",
+				editType: "resizeObjects",
 				editSource: "canvas",
-				id: this.resizeObj.id,
-				content: this.resizeObj.content,
-				width: this.resizeObj.width,
-				height: this.resizeObj.height,
-				x_pos: this.resizeObj.x_pos,
-				y_pos: this.resizeObj.y_pos,
+				objectsInfo: commentSizingObjectsInfo,
+				detachedLinksInfo: {}, // Comments cannot have detached links
 				pipelineId: this.pipelineId
 			};
 			this.canvasController.editActionHandler(data);

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

@@ -25,7 +25,7 @@ import VirtualizedTable from "./../virtualized-table/virtualized-table.jsx";
 import { SORT_DIRECTION, STATES, ROW_HEIGHT, ROW_SELECTION } from "./../../constants/constants";
 import ReactResizeDetector from "react-resize-detector";
 import classNames from "classnames";
-import { has } from "lodash";
+import { has, isEmpty } from "lodash";
 import defaultMessages from "../../../../locales/common-properties/locales/en.json";
 
 class FlexibleTable extends React.Component {
@@ -79,7 +79,7 @@ class FlexibleTable extends React.Component {
 		}
 
 		// Calculate if checkedAllRows is true
-		if (this.props.selectedRows) {
+		if (this.props.selectedRows && !isEmpty(this.props.data)) {
 			this.setCheckedAll(this.props.selectedRows);
 		}
 
@@ -506,6 +506,14 @@ class FlexibleTable extends React.Component {
 			</div>)
 			: null;
 
+		const emptyTableContent = isEmpty(this.props.data)
+			? (
+				<div className="properties-ft-empty-table">
+					{this.props.emptyTablePlaceholder}
+				</div>
+			)
+			: null;
+
 		return (
 			<div data-id={"properties-ft-" + this.props.scrollKey} className="properties-ft-control-container" ref={ (ref) => (this.flexibleTable = ref) }>
 				{ftHeader}
@@ -543,6 +551,7 @@ class FlexibleTable extends React.Component {
 						</div>
 					</ReactResizeDetector>
 				</div>
+				{emptyTableContent}
 			</div>
 		);
 	}
@@ -550,13 +559,15 @@ class FlexibleTable extends React.Component {
 
 FlexibleTable.defaultProps = {
 	showHeader: true,
-	light: true
+	light: true,
+	emptyTablePlaceholder: ""
 };
 
 FlexibleTable.propTypes = {
 	sortable: PropTypes.array,
 	columns: PropTypes.array.isRequired,
 	data: PropTypes.array.isRequired,
+	emptyTablePlaceholder: PropTypes.string,
 	filterable: PropTypes.array,
 	filterBy: PropTypes.string,
 	filterKeyword: PropTypes.string,

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

@@ -128,3 +128,23 @@ $row-left-padding: $spacing-02;
 		}
 	}
 }
+
+.properties-ft-empty-table {
+	height: $spacing-11 + $spacing-08;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	@include carbon--type-style("body-long-01");
+}
+
+.properties-light-enabled {
+	.properties-ft-empty-table {
+		background-color: $ui-background;
+	}
+}
+
+.properties-light-disabled {
+	.properties-ft-empty-table {
+		background-color: $ui-01;
+	}
+}

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

@@ -458,6 +458,7 @@ export default class AbstractTable extends React.Component {
 					summaryTable
 					rowSelection={ROW_SELECTION.MULTIPLE}
 					light={this.props.controller.getLight()}
+					emptyTablePlaceholder={this.props.control.additionalText}
 				/>
 			</div>);
 		}
@@ -677,6 +678,7 @@ export default class AbstractTable extends React.Component {
 				selectedRows= {this.props.selectedRows}
 				rowSelection={this.props.control.rowSelection}
 				light={this.props.controller.getLight()}
+				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 		return (
 			<div>

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

@@ -20,6 +20,7 @@ import ExpressionControl from "./../expression";
 import ExpressionSelectionPanel from "./expression-selection-panel";
 import { MESSAGE_KEYS } from "./../../../constants/constants";
 import { formatMessage } from "./../../../util/property-utils";
+import { isEqual } from "lodash";
 
 export default class ExpressionBuilder extends React.Component {
 	constructor(props) {
@@ -68,13 +69,13 @@ export default class ExpressionBuilder extends React.Component {
 
 	onBlur(editor, evt) {
 		this.lastCursorPos = editor.getCursor();
+		const currentValue = this.props.controller.getPropertyValue(this.props.propertyId);
 		const newValue = this.editor.getValue();
-		let skipValidate = false;
-		if (this.expressionSelectionPanel && this.expressionSelectionPanel.contains(evt.relatedTarget)) {
-			// don't validate on old content when adding new content
-			skipValidate = true;
+		const skipValidate = this.expressionSelectionPanel && evt && this.expressionSelectionPanel.contains(evt.relatedTarget);
+		// update property value when value is updated OR value is to be validated
+		if (!isEqual(currentValue, newValue) || !skipValidate) {
+			this.props.controller.updatePropertyValue(this.props.propertyId, newValue, skipValidate);
 		}
-		this.props.controller.updatePropertyValue(this.props.propertyId, newValue, skipValidate);
 	}
 
 	editorDidMount(editor, next) {

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

@@ -23,7 +23,7 @@ import { UnControlled as CodeMirror } from "react-codemirror2";
 import Icon from "./../../../icons/icon.jsx";
 import { Button } from "carbon-components-react";
 import classNames from "classnames";
-
+import { isEqual } from "lodash";
 import ValidationMessage from "./../../components/validation-message";
 import WideFlyout from "./../../components/wide-flyout";
 import { formatMessage } from "./../../util/property-utils";
@@ -102,8 +102,13 @@ class ExpressionControl extends React.Component {
 	}
 
 	// this is needed to ensure expression builder selection works.
-	componentDidUpdate() {
-		if (this.props.selectionRange && this.props.selectionRange.length > 0 && this.editor) {
+	componentDidUpdate(prevProps) {
+		if (
+			this.props.selectionRange &&
+			this.props.selectionRange.length > 0 &&
+			!isEqual(prevProps.selectionRange, this.props.selectionRange) &&
+			this.editor
+		) {
 			this.props.selectionRange.forEach((selected) => {
 				this.editor.setSelection(selected.anchor, selected.head);
 			});
@@ -225,6 +230,7 @@ class ExpressionControl extends React.Component {
 				validateIcon: response.type,
 				validationInProgress: false
 			});
+			this.editor.display.input.blur();
 		});
 	}
 

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

@@ -151,6 +151,7 @@ class ListControl extends AbstractTable {
 				rowSelection={this.props.control.rowSelection}
 				updateRowSelections={this.updateRowSelections}
 				light={this.props.controller.getLight()}
+				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 
 		const tableContainer = (<div>

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

@@ -138,6 +138,7 @@ class SelectColumns extends AbstractTable {
 				rowSelection={this.props.control.rowSelection}
 				updateRowSelections={this.updateRowSelections}
 				light={this.props.controller.getLight()}
+				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 
 		var content = (

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

@@ -110,6 +110,7 @@ class SomeofselectControl extends React.Component {
 					selectable
 					showHeader={false}
 					light={this.props.controller.getLight()}
+					emptyTablePlaceholder={this.props.control.additionalText}
 				/>
 				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />
 			</div>

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

@@ -88,7 +88,7 @@ class ControlPanel {
 }
 
 class ActionPanel {
-	constructor(id, panelType, className, nestedPanel, actions) {
+	constructor(id, panelType, className, nestedPanel, actions, label, description) {
 		this.id = id;
 		this.panelType = panelType;
 		this.nestedPanel = nestedPanel;
@@ -96,6 +96,12 @@ class ActionPanel {
 		if (className) {
 			this.className = className;
 		}
+		if (label) {
+			this.label = label;
+		}
+		if (description) {
+			this.description = description;
+		}
 	}
 }
 
@@ -201,12 +207,24 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.SUMMARY, groupClassName, nestedPanel, panSubItems, groupLabel));
 	}
 	case GroupType.ACTION_PANEL: {
+		groupLabel = l10nProvider.l10nResource(group.label);
+		let groupDesc;
+		if (group.description) {
+			groupDesc = new Description(l10nProvider.l10nResource(group.description),
+				null,
+				group.description ? group.description.link : null);
+		}
 		return UIItem.makePanel(new ActionPanel(groupName, PanelType.ACTION_PANEL, groupClassName, nestedPanel,
-			_makeActions(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider)));
+			_makeActions(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider), groupLabel, groupDesc));
 	}
 	case GroupType.TEXT_PANEL: {
 		groupLabel = l10nProvider.l10nResource(group.label);
-		const groupDesc = l10nProvider.l10nResource(group.description);
+		let groupDesc;
+		if (group.description) {
+			groupDesc = new Description(l10nProvider.l10nResource(group.description),
+				group.description ? group.description.placement : null,
+				group.description ? group.description.link : null);
+		}
 		return UIItem.makeTextPanel(groupName, groupLabel, groupDesc, groupClassName, nestedPanel);
 	}
 	case GroupType.TWISTY_PANEL: {

package/src/common-properties/panels/action-panel/action-panel.jsx

@@ -19,22 +19,57 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import classNames from "classnames";
 import * as ControlUtils from "./../../util/control-utils";
-import { STATES } from "./../../constants/constants";
+import { STATES, CARBON_ICONS } from "./../../constants/constants";
+import { evaluateText } from "./../../util/property-utils.js";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import Icon from "./../../../icons/icon.jsx";
+import { isEmpty } from "lodash";
 
 class ActionPanel extends Component {
 	render() {
 		const className = this.props.panel.className ? this.props.panel.className : "";
+		const hidden = this.props.panelState === STATES.HIDDEN;
+		const disabled = this.props.panelState === STATES.DISABLED;
+		let label;
+		if (this.props.panel.label) {
+			let tooltip;
+			if (this.props.panel.description && !isEmpty(this.props.panel.description.text)) {
+				const dynamicDescriptionText = evaluateText(this.props.panel.description.text, this.props.controller);
+				// If tooltip has a link, add propertyId in the link object
+				if (this.props.panel.description.link) {
+					this.props.panel.description.link.propertyId = { name: this.props.panel.id };
+				}
+				tooltip = (<Tooltip
+					id={`tooltip-label-${this.props.panel.id}`}
+					tip={dynamicDescriptionText}
+					link={this.props.panel.description.link ? this.props.panel.description.link : null}
+					tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
+					direction="bottom"
+					disable={hidden || disabled}
+					showToolTipOnClick
+				>
+					<Icon type={CARBON_ICONS.INFORMATION} className="properties-control-description-icon-info" />
+				</Tooltip>);
+			}
+			label = (
+				<div className={classNames("properties-label-container")}>
+					<label className="properties-control-label">{this.props.panel.label}</label>
+					{tooltip}
+				</div>
+			);
+		}
 		return (
 			<div
 				className={classNames(
 					"properties-action-panel",
-					{ "hide": this.props.panelState === STATES.HIDDEN },
+					{ "hide": hidden },
 					{ "properties-control-nested-panel": this.props.panel.nestedPanel },
 					className
 				)}
 				data-id={ControlUtils.getDataId({ name: this.props.panel.id })}
-				disabled={this.props.panelState === STATES.DISABLED}
+				disabled={disabled}
 			>
+				{label}
 				{this.props.children}
 			</div>);
 	}

package/src/common-properties/panels/action-panel/action-panel.scss

@@ -18,6 +18,9 @@
 	display: flex;
 	flex-wrap: wrap;
 	padding-bottom: $spacing-03;
+	.properties-label-container {
+		width: 100%;
+	}
 	&:last-child {
 		padding-bottom: $spacing-06; // (24px + 16px outer padding)
 	}

package/src/common-properties/panels/text-panel/text-panel.jsx

@@ -19,24 +19,55 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { evaluateText } from "./../../util/property-utils.js";
 import classNames from "classnames";
-import { STATES } from "./../../constants/constants";
+import { STATES, CARBON_ICONS } from "./../../constants/constants";
+import { isEmpty } from "lodash";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import Icon from "./../../../icons/icon.jsx";
 
 class TextPanel extends Component {
 	render() {
 		const className = this.props.panel.className ? this.props.panel.className : "";
-		const label = this.props.panel.label ? (<div className="panel-label">{this.props.panel.label}</div>) : null;
-		const description = this.props.panel.description
-			? (<div className="panel-description">{evaluateText(this.props.panel.description, this.props.controller)}</div>)
-			: null;
+		const hidden = this.props.panelState === STATES.HIDDEN;
+		const disabled = this.props.panelState === STATES.DISABLED;
+		let label = this.props.panel.label ? (<div className="panel-label">{this.props.panel.label}</div>) : null;
+		let description;
+		if (this.props.panel.description && !isEmpty(this.props.panel.description.text)) {
+			const dynamicDescriptionText = evaluateText(this.props.panel.description.text, this.props.controller);
+			if (this.props.panel.description.placement === "as_tooltip") {
+				// If tooltip has a link, add propertyId in the link object
+				if (this.props.panel.description.link) {
+					this.props.panel.description.link.propertyId = { name: this.props.panel.id };
+				}
+				const tooltip = (<Tooltip
+					id={`tooltip-label-${this.props.panel.id}`}
+					tip={dynamicDescriptionText}
+					link={this.props.panel.description.link ? this.props.panel.description.link : null}
+					tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
+					direction="bottom"
+					disable={hidden || disabled}
+					showToolTipOnClick
+				>
+					<Icon type={CARBON_ICONS.INFORMATION} className="properties-control-description-icon-info" />
+				</Tooltip>);
+				label = (
+					<div className={classNames("properties-label-container")}>
+						{label}
+						{tooltip}
+					</div>
+				);
+			} else {
+				description = <div className="panel-description">{dynamicDescriptionText}</div>;
+			}
+		}
 		return (
 			<div
 				className={classNames(
 					"properties-text-panel",
-					{ "hide": this.props.panelState === STATES.HIDDEN },
+					{ "hide": hidden },
 					{ "properties-control-nested-panel": this.props.panel.nestedPanel },
 					className
 				)}
-				disabled={this.props.panelState === STATES.DISABLED}
+				disabled={disabled}
 			>
 				{label}
 				{description}

package/src/common-properties/panels/text-panel/text-panel.scss

@@ -15,9 +15,6 @@
  */
 
 .properties-text-panel {
-	:not(:empty) {
-		padding-bottom: $spacing-05;
-	}
 	.panel-label {
 		@include carbon--type-style("productive-heading-01");
 		color: $text-01;
@@ -26,6 +23,10 @@
 	.panel-description {
 		@include carbon--type-style("body-short-01");
 		color: $text-01;
+		padding-bottom: $spacing-05;
+	}
+	.tooltip-container {
+		margin-bottom: $spacing-03;
 	}
 	&[disabled] {
 		opacity: 0.5;