@elyra/canvas 12.16.0 → 12.21.0

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);
 		}
 	}
 
@@ -1300,6 +1302,15 @@ export default class PropertiesController {
 	getPanelStates() {
 		return this.propertiesStore.getPanelStates();
 	}
+	clearActiveTearsheet() {
+		this.propertiesStore.setActiveTearsheetId(null);
+	}
+	setActiveTearsheet(tearsheetId) {
+		this.propertiesStore.setActiveTearsheetId(tearsheetId);
+	}
+	getActiveTearsheet() {
+		return this.propertiesStore.getActiveTearsheetId() || null;
+	}
 
 
 	/**
@@ -1628,6 +1639,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);

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

@@ -16,7 +16,7 @@
 
 import { createStore, combineReducers } from "redux";
 import { has, get, isEqual, cloneDeep } from "lodash";
-
+import { setTearsheetState } from "./actions";
 import { setPropertyValues, updatePropertyValue, removePropertyValue } from "./actions";
 import { setControlStates, updateControlState } from "./actions";
 import { setPanelStates, updatePanelState } from "./actions";
@@ -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, setHideEditButton } from "./actions";
+import { setDatasetMetadata, setSaveButtonDisable, setWideFlyoutPrimaryButtonDisabled, setAddRemoveRows, setTableButtonEnabled, setHideEditButton } from "./actions";
 import { setTitle, setActiveTab } from "./actions";
 import propertiesReducer from "./reducers/properties";
 import controlStatesReducer from "./reducers/control-states";
@@ -38,7 +38,9 @@ import rowFreezeReducer from "./reducers/row-static";
 import componentMetadataReducer from "./reducers/component-metadata";
 import disableRowMoveButtonsReducer from "./reducers/disable-row-move-buttons";
 import saveButtonDisableReducer from "./reducers/save-button-disable";
+import wideFlyoutPrimaryButtonDisableReducer from "./reducers/wide-flyout-primary-button-disable";
 import propertiesSettingsReducer from "./reducers/properties-settings";
+import tearsheetStatesReducer from "./reducers/tearsheet-states";
 import * as PropertyUtils from "./util/property-utils.js";
 import { CONDITION_MESSAGE_TYPE, MESSAGE_KEYS } from "./constants/constants.js";
 
@@ -48,7 +50,8 @@ export default class PropertiesStore {
 	constructor() {
 		this.combinedReducer = combineReducers({ propertiesReducer, controlStatesReducer, panelStatesReducer,
 			errorMessagesReducer, datasetMetadataReducer, rowSelectionsReducer, componentMetadataReducer,
-			disableRowMoveButtonsReducer, actionStatesReducer, saveButtonDisableReducer, propertiesSettingsReducer, rowFreezeReducer });
+			disableRowMoveButtonsReducer, actionStatesReducer, wideFlyoutPrimaryButtonDisableReducer, tearsheetStatesReducer,
+			saveButtonDisableReducer, propertiesSettingsReducer, rowFreezeReducer });
 		let enableDevTools = false;
 		if (typeof window !== "undefined") {
 			enableDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
@@ -219,6 +222,22 @@ export default class PropertiesStore {
 		return state.saveButtonDisableReducer.disable;
 	}
 
+	setWideFlyoutPrimaryButtonDisabled(panelId, disableState) {
+		this.store.dispatch(setWideFlyoutPrimaryButtonDisabled({ panelId: panelId, disableState: disableState }));
+	}
+
+	getWideFlyoutPrimaryButtonDisabled(panelId) {
+		if (typeof panelId === "undefined") {
+			return null;
+		}
+		const state = this.store.getState();
+		const disablePrimaryButtonForPanel = state.wideFlyoutPrimaryButtonDisableReducer[panelId.name];
+		if (typeof disablePrimaryButtonForPanel !== "undefined") {
+			return disablePrimaryButtonForPanel;
+		}
+		return null;
+	}
+
 	/*
 	* Retrieves filtered enumeration values for the given propertyId.
 	*/
@@ -520,6 +539,19 @@ export default class PropertiesStore {
 		}
 		return defaultValue;
 	}
