@elyra/canvas 12.28.2 → 12.30.0

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

@@ -16,11 +16,12 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import { injectIntl } from "react-intl";
 import classNames from "classnames";
-
+import { formatMessage } from "./../../util/property-utils";
 import { ComposedModal, ModalHeader, ModalBody } from "carbon-components-react";
 import { Portal } from "react-portal";
-
+import { MESSAGE_KEYS } from "./../../constants/constants";
 import PropertiesButtons from "../../components/properties-buttons";
 
 class TearSheet extends Component {
@@ -47,19 +48,22 @@ class TearSheet extends Component {
 					className={classNames("properties-tearsheet-panel", { "properties-tearsheet-stacked": this.props.stacked })}
 					open={this.props.open}
 					size="lg"
-					aria-label={title}
+					aria-label={formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIES_LABEL, { label: title })}
 					preventCloseOnClickOutside
 				>
-					<ModalHeader
-						className={classNames("properties-tearsheet-header",
-							{ "with-buttons": displayFooterButtons },
-							{ "with-tabs": displayTabs },
-							{ "hide-close-button": typeof this.props.onCloseCallback !== "function" })}
-						title={title}
-						buttonOnClick={this.props.onCloseCallback}
-					>
-						{description ? (<p>{description}</p>) : null}
-					</ModalHeader>
+					{title === null
+						? null
+						: (<ModalHeader
+							className={classNames("properties-tearsheet-header",
+								{ "with-buttons": displayFooterButtons },
+								{ "with-tabs": displayTabs },
+								{ "hide-close-button": typeof this.props.onCloseCallback !== "function" })}
+							title={title}
+							buttonOnClick={this.props.onCloseCallback}
+						>
+							{description ? (<p>{description}</p>) : null}
+						</ModalHeader>)
+					}
 					<ModalBody className={classNames("properties-tearsheet-body",
 						{ "with-buttons": displayFooterButtons },
 						{ "with-tabs": displayTabs })}
@@ -76,7 +80,7 @@ TearSheet.propTypes = {
 	stacked: PropTypes.bool,
 	onCloseCallback: PropTypes.func,
 	tearsheet: PropTypes.shape({
-		title: PropTypes.string.isRequired,
+		title: PropTypes.string,
 		description: PropTypes.string,
 		content: PropTypes.oneOfType([
 			PropTypes.array,
@@ -88,7 +92,8 @@ TearSheet.propTypes = {
 	rejectLabel: PropTypes.string, // Required if showPropertiesButtons is true
 	okHandler: PropTypes.func, // Required if showPropertiesButtons is true
 	cancelHandler: PropTypes.func, // Required if showPropertiesButtons is true
-	applyOnBlur: PropTypes.bool.isRequired
+	applyOnBlur: PropTypes.bool.isRequired,
+	intl: PropTypes.object.isRequired
 };
 
 TearSheet.defaultProps = {
@@ -98,4 +103,4 @@ TearSheet.defaultProps = {
 	stacked: false
 };
 
-export default TearSheet;
+export default injectIntl(TearSheet);

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

@@ -58,7 +58,7 @@ $properties-buttons-height: $spacing-10;
 	.properties-tearsheet-body {
 		padding: $spacing-06 $spacing-07;
 		margin-bottom: 0;
-		.bx--multi-select, .bx--dropdown, .bx--number input[type=number], .bx--text-input, .bx--text-area {	// override carbon's modal
+		.bx--multi-select, .bx--dropdown, .bx--number input[type=number], .bx--text-input, .bx--text-area, .bx--date-picker__input {	// override carbon's modal
 			background-color: $ui-01;
 		}
 	}

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

@@ -297,10 +297,15 @@ function conditionFilter(propertyId, filterItem, conditionItem, controller, fiel
 		return _handleDmModelingRole(fields, values);
 	case "dmSharedFields":
 		return _handleSharedFields(propertyId, filterItem, controller, fields);
-	default:
+	default: {
+		const operation = controller.getConditionOp(op);
+		if (operation && propertyId.name === filterItem.parameter_ref) { // Custom filter condition
+			return operation(propertyId, conditionItem, controller, fields);
+		}
 		logger.warn("Ignoring unknown condition operation '" + op + "'");
 		return fields;
 	}
+	}
 }
 
 function _handleDmMeasurement(inFields, measurementValues) {

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

@@ -25,7 +25,10 @@ const portsHorizontalDefaultLayout = {
 		// DOM element for the node.
 		className: "",
 
-		// Default node shape. Can be "rectangle" or "port-arcs"
+		// Displays the node outline shape underneath the image and label.
+		nodeShapeDisplay: true,
+
+		// Default node shape. Can be "rectangle" or "port-arcs". Used when nodeOutlineDisplay is true.
 		nodeShape: "port-arcs",
 
 		// SVG path strings to define the shape of your node and its
@@ -34,6 +37,9 @@ const portsHorizontalDefaultLayout = {
 		bodyPath: null,
 		selectionPath: null,
 
+		// Displays the external object specified as the body of the node
+		nodeExternalObject: false,
+
 		// Display image
 		imageDisplay: true,
 
@@ -46,6 +52,9 @@ const portsHorizontalDefaultLayout = {
 		imagePosX: 6,
 		imagePosY: 7,
 
+		// Display label
+		labelDisplay: true,
+
 		// Label dimensions
 		labelWidth: 112,
 		labelHeight: 19,
@@ -422,7 +431,10 @@ const portsVerticalDefaultLayout = {
 		// DOM element for the node.
 		className: "",
 
-		// Default node shape. Can be "rectangle" or "port-arcs"
+		// Displays the node outline shape underneath the image and label.
+		nodeShapeDisplay: true,
+
+		// Default node shape. Can be "rectangle" or "port-arcs". Used when nodeOutlineDisplay is true.
 		nodeShape: "rectangle",
 
 		// SVG path strings to define the shape of your node and its
@@ -431,6 +443,9 @@ const portsVerticalDefaultLayout = {
 		bodyPath: null,
 		selectionPath: null,
 
+		// Displays the external object specified as the body of the node
+		nodeExternalObject: false,
+
 		// Display image
 		imageDisplay: true,
 
@@ -443,6 +458,9 @@ const portsVerticalDefaultLayout = {
 		imagePosX: 11,
 		imagePosY: 6,
 
+		// Display label
+		labelDisplay: true,
+
 		// Label dimensions
 		labelWidth: 72,
 		labelHeight: 19,

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

@@ -706,7 +706,7 @@ export default class ObjectModel {
 
 	// Returns a copy of the node passed in with additional fields which contain
 	// layout, dimension and supernode binding status info. This uses the redux
-	// layout information. This is called from the api-pipeline class.
+	// layout information.
 	setNodeAttributes(node) {
 		return this.setNodeAttributesWithLayout(node, this.getNodeLayout(), this.getCanvasLayout());
 	}

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

@@ -183,7 +183,7 @@ export default class PipelineOutHandler {
 		var newDecorations = [];
 		if (decorations) {
 			decorations.forEach((decoration) => {
-				if (!decoration.temporary) {
+				if (!decoration.temporary && !decoration.jsx) {
 					const dec = Object.assign({}, decoration); // This will only copy over set values and ignore undefineds
 					newDecorations.push(dec);
 				}

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

@@ -63,7 +63,7 @@ class PaletteContentListItem extends React.Component {
 		// We cannot use the dataTransfer object for the nodeTemplate because
 		// the dataTransfer data is not available during dragOver events so we set
 		// the nodeTemplate into the canvas controller.
-		this.props.canvasController.nodeTemplateDragStart(this.props.nodeTypeInfo.nodeType);
+		this.props.canvasController.nodeTemplateDragStart(this.ghostData.nodeTemplate);
 
 		// On firefox, the drag will not start unless something is written to
 		// the dataTransfer object so just write an empty string
@@ -88,7 +88,8 @@ class PaletteContentListItem extends React.Component {
 
 	onDoubleClick() {
 		if (this.props.canvasController.createAutoNode) {
-			this.props.canvasController.createAutoNode(this.props.nodeTypeInfo.nodeType);
+			const nodeTemplate = this.props.canvasController.convertNodeTemplate(this.props.nodeTypeInfo.nodeType);
+			this.props.canvasController.createAutoNode(nodeTemplate);
 		}
 	}
 

package/src/palette/palette-dialog-content-grid-node.jsx

@@ -56,7 +56,7 @@ class PaletteDialogContentGridNode extends React.Component {
 		// We cannot use the dataTransfer object for the nodeTemplate because
 		// the dataTransfer data is not available during dragOver events so we set
 		// the nodeTemplate into the canvas controller.
-		this.props.canvasController.nodeTemplateDragStart(this.props.nodeTemplate);
+		this.props.canvasController.nodeTemplateDragStart(this.ghostData.nodeTemplate);
 
 		// On firefox, the drag will not start unless something is written to
 		// the dataTransfer object so just write an empty string
@@ -74,7 +74,8 @@ class PaletteDialogContentGridNode extends React.Component {
 
 	onDoubleClick() {
 		if (this.props.canvasController.createAutoNode) {
-			this.props.canvasController.createAutoNode(this.props.nodeTemplate);
+			const nodeTemplate = this.props.canvasController.convertNodeTemplate(this.props.nodeTemplate);
+			this.props.canvasController.createAutoNode(nodeTemplate);
 		}
 	}
 

package/src/tooltip/tooltip.jsx

@@ -362,7 +362,7 @@ class ToolTip extends React.Component {
 				onBlur={this.props.showToolTipOnClick ? onBlur : null}
 				tabIndex={this.props.showToolTipOnClick ? 0 : null}
 				role={this.props.showToolTipOnClick ? "button" : null}
-				aria-labelledby={`${this.uuid}-${this.props.id}`}
+				aria-labelledby={this.props.showToolTipOnClick ? `${this.uuid}-${this.props.id}` : null}
 				aria-expanded={this.props.showToolTipOnClick ? this.state.isTooltipVisible : null}
 				aria-controls={this.props.showToolTipOnClick ? `${this.uuid}-${this.props.id}` : null}
 				ref={(ref) => (this.triggerRef = ref)}