@elyra/canvas 12.27.1 → 12.28.1

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

@@ -0,0 +1,152 @@
+/*
+ * Copyright 2023 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.
+ */
+
+// Don't use 'd' in regex to avoid problems with replacing date token 'd'
+const FLATPICKR_DATE_TOKENS_REGEX = {
+	Y: "([1-9][0-9][0-9][0-9])", // 4 digit year
+	y: "([0-9][0-9])", // 2 digit year
+	m: "([0][1-9]|[1][0-2])", // 2 digit month
+	n: "([1-9]|[1-2][0-2])", // month without leading 0
+	d: "([0][1-9]|[1-2][0-9]|3[01])", // 2 digit day
+	j: "([1-9]|[1-2][0-9]|3[01])" // day without leading 0
+};
+
+function getDateFormatRegex(dateFormat) {
+	let dateRegex = dateFormat;
+	dateRegex = dateRegex.replace("Y", FLATPICKR_DATE_TOKENS_REGEX.Y);
+	dateRegex = dateRegex.replace("y", FLATPICKR_DATE_TOKENS_REGEX.y);
+	dateRegex = dateRegex.replace("m", FLATPICKR_DATE_TOKENS_REGEX.m);
+	dateRegex = dateRegex.replace("n", FLATPICKR_DATE_TOKENS_REGEX.n);
+	dateRegex = dateRegex.replace("d", FLATPICKR_DATE_TOKENS_REGEX.d);
+	dateRegex = dateRegex.replace("j", FLATPICKR_DATE_TOKENS_REGEX.j);
+	dateRegex = dateRegex.replaceAll(".", "[.]"); // escape decimals
+	dateRegex = "^" + dateRegex + "$";
+	return dateRegex;
+}
+
+// 'datepicker' and 'datepickerRange' uses flatpickr internally through Carbon
+// dateFormat tokens: https://flatpickr.js.org/formatting/#date-formatting-tokens
+// Gets the formatted date to display in the control
+function getFormattedDate(inDate, dateFormat) {
+	const date = new Date(inDate);
+	if (!isNaN(date)) {
+		const year = date.getFullYear().toString();
+		let month = (date.getMonth() + 1).toString(); // month is 0 indexed
+		if (month.length === 1) {
+			month = "0" + month;
+		}
+		let day = date.getDate().toString();
+		if (day.length === 1) {
+			day = "0" + day;
+		}
+
+		let formattedDate = dateFormat;
+		formattedDate = formattedDate.replace("Y", year); // 4 digit year
+		formattedDate = formattedDate.replace("y", year.substring(2)); // 2 digit year
+		formattedDate = formattedDate.replace("m", month); // 2 digit month
+		formattedDate = formattedDate.replace("n", parseInt(month, 10)); // month without leading 0
+		formattedDate = formattedDate.replace("d", day); // 2 digit day
+		formattedDate = formattedDate.replace("j", parseInt(day, 10)); // day without leading 0
+		return formattedDate;
+	}
+	return inDate;
+}
+
+// Get the ISO date format that is stored internally
+function getISODate(inDate, dateFormat) {
+	const date = new Date(inDate);
+	if (!isNaN(date)) {
+		if (inDate instanceof Date) {
+			return date.toISOString();
+		} else if (typeof inDate === "string" && inDate.trim().length > 0 && dateFormat) {
+			const dateRegex = getDateFormatRegex(dateFormat);
+			const { year, month, day } = getYearMonthDay(inDate, dateRegex, dateFormat);
+			return new Date(`${year}-${month}-${day}T00:00:00.00`).toISOString();
+		}
+	}
+	return inDate;
+}
+
+// Date libraries are able to parse dates such as 2023-02-31 into an actual Date object: Jan 31 2023
+// Given a date string (internal ISO format) and dateFormat,
+// test to see if the date is valid byt first parsing the given date for the year, month, and day
+// then compare the values of the created Date object to see if it matches
+function isValidDate(dateString, dateFormat) {
+	const date = new Date(dateString);
+	if (isNaN(date)) {
+		return false;
+	}
+
+	const dateRegex = getDateFormatRegex(dateFormat);
+	const validRegex = new RegExp(dateRegex).test(dateString);
+	if (validRegex) {
+		const { year, month, day } = getYearMonthDay(dateString, dateRegex, dateFormat);
+		const newDate = new Date(`${year}-${month}-${day}T00:00:00`); // ISO format
+		const newYear = newDate.getFullYear();
+		const newMonth = newDate.getMonth() + 1;
+		const newDay = newDate.getDate();
+		return newYear === parseInt(year, 10) && newMonth === parseInt(month, 10) && newDay === parseInt(day, 10);
+	}
+	return false;
+}
+
+// Given the date in string format "03-22-2023" and corresponding dateFormat m-d-Y,
+// return the year, month, and day as separate fields
+function getYearMonthDay(dateString, dateRegex, dateFormat) {
+	let year = "";
+	let month = "";
+	let day = "";
+
+	const groups = dateString.match(dateRegex);
+	if (groups) {
+		let groupIdx = 1; // Index 0 is the entire match
+		for (let formatIdx = 0; formatIdx < dateFormat.length; formatIdx++) {
+			const formatToken = dateFormat.charAt(formatIdx);
+			switch (formatToken) {
+			case "Y":
+			case "y": {
+				year = groups[groupIdx];
+				groupIdx++;
+				break;
+			}
+			case "m":
+			case "n": {
+				month = groups[groupIdx];
+				groupIdx++;
+				break;
+			}
+			case "d":
+			case "j": {
+				day = groups[groupIdx];
+				groupIdx++;
+				break;
+			}
+			default:
+				break;
+			}
+		}
+		return { year, month, day };
+	}
+	return null;
+}
+
+export {
+	getDateFormatRegex,
+	getFormattedDate,
+	getISODate,
+	isValidDate,
+	getYearMonthDay
+};

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

