@elyra/canvas 12.12.2 → 12.14.0

package/src/common-canvas/svg-canvas-utils-markdown.js

@@ -0,0 +1,515 @@
+/*
+ * 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.
+ */
+
+export default class SvgCanvasUtilsComments {
+
+	// Processes the action passed in and returns an object containing:
+	// newText - new text based on the input text passed in with markdown
+	//           characters added based on the selected part of the text
+	// newStart - a new starting point for selection highlighting
+	// newEnd - a new ending point for selection highlighting
+	static processMarkdownAction(action, text, inStart, inEnd) {
+		let start = inStart;
+		let end = inEnd;
+		let mdObj = null;
+
+		if (start === end) {
+			start = this.findFirstSpace(text, start);
+			end = this.findLastSpace(text, end);
+
+		} else if (this.allWhiteSpace(text, start, end)) {
+			start = end;
+
+		} else {
+			start = this.findFirstNonSpace(text, start, end);
+			end = this.findLastNonSpace(text, start, end);
+		}
+
+		switch (action) {
+		case "title":
+		case "header":
+		case "subheader":
+		case "body":
+		case "increaseHashes":
+		case "decreaseHashes": {
+			mdObj = this.processHeaderCommand(text, start, end, action);
+			break;
+		}
+		case "bold": {
+			mdObj = this.processWrapCommand(text, start, end, "**");
+			break;
+		}
+		case "italics": {
+			mdObj = this.processWrapCommand(text, start, end, "_");
+			break;
+		}
+		case "strikethrough": {
+			mdObj = this.processWrapCommand(text, start, end, "~~");
+			break;
+		}
+		case "code": {
+			mdObj = this.processCodeCommand(text, start, end);
+			break;
+		}
+		case "link": {
+			mdObj = this.processLinkCommand(text, start, end);
+			break;
+		}
+		case "quote":
+		case "numberedList":
+		case "bulletedList": {
+			mdObj = this.processMultiLineCommand(text, start, end, action);
+			break;
+		}
+		case "return": {
+			mdObj = this.processReturnCommand(text, start, end, inStart, inEnd);
+			break;
+		}
+		default: {
+			break;
+		}
+		}
+		return mdObj;
+	}
+
+	static findFirstSpace(text, start) {
+		const spacePos = text.lastIndexOf(" ", start - 1) + 1;
+		const newLinePos = text.lastIndexOf("\n", start - 1) + 1;
+		return Math.max(spacePos, newLinePos, 0);
+	}
+
+	static findLastSpace(text, end) {
+		let spacePos = text.indexOf(" ", end);
+		let newLinePos = text.indexOf("\n", end);
+		spacePos = spacePos === -1 ? text.length : spacePos;
+		newLinePos = newLinePos === -1 ? text.length : newLinePos;
+		return Math.min(spacePos, newLinePos, text.length);
+	}
+
+	static allWhiteSpace(text, start, end) {
+		return text.slice(start, end).trim().length === 0;
+	}
+
+	static findFirstNonSpace(text, start, end) {
+		let newStart = start;
+		while ((text[newStart] === " " || text[newStart] === "\n") && newStart <= end) {
+			newStart++;
+		}
+		return newStart;
+	}
+
+	static findLastNonSpace(text, start, end) {
+		let newEnd = end;
+		while ((text[newEnd - 1] === " " || text[newEnd - 1] === "\n") && newEnd >= start) {
+			newEnd--;
+		}
+		return newEnd;
+	}
+
+	static processHeaderCommand(text, inStart, inEnd, action) {
+		const start = this.findPrecedingNewLine(text, inStart);
+		const end = this.findSuceedingNewLine(text, inEnd);
+
+		const startText = text.slice(0, start);
+		const selectedText = text.slice(start, end);
+		const endText = text.slice(end);
+
+		let newStart = start;
+		let newEnd = end;
+		let newText = "";
+		let tempText = selectedText;
+
+		// Remove all hashes if any from the line.
+		const hashCount = this.getHashCount(selectedText);
+		if (hashCount > 0) {
+			const firstSpace = selectedText.indexOf(" ");
+			tempText = selectedText.slice(firstSpace + 1);
+			newText = startText + tempText + endText;
+			newEnd -= firstSpace + 1;
+		}
+
+		// Add as many hashes as appropriate for the action.
+		const headerSyntax = this.getHeaderSyntax(action, hashCount);
+		if (headerSyntax) {
+			newText = startText + headerSyntax + tempText + endText;
+			newStart += headerSyntax.length;
+			newEnd += headerSyntax.length;
+		}
+		return { newText, newStart, newEnd };
+	}
+
+	static getHeaderSyntax(action, hashCount) {
+		switch (action) {
+		case "title": return "# ";
+		case "header": return "## ";
+		case "subheader": return "### ";
+		case "body": return false;
+		case "increaseHashes": {
+			if (hashCount === 0) {
+				return "# ";
+			} else if (hashCount === 1) {
+				return "## ";
+			} else if (hashCount === 2) {
+				return "### ";
+			}
+			return false;
+		}
+		case "decreaseHashes": {
+			if (hashCount === 0) {
+				return "### ";
+			} else if (hashCount === 1) {
+				return false;
+			} else if (hashCount === 2) {
+				return "# ";
+			} else if (hashCount === 3) {
+				return "## ";
+			}
+			return "### ";
+		}
+		default:
+		}
+		return false;
+	}
+
+	static getHashCount(text) {
+		if (text.startsWith("# ")) {
+			return 1;
+		} else if (text.startsWith("## ")) {
+			return 2;
+		} else if (text.startsWith("### ")) {
+			return 3;
+		} else if (text.startsWith("#### ")) {
+			return 4;
+		} else if (text.startsWith("##### ")) {
+			return 5;
+		} else if (text.startsWith("###### ")) {
+			return 6;
+		}
+		return 0;
+	}
+
+	static processWrapCommand(text, start, end, chars) {
+		let newText = "";
+		let newStart = start;
+		let newEnd = end;
+
+		const startText = text.slice(0, start);
+		const selectedText = text.slice(start, end);
+		const endText = text.slice(end);
+		const charsCount = chars.length;
+
+		if (startText.endsWith(chars) && endText.startsWith(chars)) {
+			newText = startText.slice(0, startText.length - charsCount) +
+				selectedText +
+				endText.slice(charsCount);
+			newStart = start - charsCount;
+			newEnd = end - charsCount;
+
+		} else if (selectedText.startsWith(chars) && selectedText.endsWith(chars)) {
+			newText = startText +
+				selectedText
+					.slice(0, selectedText.length - charsCount) // Remove ending chars
+					.slice(charsCount) + // Remove beginning chars
+				endText;
+			newStart = start;
+			newEnd = end - (2 * charsCount);
+
+		} else {
+			newText = startText + chars + selectedText + chars + endText;
+			newStart = start + charsCount;
+			newEnd = end + charsCount;
+		}
+
+		return { newText, newStart, newEnd };
+	}
+
+	static processCodeCommand(text, start, end) {
+		const selText = text.slice(start, end);
+		if (selText.indexOf("\n") > -1) {
+			return this.processTripleBackTicks(text, start, end);
+		}
+
+		return this.processWrapCommand(text, start, end, "`");
+	}
+
+	static processTripleBackTicks(text, inStart, inEnd) {
+		const start = this.findPrecedingNewLine(text, inStart);
+		const end = this.findSuceedingNewLine(text, inEnd);
+
+		const startText = text.slice(0, start);
+		const selectedText = text.slice(start, end);
+		const endText = text.slice(end);
+
+		let newStart = start;
+		let newEnd = end;
+		let newText = "";
+
+		if (startText.endsWith("```\n") && endText.startsWith("\n```")) {
+			newText = startText.slice(0, start - 4) + selectedText + endText.slice(4);
+			newStart -= 4;
+			newEnd -= 4;
+
+		} else {
+			newText = startText + "```\n" + selectedText + "\n```" + endText;
+			newStart += 4;
+			newEnd += 4;
+		}
+
+		return { newText, newStart, newEnd };
+	}
+
+	static processLinkCommand(text, start, end) {
+		let newText = "";
+		let newStart = start;
+		let newEnd = end;
+
+		const startText = text.slice(0, start);
+		const selectedText = text.slice(start, end);
+		const endText = text.slice(end);
+
+		if (startText.endsWith("[") && endText.startsWith("](url)")) {
+			newText = startText.slice(0, startText.length - 1) + selectedText + endText.slice(6);
+			newStart = start - 1;
+			newEnd = end - 1;
+
+		} else if (selectedText === "[](url)") {
+			newText = startText + endText;
+			newStart = start;
+			newEnd = newStart;
+
+		} else if (start === end) {
+			newText = startText + "[](url)" + endText;
+			newStart = start + 1;
+			newEnd = start + 1;
+
+		} else {
+			newText = startText + "[" + selectedText + "](url)" + endText;
+			newStart = start + 1;
+			newEnd = end + 1;
+		}
+
+		return { newText, newStart, newEnd };
+	}
+
+	static processMultiLineCommand(text, start, end, action) {
+		if (this.isMultiLineMarkdown(text, start, end, action)) {
+			return this.removeMultiLineMarkdown(text, start, end, action);
+		}
+		return this.addMultiLineMarkdown(text, start, end, action);
+	}
+
+	static isMultiLineMarkdown(text, inStart, inEnd, action) {
+		const start = this.findPrecedingNewLine(text, inStart);
+		const end = this.findSuceedingNewLine(text, inEnd);
+		const selectedText = text.slice(start, end);
+
+		const lines = selectedText.split("\n");
+		return lines.every((line) => this.isMultiLineItem(line, action));
+	}
+
+	static isMultiLineItem(text, action) {
+		switch (action) {
+		case "quote":
+			return text.startsWith("> ");
+		case "bulletedList":
+			return text.startsWith("* ");
+		case "numberedList": {
+			const number = this.getPrefixNumber(text);
+			return (!isNaN(number) && number > 0);
+		}
+		default:
+		}
+		return false;
+	}
+
+	static getPrefixNumber(text) {
+		const firstSpace = text.indexOf(". ");
+		const firstText = text.slice(0, firstSpace);
+		return Number(firstText);
+	}
+
+	static removeMultiLineMarkdown(text, inStart, inEnd, action) {
+		const start = this.findPrecedingNewLine(text, inStart);
+		const end = this.findSuceedingNewLine(text, inEnd);
+
+		const startText = text.slice(0, start);
+		const selectedText = text.slice(start, end);
+		const endText = text.slice(end);
+
+		const newStart = start;
+		let newEnd = end;
+		let newText = startText;
+
+		const lines = selectedText.split("\n");
+		lines.forEach((line, i) => {
+			const newLine = this.removeListPrefix(line, action);
+			newEnd -= (line.length - newLine.length);
+			newText += newLine;
+			if (i < lines.length - 1) {
+				newText += "\n";
+			}
+		});
+		newText += endText;
+
+		return { newText, newStart, newEnd };
+	}
+
+	static removeListPrefix(text, action) {
+		switch (action) {
+		case "quote":
+			return text.slice(2); // Remove 2 characters: "> "
+		case "bulletedList":
+			return text.slice(2); // Remove 2 characters: "* "
+		case "numberedList": {
+			const firstSpace = text.indexOf(". "); // Remove characters: "5. " or "10. "
+			return text.slice(firstSpace + 2);
+		}
+		default:
+		}
+		return "";
+	}
+
+	static addMultiLineMarkdown(text, inStart, inEnd, action) {
+		const start = this.findPrecedingNewLine(text, inStart);
+		const end = this.findSuceedingNewLine(text, inEnd);
+
+		const startText = text.slice(0, start);
+		const selectedText = text.slice(start, end);
+		const endText = text.slice(end);
+
+		let newStart = start;
+		let newEnd = end;
+		let newText = startText;
+
+		if (selectedText === "") {
+			const itemText = this.getListPrefix(action, 1);
+			newText = startText + itemText + endText;
+			newStart = start + itemText.length;
+			newEnd = newStart;
+
+		} else {
+			const lines = selectedText.split("\n");
+			lines.forEach((line, i) => {
+				const newLine = this.getListPrefix(action, i + 1, line);
+				newEnd += (newLine.length - line.length);
+				newText += newLine;
+
+				if (i === lines.length - 1) {
+					if (text[end] !== "\n" || text[end + 1] !== "\n") {
+						newText += "\n";
+					}
+				} else {
+					newText += "\n";
+				}
+			});
+			newText += endText;
+		}
+
+		return { newText, newStart, newEnd };
+	}
+
+	static getListPrefix(action, i, suffixText = "") {
+		switch (action) {
+		case "quote":
+			return "> " + suffixText;
+		case "bulletedList":
+			return "* " + suffixText;
+		case "numberedList":
+			return i + ". " + suffixText;
+		default:
+		}
+		return null;
+	}
+
+	static findPrecedingNewLine(text, start) {
+		let preStart = start;
+		while (preStart > 0 && text[preStart - 1] !== "\n") {
+			preStart--;
+		}
+		return preStart;
+	}
+
+	static findSuceedingNewLine(text, end) {
+		let sucEnd = end;
+		while (sucEnd < text.length && text[sucEnd] !== "\n") {
+			sucEnd++;
+		}
+		return sucEnd;
+	}
+
+	static processReturnCommand(text, inStart, inEnd, originalStart, originalEnd) {
+		const start = this.findPrecedingNewLine(text, inStart);
+		const end = this.findSuceedingNewLine(text, inEnd);
+
+		const startText = text.slice(0, start);
+		const selectedText = text.slice(start, end);
+		const endText = text.slice(end);
+
+		// If cursor is at the beginning of the line we just let it insert the
+		// newline by default, if not we insert a new multi-line element.
+		if (!this.isCursorAtBeginningOfLine(start, originalStart, originalEnd)) {
+			if (this.isMultiLineItem(selectedText, "quote")) {
+				return this.insertMultiLineItem(">", startText, selectedText, endText, end);
+
+			} else if (this.isMultiLineItem(selectedText, "bulletedList")) {
+				return this.insertMultiLineItem("*", startText, selectedText, endText, end);
+
+			} else if (this.isMultiLineItem(selectedText, "numberedList")) {
+				const number = this.getPrefixNumber(selectedText) + 1; // Increment for next multi-line item
+				const newEndText = this.renumberEndText(endText, number);
+				return this.insertMultiLineItem(number + ".", startText, selectedText, newEndText, end);
+			}
+		}
+
+		return null; // Return null is there is nothing to do so key processing is ignored.
+	}
+
+	static isCursorAtBeginningOfLine(start, originalStart, originalEnd) {
+		return (originalStart === originalEnd && originalStart === start);
+	}
+
+	static insertMultiLineItem(char, startText, selectedText, endText, end) {
+		const newText = startText + selectedText + "\n" + char + " " + endText;
+		const newStart = end + 2 + char.length; // Add 2 for newline and space plus length of the char.
+		const newEnd = newStart;
+		return { newText, newStart, newEnd };
+	}
+
+	static renumberEndText(text, startIndex) {
+		const lines = text.split("\n");
+		let newText = "";
+		let finished = false;
+
+		lines.forEach((line, i) => {
+			if (this.isMultiLineItem(line, "numberedList") && finished === false) {
+				newText += this.renumberLine(line, startIndex + i);
+			} else {
+				newText += line;
+				if (i > 0) {
+					finished = true; // As soon as we hit a line without a number we finished renumbering
+				}
+			}
+
+			newText += "\n";
+		});
+		return newText;
+	}
+
+	static renumberLine(text, number) {
+		const firstSpace = text.indexOf(". ");
+		return number + ". " + text.slice(firstSpace + 2);
+	}
+}

