@elyra/canvas 12.11.0 → 12.12.0

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

@@ -142,13 +142,15 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 	onValueTableDblClick(evt, rowKey, index) {
 		if (this.props.onChange) {
 			const field = this.state.currentFieldDataset[this.state.fieldSelected];
+			const quote = "\"";
 			if (field.values) {
-				const quote = "\"";
 				const value = field.values[rowKey].value;
 				const fieldValue = (typeof value === "string") ? quote + value + quote : value;
 				this.props.onChange(fieldValue);
 			} else if (field.range) {
-				this.props.onChange(rowKey === 0 ? field.range.min.value : field.range.max.value);
+				const minValue = (typeof field.range.min.value === "string") ? (quote + field.range.min.value + quote) : field.range.min.value;
+				const maxValue = (typeof field.range.max.value === "string") ? (quote + field.range.max.value + quote) : field.range.max.value;
+				this.props.onChange(rowKey === 0 ? minValue : maxValue);
 			}
 		}
 		this.setState({

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

@@ -249,7 +249,7 @@ class ExpressionControl extends React.Component {
 		} else {
 			const newValue = this.editor.getValue();
 			// don't validate when opening the expression builder
-			const skipValidate = evt.relatedTarget && evt.relatedTarget.classList.contains("properties-expression-button");
+			const skipValidate = evt && evt.relatedTarget && evt.relatedTarget.classList.contains("properties-expression-button");
 			this.props.controller.updatePropertyValue(this.props.propertyId, newValue, skipValidate);
 		}
 	}

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

@@ -45,7 +45,9 @@
 
 .cm-s-custom .cm-number { color: $text-02; }
 
-.cm-s-custom .cm-def { color: $ui-01; }
+.cm-s-custom .cm-def { color: $support-01; }
+
+.cm-s-custom .cm-comment { color: $support-02; }
 
 .cm-s-custom .cm-variable,
 .cm-s-custom .cm-punctuation,

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

@@ -72,7 +72,7 @@ class MultiSelectControl extends React.Component {
 		const selectedOptions = [];
 		if (values) {
 			values.forEach((value) => selectedOptions.push(options.find(function(option) {
-				return option.value === value;
+				return option.id === value;
 			})));
 		}
 		return selectedOptions;
@@ -82,7 +82,7 @@ class MultiSelectControl extends React.Component {
 		const options = [];
 		for (let j = 0; j < this.props.controlOpts.values.length; j++) {
 			options.push({
-				value: this.props.controlOpts.values[j],
+				id: this.props.controlOpts.values[j],
 				label: this.props.controlOpts.valueLabels[j]
 			});
 		}
@@ -110,7 +110,7 @@ class MultiSelectControl extends React.Component {
 	handleOnChange(evt) {
 		const controlValues = [];
 		for (let i = 0; i < evt.selectedItems.length; i++) {
-			controlValues.push(evt.selectedItems[i].value);
+			controlValues.push(evt.selectedItems[i].id);
 		}
 		this.props.controller.updatePropertyValue(this.props.propertyId, controlValues);
 	}
@@ -163,7 +163,7 @@ class MultiSelectControl extends React.Component {
 				disabled={this.props.state === STATES.DISABLED}
 				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 				items={multiSelectDropdown.options}
-				initialSelectedItems={multiSelectDropdown.selectedOptions}
+				selectedItems={multiSelectDropdown.selectedOptions}
 				onChange={this.handleOnChange}
 				label={label}
 				titleText={this.props.tableControl ? null : this.props.controlItem}

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

@@ -90,7 +90,7 @@ class SomeofselectControl extends React.Component {
 			controlValue = [];
 		}
 		const tableOptions = this.genSelectOptions(controlValue);
-		const rows = this.props.control.rows ? this.props.control.rows : 4;
+		const rows = this.props.control.rows ? this.props.control.rows : 5.5;
 		const tableLabel = (this.props.control.label && this.props.control.label.text) ? this.props.control.label.text : "";
 
 		return (

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

@@ -18,13 +18,14 @@
 import { ResourceDef } from "../util/L10nProvider";
 
 export class Action {
-	constructor(actionName, label, description, control, data, image) {
+	constructor(actionName, label, description, control, data, image, button) {
 		this.name = actionName;
 		this.label = label;
 		this.description = description;
 		this.actionType = control;
 		this.data = data;
 		this.image = image;
+		this.button = button;
 	}
 }
 
@@ -38,6 +39,7 @@ class ActionDef {
 			actionDef.control = action.control;
 			actionDef.data = action.data;
 			actionDef.image = action.image;
+			actionDef.button = action.button;
 			return actionDef;
 		}
 		return null;

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

@@ -60,11 +60,14 @@ class Label {
 }
 
 class Description {
-	constructor(text, placement) {
+	constructor(text, placement, link) {
 		this.text = text;
 		if (placement) {
 			this.placement = placement;
 		}
+		if (link) {
+			this.link = link;
+		}
 	}
 }
 
@@ -395,7 +398,8 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	let controlDesc;
 	if (parameter.description) {
 		controlDesc = new Description(l10nProvider.l10nDesc(parameter, parameter.name),
-			parameter.description ? parameter.description.placement : null);
+			parameter.description ? parameter.description.placement : null,
+			parameter.description ? parameter.description.link : null);
 	}
 
 	// The role is used to modify the behaviour of certain controls
@@ -699,7 +703,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);
+	return new Action(action.id, actionLabel, actionDesc, action.control, action.data, action.image, action.button);
 }
 
 function _makeButtons(buttonMetadata, l10nProvider) {

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

@@ -42,7 +42,8 @@ export default class PropertiesController {
 			actionHandler: null,
 			buttonHandler: null,
 			buttonIconHandler: null,
-			titleChangeHandler: null
+			titleChangeHandler: null,
+			tooltipLinkHandler: null
 		};
 		this.propertiesConfig = {};
 		this.visibleDefinitions = {};

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

@@ -63,7 +63,8 @@ class PropertiesMain extends React.Component {
 			buttonHandler: props.callbacks.buttonHandler,
 			buttonIconHandler: props.callbacks.buttonIconHandler,
 			validationHandler: props.callbacks.validationHandler,
-			titleChangeHandler: props.callbacks.titleChangeHandler
+			titleChangeHandler: props.callbacks.titleChangeHandler,
+			tooltipLinkHandler: props.callbacks.tooltipLinkHandler
 		});
 		this.setForm(props.propertiesInfo);
 		this.previousErrorMessages = {};
@@ -573,7 +574,8 @@ PropertiesMain.propTypes = {
 		buttonIconHandler: PropTypes.func,
 		validationHandler: PropTypes.func,
 		titleChangeHandler: PropTypes.func,
-		propertiesActionLabelHandler: PropTypes.func
+		propertiesActionLabelHandler: PropTypes.func,
+		tooltipLinkHandler: PropTypes.func
 	}),
 	customPanels: PropTypes.array, // array of custom panels
 	customControls: PropTypes.array, // array of custom controls

package/src/common-properties/util/L10nProvider.js

@@ -92,6 +92,9 @@ export class ResourceDef {
 			if (resourceObj.type) {
 				resource.type = resourceObj.type;
 			}
+			if (resourceObj.link) {
+				resource.link = resourceObj.link;
+			}
 		}
 		return resource;
 	}

package/src/object-model/api-pipeline.js

@@ -51,10 +51,6 @@ export default class APIPipeline {
 		return this.objectModel.getCanvasInfoPipeline(this.pipelineId).parentUrl;
 	}
 
-	setPipelineZoom(zoom, translate) {
-		this.store.dispatch({ type: "SET_PIPELINE_ZOOM", data: { zoom: zoom }, pipelineId: this.pipelineId });
-	}
-
 	// ---------------------------------------------------------------------------
 	// Node AND comment methods
 	// ---------------------------------------------------------------------------
@@ -307,7 +303,7 @@ export default class APIPipeline {
 	createNode(data) {
 		let nodeTemplate = data.nodeTemplate;
 		// If the nodeTemplate has app_data.ui_data field then it will be a
-		// teamplate that conforms to the pipelineFlow schema and needs to be
+		// template that conforms to the pipelineFlow schema and needs to be
 		// converted to the internal format for a node.
 		if (has(data.nodeTemplate, "app_data.ui_data")) {
 			nodeTemplate = this.objectModel.convertNodeTemplate(nodeTemplate);

package/src/object-model/config-utils.js

@@ -62,6 +62,7 @@ export default class CanvasUtils {
 			enableInternalObjectModel: true,
 			enablePaletteLayout: "Flyout",
 			enableToolbarLayout: "Top",
+			enableResizableNodes: false,
 			enableInsertNodeDroppedOnLink: false,
 			enableHighlightNodeOnNewLinkDrag: false,
 			enableHighlightUnavailableNodes: false,

package/src/object-model/object-model.js

@@ -35,7 +35,8 @@ import { upgradePalette, extractPaletteVersion, LATEST_PALETTE_VERSION } from ".
 import { ASSOCIATION_LINK, COMMENT_LINK, NODE_LINK, ERROR, WARNING, SUCCESS, INFO, CREATE_PIPELINE,
 	CLONE_COMMENT, CLONE_COMMENT_LINK, CLONE_NODE, CLONE_NODE_LINK, CLONE_PIPELINE, SUPER_NODE,
 	HIGHLIGHT_BRANCH, HIGHLIGHT_UPSTREAM, HIGHLIGHT_DOWNSTREAM,
-	SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING
+	SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
+	SAVE_ZOOM_LOCAL_STORAGE, SAVE_ZOOM_PIPELINE_FLOW
 } from "../common-canvas/constants/canvas-constants.js";
 
 export default class ObjectModel {
@@ -776,6 +777,7 @@ export default class ObjectModel {
 			: 0;
 
 		node.height = Math.max(node.inputPortsHeight, node.outputPortsHeight, node.layout.defaultNodeHeight);
+		node.width = node.layout.defaultNodeWidth;
 
 		if (node.type === SUPER_NODE && node.is_expanded) {
 			node.height += canvasLayout.supernodeTopAreaHeight + canvasLayout.supernodeSVGAreaPadding;
@@ -784,12 +786,13 @@ export default class ObjectModel {
 			if (node.expanded_height) {
 				node.expanded_height = Math.max(node.expanded_height, node.height);
 			}
-		}
-		node.width = node.layout.defaultNodeWidth;
 
-		if (node.type === SUPER_NODE && node.is_expanded) {
 			node.width = CanvasUtils.getSupernodeExpandedWidth(node, canvasLayout);
 			node.height = CanvasUtils.getSupernodeExpandedHeight(node, canvasLayout);
+
+		} else {
+			node.height = node.resizeHeight ? node.resizeHeight : node.height;
+			node.width = node.resizeWidth ? node.resizeWidth : node.width;
 		}
 
 		return node;
@@ -807,21 +810,23 @@ export default class ObjectModel {
 			? (node.outputs.length * (node.layout.portArcRadius * 2)) + ((node.outputs.length - 1) * node.layout.portArcSpacing) + (node.layout.portArcOffset * 2)
 			: 0;
 
+		node.height = node.layout.defaultNodeHeight;
 		node.width = Math.max(node.inputPortsWidth, node.outputPortsWidth, node.layout.defaultNodeWidth);
 
 		if (node.type === SUPER_NODE && node.is_expanded) {
 			node.width += (2 * canvasLayout.supernodeSVGAreaPadding);
-			// If an expanded height is provided make sure it is at least as big
-			// as the node height.
+			// If an expanded width is provided make sure it is at least as big
+			// as the node width.
 			if (node.expanded_width) {
 				node.expanded_width = Math.max(node.expanded_width, node.width);
 			}
-		}
-		node.height = node.layout.defaultNodeHeight;
 
-		if (node.type === SUPER_NODE && node.is_expanded) {
 			node.width = CanvasUtils.getSupernodeExpandedWidth(node, canvasLayout);
 			node.height = CanvasUtils.getSupernodeExpandedHeight(node, canvasLayout);
+
+		} else {
+			node.height = node.resizeHeight ? node.resizeHeight : node.height;
+			node.width = node.resizeWidth ? node.resizeWidth : node.width;
 		}
 
 		return node;
@@ -1123,11 +1128,11 @@ export default class ObjectModel {
 	}
 
 	getPipelineFlowId() {
-		return this.getCanvasInfo().id;
+		return this.store.getPipelineFlowId();
 	}
 
 	getPrimaryPipelineId() {
-		return this.getCanvasInfo().primary_pipeline;
+		return this.store.getPrimaryPipelineId();
 	}
 
 	getPrimaryPipeline() {
@@ -1912,11 +1917,55 @@ export default class ObjectModel {
 		return obj.type === NODE_LINK || obj.type === COMMENT_LINK || obj.type === ASSOCIATION_LINK;
 	}
 
-	// Clears any saved zom values in Local Storage
+	setZoom(zoom, pipelineId) {
+		const enableSaveZoom = this.getCanvasConfig().enableSaveZoom;
+		// This will save zoom to the pipeline if enableSaveZoom is
+		// SAVE_ZOOM_PIPELINE_FLOW and also will cause the toolbar to be updated
+		// so zoom icons can be enabled/disabled.
+		this.store.dispatch({ type: "SET_ZOOM", data: { zoom: zoom, enableSaveZoom }, pipelineId });
+
+		if (enableSaveZoom === SAVE_ZOOM_LOCAL_STORAGE) {
+			this.setSavedZoomLocal(zoom, pipelineId);
+		}
+	}
+
+	// Returns the saved zoom based on the enableSaveZoom config parameter.
+	getSavedZoom(pipelineId) {
+		const enableSaveZoom = this.getCanvasConfig().enableSaveZoom;
+		if (enableSaveZoom === SAVE_ZOOM_PIPELINE_FLOW) {
+			return this.store.getZoom(pipelineId);
+
+		} else if (enableSaveZoom === SAVE_ZOOM_LOCAL_STORAGE) {
+			return this.getSavedZoomLocal(pipelineId);
+		}
+		return null;
+	}
+
+	// Clears any saved zoom values in Local Storage
 	clearSavedZoomValues() {
 		LocalStorage.delete("canvasSavedZoomValues");
 	}
 
+	// Saves the zoom object passed in for this pipeline in local storage.
+	// The pipeline is identified by the pipelineFlowId and pipelineId passed in.
+	setSavedZoomLocal(zoom, pipelineId) {
+		const canvasSavedZoomValues = LocalStorage.get("canvasSavedZoomValues");
+		const savedZooms = canvasSavedZoomValues ? JSON.parse(canvasSavedZoomValues) : {};
+		set(savedZooms, [this.getPipelineFlowId(), pipelineId], zoom);
+		LocalStorage.set("canvasSavedZoomValues", JSON.stringify(savedZooms));
+	}
+
+	// Returns the zoom for this pipeline saved in local storage. The pipeline is
+	// identified by the pipelineFlowId and pipelineId passed in.
+	getSavedZoomLocal(pipelineId) {
+		const canvasSavedZoomValues = LocalStorage.get("canvasSavedZoomValues");
+		if (canvasSavedZoomValues) {
+			const savedZoom = JSON.parse(canvasSavedZoomValues);
+			return get(savedZoom, [this.getPipelineFlowId(), pipelineId]);
+		}
+		return null;
+	}
+
 	// ---------------------------------------------------------------------------
 	// Add decorations in batch
 	// ---------------------------------------------------------------------------

package/src/object-model/pipeline-in-handler.js

@@ -119,6 +119,11 @@ export default class PipelineInHandler {
 		if (node.type === MODEL_NODE) {
 			obj.model_ref = has(node, "model_ref") ? node.model_ref : "";
 		}
+		if (has(node, "app_data.ui_data.is_resized")) {
+			obj.isResized = node.app_data.ui_data.is_resized;
+			obj.resizeHeight = node.app_data.ui_data.resize_height;
+			obj.resizeWidth = node.app_data.ui_data.resize_width;
+		}
 		if (has(node, "app_data.ui_data.description")) {
 			obj.description = node.app_data.ui_data.description;
 		}

package/src/object-model/pipeline-out-handler.js

@@ -153,6 +153,11 @@ export default class PipelineOutHandler {
 			uiData.is_expanded = ciNode.is_expanded;
 			uiData.expanded_width = ciNode.expanded_width;
 			uiData.expanded_height = ciNode.expanded_height;
+
+		} else if (ciNode.isResized) {
+			uiData.is_resized = ciNode.isResized;
+			uiData.resize_width = ciNode.width;
+			uiData.resize_height = ciNode.height;
 		}
 
 		if (ciNode.messages && !isEmpty(ciNode.messages)) {

package/src/object-model/redux/canvas-store.js

@@ -105,6 +105,22 @@ export default class CanavasStore {
 		return cloneDeep(this.store.getState().canvasinfo);
 	}
 
+	getPipelineFlowId() {
+		return this.store.getState().canvasinfo.id;
+	}
+
+	getPrimaryPipelineId() {
+		return this.store.getState().canvasinfo.primary_pipeline;
+	}
+
+	getZoom(pipelineId) {
+		const p = this.getNonClonedPipeline(pipelineId);
+		if (p) {
+			return cloneDeep(p.zoom);
+		}
+		return null;
+	}
+
 	// This is a service method for retrieving the internal pipeline. It does NOT
 	// clone the pipeline therefore it should NOT be called from outside this
 	// class because we don't want to surface the intenal data in redux to

package/src/object-model/redux/reducers/canvasinfo.js

@@ -18,6 +18,7 @@
 import nodes from "./nodes.js";
 import comments from "./comments.js";
 import links from "./links.js";
+import { SAVE_ZOOM_PIPELINE_FLOW } from "../../../common-canvas/constants/canvas-constants.js";
 
 export default (state = {}, action) => {
 	switch (action.type) {
@@ -97,14 +98,17 @@ export default (state = {}, action) => {
 		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
 	}
 
-	case "SET_PIPELINE_ZOOM": {
-		const canvasInfoPipelines = state.pipelines.map((pipeline) => {
-			if (pipeline.id === action.pipelineId) {
-				return Object.assign({}, pipeline, { zoom: { "k": action.data.zoom.k, "x": action.data.zoom.x, "y": action.data.zoom.y } });
-			}
-			return pipeline;
-		});
-		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
+	case "SET_ZOOM": {
+		if (action.data.enableSaveZoom === SAVE_ZOOM_PIPELINE_FLOW) {
+			const canvasInfoPipelines = state.pipelines.map((pipeline) => {
+				if (pipeline.id === action.pipelineId) {
+					return Object.assign({}, pipeline, { zoom: { "k": action.data.zoom.k, "x": action.data.zoom.x, "y": action.data.zoom.y } });
+				}
+				return pipeline;
+			});
+			return Object.assign({}, state, { pipelines: canvasInfoPipelines });
+		}
+		return state;
 	}
 
 	case "ADD_SUPERNODES": {

package/src/object-model/redux/reducers/canvastoolbar.js

@@ -16,6 +16,9 @@
 
 export default (state = {}, action) => {
 	switch (action.type) {
+	// Setting a zoom amount needs to cause toolbar to be re-rendered to
+	// enable/disable zoom buttons.
+	case "SET_ZOOM":
 	case "SET_TOOLBAR_CONFIG": {
 		return Object.assign({}, state, { config: action.data.toolbarConfig });
 	}

package/src/object-model/redux/reducers/nodes.js

@@ -75,7 +75,18 @@ export default (state = [], action) => {
 				if (newNode.type === SUPER_NODE && newNode.is_expanded) {
 					newNode.expanded_width = nodeObj.width;
 					newNode.expanded_height = nodeObj.height;
+
+				} else if (nodeObj.isResized) {
+					newNode.isResized = nodeObj.isResized;
+					newNode.resizeWidth = nodeObj.resizeWidth;
+					newNode.resizeHeight = nodeObj.resizeHeight;
+
+				} else {
+					delete newNode.isResized;
+					delete newNode.resizeWidth;
+					delete newNode.resizeHeight;
 				}
+
 				return newNode;
 			}
 

package/src/toolbar/toolbar-action-item.jsx

@@ -78,9 +78,9 @@ class ToolbarActionItem extends React.Component {
 		case (TOOLBAR_ZOOM_FIT):
 			return <SVG src={ZoomToFit} disabled={disabled} />;
 		case (TOOLBAR_ARRANGE_HORIZONALLY):
-			return <SVG src={ArrangeVertically} disabled={disabled} />;
-		case (TOOLBAR_ARRANGE_VERTICALLY):
 			return <SVG src={ArrangeHorizontally} disabled={disabled} />;
+		case (TOOLBAR_ARRANGE_VERTICALLY):
+			return <SVG src={ArrangeVertically} disabled={disabled} />;
 		case (TOOLBAR_OPEN_PALETTE):
 			return <SVG src={PaletteOpen} disabled={disabled} />;
 		case (TOOLBAR_CLOSE_PALETTE):

package/src/tooltip/tooltip.jsx

@@ -20,6 +20,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Portal } from "react-portal";
+import { Link } from "carbon-components-react";
 
 class ToolTip extends React.Component {
 	constructor(props) {
@@ -325,6 +326,10 @@ class ToolTip extends React.Component {
 		}
 	}
 
+	tooltipLinkOnClick(url) {
+		window.open(url, "_blank", "noopener");
+	}
+
 	render() {
 		let tooltipContent = null;
 		let triggerContent = null;
@@ -336,7 +341,13 @@ class ToolTip extends React.Component {
 			// `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first.
 			// Ref - https://stackoverflow.com/a/49512400
 			const onFocus = () => this.showTooltipWithDelay();
-			const onBlur = () => this.setTooltipVisible(false);
+			const onBlur = (evt) => {
+				// Keep tooltip visible when clicked on a link.
+				// Since link is an anchor tag without "href" attribute, it has relatedTarget=null
+				if (evt.relatedTarget !== null) {
+					this.setTooltipVisible(false);
+				}
+			};
 			const click = (evt) => this.toggleTooltipOnClick(evt);
 
 			triggerContent = (<div
@@ -374,6 +385,21 @@ class ToolTip extends React.Component {
 			tipClass += " " + this.props.className;
 		}
 
+		let link = null;
+		if (this.state.isTooltipVisible && this.props.tooltipLinkHandler && this.props.link) {
+			const linkInformation = this.props.tooltipLinkHandler(this.props.link);
+			// Verify tooltipLinkHandler returns object in correct format
+			if (typeof linkInformation === "object" && linkInformation.label && linkInformation.url) {
+				link = (<Link
+					className="tooltip-link"
+					id={this.props.link.id}
+					onClick={this.tooltipLinkOnClick.bind(this, linkInformation.url)}
+				>
+					{linkInformation.label}
+				</Link>);
+			}
+		}
+
 		return (
 			<div className="tooltip-container">
 				{triggerContent}
@@ -384,6 +410,7 @@ class ToolTip extends React.Component {
 							<polygon points="8.1,16.1 0,8.1 8.1,0 8.1,1.4 1.4,8.1 8.1,14.7" />
 						</svg>
 						{tooltipContent}
+						{link}
 					</div>
 				</Portal>
 			</div>
@@ -393,6 +420,8 @@ class ToolTip extends React.Component {
 
 ToolTip.propTypes = {
 	tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	link: PropTypes.object,
+	tooltipLinkHandler: PropTypes.func,
 	direction: PropTypes.oneOf(["left", "right", "top", "bottom"]),
 	children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 	targetObj: PropTypes.object,

package/src/tooltip/tooltip.scss

@@ -34,6 +34,17 @@
 	word-wrap: break-word;
 	max-width: 228px;
 	border-radius: 2px;
+	.bx--link {
+		display: block;
+		color: $inverse-link;
+		margin-top: $spacing-05;
+		pointer-events: auto; // To make link clickable inside tooltip
+		cursor: pointer;
+		&:hover {
+			color: $inverse-link;
+			text-decoration: underline;
+		}
+	}
 }
 
 .common-canvas-tooltip[direction="right"] {