@elyra/canvas 12.12.3 → 12.15.0

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

@@ -75,6 +75,7 @@ export default class CanvasUtils {
 			enablePanIntoViewOnOpen: false,
 			enableZoomIntoSubFlows: false,
 			enableBrowserEditMenu: true,
+			enableMarkdownInComments: false,
 			enableAutoLinkOnlyFromSelNodes: false,
 			enableSaveZoom: "None",
 			enableSnapToGridType: "None",

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

@@ -353,11 +353,17 @@ const portsHorizontalDefaultLayout = {
 		commentSizingArea: 10,
 
 		// Add comment toolbar action, default offset from viewport
-		addCommentOffset: 30,
+		addCommentOffsetX: 30,
+		addCommentOffsetY: 50,
 
 		// Comment port (circle) radius
 		commentPortRadius: 5,
 
+		// Position of the comment toolbar as an offset from the comment position
+		// (which is the top left corner of the comment bounding box).
+		commentToolbarPosX: -2,
+		commentToolbarPosY: -44,
+
 		// ---------------------------------------------------------------------------
 		// Layout values for operations
 		// ---------------------------------------------------------------------------
@@ -737,11 +743,17 @@ const portsVerticalDefaultLayout = {
 		commentSizingArea: 10,
 
 		// Add comment toolbar action, default offset from viewport
-		addCommentOffset: 30,
+		addCommentOffsetX: 30,
+		addCommentOffsetY: 50,
 
 		// Comment port (circle) radius
 		commentPortRadius: 5,
 
+		// Position of the comment toolbar as an offset from the comment position
+		// (which is the top left corner of the comment bounding box).
+		commentToolbarPosX: -2,
+		commentToolbarPosY: -44,
+
 		// ---------------------------------------------------------------------------
 		// Layout values for operations
 		// ---------------------------------------------------------------------------

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

@@ -1442,6 +1442,10 @@ export default class ObjectModel {
 		return this.store.isBottomPanelOpen();
 	}
 
+	setBottomPanelHeight(ht) {
+		this.store.dispatch({ type: "SET_BOTTOM_PANEL_CONFIG", data: { config: { panelHeight: ht } } });
+	}
+
 	// ---------------------------------------------------------------------------
 	// Clone methods
 	// ---------------------------------------------------------------------------
@@ -2380,4 +2384,12 @@ export default class ObjectModel {
 	isTooltipOpen() {
 		return this.store.isTooltipOpen();
 	}
+
+	// ---------------------------------------------------------------------------
+	// Text Toolbar methods
+	// ---------------------------------------------------------------------------
+	setTextToolbarDef(textToolbarDef) {
+		this.store.dispatch({ type: "SET_TEXT_TOOLBAR_DEF", data: { textToolbarDef: textToolbarDef } });
+	}
+
 }

package/src/object-model/redux/canvas-store.js

@@ -28,6 +28,7 @@ import bottompanel from "./reducers/bottompanel.js";
 import breadcrumbs from "./reducers/breadcrumbs.js";
 import canvasconfig from "./reducers/canvasconfig.js";
 import canvastoolbar from "./reducers/canvastoolbar.js";
+import texttoolbar from "./reducers/texttoolbar.js";
 import notifications from "./reducers/notifications.js";
 import selectioninfo from "./reducers/selectioninfo.js";
 import notificationpanel from "./reducers/notificationpanel.js";
@@ -50,6 +51,7 @@ export default class CanavasStore {
 			externalpipelineflows,
 			tooltip,
 			canvastoolbar,
+			texttoolbar,
 			contextmenu,
 			rightflyout,
 			bottompanel
@@ -66,9 +68,10 @@ export default class CanavasStore {
 			externalpipelineflows: [],
 			tooltip: {},
 			canvastoolbar: {},
+			texttoolbar: { isOpen: false },
 			contextmenu: { menuDef: [] },
 			rightflyout: {},
-			bottompanel: {}
+			bottompanel: { panelHeight: 393 }
 		};
 
 		let enableDevTools = false;

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

@@ -18,9 +18,7 @@ export default (state = {}, action) => {
 	switch (action.type) {
 	case "SET_BOTTOM_PANEL_CONFIG": {
 		if (action.data.config) {
-			return {
-				content: action.data.config.content,
-				isOpen: action.data.config.isOpen };
+			return Object.assign({}, state, action.data.config);
 		}
 		return state;
 	}

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

@@ -0,0 +1,29 @@
+/*
+ * 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 (state = {}, action) => {
+	switch (action.type) {
+	case "SET_TEXT_TOOLBAR_DEF": {
+		if (action.data.textToolbarDef) {
+			return Object.assign({}, state, action.data.textToolbarDef);
+		}
+		return state;
+	}
+
+	default:
+		return state;
+	}
+};

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

@@ -47,6 +47,7 @@ class PaletteContentListItem extends React.Component {
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
 		this.onMouseDown = this.onMouseDown.bind(this);
+		this.onKeyPress = this.onKeyPress.bind(this);
 	}
 
 	onMouseDown() {
@@ -73,6 +74,13 @@ class PaletteContentListItem extends React.Component {
 		}
 	}
 
+	onKeyPress(e) {
+		// e.key === " " is needed to allow Cypress test in palette.js to run on the build machine!
+		if (e.key === " " || e.code === "Space" || e.keyCode === 32) {
+			this.onDoubleClick();
+		}
+	}
+
 	// This is needed in-case the drag ends somewhere other than the canvas area.
 	onDragEnd() {
 		this.props.canvasController.nodeTemplateDragEnd();
@@ -289,23 +297,25 @@ class PaletteContentListItem extends React.Component {
 			: null;
 
 		const nodeLabel = itemText
-			? <div className="palette-list-item-text-div">{itemText}</div>
+			? <div className="palette-list-item-text-div" tabIndex="-1">{itemText}</div>
 			: null;
 
 		return (
 			<div id={this.props.nodeTypeInfo.nodeType.id}
 				data-id={this.props.nodeTypeInfo.nodeType.op}
+				tabIndex={0}
 				draggable={draggable}
 				className={mainDivClass}
 				onMouseOver={this.onMouseOver}
 				onMouseLeave={this.onMouseLeave}
+				onKeyPress={this.props.isEditingEnabled ? this.onKeyPress : null}
 				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}
-				<div className="palette-list-item-icon-and-text">
+				<div className="palette-list-item-icon-and-text" tabIndex="-1">
 					{icon}
 					{nodeLabel}
 					{ranking}

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

@@ -38,6 +38,7 @@ class PaletteContentList extends React.Component {
 						isDisplaySearchResult={false}
 						canvasController={this.props.canvasController}
 						isPaletteOpen={this.props.isPaletteOpen}
+						isEditingEnabled={this.props.isEditingEnabled}
 					/>
 				</div>
 			);
@@ -46,27 +47,20 @@ class PaletteContentList extends React.Component {
 				var itemKey = "item_" + idx;
 
 				contentItems.push(
-					<div key={itemKey}>
-						<PaletteContentListItem
-							nodeTypeInfo={this.props.nodeTypeInfos[idx]}
-							isDisplaySearchResult={false}
-							canvasController={this.props.canvasController}
-							isPaletteOpen={this.props.isPaletteOpen}
-							isEditingEnabled={this.props.isEditingEnabled}
-						/>
-					</div>
+					<PaletteContentListItem
+						key={itemKey}
+						nodeTypeInfo={this.props.nodeTypeInfos[idx]}
+						isDisplaySearchResult={false}
+						canvasController={this.props.canvasController}
+						isPaletteOpen={this.props.isPaletteOpen}
+						isEditingEnabled={this.props.isEditingEnabled}
+					/>
 				);
 			}
 		}
 
-		const style = {};
-		style.borderBottom = this.props.isLastCategory ? "none" : null;
-		style.display = this.props.show ? "block" : "none";
-
 		return (
-			<div width="100%" draggable="false" className="palette-content-list palette-scroll"
-				style={ style }
-			>
+			<div width="100%" draggable="false" className="palette-content-list palette-scroll">
 				{contentItems}
 			</div>
 		);
@@ -76,11 +70,9 @@ class PaletteContentList extends React.Component {
 PaletteContentList.propTypes = {
 	category: PropTypes.object.isRequired,
 	nodeTypeInfos: PropTypes.array.isRequired,
-	show: PropTypes.bool.isRequired,
 	canvasController: PropTypes.object.isRequired,
 	isPaletteOpen: PropTypes.bool.isRequired,
-	isLastCategory: PropTypes.bool.isRequired,
-	isEditingEnabled: PropTypes.bool.isRequired
+	isEditingEnabled: PropTypes.bool.isRequired,
 };
 
 export default PaletteContentList;

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

@@ -53,12 +53,8 @@ class PaletteDialogContentGrid extends React.Component {
 			}
 		}
 
-		const displayValue = this.props.show ? "block" : "none";
-
 		return (
-			<div width="100%" className="palette-scroll"
-				style={{ display: displayValue }}
-			>
+			<div width="100%" className="palette-scroll">
 				{gridNodes}
 			</div>
 		);
@@ -68,7 +64,6 @@ class PaletteDialogContentGrid extends React.Component {
 PaletteDialogContentGrid.propTypes = {
 	category: PropTypes.object.isRequired,
 	nodeTypes: PropTypes.array.isRequired,
-	show: PropTypes.bool.isRequired,
 	isEditingEnabled: PropTypes.bool.isRequired,
 	canvasController: PropTypes.object.isRequired
 };

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

@@ -80,27 +80,29 @@ class PaletteDialogContent extends React.Component {
 		const category = this.getSelectedCategory(this.props.paletteJSON.categories);
 		const nodeTypes = category && category.node_types ? category.node_types : [];
 		const nodeTypeInfos = nodeTypes.map((nt) =>	({ nodeType: nt, category: category }));
-
-		return (
-			<div className="palette-dialog-content" ref="palettecontent">
-				<PaletteDialogContentCategories categories={cats}
-					selectedCategory={this.state.selectedCategory}
-					categorySelectedMethod={this.categorySelected}
-				/>
-				<PaletteDialogContentGrid show={this.props.showGrid}
+		const content = this.props.showGrid
+			? (
+				<PaletteDialogContentGrid
 					category={category}
 					nodeTypes={nodeTypes}
 					canvasController={this.props.canvasController}
 					isEditingEnabled={this.props.isEditingEnabled}
-				/>
-				<PaletteContentList show={!this.props.showGrid}
+				/>)
+			: (
+				<PaletteContentList
 					category={category}
 					nodeTypeInfos={nodeTypeInfos}
 					canvasController={this.props.canvasController}
 					isPaletteOpen
-					isLastCategory={false}
 					isEditingEnabled={this.props.isEditingEnabled}
+				/>);
+		return (
+			<div className="palette-dialog-content" ref="palettecontent">
+				<PaletteDialogContentCategories categories={cats}
+					selectedCategory={this.state.selectedCategory}
+					categorySelectedMethod={this.categorySelected}
 				/>
+				{content}
 			</div>
 		);
 	}

package/src/palette/palette-flyout-content-category.jsx

@@ -17,15 +17,21 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { InlineLoading } from "carbon-components-react";
-import Icon from "../icons/icon.jsx";
 import SVG from "react-inlinesvg";
-import { TIP_TYPE_PALETTE_CATEGORY, CANVAS_CARBON_ICONS } from "../common-canvas/constants/canvas-constants.js";
+import { TIP_TYPE_PALETTE_CATEGORY } from "../common-canvas/constants/canvas-constants.js";
 import { get } from "lodash";
+import { AccordionItem } from "carbon-components-react";
+import PaletteContentList from "./palette-content-list.jsx";
+
 
 class PaletteFlyoutContentCategory extends React.Component {
 	constructor(props) {
 		super(props);
 
+		this.state = {
+			isOpen: false
+		};
+
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
 		this.categorySelected = this.categorySelected.bind(this);
@@ -63,7 +69,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 			description = this.props.category.loading_text;
 		}
 
-		const content = (
+		const titleLoadingObj = (
 			<div className="palette-flyout-category">
 				<div className="palette-flyout-category-item-loading">
 					<InlineLoading
@@ -78,39 +84,45 @@ class PaletteFlyoutContentCategory extends React.Component {
 				</div>
 			</div>
 		);
+
+		const content = (
+			<AccordionItem className="palette-loading-category" title={titleLoadingObj} />
+		);
 		return content;
 	}
 
+	// Returns the category object for a regular category.
 	getRenderCategory() {
-		let caretClassName = "palette-flyout-category-caret";
-		if (!this.props.isPaletteOpen) {
-			caretClassName += " palette-flyout-category-caret-closed"; // When palette is closed extra style
-		}
-
-		let caretImage = null;
-		if (this.props.itemCount > 0 || this.props.category.empty_text) {
-			caretImage = this.props.isCategorySelected
-				? <Icon type={CANVAS_CARBON_ICONS.CHEVRONARROWS.UP} className={caretClassName} />
-				: <Icon type={CANVAS_CARBON_ICONS.CHEVRONARROWS.DOWN} className={caretClassName} />;
-		}
+		const titleObj = this.getTitleObj();
+		const content = this.getContent();
+		return (
+			<AccordionItem title={titleObj} onHeadingClick={({ isOpen }) => this.setState({ isOpen })}>
+				{content}
+			</AccordionItem>
+		);
+	}
 
-		let itemImage = null;
-		if (this.props.category.image && this.props.category.image !== "") {
-			if (this.props.category.image.endsWith(".svg")) {
-				itemImage = (
-					<div>
-						<SVG src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
-					</div>
-				);
-			} else {
-				itemImage = (
-					<div>
-						<img src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
-					</div>
-				);
-			}
-		}
+	// Returns the title object for the category consisting of the image and text.
+	getTitleObj() {
+		const itemImage = this.getItemImage();
+		const itemText = this.getItemText();
+		return (
+			<div className="palette-flyout-category"
+				data-id={get(this.props.category, "id", "")}
+				onClick={this.categorySelected}
+				value={this.props.category.label}
+				onMouseOver={this.onMouseOver}
+				onMouseLeave={this.onMouseLeave}
+			>
+				<div className="palette-flyout-category-item">
+					{itemImage}
+					{itemText}
+				</div></div>
+		);
+	}
 
+	// Returns the text for the category
+	getItemText() {
 		let itemText = null;
 		const label = this.getDisplayLabel();
 		if (this.props.isPaletteOpen === true) {
@@ -131,23 +143,50 @@ class PaletteFlyoutContentCategory extends React.Component {
 				</span>
 			);
 		}
+		return itemText;
+	}
 
-		const content = (
-			<div className="palette-flyout-category"
-				data-id={get(this.props.category, "id", "")}
-				onClick={this.categorySelected}
-				value={this.props.category.label}
-				onMouseOver={this.onMouseOver}
-				onMouseLeave={this.onMouseLeave}
-			>
-				<div className="palette-flyout-category-item">
-					{itemImage}
-					{itemText}
-				</div>
-				{caretImage}
-			</div>
-		);
-		return content;
+	// Returns the image for the category
+	getItemImage() {
+		let itemImage = null;
+		if (this.props.category.image && this.props.category.image !== "") {
+			if (this.props.category.image.endsWith(".svg")) {
+				itemImage = (
+					<div>
+						<SVG src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
+					</div>
+				);
+			} else {
+				itemImage = (
+					<div>
+						<img src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
+					</div>
+				);
+			}
+		}
+		return itemImage;
+	}
+
+	// Returns the content object for the AccordionItem. This is only set to
+	// something if the category is open (that is: isOpen is true). It is useful
+	// to remove the nodes from the DOM when the category is closed because this
+	// can help inline SVG icons on the canvas, that reference elements in the
+	// <defs> element, to appear correclty.
+	getContent() {
+		if (this.state.isOpen) {
+			const nodeTypeInfos = this.props.category.node_types.map((nt) => ({ nodeType: nt, category: this.props.category }));
+			return (
+				<PaletteContentList
+					key={this.props.category.id + "-nodes"}
+					category={this.props.category}
+					nodeTypeInfos={nodeTypeInfos}
+					canvasController={this.props.canvasController}
+					isPaletteOpen={this.props.isPaletteOpen}
+					isEditingEnabled={this.props.isEditingEnabled}
+				/>
+			);
+		}
+		return null;
 	}
 
 	categorySelected() {
@@ -155,24 +194,18 @@ class PaletteFlyoutContentCategory extends React.Component {
 	}
 
 	render() {
-		let content = null;
-		if (this.props.category.loading_text) {
-			content = this.getInlineLoadingRenderCategory();
-		} else {
-			content = this.getRenderCategory();
-		}
-
-		return content;
+		return this.props.category.loading_text
+			? this.getInlineLoadingRenderCategory()
+			: this.getRenderCategory();
 	}
 }
 
 PaletteFlyoutContentCategory.propTypes = {
 	category: PropTypes.object.isRequired,
-	isCategorySelected: PropTypes.bool.isRequired,
 	categorySelectedMethod: PropTypes.func.isRequired,
-	itemCount: PropTypes.number.isRequired,
 	canvasController: PropTypes.object.isRequired,
-	isPaletteOpen: PropTypes.bool.isRequired
+	isPaletteOpen: PropTypes.bool.isRequired,
+	isEditingEnabled: PropTypes.bool.isRequired,
 };
 
 export default PaletteFlyoutContentCategory;

package/src/palette/palette-flyout-content.jsx

@@ -20,9 +20,10 @@ import { debounce } from "lodash";
 import { getFilteredNodeTypeInfos } from "./palette-flyout-utils.js";
 import PaletteFlyoutContentCategory from "./palette-flyout-content-category.jsx";
 import PaletteFlyoutContentSearch from "./palette-flyout-content-search.jsx";
-import PaletteContentList from "./palette-content-list.jsx";
 import PaletteFlyoutContentFilteredList from "./palette-flyout-content-filtered-list.jsx";
 import Logger from "../logging/canvas-logger.js";
+import { Accordion } from "carbon-components-react";
+
 
 const logger = new Logger("PaletteFlyoutContent");
 
@@ -71,41 +72,20 @@ class PaletteFlyoutContent extends React.Component {
 		const contentDivs = [];
 		for (let idx = 0; idx < categories.length; idx++) {
 			const category = categories[idx];
-			const isLastCategory = idx === categories.length - 1;
-			const nodeTypeInfos = category.node_types.map((nt) => ({ nodeType: nt, category: category }));
-			const isCategorySelected = this.isCategorySelected(category.id);
-
-			let content = null;
-			if (isCategorySelected) {
-				content = (
-					<PaletteContentList
-						key={category.label + "-nodes"}
-						show
-						category={category}
-						nodeTypeInfos={nodeTypeInfos}
-						canvasController={this.props.canvasController}
-						isPaletteOpen={this.props.isPaletteOpen}
-						isLastCategory={isLastCategory}
-						isEditingEnabled={this.props.isEditingEnabled}
-					/>);
-			}
-
 			contentDivs.push(
 				<div key={category.label + "-container"}>
 					<PaletteFlyoutContentCategory
 						key={category.id}
 						category={category}
-						isCategorySelected={isCategorySelected}
 						categorySelectedMethod={this.categorySelected}
-						itemCount={nodeTypeInfos.length}
 						canvasController={this.props.canvasController}
 						isPaletteOpen={this.props.isPaletteOpen}
+						isEditingEnabled={this.props.isEditingEnabled}
 					/>
-					{content}
 				</div>
 			);
 		}
-		return contentDivs;
+		return <Accordion>{contentDivs}</Accordion>;
 	}
 
 	getFilteredContentDivs(categories) {