@elyra/canvas 12.10.1 → 12.11.1

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

@@ -47,28 +47,35 @@ class PropertiesButtons extends Component {
 				</Button>
 			);
 		}
-		const applyButton = (
-			<Button
-				data-id="properties-apply-button"
-				className="properties-apply-button"
-				type="button"
-				size="small"
-				onClick={this.props.okHandler}
-				disabled={!this.props.applyButtonEnabled}
-			>
-				{applyButtonLabel}
-			</Button>
-		);
+		let applyButton;
+		if (this.props.okHandler) {
+			applyButton = (
+				<Button
+					data-id="properties-apply-button"
+					className="properties-apply-button"
+					type="button"
+					size="small"
+					onClick={this.props.okHandler}
+					disabled={!this.props.applyButtonEnabled}
+				>
+					{applyButtonLabel}
+				</Button>
+			);
+		}
+
+		const propertiesModalButtons = this.props.okHandler || this.props.cancelHandler
+			? (
+				<div
+					className={classNames("properties-modal-buttons", { "hide": (typeof (this.props.showPropertiesButtons) !== "undefined" &&
+						!this.props.showPropertiesButtons) })}
+				>
+					{rejectButton}
+					{applyButton}
+				</div>
+			)
+			: null;
 
-		return (
-			<div
-				className={classNames("properties-modal-buttons", { "hide": (typeof (this.props.showPropertiesButtons) !== "undefined" &&
-					!this.props.showPropertiesButtons) })}
-			>
-				{rejectButton}
-				{applyButton}
-			</div>
-		);
+		return propertiesModalButtons;
 	}
 }
 

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

@@ -17,7 +17,8 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import Toolbar from "../../../toolbar/toolbar.jsx";
+
+import Toolbar from "../../../toolbar/toolbar";
 
 import { STATES } from "./../../constants/constants";
 
@@ -84,6 +85,7 @@ class TableButtons extends React.Component {
 			if (buttonConfig.label) {
 				buttonDef.label = buttonConfig.label.text;
 				buttonDef.incLabelWithIcon = "before";
+				buttonDef.kind = "ghost";
 			}
 
 			if (buttonConfig.description) {

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

@@ -16,28 +16,28 @@
 
 .properties-custom-table-buttons {
 	.toolbar-div {
-		height: 32px;
+		height: $spacing-07;
 
 		.toolbar-left-bar {
 			padding-right: 0;
 
 			.toolbar-item button {
-				height: 32px;
+				height: $spacing-07;
 			}
 
 			.toolbar-item-content {
-				padding: 3px 7px;
-				height: 32px;
-				min-width: 32px;
+				padding: $spacing-02 $spacing-03;
+				height: $spacing-07;
+				min-width: $spacing-07;
 				align-items: center;
 			}
 
 			.toolbar-overflow-item button {
-				height: 32px;
+				height: $spacing-07;
 			}
 
 			.toolbar-popover-list {
-				top: 32px;
+				top: $spacing-07;
 				right: 0;
 			}
 		}
@@ -46,4 +46,4 @@
 			display: none;
 		}
 	}
-}
+}

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

@@ -24,7 +24,7 @@ import { TextInput, Button } from "carbon-components-react";
 import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE } from "./../../constants/constants";
 import * as PropertyUtils from "./../../util/property-utils";
 import classNames from "classnames";