+
+	setActiveTearsheetId(tearsheetId) {
+		this.store.dispatch(setTearsheetState({ tearsheetId: tearsheetId }));
+	}
+
+	getActiveTearsheetId() {
+		const state = this.store.getState();
+		const tearsheetId = state.tearsheetStatesReducer.tearsheetId;
+		if (typeof tearsheetId !== "undefined") {
+			return tearsheetId;
+		}
+		return null;
+	}
 }
 
 function getNestedPropertySetting(propertyId, state, setting, defaultValue) {

package/src/common-properties/reducers/tearsheet-states.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 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 { SET_ACTIVE_TEARSHEET } from "../actions";
+
+function states(state = [], action) {
+	switch (action.type) {
+	case SET_ACTIVE_TEARSHEET: {
+		return Object.assign({}, state, action.tearsheetId);
+	}
+	default:
+		return state;
+	}
+}
+
+export default states;

package/src/common-properties/reducers/wide-flyout-primary-button-disable.jsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { SET_WIDE_FLYOUT_PRIMARY_BUTTON_DISABLED } from "../actions";
+
+function setWideFlyoutPrimaryButtonDisabled(state = [], action) {
+	switch (action.type) {
+	case SET_WIDE_FLYOUT_PRIMARY_BUTTON_DISABLED: {
+		const newState = state;
+		newState[action.info.panelId.name] = action.info.disableState;
+		return Object.assign({}, state, newState);
+	}
+	default:
+		return state;
+	}
+}
+
+export default setWideFlyoutPrimaryButtonDisabled;

package/src/common-properties/ui-conditions/condition-ops/colDoesExists.js

@@ -16,6 +16,7 @@
 
 import logger from "./../../../../utils/logger";
 import { fieldValueMatchesProto } from "./../../util/property-utils.js";
+import { isEmpty } from "lodash";
 
 function op() {
 	return "colDoesExists";
@@ -51,9 +52,14 @@ function evaluate(paramInfo, param2Info, value, controller) {
 
 // Return the field if found in dataset, else undefined
 function valueInDataset(dataset, field) {
-	return dataset.find(function(dataModelField) {
-		return fieldValueMatchesProto(field, dataModelField);
-	});
+	// Don't validate empty, null or undefined value
+	return (
+		(typeof field === "undefined" || field === null || isEmpty(field))
+			? true
+			: dataset.find(function(dataModelField) {
+				return fieldValueMatchesProto(field, dataModelField);
+			})
+	);
 }
 
 

package/src/common-properties/ui-conditions/conditions-utils.js

@@ -80,6 +80,7 @@ function validatePropertiesConditions(controller) {
 *
 * @param {object} properties controller. required
 * @param {object} list of control objects or properties. required
+* @param {boolean} showErrors. optional. Set to false to run conditions without displaying errors in the UI
 */
 function validatePropertiesListValues(controller, controls, showErrors) {
 	if (Object.keys(controls).length > 0) {
@@ -697,7 +698,8 @@ function _validateInput(propertyId, controller, control, showErrors) {
 
 				// Determine if this condition is for required parameters
 				errorMessage.required = requiredDefinitionsIds.indexOf(validation.definition.validation.id) > -1;
-				if (!showErrors) {
+				// Only show warning messages for "colDoesExists" condition
+				if (!showErrors && !validation.alwaysShow) {
 					errorMessage.displayError = false;
 				}
 
@@ -1127,6 +1129,7 @@ function _injectInvalidFieldDefinition(control, valDefinitions, keyName, control
 	const label = (control.label && control.label.text) ? control.label.text : keyName;
 	const errorMsg = formatMessage(intl,
 		MESSAGE_KEYS.INVALID_FIELD_ERROR, { label: label });
+	// Note: Please don't update "validField_" in validation id. It is used as identifier in another condition.
 	const injectedDefinition = {
 		params: keyName,
 		definition: {
@@ -1140,23 +1143,14 @@ function _injectInvalidFieldDefinition(control, valDefinitions, keyName, control
 					focus_parameter_ref: keyName
 				},
 				evaluate: {
-					or: [
-						{
-							condition: {
-								parameter_ref: keyName,
-								op: "colDoesExists"
-							}
-						},
-						{
-							condition: {
-								parameter_ref: keyName,
-								op: "isEmpty"
-							}
-						}
-					]
+					condition: {
+						parameter_ref: keyName,
+						op: "colDoesExists"
+					}
 				}
 			}
-		}
+		},
+		alwaysShow: true
 	};
 		// add the new definition to the set of validation definitions for this control.
 	if (valDefinitions.controls[keyName]) {

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

@@ -30,6 +30,7 @@ import { cloneDeep, get, has, set } from "lodash";
 import { ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK, VERTICAL,
 	DAGRE_HORIZONTAL, DAGRE_VERTICAL,
 	CREATE_NODE, CREATE_COMMENT, CREATE_NODE_LINK, CREATE_COMMENT_LINK,
+	SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
 	BINDING, SUPER_NODE }
 	from "../common-canvas/constants/canvas-constants.js";
 
@@ -1017,12 +1018,18 @@ export default class APIPipeline {
 	// Returns a position for a new comment added by clicking the 'add comment'
 	// button on the toolbar. It searches for a position that is not already
 	// occupied by an existing comment.
-	getNewCommentPosition(svgPos) {
-		const pos = { x_pos: svgPos.x_pos, y_pos: svgPos.y_pos };
+	getAdjustedCommentPosition(comPos) {
+		const stgType = this.objectModel.getCanvasConfig().enableSnapToGridType;
+		const pos = { x_pos: comPos.x, y_pos: comPos.y };
 
 		while (this.exactlyOverlaps(null, [pos], null)) {
-			pos.x_pos += 10;
-			pos.y_pos += 10;
+			if (stgType === SNAP_TO_GRID_DURING || stgType === SNAP_TO_GRID_AFTER) {
+				pos.x_pos += this.objectModel.getCanvasLayout().snapToGridXPx;
+				pos.y_pos += this.objectModel.getCanvasLayout().snapToGridYPx;
+			} else {
+				pos.x_pos += 10;
+				pos.y_pos += 10;
+			}
 		}
 
 		return pos;

package/src/palette/palette-content-list-item.jsx

@@ -250,7 +250,9 @@ class PaletteContentListItem extends React.Component {
 		let icon = null;
 
 		if (has(this.props.nodeTypeInfo.nodeType, "app_data.ui_data.image")) {
-			let image = this.props.nodeTypeInfo.nodeType.app_data.ui_data.image;
+			let image = this.props.nodeTypeInfo.nodeType.app_data.ui_data.palette_image
+				? this.props.nodeTypeInfo.nodeType.app_data.ui_data.palette_image
+				: this.props.nodeTypeInfo.nodeType.app_data.ui_data.image;
 
 			if (image === USE_DEFAULT_ICON) {
 				image = SUPERNODE_ICON;