@elyra/canvas 12.11.0 → 12.12.0

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

@@ -20,7 +20,8 @@ import CanvasUtils from "./common-canvas-utils.js";
 import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, COMMENT_LINK, NODE_LINK,
 	ASSOC_VAR_CURVE_LEFT, ASSOC_VAR_CURVE_RIGHT, ASSOC_VAR_DOUBLE_BACK_LEFT, ASSOC_VAR_DOUBLE_BACK_RIGHT,
 	LINK_TYPE_CURVE, LINK_TYPE_ELBOW, LINK_TYPE_STRAIGHT,
-	LINK_DIR_TOP_BOTTOM, LINK_DIR_BOTTOM_TOP }
+	LINK_DIR_TOP_BOTTOM, LINK_DIR_BOTTOM_TOP,
+	NORTH, SOUTH, EAST, WEST }
 	from "./constants/canvas-constants";
 
 const CLOCKWISE = false;
@@ -53,27 +54,32 @@ export default class SvgCanvasLinks {
 
 	// Returns an object containing the x and y coordinates of the start position
 	// of a straight line which extends from the node passed in to the
-	// end position which is also an x, y coordinate.
-	getNewStraightNodeLinkStartPos(srcNode, endPos) {
-		let srcCenterX;
-		let srcCenterY;
-
-		if (srcNode.layout.drawNodeLinkLineFromTo === "image_center" && !CanvasUtils.isExpanded(srcNode)) {
-			srcCenterX = this.nodeUtils.getNodeImageCenterPosX(srcNode);
-			srcCenterY = this.nodeUtils.getNodeImageCenterPosY(srcNode);
+	// end position which is also an x, y coordinate. If an originInfo object is
+	// passed in we use it to offset the origin position for the line.
+	getNewStraightNodeLinkStartPos(node, endPos, originInfo) {
+		let originX;
+		let originY;
+
+		if (node.layout.drawNodeLinkLineFromTo === "image_center" && !CanvasUtils.isExpanded(node)) {
+			originX = this.nodeUtils.getNodeImageCenterPosX(node);
+			originY = this.nodeUtils.getNodeImageCenterPosY(node);
 		} else {
-			srcCenterX = this.nodeUtils.getNodeCenterPosX(srcNode);
-			srcCenterY = this.nodeUtils.getNodeCenterPosY(srcNode);
+			if (originInfo) {
+				({ x: originX, y: originY } = this.getCenterOffset(node, originInfo));
+			} else {
+				originX = this.nodeUtils.getNodeCenterPosX(node);
+				originY = this.nodeUtils.getNodeCenterPosY(node);
+			}
 		}
 
 		return CanvasUtils.getOuterCoord(
-			srcNode.x_pos,
-			srcNode.y_pos,
-			srcNode.width,
-			srcNode.height,
+			node.x_pos,
+			node.y_pos,
+			node.width,
+			node.height,
 			this.canvasLayout.linkGap,
-			srcCenterX,
-			srcCenterY,
+			originX,
+			originY,
 			endPos.x,
 			endPos.y);
 	}
@@ -134,15 +140,15 @@ export default class SvgCanvasLinks {
 		return minInitialLine;
 	}
 
-	getLinkCoords(linkType, srcObj, srcPortId, trgNode, trgPortId, assocLinkVariation) {
+	getLinkCoords(link, srcObj, srcPortId, trgNode, trgPortId, assocLinkVariation) {
 		let coords = null;
-		if (linkType === NODE_LINK) {
+		if (link.type === NODE_LINK) {
 			if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
-				coords = this.getNodeLinkCoordsForStraightLine(srcObj, trgNode);
+				coords = this.getNodeLinkCoordsForStraightLine(srcObj, trgNode, link);
 			} else {
 				coords = this.getNodeLinkCoordsForPorts(srcObj, srcPortId, trgNode, trgPortId);
 			}
-		} else if (linkType === ASSOCIATION_LINK) {
+		} else if (link.type === ASSOCIATION_LINK) {
 			if (this.config.enableAssocLinkType === ASSOC_RIGHT_SIDE_CURVE) {
 				coords = this.getAssociationCurveLinkCoords(srcObj, trgNode, assocLinkVariation);
 			} else {
@@ -154,7 +160,7 @@ export default class SvgCanvasLinks {
 		return coords;
 	}
 
-	getNodeLinkCoordsForStraightLine(srcNode, trgNode) {
+	getNodeLinkCoordsForStraightLine(srcNode, trgNode, link) {
 		let srcCenterX;
 		let srcCenterY;
 		let trgCenterX;
@@ -164,16 +170,24 @@ export default class SvgCanvasLinks {
 			srcCenterX = this.nodeUtils.getNodeImageCenterPosX(srcNode);
 			srcCenterY = this.nodeUtils.getNodeImageCenterPosY(srcNode);
 		} else {
-			srcCenterX = this.nodeUtils.getNodeCenterPosX(srcNode);
-			srcCenterY = this.nodeUtils.getNodeCenterPosY(srcNode);
+			if (link && link.srcOriginInfo) {
+				({ x: srcCenterX, y: srcCenterY } = this.getCenterOffset(srcNode, link.srcOriginInfo));
+			} else {
+				srcCenterX = this.nodeUtils.getNodeCenterPosX(srcNode);
+				srcCenterY = this.nodeUtils.getNodeCenterPosY(srcNode);
+			}
 		}
 
 		if (trgNode.layout.drawNodeLinkLineFromTo === "image_center" && !CanvasUtils.isExpanded(trgNode)) {
 			trgCenterX = this.nodeUtils.getNodeImageCenterPosX(trgNode);
 			trgCenterY = this.nodeUtils.getNodeImageCenterPosY(trgNode);
 		} else {
-			trgCenterX = this.nodeUtils.getNodeCenterPosX(trgNode);
-			trgCenterY = this.nodeUtils.getNodeCenterPosY(trgNode);
+			if (link && link.trgOriginInfo) {
+				({ x: trgCenterX, y: trgCenterY } = this.getCenterOffset(trgNode, link.trgOriginInfo));
+			} else {
+				trgCenterX = this.nodeUtils.getNodeCenterPosX(trgNode);
+				trgCenterY = this.nodeUtils.getNodeCenterPosY(trgNode);
+			}
 		}
 
 		const startPos = CanvasUtils.getOuterCoord(
@@ -201,6 +215,27 @@ export default class SvgCanvasLinks {
 		return { x1: startPos.x, y1: startPos.y, x2: endPos.x, y2: endPos.y };
 	}
 
+	getCenterOffset(node, originInfo) {
+		const parts = originInfo.len + 1;
+		const index = originInfo.idx + 1;
+
+		let x = 0;
+		let y = 0;
+
+		if (originInfo.dir === NORTH ||
+				originInfo.dir === SOUTH) {
+			x = node.x_pos + ((node.width / parts) * index);
+			y = this.nodeUtils.getNodeCenterPosY(node);
+
+		} else if (originInfo.dir === EAST ||
+								originInfo.dir === WEST) {
+			x = this.nodeUtils.getNodeCenterPosX(node);
+			y = node.y_pos + ((node.height / parts) * index);
+		}
+
+		return { x, y };
+	}
+
 	getNodeLinkCoordsForPorts(srcNode, srcPortId, trgNode, trgPortId) {
 		let srcX = srcNode.width + srcNode.layout.outputPortRightPosX;
 		let srcY = srcNode.layout.outputPortRightPosY;

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

@@ -363,16 +363,6 @@ export default class SvgCanvasNodes {
 		return y + Number(yOffset);
 	}
 
-	// Returns true if either the cardinality of the default input port or
-	// the default output port of the node passed in is maxed out based on
-	// the array of links passed in.
-	isNodeDefaultPortsCardinalityAtMax(node, links) {
-		const defInputPort = CanvasUtils.getDefaultInputPortId(node);
-		const defOutputPort = CanvasUtils.getDefaultOutputPortId(node);
-		return CanvasUtils.isSrcCardinalityAtMax(defOutputPort, node, links) ||
-			CanvasUtils.isTrgCardinalityAtMax(defInputPort, node, links);
-	}
-
 	// Returns the X offset for the port which references the nodeId passed in
 	// based on the precalculated X coordinate of the port.
 	getSupernodePortXOffset(nodeId, ports) {

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

@@ -18,10 +18,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button } from "carbon-components-react";
-import { STATES } from "./../../constants/constants.js";
+import { STATES, CARBON_BUTTON_KIND, CARBON_BUTTON_SIZE } from "./../../constants/constants.js";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import classNames from "classnames";
 import { v4 as uuid4 } from "uuid";
+import { has } from "lodash";
 
 class ButtonAction extends React.Component {
 	constructor(props) {
@@ -32,6 +33,35 @@ class ButtonAction extends React.Component {
 		this.uuid = uuid4();
 	}
 
+	getActionButtonKind() {
+		if (!has(this.props, "action.button.kind")) {
+			return CARBON_BUTTON_KIND.TERTIARY;
+		}
+		switch (this.props.action.button.kind) {
+		case CARBON_BUTTON_KIND.PRIMARY: return CARBON_BUTTON_KIND.PRIMARY;
+		case CARBON_BUTTON_KIND.SECONDARY: return CARBON_BUTTON_KIND.SECONDARY;
+		case CARBON_BUTTON_KIND.TERTIARY: return CARBON_BUTTON_KIND.TERTIARY;
+		case CARBON_BUTTON_KIND.GHOST: return CARBON_BUTTON_KIND.GHOST;
+		case CARBON_BUTTON_KIND.DANGER: return CARBON_BUTTON_KIND.DANGER;
+		case CARBON_BUTTON_KIND.DANGER_TERTIARY: return CARBON_BUTTON_KIND.DANGER_TERTIARY;
+		case CARBON_BUTTON_KIND.DANGER_GHOST: return CARBON_BUTTON_KIND.DANGER_GHOST;
+		default: return CARBON_BUTTON_KIND.TERTIARY;
+		}
+	}
+
+	getActionButtonSize() {
+		if (!has(this.props, "action.button.size")) {
+			return CARBON_BUTTON_SIZE.SMALL;
+		}
+		switch (this.props.action.button.size) {
+		case CARBON_BUTTON_SIZE.SMALL: return CARBON_BUTTON_SIZE.SMALL;
+		case CARBON_BUTTON_SIZE.MEDIUM: return CARBON_BUTTON_SIZE.DEFAULT; // TODO: update this after upgrading to carbon 11.x
+		case CARBON_BUTTON_SIZE.LARGE: return CARBON_BUTTON_SIZE.LARGE;
+		case CARBON_BUTTON_SIZE.EXTRA_LARGE: return CARBON_BUTTON_SIZE.EXTRA_LARGE;
+		default: return CARBON_BUTTON_SIZE.SMALL;
+		}
+	}
+
 	applyAction() {
 		// fire event and let the application determine how to handle the action
 		const actionHandler = this.props.controller.getHandlers().actionHandler;
@@ -44,18 +74,18 @@ class ButtonAction extends React.Component {
 	render() {
 		const className = classNames("properties-action-button", { "hide": this.props.state === STATES.HIDDEN });
 		const disabled = this.props.state === STATES.DISABLED;
+		const actionButtonKind = this.getActionButtonKind();
+		const actionButtonSize = this.getActionButtonSize();
 		const button = (
-			<div className={className} data-id={this.props.action.name}>
-				<Button
-					type="button"
-					size="small"
-					kind="tertiary"
-					onClick={this.applyAction}
-					disabled={disabled}
-				>
-					{this.props.action.label.text}
-				</Button>
-			</div>
+			<Button
+				type="button"
+				size={actionButtonSize}
+				kind={actionButtonKind}
+				onClick={this.applyAction}
+				disabled={disabled}
+			>
+				{this.props.action.label.text}
+			</Button>
 		);
 
 		let display = button;
@@ -79,7 +109,9 @@ class ButtonAction extends React.Component {
 		}
 
 		return (
-			display
+			<div className={className} data-id={this.props.action.name}>
+				{display}
+			</div>
 		);
 	}
 }

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

@@ -18,17 +18,13 @@
 * Fixed in new versions
 */
 .properties-action-button  {
-	padding: $spacing-03 $spacing-02 $spacing-03 0;
+	display: inline-block;
 	&.hide {
 		display: none;
 	}
-	> button {
-		padding: 0 $spacing-03;
-	}
 }
 
-.properties-action-panel {
-	.properties-action-button {
-		padding-bottom: 0; // .properties-action-panel adds 8px bottom padding
-	}
+// TODO: Remove first part after all controls are accessible - CSS for inaccessible controls
+.properties-control-item > .properties-action-button, .properties-ctrl-wrapper > .properties-action-button {
+	padding-top: $spacing-05;
 }

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

@@ -258,7 +258,8 @@ CommonProperties.propTypes = {
 		buttonIconHandler: PropTypes.func,
 		validationHandler: PropTypes.func,
 		titleChangeHandler: PropTypes.func,
-		propertiesActionLabelHandler: PropTypes.func
+		propertiesActionLabelHandler: PropTypes.func,
+		tooltipLinkHandler: PropTypes.func
 	}),
 	customPanels: PropTypes.array,
 	customControls: PropTypes.array,

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

@@ -49,9 +49,15 @@ class ControlItem extends React.Component {
 					description = <div className="properties-control-description">{this.props.control.description.text}</div>;
 				// only show tooltip when control enabled and visible
 				} else {
+					// If tooltip has a link, add propertyId in the link object
+					if (this.props.control.description.link) {
+						this.props.control.description.link.propertyId = this.props.propertyId;
+					}
 					tooltip = (<Tooltip
 						id={`${this.uuid}-tooltip-label-${this.props.control.name}`}
 						tip={this.props.control.description.text}
+						link={this.props.control.description.link ? this.props.control.description.link : null}
+						tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
 						direction="bottom"
 						disable={hidden || disabled}
 						showToolTipOnClick
@@ -97,8 +103,8 @@ class ControlItem extends React.Component {
 			>
 				{label}
 				{description}
-				{action}
 				{this.props.controlObj}
+				{action}
 			</div>
 		);
 	}

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

@@ -250,17 +250,16 @@ export default class FieldPicker extends React.Component {
 	updateFieldSelections(rowsIndex) {
 		const fields = this.getVisibleData();
 		const currField = Array.from(this.state.selectedFields);
+		// Remove previously selected fields
 		let current = currField.filter(function(value, index, arr) {
 			const idx = fields.findIndex((field) => field.name === currField[index]);
-			return (idx === -1 || rowsIndex.includes(idx));
+			return (idx === -1);
 		});
-		for (let i = 0; i < rowsIndex.length; i++) {
-			const field = fields[rowsIndex[i]];
-			if (field && !current.includes(field)) {
-				const fieldName = field.name;
-				current.push(fieldName);
-			}
-		}
+		// Add new selections in current
+		rowsIndex.forEach((rowIndex) => {
+			current.push(fields[rowIndex].name);
+		});
+
 		current = Array.from(new Set(current));
 		this.setState({
 			selectedFields: current

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

@@ -62,6 +62,7 @@ class FlexibleTable extends React.Component {
 		this._adjustTableHeight = this._adjustTableHeight.bind(this);
 		this.handleCheckedRow = this.handleCheckedRow.bind(this);
 		this.handleCheckedAllRows = this.handleCheckedAllRows.bind(this);
+		this.handleCheckedMultipleRows = this.handleCheckedMultipleRows.bind(this);
 	}
 
 	componentDidMount() {
@@ -244,7 +245,7 @@ class FlexibleTable extends React.Component {
 		let newHeight = this.state.tableHeight;
 		const rowHeight = 2; // in rem
 		const headerHeight = 2; // in rem
-		const rows = typeof this.props.rows !== "undefined" ? this.props.rows : 4;
+		const rows = typeof this.props.rows !== "undefined" ? this.props.rows : 5.5;
 		if (Array.isArray(this.props.data) && this.props.data.length < rows) {
 			newHeight = (rowHeight * this.props.data.length + headerHeight) + "rem";
 		} else if (rows > 0) {
@@ -254,7 +255,7 @@ class FlexibleTable extends React.Component {
 		} else if (rows === -1) {
 			if (this.flexibleTable) {
 				const labelAndDescriptionHeight = 50; // possible dynamically set this in the future
-				const ftHeaderHeight = ReactDOM.findDOMNode(this.flexibleTableHeader).getBoundingClientRect().height;
+				const ftHeaderHeight = (typeof this.flexibleTableHeader !== "undefined") ? ReactDOM.findDOMNode(this.flexibleTableHeader).getBoundingClientRect().height : 0;
 				const flyoutHeight = this.findPropertyNodeHeight(this.flexibleTable, "properties-wf-children");
 				if (flyoutHeight === 0) {
 					newHeight = "100vh"; // set full window height if flyout height not found
@@ -320,6 +321,30 @@ class FlexibleTable extends React.Component {
 		this.setState({ checkedAllRows: checked });
 	}
 
+	/**
+	* This method is called when user wants to select multiple rows using shift key
+	* Select/deselect all rows between lastCheckedRow and existingRow
+	* @param lastCheckedRow (integer) - index of last selected row
+	* @param existingRow (integer) - index of row where shift key is clicked
+	* @param checked (boolean) - rows are to be selected or deselected
+	*/
+	handleCheckedMultipleRows(lastCheckedRow, existingRow, checked) {
+		let selectedRows = this.props.selectedRows ? this.props.selectedRows : [];
+		// Calculate rows between lastChecked row and existingRow
+		let inBetweenRows;
+		if (lastCheckedRow < existingRow) {
+			inBetweenRows = Array.from({ length: (existingRow - lastCheckedRow) + 1 }, (_, i) => lastCheckedRow + i);
+		} else {
+			inBetweenRows = Array.from({ length: (lastCheckedRow - existingRow) + 1 }, (_, i) => existingRow + i);
+		}
+		// if selectedRows already has inBetweenRows, remove them first
+		selectedRows = selectedRows.filter((row) => !inBetweenRows.includes(row)); // Deselecting inBetweenRows using shift key
+		if (checked) {
+			selectedRows = selectedRows.concat(inBetweenRows); 	// Selecting inBetweenRows using shift key
+		}
+		return selectedRows;
+	}
+
 	handleCheckedRow(data, evt) {
 		const dataRowIndex = data.originalRowIndex; // Use the originalRowIndex for selection in case rows are filtered.
 		const displayedRowIndex = data.index;
@@ -329,15 +354,20 @@ class FlexibleTable extends React.Component {
 		if (!this.props.data[displayedRowIndex].disabled) {
 			if (overSelectOption) { // Checkbox is clicked
 				let current = this.props.selectedRows ? this.props.selectedRows : [];
-				if (checked) {
+				if (data.selectMultipleRows) { // multiple rows selected/deselected using shift key
+					current = this.handleCheckedMultipleRows(data.lastCheckedRow, displayedRowIndex, checked);
+					this.setCheckedAll(current);
+				} else if (checked) { // single row selected
 					current = current.concat(dataRowIndex);
 					this.setCheckedAll(current);
-				} else if (current) {
+				} else if (current) { // single row  deselected
 					current = current.filter(function(element) {
 						return element !== dataRowIndex;
 					});
 					this.setState({ checkedAllRows: false });
 				}
+				// 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
 				this.props.updateRowSelections(data.index, evt, this.props.data[data.index].rowKey);
@@ -355,7 +385,8 @@ class FlexibleTable extends React.Component {
 	*     "label": string,
 	*     "width": integer or string if containts 'px',
 	*     "description": optional string,
-	*     "resizable": optional string
+	*     "resizable": optional boolean,
+	*     "staticWidth": optional boolean - This is a special property added only for SPSS modeler which directly calls FlexibleTable. This property is NOT a part of uiHints.
 	*   }
 	* ]
 	* @param columnWidths
@@ -382,7 +413,8 @@ class FlexibleTable extends React.Component {
 				description: columnDef.description,
 				headerLabel: headerLabel,
 				resizable: columnDef.resizable,
-				operation: columnDef.operation
+				operation: columnDef.operation,
+				staticWidth: columnDef.staticWidth ? columnDef.staticWidth : false // Used to exclude a column from resizing. If true, "resizable" value will be ignored.
 			});
 		}
 		return {
@@ -467,13 +499,16 @@ class FlexibleTable extends React.Component {
 
 		const containerClass = this.props.showHeader ? "properties-ft-container-absolute " : "properties-ft-container-absolute-noheader ";
 		const messageClass = (!this.props.messageInfo) ? containerClass + STATES.INFO : containerClass + this.props.messageInfo.type;
+		const ftHeader = (searchBar || this.props.topRightPanel)
+			? (<div className="properties-ft-table-header" ref={ (ref) => (this.flexibleTableHeader = ref) }>
+				{searchBar}
+				{this.props.topRightPanel}
+			</div>)
+			: null;
 
 		return (
 			<div data-id={"properties-ft-" + this.props.scrollKey} className="properties-ft-control-container" ref={ (ref) => (this.flexibleTable = ref) }>
-				<div className="properties-ft-table-header" ref={ (ref) => (this.flexibleTableHeader = ref) }>
-					{searchBar}
-					{this.props.topRightPanel}
-				</div>
+				{ftHeader}
 				<div className="properties-ft-container-panel">
 					<ReactResizeDetector handleWidth onResize={this._updateTableWidth}>
 						<div className="properties-ft-container-wrapper" style={ heightStyle }>

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

@@ -23,7 +23,7 @@ import { SORT_DIRECTION, STATES, ROW_SELECTION, MINIMUM_COLUMN_WIDTH, MINIMUM_CO
 import { injectIntl } from "react-intl";
 import defaultMessages from "../../../../locales/common-properties/locales/en.json";
 
-import { isEmpty, differenceBy } from "lodash";
+import { isEmpty, differenceBy, mapValues } from "lodash";
 import { v4 as uuid4 } from "uuid";
 import classNames from "classnames";
 
@@ -54,6 +54,7 @@ class VirtualizedTable extends React.Component {
 			columnResized: false
 		};
 		this.virtualizedTableRef = React.createRef();
+		this.lastChecked = isEmpty(props.rowsSelected) ? null : props.rowsSelected.slice(-1).pop();
 
 		this.isOverSelectOption = false;
 		this.mouseEventCalled = false;
@@ -88,7 +89,12 @@ class VirtualizedTable extends React.Component {
 					"index": index,
 					"originalRowIndex": rowData.originalRowIndex,
 					"selected": selected,
-					"isOverSelectOption": this.isOverSelectOption }, evt);
+					"isOverSelectOption": this.isOverSelectOption,
+					"selectMultipleRows": evt.shiftKey ? evt.shiftKey : false,
+					"lastCheckedRow": this.lastChecked === null ? 0 : this.lastChecked }, evt);
+
+				// Track lastChecked row for shift key selection
+				this.lastChecked = rowData.index;
 			}
 		}
 	}
@@ -115,6 +121,37 @@ class VirtualizedTable extends React.Component {
 		return index;
 	}
 
+	// Returns an object of deltas for every column - {columnKey: individualDelta}
+	getColumnWiseDeltas(columns, deltaX) {
+		const columnWiseDeltas = {};
+		if (columns.length > 0) {
+			// sort columns in ascending order of widths because smallest column will reach MINIMUM_COLUMN_WIDTH first
+			columns.sort((a, b) => a.width - b.width);
+			let totalDelta = deltaX;
+			// Finalize individualDelta for 1 column at a time starting from smallest column
+			// If individualDelta is greater than maximum allowed delta for the column, set individualDelta = maximum allowed delta until column reaches MINIMUM_COLUMN_WIDTH
+			// Total delta will reduce after every iteration
+			for (let i = 0; i < columns.length; i++) {
+				const widthOfAllColumns = columns.slice(i).reduce((prev, current) => prev + current.width, 0);
+				let individualDelta = Math.round((columns[i].width * totalDelta) / widthOfAllColumns);
+				// check if individualDelta is greater than the maximum allowed delta for this column
+				if (columns[i].headerLabel.length > 0 && columns[i].width - individualDelta < MINIMUM_COLUMN_WIDTH) {
+					individualDelta = columns[i].width - MINIMUM_COLUMN_WIDTH;
+				} else if (columns[i].width - individualDelta < MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL) {
+					individualDelta = columns[i].width - MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL;
+				}
+				totalDelta -= individualDelta;
+				columnWiseDeltas[columns[i].key] = individualDelta;
+			}
+			if (totalDelta > 0) {
+				// deltaX is greater than maximum allowed delta for all columns.
+				// Don't allow resizing by setting individualDelta = 0 for ALL columns
+				return mapValues(columnWiseDeltas, () => 0);
+			}
+		}
+		return columnWiseDeltas;
+	}
+
 	isRowSelected(index) {
 		if (this.props.rowsSelected) {
 			return this.props.rowsSelected.indexOf(index) > -1;
@@ -265,35 +302,50 @@ class VirtualizedTable extends React.Component {
 
 	/* Columns are not resizable by default. Host application specifies resizable columns in parameter definition.
 	* When a column is resized, width of ALL the columns to the right of resized column is adjusted.
-	* Example: If a column width is reduced by 10px and there are 5 columns on the right of resized column. Each of the 5 columns width is increased by 2px (10px/number of columns)
-	* When any column's width reaches MINIMUM_COLUMN_WIDTH (56px), resizing is stopped.
+	* Every column grows/shrinks directly proportional to column width.
+	* Example: If a column width is reduced by 10px and there are 4 columns on the right of resized column having widths [40, 30, 20, 10],
+	* Then 10px will be adjusted in 4 columns as - [4px, 3px, 2px, 1px]
+	* When every column's width reaches MINIMUM_COLUMN_WIDTH (56px), resizing is stopped.
 	* Special case - For columns without labels, when their width reaches MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL (32px), resizing is stopped.
 	*/
 	resizeColumn({ dataKey, deltaX }) {
 		this.setState((prevState) => {
 
 			const columns = prevState.columns;
-			// Calculate number of columns on the right of resized column
+			// Calculate number of resizable columns on the right of resized column
 			const resizedColumnIndex = this.getColumnIndex(columns, dataKey);
-			const numberOfColumnsOnTheRight = columns.length - 1 - resizedColumnIndex;
-			const rightColumnsDelta = deltaX / numberOfColumnsOnTheRight;
-
-			// Verify adjusted width of every column on the right is greater than minimum width
-			const everyColumnGreaterThanMinWidth = columns.slice(resizedColumnIndex + 1).every((col) => {
-				if (col.headerLabel.length > 0) {
-					// Column with label has min width 56px
-					return (col.width - rightColumnsDelta > MINIMUM_COLUMN_WIDTH);
+			const allColumnsOnRight = columns.slice(resizedColumnIndex + 1);
+			// Exclude columns having staticWidth: true
+			const nonStaticColumns = allColumnsOnRight.filter((column) => !column.staticWidth);
+
+			const resizableColumns = nonStaticColumns.filter((column) => {
+				// When shrinking, get columns having width greater than MINIMUM_COLUMN_WIDTH
+				if (deltaX >= 0) {
+					if (column.headerLabel.length > 0) {
+						// Column with label has min width 56px
+						return (column.width > MINIMUM_COLUMN_WIDTH);
+					}
+					// Column without label has min width 32px
+					return (column.width > MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL);
 				}
-				// Column without label has min width 32px
-				return (col.width - rightColumnsDelta > MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL);
+				// When expanding, get all columns
+				return true;
 			});
 
-			if ((columns[resizedColumnIndex].width + deltaX) > MINIMUM_COLUMN_WIDTH && everyColumnGreaterThanMinWidth) {
+			// Get column wise delta for resizableColumns
+			const columnWiseDeltas = this.getColumnWiseDeltas(resizableColumns, deltaX);
+			const columnsToBeResized = Object.keys(columnWiseDeltas);
+
+			// check if all column wise deltas are 0. This happens when deltaX is more than maximum allowed delta for all columns
+			const everyColumnHasZeroDelta = Object.values(columnWiseDeltas).every((delta) => delta === 0);
+
+			if ((columns[resizedColumnIndex].width + deltaX) > MINIMUM_COLUMN_WIDTH && !isEmpty(columnWiseDeltas) && !everyColumnHasZeroDelta) {
 				columns[resizedColumnIndex].width += deltaX;
-				// Adjust width of all columns on the right
-				for (let i = resizedColumnIndex + 1; i < columns.length; i++) {
-					columns[i].width -= rightColumnsDelta;
-				}
+				// Adjust width of all resizable columns
+				columnsToBeResized.forEach((columnKey) => {
+					const idx = columns.findIndex((col) => col.key === columnKey);
+					columns[idx].width -= columnWiseDeltas[columnKey];
+				});
 			}
 			return {
 				columnResized: true,

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

@@ -229,3 +229,21 @@ export const CARBON_MODAL_SIZE_LARGE = "lg";
 
 export const MINIMUM_COLUMN_WIDTH = 56; // 16px padding on both sides + 24px label
 export const MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL = 32; // 16px padding on both sides
+
+export const CARBON_BUTTON_KIND = {
+	PRIMARY: "primary",
+	SECONDARY: "secondary",
+	TERTIARY: "tertiary",
+	GHOST: "ghost",
+	DANGER: "danger",
+	DANGER_TERTIARY: "danger--tertiary",
+	DANGER_GHOST: "danger--ghost"
+};
+
+export const CARBON_BUTTON_SIZE = {
+	SMALL: "sm",
+	MEDIUM: "md",
+	LARGE: "lg",
+	EXTRA_LARGE: "xl",
+	DEFAULT: "default" // TODO: remove this after upgrading to carbon 11.x
+};

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

@@ -630,7 +630,7 @@ export default class AbstractTable extends React.Component {
 		const selectedEditRow = this.props.control.rowSelection === ROW_SELECTION.MULTIPLE
 			? this.makeSelectedEditRow(this.props.selectedRows)
 			: null;
-		let topRightPanel = <div />;
+		let topRightPanel = null;
 		if (customButtons) {
 			topRightPanel = this.makeCustomButtonsPanel(tableState, customButtons);
 		} else if (this.isReadonlyTable()) {
@@ -720,8 +720,8 @@ export default class AbstractTable extends React.Component {
 		}
 		// subpanel column will always be empty for ReadonlyTable control based on condition in makeCells()
 		if (this.props.control.childItem && !this.isReadonlyTable()) {
-			// set to specific size
-			headers.push({ "key": "subpanel", "label": "", "width": TABLE_SUBPANEL_BUTTON_WIDTH });
+			// set to specific size. Exclude this column from resizing.
+			headers.push({ "key": "subpanel", "label": "", "width": TABLE_SUBPANEL_BUTTON_WIDTH, "staticWidth": true });
 		}
 		return headers;
 	}

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

@@ -46,11 +46,17 @@ class CheckboxControl extends React.Component {
 			tooltip = (
 				<span >{this.props.control.description.text}</span>
 			);
+			// If tooltip has a link, add propertyId in the link object
+			if (this.props.control.description.link) {
+				this.props.control.description.link.propertyId = this.props.propertyId;
+			}
 		}
 		const tooltipIcon = isEmpty(tooltip) ? "" : (
 			<Tooltip
 				id={tooltipId}
 				tip={tooltip}
+				link={this.props.control.description.link ? this.props.control.description.link : null}
+				tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
 				direction="bottom"
 				className="properties-tooltips"
 				showToolTipOnClick