-import { Information16, Edit16 } from "@carbon/icons-react";
+import { Information16, Edit16, Close16 } from "@carbon/icons-react";
 
 
 class TitleEditor extends Component {
@@ -95,7 +95,10 @@ class TitleEditor extends Component {
 	render() {
 		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);
 		const titleValidationTypes = [CONDITION_MESSAGE_TYPE.ERROR, CONDITION_MESSAGE_TYPE.WARNING];
+		const titleWithWarning = get(this.state.titleValidation, "type", null) === CONDITION_MESSAGE_TYPE.WARNING;
+		const titleWithErrror = get(this.state.titleValidation, "type", null) === CONDITION_MESSAGE_TYPE.ERROR;
 
 		const propertiesTitleEdit = this.props.labelEditable === false || this.state.focused ? <div />
 			: (<Button
@@ -106,6 +109,7 @@ class TitleEditor extends Component {
 				tooltipPosition="bottom"
 				tooltipAlignment="end"
 				renderIcon={Edit16}
+				size="small"
 				iconDescription={propertiesTitleEditButtonLabel}
 				hasIconOnly
 			/>);
@@ -118,11 +122,27 @@ class TitleEditor extends Component {
 				onClick={this.helpClickHandler}
 				tooltipPosition="bottom"
 				renderIcon={Information16}
+				size="small"
 				iconDescription={helpButtonLabel}
 				hasIconOnly
 			/>)
 			: null;
 
+		const closeButton = this.props.closeHandler
+			? (<div className="properties-close-button">
+				<Button
+					kind="ghost"
+					size="small"
+					data-id="close"
+					onClick={this.props.closeHandler}
+					tooltipPosition="left"
+					renderIcon={Close16}
+					iconDescription={closeButtonLabel}
+					hasIconOnly
+				/>
+			</div>)
+			: null;
+
 		let heading = null;
 		if (this.headingEnabled) {
 			const label = this.props.heading
@@ -146,10 +166,15 @@ class TitleEditor extends Component {
 			<div className={classNames("properties-title-editor",
 				{ "properties-title-with-heading": this.headingEnabled })}
 			>
+				{closeButton}
 				{heading}
 				<div className={classNames(
 					"properties-title-editor-input",
-					{ "properties-title-editor-with-help": this.props.help && !this.headingEnabled && !titleValidationTypes.includes(get(this.state.titleValidation, "type")) }
+					{
+						"properties-title-editor-with-help": this.props.help && !this.headingEnabled && !titleValidationTypes.includes(get(this.state.titleValidation, "type")),
+						"properties-title-editor-with-warning": titleWithWarning,
+						"properties-title-editor-with-error": titleWithErrror
+					}
 				)}
 				>
 					<TextInput
@@ -161,12 +186,13 @@ class TitleEditor extends Component {
 						readOnly={this.props.labelEditable === false} // shows a non editable icon
 						labelText={this.labelText}
 						hideLabel
+						size="sm"
 						onFocus={this.textInputOnFocus}
 						onBlur={this.textInputOnBlur}
 						light={this.props.controller.getLight()}
-						invalid={get(this.state.titleValidation, "type", null) === CONDITION_MESSAGE_TYPE.ERROR}
+						invalid={titleWithErrror}
 						invalidText={get(this.state.titleValidation, "message")}
-						warn={get(this.state.titleValidation, "type", null) === CONDITION_MESSAGE_TYPE.WARNING}
+						warn={titleWithWarning}
 						warnText={get(this.state.titleValidation, "message")}
 						{... this.state.focused && { className: "properties-title-editor-focused" }}
 					/>
@@ -180,6 +206,7 @@ class TitleEditor extends Component {
 
 TitleEditor.propTypes = {
 	helpClickHandler: PropTypes.func,
+	closeHandler: PropTypes.func,
 	controller: PropTypes.object.isRequired,
 	labelEditable: PropTypes.bool,
 	help: PropTypes.object,

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

@@ -39,14 +39,14 @@
 	}
 }
 .properties-title-editor-input {
-	width: calc(100% - 2px); // subtract 2px for input active right border
+	width: calc(100% - #{$spacing-03}); // subtract 8px to align with Close icon when applyOnBlur is set
 	top: 1px; // align input with bottom border
 	position: relative;
 	display: inline-flex;
 	align-items: center;
 
 	&.properties-title-editor-with-help {
-		width: calc(100% - #{$spacing-08}); // subtract the size of the help button
+		width: calc(100% - #{$spacing-07} - #{$spacing-03}); // subtract the size of the help button and 8px to align with Close icon when applyOnBlur is set
 	}
 	.bx--form-item.bx--text-input-wrapper {
 		// allow edit icon to be at the end of text input
@@ -79,11 +79,16 @@
 	}
 }
 
+// warning and invalid icons should be aligned with close icon. And input field should stretch full width
+.properties-title-editor-with-warning, .properties-title-editor-with-error {
+	width: calc(100% - 2px); // subtract 2px for input active right border
+}
+
 .properties-title-editor-btn.help, .properties-title-editor-btn.edit {
 	fill: $icon-02;
-	// edit & help buttons size - 40x40
-	width: $spacing-08;
-	min-height: $spacing-08;
+	// edit & help buttons size - 32x32
+	width: $spacing-07;
+	min-height: $spacing-07;
 	padding-left: $spacing-04;
 	padding-right: $spacing-04;
 	&:hover {
@@ -93,3 +98,23 @@
 		background-color: $ui-03;
 	}
 }
+
+// Close icon without heading
+.properties-close-button {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding-right: $spacing-03;
+}
+
+// Close icon with heading
+.properties-title-with-heading > .properties-close-button {
+	position: absolute;
+	top: $spacing-03;
+	right: $spacing-03;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+}

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

@@ -15,15 +15,15 @@
  */
 
 import { Column, Table, AutoSizer } from "react-virtualized";
-
+import Draggable from "react-draggable";
 import { Checkbox, Loading } from "carbon-components-react";
-import Icon from "./../../../icons/icon.jsx";
+import { ArrowUp16, ArrowDown16, ArrowsVertical16 } from "@carbon/icons-react";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
-import { SORT_DIRECTION, STATES, ROW_SELECTION, CARBON_ICONS } from "./../../constants/constants";
+import { SORT_DIRECTION, STATES, ROW_SELECTION, MINIMUM_COLUMN_WIDTH, MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL } from "./../../constants/constants";
 import { injectIntl } from "react-intl";
 import defaultMessages from "../../../../locales/common-properties/locales/en.json";
 
-import { isEmpty } from "lodash";
+import { isEmpty, differenceBy } from "lodash";
 import { v4 as uuid4 } from "uuid";
 import classNames from "classnames";
 
@@ -33,17 +33,25 @@ import React from "react";
 class VirtualizedTable extends React.Component {
 
 	static getDerivedStateFromProps(nextProps, prevState) {
+		const updatedState = {};
 		if (nextProps.rowCount !== prevState.rowCount) {
-			return ({ rowCount: nextProps.rowCount });
+			updatedState.rowCount = nextProps.rowCount;
+		}
+		// Only get new columns if column label (headerLabel) is different. This is useful when changing "View in tables" dropdown in Expression control.
+		// We're not comparing all properties in columns object because width can be different after resizing.
+		if (!prevState.columnResized || !isEmpty(differenceBy(nextProps.columns, prevState.columns, "headerLabel"))) {
+			updatedState.columns = nextProps.columns;
 		}
-		return ({});
+		return (updatedState);
 	}
 
 	constructor(props, context) {
 		super(props, context);
 
 		this.state = {
-			rowCount: this.props.rowCount
+			rowCount: this.props.rowCount,
+			columns: this.props.columns,
+			columnResized: false
 		};
 		this.virtualizedTableRef = React.createRef();
 
@@ -56,6 +64,7 @@ class VirtualizedTable extends React.Component {
 		this.headerColRenderer = this.headerColRenderer.bind(this);
 		this.onRowClick = this.onRowClick.bind(this);
 		this.overSelectOption = this.overSelectOption.bind(this);
+		this.resizeColumn = this.resizeColumn.bind(this);
 	}
 
 	componentDidUpdate() {
@@ -101,6 +110,11 @@ class VirtualizedTable extends React.Component {
 		return 0;
 	}
 
+	getColumnIndex(columns, key) {
+		const index = columns.findIndex((column) => column.key === key);
+		return index;
+	}
+
 	isRowSelected(index) {
 		if (this.props.rowsSelected) {
 			return this.props.rowsSelected.indexOf(index) > -1;
@@ -108,6 +122,12 @@ class VirtualizedTable extends React.Component {
 		return false;
 	}
 
+	isLastColumn(dataKey) {
+		const columnIndex = this.getColumnIndex(this.props.columns, dataKey);
+		const isLastColumn = (columnIndex === (this.props.columns.length - 1));
+		return isLastColumn;
+	}
+
 	selectAll(selected) {
 		this.props.setAllRowsSelected(selected);
 	}
@@ -161,12 +181,20 @@ class VirtualizedTable extends React.Component {
 	headerColRenderer({ columnData, dataKey, disableSort, label, sortBy, sortDirection }) {
 		let sortIcon = null;
 		if (typeof this.props.sortColumns[dataKey] !== "undefined") {
-			sortIcon = this.props.sortColumns[dataKey] === SORT_DIRECTION.ASC
-				? <Icon type={CARBON_ICONS.CHEVRONARROWS.UP} disabled={this.props.tableState === STATES.DISABLED} />
-				: <Icon type={CARBON_ICONS.CHEVRONARROWS.DOWN} disabled={this.props.tableState === STATES.DISABLED} />;
-			sortIcon = (<div className="properties-ft-column-sort-icon">
-				{sortIcon}
-			</div>);
+			let type = null;
+			switch (this.props.sortColumns[dataKey]) {
+			case SORT_DIRECTION.ASC:
+				type = <ArrowUp16 disabled={this.props.tableState === STATES.DISABLED} />;
+				break;
+			case SORT_DIRECTION.DESC:
+				type = <ArrowDown16 disabled={this.props.tableState === STATES.DISABLED} />;
+				break;
+			default:
+				type = <ArrowsVertical16 disabled={this.props.tableState === STATES.DISABLED} />;
+			}
+			sortIcon = (<span className="properties-ft-column-sort-icon">
+				{type}
+			</span>);
 		}
 
 		let tooltip = null;
@@ -194,20 +222,84 @@ class VirtualizedTable extends React.Component {
 
 		const tooltipId = uuid4() + "-tooltip-column-" + dataKey;
 
-		return (<div className={classNames("properties-vt-column properties-tooltips-container", { "sort-column-active": dataKey === this.props.sortBy })}>
-			{ isEmpty(tooltip)
-				? label
-				: <Tooltip
-					id={tooltipId}
-					tip={tooltip}
-					direction="bottom"
-					className="properties-tooltips"
-				>
-					{label}
-				</Tooltip>
+		const resizeElem = columnData.resizable && !this.isLastColumn(dataKey)
+			? (<Draggable
+				axis="x"
+				defaultClassName="properties-vt-header-resize"
+				defaultClassNameDragging="properties-vt-header-resize-active"
+				onDrag={
+					(evt, { deltaX }) => {
+						this.resizeColumn({ dataKey, deltaX });
+					}
+				}
+				position={{ x: 0 }}
+				zIndex={999}
+			>
+				<div
+					role="button" tabIndex="0"
+					aria-label="Resize column"
+				/>
+			</Draggable>)
+			: "";
+
+		return (
+			<div className={classNames({ "properties-vt-column-with-resize": resizeElem !== "", "properties-vt-column-without-resize": resizeElem === "" })}>
+				<div className={classNames("properties-vt-column properties-tooltips-container", { "sort-column-active": dataKey === this.props.sortBy })}>
+					{ isEmpty(tooltip)
+						? label
+						: <Tooltip
+							id={tooltipId}
+							tip={tooltip}
+							direction="bottom"
+							className="properties-tooltips"
+						>
+							{label}
+						</Tooltip>
+					}
+					{disableSort === false && sortIcon}
+				</div>
+				{ resizeElem }
+			</div>
+		);
+	}
+
+	/* 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.
+	* 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
+			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);
+				}
+				// Column without label has min width 32px
+				return (col.width - rightColumnsDelta > MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL);
+			});
+
+			if ((columns[resizedColumnIndex].width + deltaX) > MINIMUM_COLUMN_WIDTH && everyColumnGreaterThanMinWidth) {
+				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;
+				}
 			}
-			{disableSort === false && sortIcon}
-		</div>);
+			return {
+				columnResized: true,
+				columns: columns
+			};
+		});
 	}
 
 	overSelectOption(evt) {
@@ -353,7 +445,7 @@ class VirtualizedTable extends React.Component {
 								sortDirection={this.props.sortDirection}
 							>
 								{
-									this.props.columns.map((column) => (
+									this.state.columns.map((column) => (
 										<Column
 											key={column.key}
 											label={column.label}

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

@@ -14,12 +14,10 @@
  * limitations under the License.
  */
 
-$properties-vt-checkbox-width: 45px;
 
 .properties-vt {
 	width: 100%;
 	height: 100%;
-	background: $ui-02;
 
 	.properties-autosized-vt {
 		// Table rows container
@@ -41,14 +39,22 @@ $properties-vt-checkbox-width: 45px;
 		height: $spacing-07;
 		display: flex;
 		align-items: center;
-		flex: 0 1 $properties-vt-checkbox-width;
 		margin-left: $spacing-05;
+		margin-right: $spacing-02;
+	}
+
+	div[data-role="properties-header-row"] {
+		background-color: $ui-03;
+	}
+
+	div[data-role="properties-data-row"] {
+		background-color: $ui-02;
 	}
 
 	.properties-autosized-vt-header {
 		// Override text-transform: uppercase from .ReactVirtualized__Table__headerRow
 		text-transform: none;
-
+		margin-left: 0;
 		.properties-vt-column .bx--checkbox-wrapper {
 			margin-top: 0;
 			margin-bottom: 0;
@@ -68,10 +74,36 @@ $properties-vt-checkbox-width: 45px;
 		}
 	}
 
+	.properties-vt-column-with-resize, .properties-vt-column-without-resize {
+		display: inline-flex;
+		width: 100%;
+	}
+
+	.properties-vt-column-with-resize {
+		.properties-vt-header-resize {
+			flex: 0 0 $spacing-02;
+			z-index: 2;
+			cursor: col-resize;
+		}
+		.properties-vt-header-resize:hover {
+			background-color: $active-secondary;
+		}
+
+		.properties-vt-header-resize-active {
+			z-index: 3;
+		}
+		&:hover {
+			background-color: $active-ui;
+			.properties-vt-header-resize {
+				background-color: $active-secondary;
+			}
+		}
+	}
+
 	.properties-vt-row-checkbox {
 		height: $spacing-07;
 		margin-left: $spacing-05;
-		flex: 0 1 $properties-vt-checkbox-width;
+		margin-right: $spacing-02;
 	}
 
 	.properties-vt-double-click:first-of-type {
@@ -111,7 +143,30 @@ $properties-vt-checkbox-width: 45px;
 		// Required to position the warning/error icons correctly within react-virtualized table cell
 		.ReactVirtualized__Table__headerColumn {
 			margin-right: 0;
-			margin-left: $spacing-04;
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			height: 100%;
+		}
+
+		.ReactVirtualized__Table__rowColumn {
+			margin-right: 0; // Align cell text with header label
+			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;
+			}
+			&:hover {
+				background-color: $active-ui;
+			}
+		}
+
+		.ReactVirtualized__Table__headerTruncatedText {
+			flex: auto;
 		}
 	}
 
@@ -126,7 +181,7 @@ $properties-vt-checkbox-width: 45px;
 	.properties-vt-single-selection {
 		// Table header
 		div[data-role="properties-header-row"] {
-			padding-left: 9px;
+			padding-left: 3px;
 		}
 
 		// Table rows
@@ -153,9 +208,18 @@ $properties-vt-checkbox-width: 45px;
 	}
 
 	.properties-light-disabled {
-		background-color: $ui-01;
+		div[data-role="properties-data-row"] {
+			background-color: $ui-01;
+		}
 		.bx--select--inline .bx--select-input[disabled] {
 			background-color: $ui-background;
 		}
 	}
+
+	.properties-ft-column-sort-icon {
+		flex: 0 0 $spacing-05;
+		align-self: center;
+		height: $spacing-05;
+		margin-right: $spacing-03; // spacing between sort icon and end of column
+	}
 }

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

@@ -187,7 +187,8 @@ export const CONDITION_RETURN_VALUE_HANDLING = {
 
 export const SORT_DIRECTION = {
 	ASC: "ASC",
-	DESC: "DESC"
+	DESC: "DESC",
+	NOT_SORTED: "not-sorted"
 };
 
 export const ROW_SELECTION = {
@@ -225,3 +226,6 @@ export const CANCEL = "cancel";
 export const CARBON_MODAL_SIZE_XSMALL = "xs";
 export const CARBON_MODAL_SIZE_SMALL = "sm";
 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

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

@@ -122,6 +122,7 @@ const Type = {
 	PASSWORD: "password",
 	DATE: "date",
 	TIME: "time",
+	TIMESTAMP: "timestamp",
 	STRUCTURE: "structure",
 	OBJECT: "object"
 };