@elyra/canvas 12.21.0 → 12.23.0

package/src/common-properties/panels/tearsheet/tearsheet.scss

@@ -1,5 +1,11 @@
 .properties-tearsheet-panel.bx--modal {
 	align-items: flex-end;
+	&.is-visible {
+		.bx--modal-container {
+			transform: translate3d(0, 0, 0);
+			transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
+		}
+	}
 	.bx--modal-container {
 		max-height: calc(100% - 88px);
 		height: 100%;
@@ -22,7 +28,7 @@
 			padding: $spacing-06 $spacing-07;
 			background-color: $ui-background;
 			margin-bottom: 0;
-			.react-codemirror2, .react-codemirror2 .CodeMirror {
+			.bx--multi-select, .bx--dropdown, .bx--number input[type=number], .bx--text-input, .bx--text-area {	// override carbon's modal
 				background-color: $ui-01;
 			}
 		}	

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

@@ -31,7 +31,7 @@ import { Type, ParamRole, ControlType } from "./constants/form-constants";
 import { has, cloneDeep, assign, isEmpty, isEqual, isUndefined, get } from "lodash";
 import Form from "./form/Form";
 import { getConditionOps } from "./ui-conditions/condition-ops/condition-ops";
-
+import { ItemType } from "./constants/form-constants";
 export default class PropertiesController {
 
 	constructor() {
@@ -180,7 +180,11 @@ export default class PropertiesController {
 			this.uiItems = this.form.uiItems; // set last so properties dialog doesn't render too early
 			// set initial tab to first tab
 			if (!isEmpty(this.uiItems) && !isEmpty(this.uiItems[0].tabs)) {
-				this.propertiesStore.setActiveTab(this.uiItems[0].tabs[0].group);
+				// active tab is the first non-tearsheet
+				const filteredTearsheets = this.uiItems[0].tabs.filter((tab) => tab.content.itemType !== ItemType.TEARSHEET);
+				if (filteredTearsheets.length) {
+					this.propertiesStore.setActiveTab(filteredTearsheets[0].group);
+				}
 			}
 
 			// set title

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

@@ -144,6 +144,7 @@ function parseUiItem(controls, actions, uiItem, panelId, parentCategoryId) {
 	}
 	case ItemType.ADDITIONAL_LINK:
 	case ItemType.CHECKBOX_SELECTOR:
+	case ItemType.TEARSHEET:
 	case ItemType.PANEL: {
 		if (uiItem.panel && uiItem.panel.uiItems) {
 			let locPanelId = panelId;

package/src/common-properties/ui-conditions/ui-groups-parser.js

@@ -44,6 +44,7 @@ function parseUiItem(panelTree, uiItem, currentPanel) {
 	case ItemType.PANEL:
 	case ItemType.CUSTOM_PANEL:
 	case ItemType.ADDITIONAL_LINK:
+	case ItemType.TEARSHEET:
 	case ItemType.CHECKBOX_SELECTOR: {
 		if (uiItem.panel && uiItem.panel.id) {
 			panelTree[currentPanel].panels.push(uiItem.panel.id);

package/src/common-properties/util/property-utils.js

@@ -54,6 +54,9 @@ function formatMessage(intl, key, substituteObj) {
 	const defaultMessages = { ...defaultMessages1, ...defaultMessages2 };
 	let formattedMessage;
 	if (typeof intl !== "undefined" && intl !== null) {
+		if (intl.messages[key] === "") {
+			return ""; // Allow empty strings
+		}
 		formattedMessage = intl.formatMessage({ id: key, defaultMessage: defaultMessages[key] }, substituteObj);
 	} else {
 		formattedMessage = defaultMessages[key];

package/src/context-menu/common-context-menu.jsx

@@ -92,6 +92,13 @@ class CommonContextMenu extends React.Component {
 			menuPos.x -= menuSize.width;
 		}
 
+		// Add a pixel to x and y because on Chrome without this the context menu
+		// appears with  the top corner of the first menu item under the mouse
+		// cursor. This highlights the first menu item (which looks weird) and, if
+		// the first item is a cascade menu, automatically opens the sub-menu.
+		menuPos.x += 1;
+		menuPos.y += 1;
+
 		return menuPos;
 	}
 

package/src/context-menu/context-menu-wrapper.jsx

@@ -18,8 +18,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import CommonContextMenu from "./common-context-menu.jsx";
 
-const CONTEXT_MENU_BUTTON = 2;
-
 export default class ContextMenuWrapper extends React.Component {
 	constructor(props) {
 		super(props);
@@ -57,23 +55,19 @@ export default class ContextMenuWrapper extends React.Component {
 	}
 
 	handleClickOutside(e) {
-		// On Firefox, the context menu gesture emits both a 'context menu' event
-		// and a 'click' event. If the click is processed it causes the
-		// context menu to disappear imediately after it has displayed.
-		// Consequently, when this method is called with the context menu button set
-		// (which indicates one of the additional clicks from Firefox) we just
-		// stop propogation and return. On other browsers we don't get this extra
-		// events.
-		// Also, on Safari, when a user is displaying the context menu with a ctrl-click,
-		// the click is received with a ctrlKey field enabled. So we also ignore that.
-		if (e.button === CONTEXT_MENU_BUTTON || e.ctrlKey) {
+		// On Safari, when a user is displaying the context menu with a ctrl-click
+		// (which is a supported context menu gesture on the Mac) a secondary click
+		// event is emmitted which is received here with the ctrlKey field enabled.
+		// So we ignore that event otherwse, if we continue, the context menu will
+		// be closed.
+		if (e.ctrlKey) {
 			e.stopPropagation();
 			return;
 		}
 
-		// If the click was anywhere outside the context menu we just close the menu.
-		const domNode = document.getElementById("context-menu-popover");
-		if (domNode && !domNode.contains(e.target)) {
+		// If the click was anywhere outside the context menu and
+		// the ellipsis button we just close the menu.
+		if (!this.isOverContextMenu(e) && !this.isOverEllipsisButton(e)) {
 			// This stop propagation is needed in common canvas so that selected nodes will
 			// remain selected even after clicking outside the context menu to close the menu.
 			if (this.props.stopPropagation) {
@@ -83,6 +77,27 @@ export default class ContextMenuWrapper extends React.Component {
 		}
 	}
 
+	// Retruns true if the event occurred over the context menu.
+	isOverContextMenu(e) {
+		const domNode = document.getElementById("context-menu-popover");
+		return !domNode || domNode.contains(e.target);
+	}
+
+	// Returns true if the event occurred over the ellipsis button. Typically
+	// there will be only one ellipsis button on the canvas, since they are only
+	// displayed on hover, but in some test cicumstances there might be more
+	// than one.
+	isOverEllipsisButton(e) {
+		const ellipsisNodes = document.getElementsByClassName("d3-node-ellipsis-group");
+		let state = false;
+		for (let i = 0; i < ellipsisNodes.length; i++) {
+			if (state === false && ellipsisNodes[i].contains(e.target)) {
+				state = true;
+			}
+		}
+		return state;
+	}
+
 	contextMenuClicked(action, param) {
 		this.props.contextMenuActionHandler(action, param);
 	}

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

@@ -716,7 +716,10 @@ export default class APIPipeline {
 	}
 
 	setNodeProperties(nodeId, properties) {
-		this.store.dispatch({ type: "SET_NODE_PROPERTIES", data: { nodeId: nodeId, properties: properties }, pipelineId: this.pipelineId });
+		let newNode = cloneDeep(this.getNode(nodeId));
+		newNode = Object.assign(newNode, properties);
+		newNode = this.objectModel.setNodeAttributes(newNode);
+		this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
 	}
 
 	setNodeMessage(nodeId, message) {
@@ -736,17 +739,11 @@ export default class APIPipeline {
 	}
 
 	setNodeInputPorts(nodeId, inputs) {
-		const node = this.getNode(nodeId);
-		node.inputs = inputs;
-		const newNode = this.objectModel.setNodeAttributes(node);
-		this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
+		this.setNodeProperties(nodeId, { inputs });
 	}
 
 	setNodeOutputPorts(nodeId, outputs) {
-		const node = this.getNode(nodeId);
-		node.outputs = outputs;
-		const newNode = this.objectModel.setNodeAttributes(node);
-		this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
+		this.setNodeProperties(nodeId, { outputs });
 	}
 
 	addCustomAttrToNodes(nodeIds, attrName, attrValue) {

package/src/object-model/layout-dimensions.js

@@ -57,7 +57,7 @@ const portsHorizontalDefaultLayout = {
 		labelSingleLine: true, // false allow multi-line labels
 		labelOutline: false,
 		labelMaxCharacters: null, // null allows unlimited characters
-		labelAllowReturnKey: false, // true allows line feed to be inserted into label
+		labelAllowReturnKey: false, // true allows line feed to be inserted into label, "save" to make the return key save the label.
 
 		// An array of decorations to be applied to the node. For details see:
 		// https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
@@ -448,7 +448,7 @@ const portsVerticalDefaultLayout = {
 		labelSingleLine: true, // false allow multi-line labels
 		labelOutline: false,
 		labelMaxCharacters: null, // null allows unlimited characters
-		labelAllowReturnKey: false, // true allows line feed to be inserted into label
+		labelAllowReturnKey: false, // true allows line feed to be inserted into label, "save" to make the return key save the label.
 
 		// An array of decorations to be applied to the node. For details see:
 		// https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification

package/src/object-model/pipeline-out-handler.js

@@ -365,7 +365,7 @@ export default class PipelineOutHandler {
 		canvasInfoLinks.forEach((link) => {
 			if (link.type === "commentLink" &&
 					link.srcNodeId === commentId) {
-				const newLink = { node_ref: link.trgNodeId };
+				const newLink = { id: link.id, node_ref: link.trgNodeId };
 				if (link.class_name) {
 					newLink.class_name = link.class_name;
 				}

package/src/object-model/redux/reducers/canvasinfo.js

@@ -155,7 +155,6 @@ export default (state = {}, action) => {
 	case "REPLACE_NODES":
 	case "REPLACE_NODE":
 	case "SIZE_AND_POSITION_OBJECTS":
-	case "SET_NODE_PROPERTIES":
 	case "SET_NODE_PARAMETERS":
 	case "SET_NODE_UI_PARAMETERS":
 	case "SET_NODE_MESSAGE":

package/src/object-model/redux/reducers/nodes.js

@@ -123,15 +123,6 @@ export default (state = [], action) => {
 			return !nodeFound;
 		});
 
-	case "SET_NODE_PROPERTIES":
-		return state.map((node, index) => {
-			if (action.data.nodeId === node.id) {
-				const newNode = Object.assign({}, node, action.data.properties);
-				return newNode;
-			}
-			return node;
-		});
-
 	case "SET_NODE_PARAMETERS":
 		return state.map((node, index) => {
 			if (action.data.nodeId === node.id) {

package/src/palette/palette.scss

@@ -182,7 +182,7 @@ $palette-search-container-height: 41px;
 }
 
 .palette-flyout-categories {
-	height: calc(100% - $palette-search-container-height);
+	height: calc(100% - #{$palette-search-container-height});
 	width: 100%;
 	position: absolute;
 	overflow-x: hidden;