@elyra/canvas 12.10.2 → 12.11.2

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

@@ -23,14 +23,11 @@ import TableButtons from "./../components/table-buttons";
 import SubPanelCell from "./../panels/sub-panel/cell.jsx";
 import ReadonlyControl from "./readonly";
 import * as PropertyUtils from "./../util/property-utils";
-import Icon from "./../../icons/icon.jsx";
 import classNames from "classnames";
 import { Add16, TrashCan16, Edit16 } from "@carbon/icons-react";
 import { ControlType, EditStyle } from "./../constants/form-constants";
 
-import { MESSAGE_KEYS, STATES,
-	TABLE_SUBPANEL_BUTTON_WIDTH, SORT_DIRECTION,
-	ROW_SELECTION, CARBON_ICONS } from "./../constants/constants";
+import { MESSAGE_KEYS, STATES, TABLE_SUBPANEL_BUTTON_WIDTH, SORT_DIRECTION, ROW_SELECTION } from "./../constants/constants";
 
 import { isEqual, findIndex, sortBy, cloneDeep } from "lodash";
 
@@ -366,7 +363,8 @@ export default class AbstractTable extends React.Component {
 			width: columnDef.width,
 			content: cellContent,
 			className: cellClassName,
-			value: this.props.controller.getPropertyValue(propertyId)
+			value: this.props.controller.getPropertyValue(propertyId),
+			resizable: columnDef.resizable
 		};
 	}
 	_getCustomCtrlContent(propertyId, columnDef, defaultContent, tableInfo) {
@@ -632,12 +630,14 @@ 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 />;
 		if (customButtons) {
 			topRightPanel = this.makeCustomButtonsPanel(tableState, customButtons);
 		} else if (this.isReadonlyTable()) {
-			topRightPanel = this.makeEditButtonPanel(tableState, tableButtonConfig);
+			if (!this.props.hideEditButton) {
+				topRightPanel = this.makeEditButtonPanel(tableState, tableButtonConfig);
+			}
+
 		} else if (this.props.addRemoveRows) {
 			topRightPanel = this.makeAddRemoveButtonPanel(tableState, tableButtonConfig);
 		}
@@ -711,6 +711,7 @@ export default class AbstractTable extends React.Component {
 					"label": columnLabel,
 					"width": columnDef.width,
 					"description": (columnDef.description ? columnDef.description.text : null),
+					"resizable": columnDef.resizable ? columnDef.resizable : false,
 					"operation": (columnDef.generatedValues && columnDef.generatedValues.operation ? columnDef.generatedValues.operation : null) });
 				if (columnDef.filterable) {
 					filterFields.push(columnDef.name);
@@ -771,7 +772,6 @@ export default class AbstractTable extends React.Component {
 		}
 
 		const subItemButton = this.props.buildUIItem(rowIndex, this.props.control.childItem, propertyId, this.indexOfColumn);
-		const settingsIcon = <Icon type={CARBON_ICONS.SETTINGS} />;
 		// Hack to decompose the button into our own in-table link
 		const subCell = (
 			<div className="properties-table-subcell">
@@ -779,7 +779,6 @@ export default class AbstractTable extends React.Component {
 					label={subItemButton.props.label}
 					title={subItemButton.props.title}
 					panel={subItemButton.props.panel}
-					buttonIcon={settingsIcon}
 					disabled={tableState === STATES.DISABLED}
 					controller={this.props.controller}
 					propertyId={this.props.propertyId}
@@ -804,9 +803,11 @@ AbstractTable.propTypes = {
 	value: PropTypes.array, // pass in by redux
 	selectedRows: PropTypes.array, // set by redux
 	addRemoveRows: PropTypes.bool, // set by redux
-	tableButtons: PropTypes.object // set in by redux
+	tableButtons: PropTypes.object, // set in by redux
+	hideEditButton: PropTypes.bool // set by redux
 };
 
 AbstractTable.defaultProps = {
-	addRemoveRows: true
+	addRemoveRows: true,
+	hideEditButton: false,
 };

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

@@ -16,7 +16,7 @@
 
 .properties-table-cell-control {
 	>div>:first-child {
-		margin-left: $spacing-04;
+		padding: 0 $spacing-05;
 	}
 }
 
@@ -35,9 +35,13 @@
 		color: $ui-01;
 	}
 
+	.properties-ft-table-header {
+		display: none;
+	}
+
 	// align summaryTable row
 	.properties-vt-row-checkbox {
-		margin-left: 0;
+		width: 1.25rem;
 	}
 
 	.properties-vt-row-class {

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

@@ -31,6 +31,9 @@
 			.bx--select-input--inline__wrapper {
 				width: 100%;
 			}
+			svg {
+				right: 0;
+			}
 		}
 		.bx--select-input {
 			width: inherit; // Override carbon default width: auto
@@ -43,6 +46,7 @@
 			&:focus {
 				outline: unset;
 			}
+
 		}
 		&.error {
 			.bx--select-input {

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

@@ -366,7 +366,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		}
 
 		if (categoryInfo) {
-			fieldHeaders.push({ key: "fieldName", label: categoryInfo.field_columns.field_column_info.locLabel });
+			fieldHeaders.push({ key: "fieldName", label: categoryInfo.field_columns.field_column_info.locLabel, resizable: true });
 			valueHeader.push({ key: "values", label: categoryInfo.field_columns.value_column_info.locLabel });
 			if (categoryInfo.field_columns.additional_column_info) {
 				for (let i = 0; i < categoryInfo.field_columns.additional_column_info.length; i++) {
@@ -572,7 +572,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 			MESSAGE_KEYS.EXPRESSION_RETURN_COLUMN);
 
 
-		headers.push({ key: "function", label: functionColumn, width: 73 });
+		headers.push({ key: "function", label: functionColumn, width: 73, resizable: true });
 		headers.push({ key: "return", label: returnColumn, width: 27 });
 		const table = this._buildFunctionTable(this.state.functionCategory);
 

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

@@ -45,7 +45,7 @@
 
 .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-variable,
 .cm-s-custom .cm-punctuation,

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { PasswordInput } from "carbon-components-react";
+import { TextInput } from "carbon-components-react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants.js";
@@ -40,7 +40,7 @@ class PasswordControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<PasswordInput
+				<TextInput.PasswordInput
 					{...validationProps}
 					autoComplete="off"
 					id={this.id}

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

@@ -100,7 +100,8 @@ ReadonlyTableControl.propTypes = {
 	value: PropTypes.array, // pass in by redux
 	messageInfo: PropTypes.object, // pass in by redux
 	addRemoveRows: PropTypes.bool, // set by redux
-	tableButtons: PropTypes.object // set in by redux
+	tableButtons: PropTypes.object, // set in by redux
+	hideEditButton: PropTypes.bool // set by redux
 };
 
 
@@ -110,7 +111,8 @@ const mapStateToProps = (state, ownProps) => ({
 	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId),
 	selectedRows: ownProps.controller.getSelectedRows(ownProps.propertyId),
 	addRemoveRows: ownProps.controller.getAddRemoveRows(ownProps.propertyId),
-	tableButtons: ownProps.controller.getTableButtons(ownProps.propertyId)
+	tableButtons: ownProps.controller.getTableButtons(ownProps.propertyId),
+	hideEditButton: ownProps.controller.getHideEditButton(ownProps.propertyId)
 });
 
 export default connect(mapStateToProps, null)(ReadonlyTableControl);

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

@@ -14,25 +14,6 @@
  * limitations under the License.
  */
 
-// overwrite flexible-table.scss: .flexible-table-container-absolute-noheader tr
 .properties-column-select   {
-	tbody > tr > td {
-		padding: 8px 0;
-	}
-}
-
-.column-select-table-row {
-	font-weight: 500;
-	color: $interactive-01;
-	.row-checkbox {
-		padding-left: 12px;
-	}
-}
-//rebase-part
-.column-select-table-selected-row {
-	background-color: $ui-03;
-}
 
-.properties-column-select .properties-ft-container-wrapper {
-	height: 150px;
 }

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

@@ -34,7 +34,7 @@
 			border: 1px solid $support-03;
 		}
 	}
-	.table .bx--form-item.bx--checkbox-wrapper {
-		margin: 5px 0 5px 5px;
+	.properties-vt-row-checkbox {
+		margin-right: 1rem;
 	}
 }

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

@@ -59,6 +59,9 @@ export class Control {
 		if (typeof settings.filterable === "boolean") {
 			this.filterable = settings.filterable;
 		}
+		if (typeof settings.resizable === "boolean") {
+			this.resizable = settings.resizable;
+		}
 		if (settings.language) {
 			this.language = settings.language;
 		}
@@ -131,6 +134,11 @@ export class Control {
 		if (typeof settings.addRemoveRows === "boolean") {
 			this.addRemoveRows = settings.addRemoveRows;
 		}
+
+		if (typeof settings.hideEditButton === "boolean") {
+			this.hideEditButton = settings.hideEditButton;
+		}
+
 		if (typeof settings.header === "boolean") {
 			this.header = settings.header;
 		}

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

@@ -458,6 +458,9 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 				controlType = ControlType.TIMEFIELD;
 			}
 			break;
+		case Type.TIMESTAMP:
+			controlType = ControlType.TIMESTAMP;
+			break;
 		case Type.STRUCTURE: {
 			const structureDef = isSubControl ? structureMetadata.getStructure(parameter.baseType()) : structureDefinition;
 
@@ -565,6 +568,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.valueIcons = parameter.valueIcons;
 	settings.sortable = parameter.sortable;
 	settings.filterable = parameter.filterable;
+	settings.resizable = parameter.resizable;
 	settings.charLimit = parameter.charLimit;
 	settings.subControls = subControls;
 	settings.keyIndex = keyIndex;

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

@@ -88,6 +88,9 @@ export class ParameterDef {
 		if (toType(settings.filterable) === "boolean") {
 			this.filterable = settings.filterable;
 		}
+		if (toType(settings.resizable) === "boolean") {
+			this.resizable = settings.resizable;
+		}
 		if (settings.editStyle) {
 			this.editStyle = settings.editStyle;
 		}
@@ -329,6 +332,7 @@ export class ParameterDef {
 				"valueIcons": propertyOf(uihint)("value_icons"),
 				"sortable": propertyOf(uihint)("sortable"),
 				"filterable": propertyOf(uihint)("filterable"),
+				"resizable": propertyOf(uihint)("resizable"),
 				"editStyle": propertyOf(uihint)("edit_style"),
 				"required": propertyOf(param)("required"),
 				"numberGenerator": propertyOf(uihint)("number_generator"),

package/src/common-properties/panels/sub-panel/cell.jsx

@@ -17,6 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Button } from "carbon-components-react";
+import { Settings16 } from "@carbon/icons-react";
 import { v4 as uuid4 } from "uuid";
 import { formatMessage } from "./../../util/property-utils";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
@@ -58,7 +59,6 @@ export default class SubPanelCell extends React.Component {
 			MESSAGE_KEYS.SUBPANEL_BUTTON_TOOLTIP);
 		const applyLabel = formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.APPLYBUTTON_LABEL);
 		const rejectLabel = formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.REJECTBUTTON_LABEL);
-		const innerObject = this.props.buttonIcon ? this.props.buttonIcon : this.props.label || "";
 		return (
 
 			<SubPanelInvoker ref={ (ref) => (this.subPanelInvoker = ref) }
@@ -67,26 +67,22 @@ export default class SubPanelCell extends React.Component {
 				rejectLabel={rejectLabel}
 				controller={this.props.controller}
 			>
-				<div>
-					<Tooltip
-						id={uuid4() + "-" + tooltipId}
-						tip={subPanelToolTip}
-						direction="left"
-						className="properties-tooltips icon-tooltip"
-					>
-						<Button
-							className="properties-subpanel-button"
-							type="button"
-							size="small"
-							kind="secondary"
-							onClick={this.showSubPanel}
-							disabled={disabled}
-							aria-label={subPanelToolTip}
-						>
-							{innerObject}
-						</Button>
-					</Tooltip>
-				</div>
+				<Tooltip
+					id={uuid4() + "-" + tooltipId}
+					tip={subPanelToolTip}
+					direction="left"
+					className="properties-tooltips icon-tooltip"
+				>
+					<Button
+						className="properties-subpanel-button"
+						kind="ghost"
+						renderIcon={Settings16}
+						onClick={this.showSubPanel}
+						disabled={disabled}
+						iconDescription={subPanelToolTip}
+						hasIconOnly
+					/>
+				</Tooltip>
 			</SubPanelInvoker>
 		);
 	}
@@ -99,6 +95,5 @@ SubPanelCell.propTypes = {
 	disabled: PropTypes.bool,
 	controller: PropTypes.object.isRequired,
 	propertyId: PropTypes.object,
-	rightFlyout: PropTypes.bool,
-	buttonIcon: PropTypes.object
+	rightFlyout: PropTypes.bool
 };

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

@@ -15,27 +15,10 @@
  */
 
 button.properties-subpanel-button {
-	cursor: pointer;
-	height: 100%;
-	align-items: center;
+	padding: 0; // override carbon
+	min-height: 2rem; // override carbon
+	height: 2rem;
+	width: 2rem;
 	display: flex;
-	border: 0;
-	border-style: none;
-	padding: 0;
-	background: unset;
-	> svg {
-		width: 18px;
-		height: 18px;
-		fill: $interactive-01;
-	}
-	&:hover:not([disabled]) > svg {
-		fill: $hover-primary;
-	}
-	&[disabled] {
-		cursor: default;
-		background: unset;
-	}
-	&:focus, &:hover  {
-		background-color: transparent;
-	}
+	justify-content: center;
 }

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

@@ -1797,6 +1797,24 @@ export default class PropertiesController {
 		return this.propertiesStore.getAddRemoveRows(propertyId);
 	}
 
+	/**
+	* Set the hideEditButton attribute to 'enabled' for the given propertyId
+	* @param propertyId The unique property identifier
+	* @param enabled boolean value to enable or disable hideditButton
+	*/
+	setHideEditButton(propertyId, enabled) {
+		this.propertiesStore.setHideEditButton(propertyId, enabled);
+	}
+
+	/**
+	* Returns the true if hideEditButton is enabled for the given propertyID
+	* @param propertyId The unique property identifier
+	* @return boolean
+	*/
+	getHideEditButton(propertyId) {
+		return this.propertiesStore.getHideEditButton(propertyId);
+	}
+
 	/**
 	 * Freeze row move buttons for row indexes in given array
 	 * @param propertyId The unique property identifier

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

@@ -168,10 +168,6 @@ class PropertiesMain extends React.Component {
 		if (this.props.propertiesConfig.buttonLabels && this.props.propertiesConfig.buttonLabels.primary) {
 			return this.props.propertiesConfig.buttonLabels.primary;
 		}
-		// Update apply button text to `Close` when applyOnBlur
-		if (this.props.propertiesConfig.applyOnBlur && this.props.propertiesConfig.rightFlyout) {
-			return PropertyUtils.formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIESEDIT_CLOSEBUTTON_LABEL);
-		}
 		return PropertyUtils.formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIESEDIT_APPLYBUTTON_LABEL);
 	}
 
@@ -408,9 +404,10 @@ class PropertiesMain extends React.Component {
 	}
 
 	render() {
+		const applyOnBlurEnabled = this.props.propertiesConfig.applyOnBlur && this.props.propertiesConfig.rightFlyout;
 		let cancelHandler = this.cancelHandler.bind(this, CANCEL);
 		// when onBlur cancel shouldn't be rendered.
-		if (this.props.propertiesConfig.applyOnBlur && this.props.propertiesConfig.rightFlyout) {
+		if (applyOnBlurEnabled) {
 			cancelHandler = null;
 		}
 		const applyLabel = this.getApplyButtonLabel();
@@ -430,6 +427,7 @@ class PropertiesMain extends React.Component {
 					help={formData.help}
 					controller={this.propertiesController}
 					helpClickHandler={this.props.callbacks.helpClickHandler}
+					closeHandler={applyOnBlurEnabled ? this.applyPropertiesEditing.bind(this, true) : null}
 					icon={formData.icon}
 					heading={formData.heading}
 					showHeading={this.props.propertiesConfig.heading}
@@ -439,7 +437,7 @@ class PropertiesMain extends React.Component {
 
 				buttonsContainer = (<MainEditorPropertiesButtons
 					controller={this.propertiesController}
-					okHandler={this.applyPropertiesEditing.bind(this, true)}
+					okHandler={!applyOnBlurEnabled ? this.applyPropertiesEditing.bind(this, true) : null}
 					cancelHandler={cancelHandler}
 					applyLabel={applyLabel}
 					rejectLabel={rejectLabel}
@@ -482,9 +480,17 @@ class PropertiesMain extends React.Component {
 					{editorForm}
 				</PropertiesEditor>);
 			} else if (this.props.propertiesConfig.containerType === "Custom") {
-				propertiesDialog = (<div className={classNames("properties-custom-container", { "properties-custom-container-with-heading": hasHeading })}>
-					{editorForm}
-				</div>);
+				propertiesDialog = (
+					<div className={classNames("properties-custom-container",
+						{
+							"properties-custom-container-with-heading": !applyOnBlurEnabled && hasHeading,
+							"properties-custom-container-applyOnBlur": applyOnBlurEnabled && !hasHeading,
+							"properties-custom-container-applyOnBlur-with-heading": applyOnBlurEnabled && hasHeading
+						}
+					)}
+					>
+						{editorForm}
+					</div>);
 			} else { // Modal
 				propertiesDialog = (<PropertiesModal
 					onHide={this.props.callbacks.closePropertiesDialog}

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

@@ -15,6 +15,7 @@
  */
 
 @import "./properties-main-widths.scss";
+$properties-modal-buttons-height: $spacing-10;
 
 .properties-right-flyout {
 	// Set the font explicitly to 14px to shrink them across the entire properties editor
@@ -67,11 +68,17 @@
 
 
 .properties-right-flyout > .properties-custom-container {
-	height: calc(100% - 136px);
+	height: calc(100% - 65px - #{$properties-modal-buttons-height}); // Properties title - 65px
 	overflow-y: auto;
 	transform: translateZ(0); // https://github.com/elyra-ai/canvas/issues/160
 	&.properties-custom-container-with-heading {
-		height: calc(100% - 160px);
+		height: calc(100% - 89px - #{$properties-modal-buttons-height}); // Properties title - 89px
+	}
+	&.properties-custom-container-applyOnBlur {
+		height: calc(100% - #{$spacing-12}); // Properties title - 97px
+	}
+	&.properties-custom-container-applyOnBlur-with-heading {
+		height: calc(100% - 89px); // Properties title - 89px
 	}
 }
 

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

@@ -25,7 +25,7 @@ import { setActionStates, updateActionState } from "./actions";
 import { clearSelectedRows, updateSelectedRows, disableRowMoveButtons } from "./actions";
 import { clearStaticRows, updateStaticRows } from "./actions";
 import { setErrorMessages, updateErrorMessage, clearErrorMessage } from "./actions";
-import { setDatasetMetadata, setSaveButtonDisable, setAddRemoveRows, setTableButtonEnabled } from "./actions";
+import { setDatasetMetadata, setSaveButtonDisable, setAddRemoveRows, setTableButtonEnabled, setHideEditButton } from "./actions";
 import { setTitle, setActiveTab } from "./actions";
 import propertiesReducer from "./reducers/properties";
 import controlStatesReducer from "./reducers/control-states";
@@ -494,6 +494,32 @@ export default class PropertiesStore {
 		}
 		return defaultValue;
 	}
+
+	/**
+	* Set the hideEditButton attribute to 'true' for the given propertyId
+	* @param propertyId The unique property identifier
+	* @param enabled boolean value for disable or enable edit button by state hideEditButton
+	*/
+	setHideEditButton(propertyId, enabled) {
+		this.store.dispatch(setHideEditButton({ propertyId: propertyId, value: enabled }));
+	}
+
+	/**
+	* Returns true if hideEditButton is true for the given propertyID
+	* @param propertyId The unique property identifier
+	* @return boolean
+	*/
+	getHideEditButton(propertyId) {
+		const state = this.store.getState();
+		const defaultValue = false; // Default to false to show disable edit buttons
+		if (state.propertiesSettingsReducer[propertyId.name]) {
+			if (typeof propertyId.row !== "undefined") {
+				return getNestedPropertySetting(propertyId, state.propertiesSettingsReducer[propertyId.name], "hideEditButton", defaultValue);
+			}
+			return state.propertiesSettingsReducer[propertyId.name].hideEditButton;
+		}
+		return defaultValue;
+	}
 }
 
 function getNestedPropertySetting(propertyId, state, setting, defaultValue) {

package/src/common-properties/reducers/properties-settings.js

@@ -15,7 +15,7 @@
  */
 
 import { set } from "lodash";
-import { SET_ADD_REMOVE_ROWS, SET_TABLE_BUTTON_ENABLED } from "../actions";
+import { SET_ADD_REMOVE_ROWS, SET_TABLE_BUTTON_ENABLED, SET_HIDE_EDIT_BUTTON } from "../actions";
 
 /*
 * Stores the state information for all controls.  States are stored as objects with keys being name, row, col.
@@ -56,6 +56,22 @@ function states(state = {}, action) {
 		}
 		return Object.assign({}, state, newState);
 	}
+	case SET_HIDE_EDIT_BUTTON: {
+		if (propertyId === null) {
+			return state;
+		}
+		const newState = state;
+		if (typeof newState[propertyId.name] === "undefined") {
+			newState[propertyId.name] = {};
+		}
+
+		if (typeof propertyId.row !== "undefined") {
+			updateNestedPropertySetting(propertyId, newState[propertyId.name], "hideEditButton", action.info.value);
+		} else {
+			newState[propertyId.name].hideEditButton = action.info.value;
+		}
+		return Object.assign({}, state, newState);
+	}
 	default: {
 		return state;
 	}