package/src/common-properties/components/control-item/control-item.scss

@@ -52,7 +52,7 @@
 	}
 }
 
-.properties-label-container, .properties-summary-link-container {
+.properties-label-container, .properties-summary-link-container, .properties-checkbox-tooltip-container, .properties-radioset-panel {
 	.tooltip-container {
 		display: flex;
 		width: 16px;

package/src/common-properties/components/flexible-table/flexible-table.jsx

@@ -25,7 +25,7 @@ import VirtualizedTable from "./../virtualized-table/virtualized-table.jsx";
 import { SORT_DIRECTION, STATES, ROW_HEIGHT, ROW_SELECTION } from "./../../constants/constants";
 import ReactResizeDetector from "react-resize-detector";
 import classNames from "classnames";
-import { has } from "lodash";
+import { has, isEmpty } from "lodash";
 import defaultMessages from "../../../../locales/common-properties/locales/en.json";
 
 class FlexibleTable extends React.Component {
@@ -79,7 +79,7 @@ class FlexibleTable extends React.Component {
 		}
 
 		// Calculate if checkedAllRows is true
-		if (this.props.selectedRows) {
+		if (this.props.selectedRows && !isEmpty(this.props.data)) {
 			this.setCheckedAll(this.props.selectedRows);
 		}
 
@@ -506,6 +506,14 @@ class FlexibleTable extends React.Component {
 			</div>)
 			: null;
 
+		const emptyTableContent = isEmpty(this.props.data)
+			? (
+				<div className="properties-ft-empty-table">
+					{this.props.emptyTablePlaceholder}
+				</div>
+			)
+			: null;
+
 		return (
 			<div data-id={"properties-ft-" + this.props.scrollKey} className="properties-ft-control-container" ref={ (ref) => (this.flexibleTable = ref) }>
 				{ftHeader}
@@ -543,6 +551,7 @@ class FlexibleTable extends React.Component {
 						</div>
 					</ReactResizeDetector>
 				</div>
+				{emptyTableContent}
 			</div>
 		);
 	}
@@ -550,13 +559,15 @@ class FlexibleTable extends React.Component {
 
 FlexibleTable.defaultProps = {
 	showHeader: true,
-	light: true
+	light: true,
+	emptyTablePlaceholder: ""
 };
 
 FlexibleTable.propTypes = {
 	sortable: PropTypes.array,
 	columns: PropTypes.array.isRequired,
 	data: PropTypes.array.isRequired,
+	emptyTablePlaceholder: PropTypes.string,
 	filterable: PropTypes.array,
 	filterBy: PropTypes.string,
 	filterKeyword: PropTypes.string,

package/src/common-properties/components/flexible-table/flexible-table.scss

@@ -128,3 +128,23 @@ $row-left-padding: $spacing-02;
 		}
 	}
 }
+
+.properties-ft-empty-table {
+	height: calc($spacing-11 + $spacing-08);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	@include carbon--type-style("body-long-01");
+}
+
+.properties-light-enabled {
+	.properties-ft-empty-table {
+		background-color: $ui-background;
+	}
+}
+
+.properties-light-disabled {
+	.properties-ft-empty-table {
+		background-color: $ui-01;
+	}
+}

package/src/common-properties/controls/abstract-table.jsx

@@ -458,6 +458,7 @@ export default class AbstractTable extends React.Component {
 					summaryTable
 					rowSelection={ROW_SELECTION.MULTIPLE}
 					light={this.props.controller.getLight()}
+					emptyTablePlaceholder={this.props.control.additionalText}
 				/>
 			</div>);
 		}
@@ -677,6 +678,7 @@ export default class AbstractTable extends React.Component {
 				selectedRows= {this.props.selectedRows}
 				rowSelection={this.props.control.rowSelection}
 				light={this.props.controller.getLight()}
+				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 		return (
 			<div>

package/src/common-properties/controls/checkbox/checkbox.jsx

@@ -25,7 +25,7 @@ import { STATES, CARBON_ICONS } from "./../../constants/constants.js";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { v4 as uuid4 } from "uuid";
 import classNames from "classnames";
-import Icon from "./../../../icons/icon.jsx";
+import Icon from "./../../../icons/icon";
 
 class CheckboxControl extends React.Component {
 

package/src/common-properties/controls/checkboxset/checkboxset.jsx

@@ -21,9 +21,13 @@ import { Checkbox } from "carbon-components-react";
 import * as ControlUtils from "./../../util/control-utils";
 import classNames from "classnames";
 import ValidationMessage from "./../../components/validation-message";
-import { STATES } from "./../../constants/constants.js";
 import { v4 as uuid4 } from "uuid";
 import { intersection, isEqual } from "lodash";
+import { Information16 } from "@carbon/icons-react";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import { STATES } from "./../../constants/constants.js";
+import { isEmpty } from "lodash";
+
 
 class CheckboxsetControl extends React.Component {
 	constructor(props) {
@@ -74,27 +78,48 @@ class CheckboxsetControl extends React.Component {
 	}
 
 	render() {
+
+		const hidden = this.props.state === STATES.HIDDEN;
 		let controlValue = this.props.value;
 		if (typeof controlValue === "undefined" || controlValue === null) {
 			controlValue = [];
 		}
 		const checkboxes = [];
 		for (var i = 0; i < this.props.control.values.length; i++) {
+			const val = this.props.control.values[i];
+			const disabled = this.props.state === STATES.DISABLED || !this.props.controlOpts.values.includes(val);
+			let tooltipIcon = null;
+			if (Array.isArray(this.props.control.valueDescs) && !isEmpty(this.props.control.valueDescs[i]) && !this.props.tableControl) {
+				const tooltip = (
+					<span >{this.props.control.valueDescs[i]}</span>
+				);
+				tooltipIcon = (<Tooltip
+					id={`tooltip-${this.uuid}-${i}`}
+					tip={tooltip}
+					direction="bottom"
+					className="properties-tooltips"
+					showToolTipOnClick
+					disable={hidden || disabled}
+				>
+					<Information16 disabled={disabled} className="properties-control-description-icon-info" />
+				</Tooltip>);
+			}
 			const id = {
 				name: this.props.propertyId.name,
 				row: i
 			};
-			const val = this.props.control.values[i];
 			const checked = (controlValue.indexOf(val) >= 0);
-			const disabled = this.props.state === STATES.DISABLED || !this.props.controlOpts.values.includes(val);
-			checkboxes.push(<Checkbox
-				disabled={disabled}
-				id={ControlUtils.getControlId(id, this.uuid)}
-				key={val + i}
-				labelText={this.props.control.valueLabels[i]}
-				onChange={this.handleChange.bind(this, val)}
-				checked={checked}
-			/>);
+			checkboxes.push(<div className="properties-checkbox-tooltip-container" key={ControlUtils.getControlId(id, this.uuid)}>
+				<Checkbox
+					disabled={disabled}
+					id={ControlUtils.getControlId(id, this.uuid)}
+					key={val + i}
+					labelText={this.props.control.valueLabels[i]}
+					onChange={this.handleChange.bind(this, val)}
+					checked={checked}
+				/>
+				{tooltipIcon}
+			</div>);
 		}
 		return (
 			<fieldset>