@elyra/canvas 12.10.0 → 12.11.0

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

@@ -15,6 +15,9 @@
  */
 /* eslint arrow-body-style: ["off"] */
 
+
+import CanvasUtils from "../../../common-canvas/common-canvas-utils.js";
+
 export default (state = [], action) => {
 	switch (action.type) {
 	case "MOVE_OBJECTS":
@@ -53,15 +56,7 @@ export default (state = [], action) => {
 
 
 	case "ADD_COMMENT": {
-		const newComment = {
-			id: action.data.id,
-			class_name: action.data.class_name,
-			content: action.data.content,
-			height: action.data.height,
-			width: action.data.width,
-			x_pos: action.data.x_pos,
-			y_pos: action.data.y_pos
-		};
+		const newComment = getCommentFromData(action.data);
 		return [
 			...state,
 			newComment
@@ -69,9 +64,10 @@ export default (state = [], action) => {
 	}
 
 	case "ADD_COMMENTS": {
+		const comments = action.data.commentsToAdd.map((cd) => getCommentFromData(cd));
 		return [
 			...state,
-			...action.data.commentsToAdd
+			...comments
 		];
 	}
 
@@ -139,6 +135,20 @@ export default (state = [], action) => {
 			return comment;
 		});
 
+	case "SET_OBJECTS_COLOR_CLASS_NAME":
+		return state.map((comment) => {
+			const idx = action.data.objIds.indexOf(comment.id);
+			if (idx > -1) {
+				const newColorClass =
+					Array.isArray(action.data.newColorClass) ? (action.data.newColorClass[idx] || null) : action.data.newColorClass;
+				const className = replaceColorClass(comment.class_name, newColorClass);
+				const newComment = Object.assign({}, comment, { class_name: className });
+				return newComment;
+			}
+			return comment;
+		});
+
+
 	case "SET_OBJECTS_CLASS_NAME":
 		return state.map((comment) => {
 			const idx = action.data.objIds.indexOf(comment.id);
@@ -201,3 +211,41 @@ export default (state = [], action) => {
 		return state;
 	}
 };
+
+function replaceColorClass(className, newColorClass) {
+	let cn = "";
+	if (className) {
+		cn = removeCurrentColorClass(className);
+		cn = addNewColorClass(cn, newColorClass);
+	} else {
+		cn = newColorClass;
+	}
+	return cn;
+}
+
+function removeCurrentColorClass(className) {
+	const cn = className
+		.split(" ")
+		.filter((tok) => !CanvasUtils.getBkgColorClass(tok))
+		.join(" ");
+	return cn;
+}
+
+function addNewColorClass(className, newColorClass) {
+	return className ? className + " " + newColorClass : newColorClass;
+}
+
+function getCommentFromData(data) {
+	const newComment = {
+		id: data.id,
+		content: data.content,
+		height: data.height,
+		width: data.width,
+		x_pos: data.x_pos,
+		y_pos: data.y_pos
+	};
+	if (typeof data.class_name !== "undefined") {
+		newComment.class_name = data.class_name;
+	}
+	return newComment;
+}

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

@@ -46,6 +46,7 @@ export default (state = [], action) => {
 		return [...state, ...action.data.extPipelineFlowsToAdd];
 	}
 
+	case "DELETE_PASTED_OBJECTS":
 	case "DELETE_OBJECTS_AND_UPDATE":
 	case "DELETE_SUPERNODES": {
 		return state.filter((epf) => {

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

@@ -287,14 +287,16 @@ export default (state = [], action) => {
 	// to each of the selected nodes.
 	case "ADD_COMMENT": {
 		const createdLinks = [];
-		action.data.selectedObjectIds.forEach((objId, i) => {
-			createdLinks.push({
-				id: action.data.linkIds[i],
-				srcNodeId: action.data.id,
-				trgNodeId: action.data.selectedObjectIds[i],
-				type: COMMENT_LINK
+		if (action.data.selectedObjectIds) {
+			action.data.selectedObjectIds.forEach((objId, i) => {
+				createdLinks.push({
+					id: action.data.linkIds[i],
+					srcNodeId: action.data.id,
+					trgNodeId: action.data.selectedObjectIds[i],
+					type: COMMENT_LINK
+				});
 			});
-		});
+		}
 		return [
 			...state,
 			...createdLinks

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

@@ -29,9 +29,10 @@ export default (state = {}, action) => {
 	case "CLEAR_SELECTIONS":
 		return {};
 
+	case "ADD_PASTED_OBJECTS":
 	case "SET_SELECTIONS":
 		return {
-			pipelineId: action.data.pipelineId,
+			pipelineId: action.pipelineId,
 			selections: [...action.data.selections]
 		};
 

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

@@ -42,6 +42,7 @@ class PaletteContentListItem extends React.Component {
 		this.showShortDescription = this.showShortDescription.bind(this);
 
 		this.onDragStart = this.onDragStart.bind(this);
+		this.onDragEnd = this.onDragEnd.bind(this);
 		this.onDoubleClick = this.onDoubleClick.bind(this);
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
@@ -61,7 +62,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.setDragNodeTemplate(this.props.nodeTypeInfo.nodeType);
+		this.props.canvasController.nodeTemplateDragStart(this.props.nodeTypeInfo.nodeType);
 
 		// On firefox, the drag will not start unless something is written to
 		// the dataTransfer object so just write an empty string
@@ -72,6 +73,11 @@ class PaletteContentListItem extends React.Component {
 		}
 	}
 
+	// This is needed in-case the drag ends somewhere other than the canvas area.
+	onDragEnd() {
+		this.props.canvasController.nodeTemplateDragEnd();
+	}
+
 	onDoubleClick() {
 		if (this.props.canvasController.createAutoNode) {
 			this.props.canvasController.createAutoNode(this.props.nodeTypeInfo.nodeType);
@@ -295,6 +301,7 @@ class PaletteContentListItem extends React.Component {
 				onMouseLeave={this.onMouseLeave}
 				onMouseDown={this.props.isEditingEnabled ? this.onMouseDown : null}
 				onDragStart={this.props.isEditingEnabled ? this.onDragStart : null}
+				onDragEnd={this.props.isEditingEnabled ? this.onDragEnd : null}
 				onDoubleClick={this.props.isEditingEnabled ? this.onDoubleClick : null}
 			>
 				{categoryLabel}

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

@@ -36,6 +36,7 @@ class PaletteDialogContentGridNode extends React.Component {
 		this.ghostData = null;
 
 		this.onDragStart = this.onDragStart.bind(this);
+		this.onDragEnd = this.onDragEnd.bind(this);
 		this.onDoubleClick = this.onDoubleClick.bind(this);
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
@@ -55,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.setDragNodeTemplate(this.props.nodeTemplate);
+		this.props.canvasController.nodeTemplateDragStart(this.props.nodeTemplate);
 
 		// On firefox, the drag will not start unless something is written to
 		// the dataTransfer object so just write an empty string
@@ -66,6 +67,11 @@ class PaletteDialogContentGridNode extends React.Component {
 		}
 	}
 
+	// This is needed in-case the drag ends somewhere other than the canvas area.
+	onDragEnd() {
+		this.props.canvasController.nodeTemplateDragEnd();
+	}
+
 	onDoubleClick() {
 		if (this.props.canvasController.createAutoNode) {
 			this.props.canvasController.createAutoNode(this.props.nodeTemplate);
@@ -134,6 +140,7 @@ class PaletteDialogContentGridNode extends React.Component {
 				onMouseLeave={this.onMouseLeave}
 				onMouseDown={this.props.isEditingEnabled ? this.onMouseDown : null}
 				onDragStart={this.props.isEditingEnabled ? this.onDragStart : null}
+				onDragEnd={this.props.isEditingEnabled ? this.onDragEnd : null}
 				onDoubleClick={this.props.isEditingEnabled ? this.onDoubleClick : null}
 				className="palette-dialog-grid-node-outer"
 			>

package/src/palette/palette-flyout-utils.js

@@ -68,7 +68,7 @@ function getOccurrences(nodeType, category, filterStrings) {
 // Returns the occurences and hit counts info for the label of the category
 // passed in based on the filterStrings.
 function getCategoryLabelInfo(category, filterStrings) {
-	const catLabel = has(category, "label")
+	const catLabel = has(category, "label") && category.label
 		? category.label.toLowerCase()
 		: "";
 	const { occurrences, hitCounts } = wordOccurrences(catLabel, filterStrings);
@@ -78,7 +78,7 @@ function getCategoryLabelInfo(category, filterStrings) {
 // Returns the occurences and hit counts info for the label of the node
 // passed in based on the filterStrings.
 function getNodeLabelInfo(nodeType, filterStrings) {
-	const nodeLabel = has(nodeType, "app_data.ui_data.label")
+	const nodeLabel = has(nodeType, "app_data.ui_data.label") && nodeType.app_data.ui_data.label
 		? nodeType.app_data.ui_data.label.toLowerCase()
 		: "";
 	const { occurrences, hitCounts } = wordOccurrences(nodeLabel, filterStrings);
@@ -88,7 +88,7 @@ function getNodeLabelInfo(nodeType, filterStrings) {
 // Returns the occurences and hit counts info for the description of the node
 // passed in based on the filterStrings.
 function getNodeDescInfo(nodeType, filterStrings) {
-	const desc = has(nodeType, "app_data.ui_data.description")
+	const desc = has(nodeType, "app_data.ui_data.description") && nodeType.app_data.ui_data.description
 		? nodeType.app_data.ui_data.description.toLowerCase()
 		: "";
 	const { occurrences, hitCounts } = wordOccurrences(desc, filterStrings);

package/src/toolbar/toolbar-action-item.jsx

@@ -18,10 +18,24 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import Tooltip from "../tooltip/tooltip.jsx";
-import Icon from "../icons/icon.jsx";
+import ArrangeHorizontally from "./../../assets/images/arrange_horizontally.svg";
+import ArrangeVertically from "./../../assets/images/arrange_vertically.svg";
+import ToggleNotificationPanel from "./../../assets/images/notification_counter_icon.svg";
+import PaletteClose from "./../../assets/images/palette/palette_close.svg";
+import PaletteOpen from "./../../assets/images/palette/palette_open.svg";
+import ZoomToFit from "./../../assets/images/zoom_to_fit.svg";
+
 import { Button } from "carbon-components-react";
 import SVG from "react-inlinesvg";
 import classNames from "classnames";
+import { StopFilledAlt16, Play16, Undo16, Redo16, Cut16, Copy16, Paste16,
+	AddComment16, TrashCan16, ZoomIn16, ZoomOut16 } from "@carbon/icons-react";
+import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO, TOOLBAR_CUT,
+	TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CREATE_AUTO_COMMENT,
+	TOOLBAR_DELETE_SELECTED_OBJECTS, TOOLBAR_ZOOM_IN, TOOLBAR_ZOOM_OUT, TOOLBAR_ZOOM_FIT,
+	TOOLBAR_ARRANGE_HORIZONALLY, TOOLBAR_ARRANGE_VERTICALLY, TOOLBAR_OPEN_PALETTE,
+	TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL }
+	from "../common-canvas/constants/canvas-constants.js";
 
 class ToolbarActionItem extends React.Component {
 	constructor(props) {
@@ -30,6 +44,55 @@ class ToolbarActionItem extends React.Component {
 		this.actionClickHandler = this.actionClickHandler.bind(this);
 	}
 
+	// Returns a default icon, if there is one, for the action passed in. The
+	// icon may be overridden by the iconTypeOverride field if it is provided.
+	// It also may be set to disabled state.
+	getDefaultIcon(actionObj) {
+		const iconType = actionObj.iconTypeOverride ? actionObj.iconTypeOverride : actionObj.action;
+		const disabled = !actionObj.enable;
+
+		switch (iconType) {
+		case (TOOLBAR_STOP):
+			return <StopFilledAlt16 disabled={disabled} />;
+		case (TOOLBAR_RUN):
+			return <Play16 disabled={disabled} />;
+		case (TOOLBAR_UNDO):
+			return <Undo16 disabled={disabled} />;
+		case (TOOLBAR_REDO):
+			return <Redo16 disabled={disabled} />;
+		case (TOOLBAR_CUT):
+			return <Cut16 disabled={disabled} />;
+		case (TOOLBAR_COPY):
+			return <Copy16 disabled={disabled} />;
+		case (TOOLBAR_PASTE):
+			return <Paste16 disabled={disabled} />;
+		case (TOOLBAR_CREATE_AUTO_COMMENT):
+			return <AddComment16 disabled={disabled} />;
+		case (TOOLBAR_DELETE_SELECTED_OBJECTS):
+			return <TrashCan16 disabled={disabled} />;
+		case (TOOLBAR_ZOOM_IN):
+			return <ZoomIn16 disabled={disabled} />;
+		case (TOOLBAR_ZOOM_OUT):
+			return <ZoomOut16 disabled={disabled} />;
+
+		case (TOOLBAR_ZOOM_FIT):
+			return <SVG src={ZoomToFit} disabled={disabled} />;
+		case (TOOLBAR_ARRANGE_HORIZONALLY):
+			return <SVG src={ArrangeVertically} disabled={disabled} />;
+		case (TOOLBAR_ARRANGE_VERTICALLY):
+			return <SVG src={ArrangeHorizontally} disabled={disabled} />;
+		case (TOOLBAR_OPEN_PALETTE):
+			return <SVG src={PaletteOpen} disabled={disabled} />;
+		case (TOOLBAR_CLOSE_PALETTE):
+			return <SVG src={PaletteClose} disabled={disabled} />;
+		case (TOOLBAR_TOGGLE_NOTIFICATION_PANEL):
+			return <SVG src={ToggleNotificationPanel} disabled={disabled} />;
+
+		default:
+			return null;
+		}
+	}
+
 	generateLabel(label, disable, overflow, incLabelWithIcon) {
 		let className = "toolbar-icon-label";
 		className += this.generateLabelType(overflow, incLabelWithIcon);
@@ -49,10 +112,9 @@ class ToolbarActionItem extends React.Component {
 	}
 
 	generateIcon(actionObj) {
-		const iconType = actionObj.iconTypeOverride ? actionObj.iconTypeOverride : actionObj.action;
-		let icon = <Icon type={iconType} disabled={!actionObj.enable} noAddedClasses />;
+		let icon = this.getDefaultIcon(actionObj);
 
-		// Host application provided icon.
+		// Host application provided icon. This will override any default icon.
 		if (actionObj.iconEnabled) {
 			const iconEnabled = actionObj.iconEnabled;
 			const iconDisabled = actionObj.iconDisabled || actionObj.iconEnabled;
@@ -66,13 +128,14 @@ class ToolbarActionItem extends React.Component {
 			}
 		}
 
-		const customClassname = actionObj.className ? actionObj.className : "";
-		const iconClassName = "toolbar-icon " + customClassname;
-		return (
-			<div className={iconClassName}>
-				{icon}
-			</div>
-		);
+		if (icon) {
+			return (
+				<div className={"toolbar-icon"}>
+					{icon}
+				</div>
+			);
+		}
+		return null;
 	}
 
 	actionClickHandler() {
@@ -98,6 +161,7 @@ class ToolbarActionItem extends React.Component {
 
 		const itemContentClassName = classNames(
 			"toolbar-item-content",
+			actionObj.className ? actionObj.className : null,
 			{ "overflow": this.props.overflow, "disabled": !actionObj.enable, "default": !actionObj.kind });
 
 		// If no 'kind' is set, use ghost and then override colors using the "default" class in innerDivClassName.
@@ -153,9 +217,8 @@ class ToolbarActionItem extends React.Component {
 	// toolbar next to the icon (i.e. incLabelWithIcon is set to something).
 	showLabelAsTip(actionObj) {
 		if (actionObj.label) {
-			if (typeof actionObj.label === "string" &&
-					(actionObj.incLabelWithIcon === "before" ||
-						actionObj.incLabelWithIcon === "after")) {
+			if (actionObj.incLabelWithIcon === "before" ||
+					actionObj.incLabelWithIcon === "after") {
 				return false;
 			}
 			return true;

package/src/toolbar/toolbar-overflow-item.jsx

@@ -17,9 +17,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import Icon from "../icons/icon.jsx";
 import { Button } from "carbon-components-react";
-import { CANVAS_CARBON_ICONS } from "../common-canvas/constants/canvas-constants";
+import { OverflowMenuVertical16 } from "@carbon/icons-react";
 
 class ToolbarOverflowItem extends React.Component {
 	constructor(props) {
@@ -56,7 +55,7 @@ class ToolbarOverflowItem extends React.Component {
 					>
 						<div className="toolbar-item-content default">
 							<div className="toolbar-icon">
-								<Icon type={CANVAS_CARBON_ICONS.OVERFLOWMENU} noAddedClasses />
+								<OverflowMenuVertical16 />
 							</div>
 						</div>
 					</Button>

package/src/tooltip/tooltip.jsx

@@ -175,7 +175,10 @@ class ToolTip extends React.Component {
 					tooltip.style.left = this.getStyleValue(viewPortWidth - tooltip.offsetWidth); // hitting right border
 				}
 			} else if (tooltipDirection === "left") {
-				tooltip.style.left = this.getStyleValue(triggerLayout.left - tooltip.offsetWidth - pointerLayout.width);
+				// For long tooltips, tooltip.offsetWidth is updated after setting tooltip.style.left. Ensure tooltip doesn't overlap tooltipTrigger element.
+				while ((tooltip.offsetLeft + tooltip.offsetWidth + pointerLayout.width) > triggerLayout.left) {
+					tooltip.style.left = this.getStyleValue(triggerLayout.left - tooltip.offsetWidth - pointerLayout.width);
+				}
 			} else if (tooltipDirection === "right") {
 				tooltip.style.left = this.getStyleValue(triggerLayout.right + pointerLayout.width);
 			}