@elyra/canvas 12.14.0 → 12.20.0

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

@@ -27,7 +27,7 @@ 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 } from "./../constants/constants";
+import { MESSAGE_KEYS, STATES, TABLE_SUBPANEL_BUTTON_WIDTH, SORT_DIRECTION, ROW_SELECTION, UPDATE_TYPE } from "./../constants/constants";
 
 import { isEqual, findIndex, sortBy, cloneDeep } from "lodash";
 
@@ -85,7 +85,7 @@ export default class AbstractTable extends React.Component {
 	componentDidMount() {
 		if (this.props.control.subControls) {
 			const updatedControlValues = this.setReadOnlyColumnValue();
-			this.props.controller.updatePropertyValue(this.props.propertyId, updatedControlValues, true);
+			this.props.controller.updatePropertyValue(this.props.propertyId, updatedControlValues, true, UPDATE_TYPE.INITIAL_LOAD);
 		}
 	}
 

package/src/common-properties/controls/control-factory.js

@@ -35,6 +35,7 @@ import NumberfieldControl from "./numberfield";
 import DatefieldControl from "./datefield";
 import TimefieldControl from "./timefield";
 import CheckboxControl from "./checkbox";
+import ToggleControl from "./toggle";
 import CheckboxsetControl from "./checkboxset";
 import RadiosetControl from "./radioset";
 import Dropdown from "./dropdown";
@@ -66,6 +67,7 @@ const accessibleControls = [
 	ControlType.TIMEFIELD,
 	ControlType.TOGGLETEXT,
 	ControlType.LIST,
+	ControlType.TOGGLE,
 	ControlType.SOMEOFSELECT,
 	ControlType.SELECTCOLUMNS,
 	ControlType.READONLY,
@@ -183,6 +185,9 @@ export default class ControlFactory {
 		case (ControlType.TEXTAREA):
 			createdControl = (<TextareaControl {...props} />);
 			break;
+		case (ControlType.TOGGLE):
+			createdControl = (<ToggleControl {...props} />);
+			break;
 		case (ControlType.LIST):
 			createdControl = (<ListControl {...props} />);
 			break;

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

@@ -17,6 +17,7 @@
 @import "./readonly/readonly";
 @import "./selectcolumns/selectcolumns";
 @import "./checkbox/checkbox";
+@import "./toggle/toggle";
 @import "./checkboxset/checkboxset";
 @import "./dropdown/dropdown";
 @import "./expression/expression";

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

@@ -24,7 +24,7 @@ import ValidationMessage from "./../../components/validation-message";
 import classNames from "classnames";
 import * as PropertyUtils from "./../../util/property-utils.js";
 import { ControlType } from "./../../constants/form-constants";
-import { MESSAGE_KEYS, STATES } from "./../../constants/constants.js";
+import { MESSAGE_KEYS, STATES, UPDATE_TYPE } from "./../../constants/constants.js";
 import { formatMessage } from "./../../util/property-utils";
 
 class DropDown extends React.Component {
@@ -46,7 +46,7 @@ class DropDown extends React.Component {
 	}
 
 	componentDidMount() {
-		this.updateValueFromFilterEnum(true);
+		this.updateValueFromFilterEnum(true, UPDATE_TYPE.INITIAL_LOAD);
 	}
 
 	componentDidUpdate(prevProps) {
@@ -63,8 +63,10 @@ class DropDown extends React.Component {
 		});
 		selectedOption = typeof selectedOption === "undefined" ? null : selectedOption;
 
+		// Show the existing value but with a warning instead of filtering it out.
+		const showExistingValue = (selectedOption === null && value);
 		// user defined value
-		if (selectedOption === null && this.props.control.customValueAllowed) {
+		if (showExistingValue || this.props.control.customValueAllowed) {
 			selectedOption = {
 				value: value,
 				label: value
@@ -132,7 +134,7 @@ class DropDown extends React.Component {
 		};
 	}
 	// this is needed in order to reset the property value when a value is filtered out.
-	updateValueFromFilterEnum(skipValidateInput) {
+	updateValueFromFilterEnum(skipValidateInput, updateType) {
 		// update property value if value isn't in current enum value.  Should only be used for oneofselect
 		if (this.props.control.controlType === ControlType.ONEOFSELECT && this.props.value !== null && typeof this.props.value !== "undefined" &&
 			!this.props.controlOpts.values.includes(this.props.value)) {
@@ -143,7 +145,7 @@ class DropDown extends React.Component {
 			} else if (this.props.control.customValueAllowed && this.props.value) {
 				defaultValue = this.props.value;
 			}
-			this.props.controller.updatePropertyValue(this.props.propertyId, defaultValue, skipValidateInput);
+			this.props.controller.updatePropertyValue(this.props.propertyId, defaultValue, skipValidateInput, updateType);
 		}
 	}
 

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

@@ -312,7 +312,8 @@ class ExpressionControl extends React.Component {
 			theme: theme + " custom",
 			readOnly: (this.props.state === STATES.DISABLED) ? "nocursor" : false,
 			extraKeys: { "Ctrl-Space": "autocomplete" },
-			autoRefresh: true
+			autoRefresh: true,
+			lineNumbers: true
 		};
 		const applyLabel = formatMessage(reactIntl, MESSAGE_KEYS.APPLYBUTTON_LABEL);
 		const rejectLabel = formatMessage(reactIntl, MESSAGE_KEYS.REJECTBUTTON_LABEL);

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

@@ -16,54 +16,81 @@
 
 @import "./expression-builder/expression-builder";
 
-/* Override so Codemirror autocomplete shows up on top */
-.CodeMirror-hints {
-	z-index: 1110;
-}
+.react-codemirror2 {
+	.CodeMirror {
+		width: 100%;
+		background: $field-02;
+		color: $text-01;
 
-.CodeMirror-placeholder {
-	opacity: 0.5;
-}
+		.CodeMirror-gutters {
+			border-right: none;
+			background-color: inherit;
+		}
 
-.CodeMirror {
-	width: 100%;
-	background: $field-02;
-	color: $text-01;
-}
+		.CodeMirror-lines {
+			padding-top: $spacing-05;
+			.CodeMirror-line-like {
+				padding-left: $spacing-03;
+			}
+			.CodeMirror-placeholder {
+				opacity: 0.5;
+				@include carbon--type-style("code-02");
+			}
+			.CodeMirror-cursor {
+				border-left: 1px solid $text-01;
+			}
+			.CodeMirror-code {
 
-.CodeMirror-cursor {
-	border-left: 1px solid $text-01;
-}
+				.CodeMirror-linenumber {
+					@include carbon--type-style("body-short-01");
+				}
 
-.cm-s-error.CodeMirror { border: $spacing-01 solid $support-01; }
+				.CodeMirror-line {
+					padding-left: $spacing-03;
 
-.cm-s-warning.CodeMirror { border: $spacing-01 solid $support-03; }
+					span {
+						@include carbon--type-style("code-02");
+					}
+				}
+			}
+		}
+	}
 
-.cm-s-disabled.CodeMirror { opacity: 0.5}
+	.cm-s-error.CodeMirror { border: $spacing-01 solid $support-01; }
 
-.cm-s-custom .cm-keyword { color: $link-01; }
+	.cm-s-warning.CodeMirror { border: $spacing-01 solid $support-03; }
 
-.cm-s-custom .cm-number { color: $text-02; }
+	.cm-s-disabled.CodeMirror { opacity: 0.5}
 
-.cm-s-custom .cm-def { color: $support-01; }
+	.cm-s-custom .cm-keyword { color: $link-01; }
 
-.cm-s-custom .cm-comment { color: $support-02; }
+	.cm-s-custom .cm-number { color: $text-02; }
 
-.cm-s-custom .cm-variable,
-.cm-s-custom .cm-punctuation,
-.cm-s-custom .cm-property,
-.cm-s-custom .cm-operator {
-	color: $text-01;
-}
-.cm-s-custom .cm-variable-2 { color: $text-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,
+	.cm-s-custom .cm-property,
+	.cm-s-custom .cm-operator {
+		color: $text-01;
+	}
+	.cm-s-custom .cm-variable-2 { color: $text-01; }
 
-.cm-s-custom .cm-variable-3, .cm-s-custom .cm-type { color: $text-01; }
+	.cm-s-custom .cm-variable-3, .cm-s-custom .cm-type { color: $text-01; }
 
-.cm-s-custom .cm-string { color: $text-error; }
+	.cm-s-custom .cm-string { color: $text-error; }
 
-.cm-s-custom .cm-string-2 { color: $text-error; }
+	.cm-s-custom .cm-string-2 { color: $text-error; }
 
-.cm-s-custom .cm-meta { color: $ui-01; }
+	.cm-s-custom .cm-meta { color: $ui-01; }
+}
+
+/* Override so Codemirror autocomplete shows up on top */
+.CodeMirror-hints {
+	z-index: 1110;
+}
 
 .properties-expression-editor {
 	border: 1px solid $ui-03;

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

@@ -23,7 +23,7 @@ import * as ConditionsUtils from "./../../ui-conditions/conditions-utils.js";
 import ValidationMessage from "./../../components/validation-message";
 import { RadioButton } from "carbon-components-react";
 import classNames from "classnames";
-import { STATES } from "./../../constants/constants.js";
+import { STATES, UPDATE_TYPE } from "./../../constants/constants.js";
 import { ORIENTATIONS } from "./../../constants/form-constants.js";
 import { v4 as uuid4 } from "uuid";
 import { Information16 } from "@carbon/icons-react";
@@ -39,7 +39,7 @@ class RadiosetControl extends React.Component {
 	}
 
 	componentDidMount() {
-		this.updateValueFromFilterEnum(true);
+		this.updateValueFromFilterEnum(true, UPDATE_TYPE.INITIAL_LOAD);
 		const val = this.props.controller.getPropertyValue(this.props.propertyId);
 		this.setEnabledStateOfOptionalPanels(val);
 		if (typeof this.props.value !== "undefined" && this.props.value !== null) {
@@ -92,7 +92,7 @@ class RadiosetControl extends React.Component {
 	}
 
 	// this is needed in order to reset the property value when a value is filtered out.
-	updateValueFromFilterEnum(skipValidateInput) {
+	updateValueFromFilterEnum(skipValidateInput, updateType) {
 		if (this.props.value !== null && typeof this.props.value !== "undefined" &&
 			!this.props.controlOpts.values.includes(this.props.value)) {
 			let defaultValue = null;
@@ -100,7 +100,7 @@ class RadiosetControl extends React.Component {
 			if (this.props.control.valueDef && this.props.control.valueDef.defaultValue && this.props.controlOpts.values.includes(this.props.control.valueDef.defaultValue)) {
 				defaultValue = this.props.control.valueDef.defaultValue;
 			}
-			this.props.controller.updatePropertyValue(this.props.propertyId, defaultValue, skipValidateInput);
+			this.props.controller.updatePropertyValue(this.props.propertyId, defaultValue, skipValidateInput, updateType);
 		}
 	}
 
@@ -202,16 +202,18 @@ class RadiosetControl extends React.Component {
 			};
 			buttons.push(
 				<div key={i} className="properties-radioset-panel">
-					<RadioButton
-						key={i}
-						id={ControlUtils.getControlId(id, this.uuid)}
-						disabled={disabled || itemDisabled}
-						labelText={valueSet.valueLabels[i]}
-						value={val}
-						onChange={this.handleChange}
-						checked={checked}
-					/>
-					{tooltipIcon}
+					<div className="properties-radioset-tooltip">
+						<RadioButton
+							key={i}
+							id={ControlUtils.getControlId(id, this.uuid)}
+							disabled={disabled || itemDisabled}
+							labelText={valueSet.valueLabels[i]}
+							value={val}
+							onChange={this.handleChange}
+							checked={checked}
+						/>
+						{tooltipIcon}
+					</div>
 					{optionalPanel}
 				</div>
 			);

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

@@ -23,6 +23,7 @@
 	}
 }
 
+
 .properties-radio-button-group {
 	display: block;
 	&.horizontal {
@@ -38,28 +39,29 @@
 	.properties-radioset-panel {
 		margin-bottom: $spacing-02;
 		margin-right: $spacing-04;
-		display: grid;
-		grid-template-columns: 1fr 8fr;
-		grid-template-rows: auto;
-		grid-template-areas:
-			"radio tooltip"
-			"panel panel";
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		flex-wrap: wrap;
+		overflow: hidden;
 		.bx--radio-button-wrapper{
-			grid-area: radio;
 			margin-right: 0; // We removed the space between radio & tooltip to position it correctly
 		}
-		.tooltip-container{
-			grid-area: tooltip;
+		.properties-radioset-tooltip {
+			display: flex;
+			align-items: center;
+			margin: 2.5px 0 1.5px 1.5px;
 		}
 		.properties-control-nested-panel{
-			grid-area: panel;
+			flex-basis: 100%;
+			width: 100%;
 		}
 		&:last-of-type {
 			margin-bottom: 0; // don't want margin when last radio button in group
 		}
-
 		.bx--radio-button-wrapper > label {
 			justify-content: left; // override carbon style to center justify radio-button labels
+			align-items: center;
 		}
 	}
 	&.error:not([disabled]) {

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

@@ -23,7 +23,7 @@ import ValidationMessage from "./../../components/validation-message";
 import classNames from "classnames";
 import { isEqual, intersection } from "lodash";
 
-import { STATES } from "../../constants/constants";
+import { STATES, UPDATE_TYPE } from "../../constants/constants";
 
 class SomeofselectControl extends React.Component {
 	constructor(props) {
@@ -34,7 +34,7 @@ class SomeofselectControl extends React.Component {
 	}
 
 	componentDidMount() {
-		this.updateValueFromFilterEnum(true);
+		this.updateValueFromFilterEnum(true, UPDATE_TYPE.INITIAL_LOAD);
 	}
 
 	componentDidUpdate(prevProps) {
@@ -45,10 +45,10 @@ class SomeofselectControl extends React.Component {
 	}
 
 	// this is needed in order to reset the property value when a value is filtered out.
-	updateValueFromFilterEnum(skipValidateInput) {
+	updateValueFromFilterEnum(skipValidateInput, updateType) {
 		const newValues = intersection(this.props.value, this.props.controlOpts.values);
 		if (!isEqual(newValues, this.props.value)) {
-			this.props.controller.updatePropertyValue(this.props.propertyId, newValues, skipValidateInput);
+			this.props.controller.updatePropertyValue(this.props.propertyId, newValues, skipValidateInput, updateType);
 		}
 	}
 

package/src/common-properties/controls/toggle/index.jsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2017-2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ToggleControl from "./toggle.jsx";
+export default ToggleControl;

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

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2017-2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Toggle } from "carbon-components-react";
+import ValidationMessage from "./../../components/validation-message";
+import * as ControlUtils from "./../../util/control-utils";
+import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
+import classNames from "classnames";
+import { formatMessage } from "./../../util/property-utils";
+
+
+class ToggleControl extends React.Component {
+	constructor(props) {
+		super(props);
+		this.id = ControlUtils.getControlId(this.props.propertyId);
+	}
+
+
+	handleChange(value) {
+		this.props.controller.updatePropertyValue(this.props.propertyId, value);
+	}
+
+	render() {
+		const overrideLabelKeyOn = `${this.props.control.name}.toggle.on.label`;
+		const overrideLabelKeyOff = `${this.props.control.name}.toggle.off.label`;
+
+		const defaultOnEditLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.TOGGLE_ON_LABEL);
+		const defaultOffEditLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.TOGGLE_OFF_LABEL);
+
+		const labelOn = this.props.controller.getResource(overrideLabelKeyOn, defaultOnEditLabel);
+		const labelOff = this.props.controller.getResource(overrideLabelKeyOff, defaultOffEditLabel);
+		const size = this.props.tableControl ? "sm" : "md";
+		const toggleControl = (<Toggle
+			id={this.id}
+			size={size}
+			disabled={this.props.state === STATES.DISABLED}
+			toggled={Boolean(this.props.value)}
+			labelB={labelOn}
+			labelA={labelOff}
+			onToggle={this.handleChange.bind(this)}
+			labelText={this.props.controlItem}
+		/>);
+
+
+		const className = classNames("properties-toggle", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null);
+		return (
+			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
+				{toggleControl}
+				<ValidationMessage inTable={this.props.tableControl} state={this.props.state} messageInfo={this.props.messageInfo} />
+			</div>
+
+		);
+	}
+}
+
+ToggleControl.propTypes = {
+	control: PropTypes.object.isRequired,
+	propertyId: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	controlItem: PropTypes.element,
+	tableControl: PropTypes.bool,
+	state: PropTypes.string, // pass in by redux
+	value: PropTypes.bool, // pass in by redux
+	messageInfo: PropTypes.object // pass in by redux
+};
+
+const mapStateToProps = (state, ownProps) => ({
+	value: ownProps.controller.getPropertyValue(ownProps.propertyId),
+	state: ownProps.controller.getControlState(ownProps.propertyId),
+	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId)
+});
+
+export default connect(mapStateToProps, null)(ToggleControl);

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2017-2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.properties-table-cell-control { // overrides when in a table cell
+	.properties-toggle {
+		.bx--toggle__switch { // override carbon when inside a table
+			margin: $spacing-02 0;
+		}
+	}
+}

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

@@ -299,6 +299,7 @@ class SummaryPanel extends React.Component {
 			rejectLabel={rejectLabel}
 			title={this.props.panel.label}
 			light={this.props.controller.getLight()}
+			okButtonEnabled={this.props.okButtonEnabled}
 		>
 			<div>
 				{this.props.children}
@@ -326,11 +327,13 @@ SummaryPanel.propTypes = {
 	controller: PropTypes.object.isRequired,
 	children: PropTypes.array,
 	panel: PropTypes.object.isRequired,
-	panelState: PropTypes.string // set by redux
+	panelState: PropTypes.string, // set by redux
+	okButtonEnabled: PropTypes.bool // set by redux
 };
 
 const mapStateToProps = (state, ownProps) => ({
-	panelState: ownProps.controller.getPanelState({ name: ownProps.panel.id })
+	panelState: ownProps.controller.getPanelState({ name: ownProps.panel.id }),
+	okButtonEnabled: !ownProps.controller.getWideFlyoutPrimaryButtonDisabled({ name: ownProps.panel.id })
 });
 
 export default connect(mapStateToProps, null)(SummaryPanel);

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

@@ -24,7 +24,7 @@ import { parseUiContent } from "./ui-conditions/ui-groups-parser.js";
 import * as conditionsUtil from "./ui-conditions/conditions-utils";
 import * as PropertyUtils from "./util/property-utils.js";
 
-import { STATES, ACTIONS, CONDITION_TYPE, PANEL_TREE_ROOT, CONDITION_MESSAGE_TYPE } from "./constants/constants.js";
+import { STATES, ACTIONS, CONDITION_TYPE, PANEL_TREE_ROOT, CONDITION_MESSAGE_TYPE, UPDATE_TYPE } from "./constants/constants.js";
 import CommandStack from "../command-stack/command-stack.js";
 import ControlFactory from "./controls/control-factory";
 import { Type, ParamRole, ControlType } from "./constants/form-constants";
@@ -382,11 +382,11 @@ export default class PropertiesController {
 			if (resolveParameterRefs) {
 				if (typeof controlValue !== "undefined" && controlValue !== null && typeof controlValue.parameterRef !== "undefined") {
 					controlValue = this.getPropertyValue({ name: controlValue.parameterRef });
-					this.updatePropertyValue(propertyId, controlValue, true);
+					this.updatePropertyValue(propertyId, controlValue, true, UPDATE_TYPE.INITIAL_LOAD);
 				}
 			} else if (control.controlType === "structuretable" && control.addRemoveRows === false && control.includeAllFields === true) {
 				controlValue = this._populateFieldData(controlValue, control);
-				this.updatePropertyValue(propertyId, controlValue, true);
+				this.updatePropertyValue(propertyId, controlValue, true, UPDATE_TYPE.INITIAL_LOAD);
 			} else if (typeof control.valueDef !== "undefined" && typeof control.valueDef.defaultValue !== "undefined" &&
 				(typeof controlValue === "undefined")) {
 				controlValue = control.valueDef.defaultValue;
@@ -396,11 +396,11 @@ export default class PropertiesController {
 					controlValue = PropertyUtils.convertObjectStructureToArray(control.valueDef.isList, control.subControls, controlValue);
 				}
 
-				this.updatePropertyValue(propertyId, controlValue, true);
+				this.updatePropertyValue(propertyId, controlValue, true, UPDATE_TYPE.INITIAL_LOAD);
 			} else if (control.controlType === "structureeditor") {
 				if (!controlValue || (Array.isArray(controlValue) && controlValue.length === 0)) {
 					if (Array.isArray(control.defaultRow)) {
-						this.updatePropertyValue(propertyId, control.defaultRow, true);
+						this.updatePropertyValue(propertyId, control.defaultRow, true, UPDATE_TYPE.INITIAL_LOAD);
 					}
 				}
 			}
@@ -1019,7 +1019,7 @@ export default class PropertiesController {
 	/*
 	* Property Values Methods
 	*/
-	updatePropertyValue(inPropertyId, value, skipValidateInput) {
+	updatePropertyValue(inPropertyId, value, skipValidateInput, type) {
 		const propertyId = this.convertPropertyId(inPropertyId);
 		const initialValue = this.getPropertyValue(propertyId);
 		if (typeof value === "undefined") {
@@ -1038,13 +1038,15 @@ export default class PropertiesController {
 
 		if (this.handlers.propertyListener) {
 			const convertedValue = this._convertObjectStructure(propertyId, value);
-			this.handlers.propertyListener(
-				{
-					action: ACTIONS.UPDATE_PROPERTY,
-					property: propertyId,
-					value: convertedValue
-				}
-			);
+			const data = {
+				action: ACTIONS.UPDATE_PROPERTY,
+				property: propertyId,
+				value: convertedValue
+			};
+			if (typeof type !== "undefined") {
+				data.type = type;
+			}
+			this.handlers.propertyListener(data);
 		}
 	}
 
@@ -1628,6 +1630,22 @@ export default class PropertiesController {
 		return this.propertiesStore.getSaveButtonDisable();
 	}
 
+	/**
+	* Enable/disable OK button for given summary panel
+	* @param panelId {name: panel.id}
+	* @param wideFlyoutPrimaryButtonDisable boolean
+	*/
+	setWideFlyoutPrimaryButtonDisabled(panelId, wideFlyoutPrimaryButtonDisable) {
+		this.propertiesStore.setWideFlyoutPrimaryButtonDisabled(panelId, wideFlyoutPrimaryButtonDisable);
+	}
+
+	/**
+	* @param panelId {name: panel.id}
+	*/
+	getWideFlyoutPrimaryButtonDisabled(panelId) {
+		return this.propertiesStore.getWideFlyoutPrimaryButtonDisabled(panelId);
+	}
+
 	isRequired(propertyId) {
 		const control = this.getControl(propertyId);
 		if (control) {

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

@@ -69,6 +69,7 @@ class PropertiesMain extends React.Component {
 		this.setForm(props.propertiesInfo);
 		this.previousErrorMessages = {};
 		// this has to be after setForm because setForm clears all error messages.
+		// Validate all validationDefinitions but show warning messages for "colDoesExists" condition only
 		this.propertiesController.validatePropertiesValues(false);
 		if (props.propertiesInfo.messages) {
 			this.propertiesController.validatePropertiesValues(true);