@@ -533,41 +533,58 @@ function _findCorrespondingValue(input, values) {
 }
 
 // Convert the data types of currentParameters to the type defined in parameterDefs
-function convertValueDataTypes(currentParameters, paramDefs) {
+function convertValueDataTypes(currentParameters, controls) {
 	const convertedCurrentParameters = {};
-	paramDefs.forEach((paramDef) => {
-		if (!isUndefined(currentParameters[paramDef.name])) {
-			const originalValue = currentParameters[paramDef.name];
+	const currentParams = Object.keys(currentParameters);
+	currentParams.forEach((paramName) => {
+		const originalValue = currentParameters[paramName];
+		if (!isUndefined(originalValue) && controls[paramName]) {
+			const valueType = controls[paramName].valueDef.propType;
+			const isList = controls[paramName].valueDef.isList;
 			if (originalValue) {
-				switch (paramDef.type) {
+				switch (valueType) {
 				case "string": {
-					convertedCurrentParameters[paramDef.name] = originalValue.toString();
+					if (isList) {
+						convertedCurrentParameters[paramName] = originalValue.map((val) => val.toString());
+					} else {
+						convertedCurrentParameters[paramName] = originalValue.toString();
+					}
 					break;
 				}
 				case "integer": {
-					convertedCurrentParameters[paramDef.name] = parseInt(originalValue, 10);
+					if (isList) {
+						convertedCurrentParameters[paramName] = originalValue.map((val) => parseInt(val, 10));
+					} else {
+						convertedCurrentParameters[paramName] = parseInt(originalValue, 10);
+					}
 					break;
 				}
 				case "double": {
-					convertedCurrentParameters[paramDef.name] = parseFloat(originalValue);
+					if (isList) {
+						convertedCurrentParameters[paramName] = originalValue.map((val) => parseFloat(val));
+					} else {
+						convertedCurrentParameters[paramName] = parseFloat(originalValue);
+					}
 					break;
 				}
 				case "boolean": {
 					if (isString(originalValue)) {
-						convertedCurrentParameters[paramDef.name] = originalValue === "true";
+						convertedCurrentParameters[paramName] = originalValue === "true";
 					} else { // Assume boolean
-						convertedCurrentParameters[paramDef.name] = Boolean(originalValue);
+						convertedCurrentParameters[paramName] = Boolean(originalValue);
 					}
 					break;
 				}
 				default: { // arrays, objects, enum, password
-					convertedCurrentParameters[paramDef.name] = originalValue;
+					convertedCurrentParameters[paramName] = originalValue;
 					break;
 				}
 				}
 			} else { // null
-				convertedCurrentParameters[paramDef.name] = originalValue;
+				convertedCurrentParameters[paramName] = originalValue;
 			}
+		} else { // control is missing or current parameter is not set
+			convertedCurrentParameters[paramName] = originalValue;
 		}
 	});
 	return convertedCurrentParameters;

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

@@ -1005,6 +1005,7 @@ export default class APIPipeline {
 
 	addComment(data) {
 		this.store.dispatch({ type: "ADD_COMMENT", data: data, pipelineId: this.pipelineId });
+		this.store.dispatch({ type: "SHOW_COMMENTS" });
 	}
 
 	// Returns a position for a new comment added by clicking the 'add comment'

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

@@ -1239,6 +1239,18 @@ export default class ObjectModel {
 		this.store.dispatch({ type: "REMOVE_ALL_STYLES", data: { temporary: temporary } });
 	}
 
+	hideComments() {
+		this.store.dispatch({ type: "HIDE_COMMENTS" });
+	}
+
+	showComments() {
+		this.store.dispatch({ type: "SHOW_COMMENTS" });
+	}
+
+	isHidingComments() {
+		return this.store.getCanvasInfo().hideComments;
+	}
+
 	findNode(nodeId, pipelineId, pipelines) {
 		const targetPipeline = pipelines.find((p) => p.id === pipelineId);
 

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

@@ -151,6 +151,14 @@ export default (state = {}, action) => {
 	case "SET_SUBDUE_STYLE":
 		return Object.assign({}, state, { subdueStyle: action.data.subdueStyle });
 
+	case "HIDE_COMMENTS": {
+		return { ...state, hideComments: true };
+	}
+
+	case "SHOW_COMMENTS": {
+		return { ...state, hideComments: false };
+	}
+
 	case "ADD_NODE":
 	case "REPLACE_NODES":
 	case "REPLACE_NODE":

package/src/themes/light.scss

@@ -1,3 +1,19 @@
+/*
+ * 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 "@carbon/themes/scss/themes";
 
 // Switch the themes below to get light or dark.

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

@@ -28,13 +28,14 @@ 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,
+import { StopFilledAlt16, Play16, Undo16, Redo16, Chat16, ChatOff16, 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 }
+	TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
+	TOOLBAR_SHOW_COMMENTS, TOOLBAR_HIDE_COMMENTS }
 	from "../common-canvas/constants/canvas-constants.js";
 
 class ToolbarActionItem extends React.Component {
@@ -44,14 +45,12 @@ 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.
+	// Returns a default icon, if there is one, for the action passed in.
 	// It also may be set to disabled state.
 	getDefaultIcon(actionObj) {
-		const iconType = actionObj.iconTypeOverride ? actionObj.iconTypeOverride : actionObj.action;
 		const disabled = !actionObj.enable;
 
-		switch (iconType) {
+		switch (actionObj.action) {
 		case (TOOLBAR_STOP):
 			return <StopFilledAlt16 disabled={disabled} />;
 		case (TOOLBAR_RUN):
@@ -68,6 +67,10 @@ class ToolbarActionItem extends React.Component {
 			return <Paste16 disabled={disabled} />;
 		case (TOOLBAR_CREATE_AUTO_COMMENT):
 			return <AddComment16 disabled={disabled} />;
+		case (TOOLBAR_SHOW_COMMENTS):
+			return <Chat16 disabled={disabled} />;
+		case (TOOLBAR_HIDE_COMMENTS):
+			return <ChatOff16 disabled={disabled} />;
 		case (TOOLBAR_DELETE_SELECTED_OBJECTS):
 			return <TrashCan16 disabled={disabled} />;
 		case (TOOLBAR_ZOOM_IN):
@@ -282,7 +285,6 @@ ToolbarActionItem.propTypes = {
 		]),
 		className: PropTypes.string,
 		textContent: PropTypes.string,
-		iconTypeOverride: PropTypes.string,
 		isSelected: PropTypes.bool,
 		kind: PropTypes.string,
 		jsx: PropTypes.object,

package/src/tooltip/tooltip.jsx

@@ -21,6 +21,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Portal } from "react-portal";
 import { Link } from "carbon-components-react";
+import { v4 as uuid4 } from "uuid";
 
 class ToolTip extends React.Component {
 	constructor(props) {
@@ -28,7 +29,7 @@ class ToolTip extends React.Component {
 		this.state = {
 			isTooltipVisible: false
 		};
-
+		this.uuid = uuid4();
 		this.pendingTooltip = null;
 		this.hideTooltipOnScrollAndResize = this.hideTooltipOnScrollAndResize.bind(this);
 	}
@@ -61,7 +62,7 @@ class ToolTip extends React.Component {
 
 
 		if (this.showTooltip()) {
-			const tooltip = document.querySelector("[data-id='" + this.props.id + "']");
+			const tooltip = document.querySelector(`[data-id='${this.uuid}-${this.props.id}']`);
 			this.pendingTooltip = null;
 			this.setState({
 				isTooltipVisible: visible
@@ -72,7 +73,7 @@ class ToolTip extends React.Component {
 				if (this.props.targetObj) {
 					tooltipTrigger = this.props.targetObj;
 				} else {
-					tooltipTrigger = document.querySelector("[data-id='" + this.props.id + "-trigger']");
+					tooltipTrigger = document.querySelector(`[data-id='${this.uuid}-${this.props.id}-trigger']`);
 				}
 				if (tooltipTrigger && tooltip) {
 					this.updateTooltipLayout(tooltip, tooltipTrigger, tooltip.getAttribute("direction"));
@@ -119,13 +120,13 @@ class ToolTip extends React.Component {
 	// (scrollWidth) value is equal to the minimum width the element would require
 	//  in order to fit all the content in the viewport without using a horizontal scrollbar
 	canDisplayFullText(elem) {
-		if (elem) {
-			const firstChildWidth = elem.firstChild && elem.firstChild.scrollWidth ? elem.firstChild.scrollWidth : 0;
-			const displayWidth = elem.offsetWidth;
-			let fullWidth = firstChildWidth;
-			if (firstChildWidth === 0) {
-				fullWidth = elem.scrollWidth;
-			}
+		const triggerElem = this.props.truncatedRef ? this.props.truncatedRef : elem;
+		if (triggerElem) {
+			const fullWidth = triggerElem.firstChild && triggerElem.firstChild.scrollWidth && triggerElem.firstChild.scrollWidth !== 0 ? triggerElem.firstChild.scrollWidth
+				: triggerElem.scrollWidth;
+			const childWidth = triggerElem.firstChild && triggerElem.firstChild.offsetWidth && triggerElem.firstChild.offsetWidth || 0;
+			// need different handling when content is within a span vs div
+			const displayWidth = childWidth !== 0 && childWidth < triggerElem.offsetWidth ? childWidth : triggerElem.offsetWidth;
 			const canDisplayFullText = fullWidth <= displayWidth;
 			return canDisplayFullText;
 		}
@@ -351,7 +352,7 @@ class ToolTip extends React.Component {
 			const click = (evt) => this.toggleTooltipOnClick(evt);
 
 			triggerContent = (<div
-				data-id={this.props.id + "-trigger"}
+				data-id={`${this.uuid}-${this.props.id}-trigger`}
 				className="tooltip-trigger"
 				onMouseOver={!this.props.showToolTipOnClick ? mouseover : null}
 				onMouseLeave={!this.props.showToolTipOnClick ? mouseleave : null}
@@ -360,6 +361,10 @@ class ToolTip extends React.Component {
 				onFocus={this.props.showToolTipOnClick ? onFocus : null} // When focused using keyboard
 				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-expanded={this.props.showToolTipOnClick ? this.state.isTooltipVisible : null}
+				aria-controls={this.props.showToolTipOnClick ? `${this.uuid}-${this.props.id}` : null}
 				ref={(ref) => (this.triggerRef = ref)}
 			>
 				{this.props.children}
@@ -368,13 +373,13 @@ class ToolTip extends React.Component {
 
 		if ((typeof this.props.tip) === "string") {
 			tooltipContent = (
-				<span id="tooltipContainer">
+				<span className="tooltipContainer">
 					{this.props.tip}
 				</span>
 			);
 		} else if ((typeof this.props.tip) === "object") {
 			tooltipContent = (
-				<div id="tooltipContainer">
+				<div className="tooltipContainer">
 					{this.props.tip}
 				</div>
 			);
@@ -406,8 +411,15 @@ class ToolTip extends React.Component {
 		if (tooltipContent || link) {
 			tooltip = (
 				<Portal>
-					<div data-id={this.props.id} className={tipClass} aria-hidden={!this.state.isTooltipVisible} direction={this.props.direction}>
-						<svg id="tipArrow" x="0px" y="0px" viewBox="0 0 9.1 16.1">
+					<div
+						role="tooltip"
+						id={`${this.uuid}-${this.props.id}`}
+						data-id={`${this.uuid}-${this.props.id}`}
+						className={tipClass}
+						aria-hidden={!this.state.isTooltipVisible}
+						direction={this.props.direction}
+					>
+						<svg className="tipArrow" x="0px" y="0px" viewBox="0 0 9.1 16.1">
 							<polyline points="9.1,15.7 1.4,8.1 9.1,0.5" />
 							<polygon points="8.1,16.1 0,8.1 8.1,0 8.1,1.4 1.4,8.1 8.1,14.7" />
 						</svg>
@@ -439,6 +451,7 @@ ToolTip.propTypes = {
 	mousePos: PropTypes.object,
 	disable: PropTypes.bool, // Tooltip will not show if disabled
 	showToolTipIfTruncated: PropTypes.bool, // Set to true to only display tooltip if full text does not fit in displayable width
+	truncatedRef: PropTypes.object,
 	delay: PropTypes.number,
 	showToolTipOnClick: PropTypes.bool
 };

package/src/tooltip/tooltip.scss

@@ -72,31 +72,31 @@
 	padding: $spacing-03 $spacing-05;
 }
 
-.common-canvas-tooltip #tipArrow {
+.common-canvas-tooltip .tipArrow {
 	position: absolute;
 	width: 10px;
 	height: 14px;
 }
 
-.common-canvas-tooltip[direction="top"] #tipArrow {
+.common-canvas-tooltip[direction="top"] .tipArrow {
 	transform: rotate(-90deg);
 }
 
-.common-canvas-tooltip[direction="left"] #tipArrow {
+.common-canvas-tooltip[direction="left"] .tipArrow {
 	transform: rotate(180deg);
 }
 
-.common-canvas-tooltip[direction="bottom"] #tipArrow {
+.common-canvas-tooltip[direction="bottom"] .tipArrow {
 	transform: rotate(90deg);
 }
 
 
-.common-canvas-tooltip #tipArrow polyline {
+.common-canvas-tooltip .tipArrow polyline {
 	fill: $inverse-02;
 	stroke-width: 0;
 }
 
-.common-canvas-tooltip #tipArrow polygon {
+.common-canvas-tooltip .tipArrow polygon {
 	fill: $inverse-02;
 }
 
@@ -156,6 +156,6 @@
 	max-width: 250px;
 }
 
-.properties-tooltips #tipArrow polyline {
+.properties-tooltips .tipArrow polyline {
 	fill: $inverse-02;
 }