@elyra/canvas 13.0.0-alpha.1 → 13.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elyra/canvas",
-  "version": "13.0.0-alpha.1",
+  "version": "13.0.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",

package/src/command-stack/command-stack.js

@@ -51,6 +51,10 @@ export default class CommandStack {
 		return this.commands.getUndoCommands().toArray();
 	}
 
+	getAllRedoCommands() {
+		return this.commands.getRedoCommands().toArray();
+	}
+
 	// need this for validation on unit tests
 	getStack() {
 		return {

package/src/common-canvas/canvas-controller.js

@@ -128,12 +128,14 @@ export default class CanvasController {
 
 	setCanvasConfig(config) {
 		this.logger.log("Setting Canvas Config");
-		// TODO - Remove these next three lines in next major release.
-		const correctConfig = this.correctTypo(config);
-		correctConfig.enableNodeLayout =
-			CanvasUtils.convertPortPosInfo(correctConfig.enableNodeLayout);
-		this.objectModel.openPaletteIfNecessary(config);
-		this.objectModel.setCanvasConfig(correctConfig);
+		if (config) {
+			// TODO - Remove these next three lines in next major release.
+			const correctConfig = this.correctTypo(config);
+			correctConfig.enableNodeLayout =
+				CanvasUtils.convertPortPosInfo(correctConfig.enableNodeLayout);
+			this.objectModel.openPaletteIfNecessary(config);
+			this.objectModel.setCanvasConfig(correctConfig);
+		}
 	}
 
 	// Converts the config option 'enableHightlightNodeOnNewLinkDrag' (which has
@@ -1432,6 +1434,12 @@ export default class CanvasController {
 		return this.getCommandStack().getAllUndoCommands();
 	}
 
+	// Returns an array of all redoable commands currently on the
+	// command stack.
+	getAllRedoCommands() {
+		return this.getCommandStack().getAllRedoCommands();
+	}
+
 	// Returns a string which is the label that descibes the next undoable
 	// command.
 	getUndoLabel() {

package/src/common-canvas/cc-context-toolbar.jsx

@@ -25,6 +25,7 @@ import ColorPicker from "../color-picker";
 const CM_TOOLBAR_GAP = 2;
 const CM_ICON_SIZE = 32;
 const CM_ICON_PAD = 2;
+const DIVIDER_SIZE = 1;
 const ICON_SIZE_PLUS_GAP = CM_ICON_SIZE + CM_TOOLBAR_GAP;
 const PADDING = 2;
 
@@ -104,17 +105,22 @@ class CommonCanvasContextToolbar extends React.Component {
 
 	// Returns the width of the context toolbar.
 	getContextToolbarWidth(toolbarItems, overflowMenuItems) {
+		const dividers = toolbarItems.filter((i) => i.divider);
+		const dividersCount = dividers.length;
+		const dividersWidth = dividersCount * DIVIDER_SIZE;
+
 		// If there is at least one overflow item, we will need an overflow
 		// icon which will increase the toolbar items by one.
 		const overflowItemCount = overflowMenuItems.length > 0 ? 1 : 0;
-		const toolbarItemsCount = toolbarItems.length + overflowItemCount;
+		const buttonsCount = toolbarItems.length + overflowItemCount - dividersCount;
+		const buttonsWidth = (buttonsCount * (CM_ICON_SIZE + CM_ICON_PAD));
 
 		// If we have some overflow menu items, we reduce the width by five pixels
 		// which forces the overflow menu and the overflow icon to be shown. We
 		// use 5 pixels because this is how many are needed to make the toolbar
 		// work correcty with differnet browser magnificaitons.
 		const reduction = overflowMenuItems.length > 0 ? 5 : 0;
-		return (toolbarItemsCount * (CM_ICON_SIZE + CM_ICON_PAD)) - reduction;
+		return buttonsWidth + dividersWidth - reduction;
 	}
 
 	// Removes leading and trailing dividers from the items array and any
@@ -210,7 +216,7 @@ class CommonCanvasContextToolbar extends React.Component {
 		let contextToolbar = null;
 
 		if (this.props.showContextMenu) {
-			const toolbarItems = this.props.contextMenuDef.filter((cmItem) => cmItem.toolbarItem && !cmItem.divider);
+			const toolbarItems = this.props.contextMenuDef.filter((cmItem) => cmItem.toolbarItem);
 			let overflowMenuItems = this.props.contextMenuDef.filter((cmItem) => !cmItem.toolbarItem);
 			overflowMenuItems = this.removeUnnecessaryDividers(overflowMenuItems);
 			const toolbarConfig = this.getToolbarConfig({ toolbarItems, overflowMenuItems });
@@ -224,6 +230,7 @@ class CommonCanvasContextToolbar extends React.Component {
 				: pos.x - toolbarWidth;
 			let y = pos.y - ICON_SIZE_PLUS_GAP;
 
+			// Make sure the context toolbar is fully inside the viewport.
 			({ x, y } = this.adjustPosToFit(x, y, toolbarWidth, ICON_SIZE_PLUS_GAP));
 
 			contextToolbar = (

package/src/common-canvas/cc-toolbar.jsx

@@ -223,7 +223,6 @@ class CommonCanvasToolbar extends React.Component {
 
 		if (typeof toolbarConfig !== "undefined") {
 			const editingAllowed = this.props.enableEditingActions;
-			this.applyToolState("multiUndo", toolbarConfig, editingAllowed && this.props.canMultiUndo);
 			this.applyToolState("undo", toolbarConfig, editingAllowed && this.props.canUndo);
 			this.applyToolState("redo", toolbarConfig, editingAllowed && this.props.canRedo);
 			this.applyToolState("cut", toolbarConfig, editingAllowed && this.props.canCutCopy);
@@ -327,7 +326,6 @@ CommonCanvasToolbar.propTypes = {
 	notificationConfigKeepOpen: PropTypes.bool,
 	enableInternalObjectModel: PropTypes.bool,
 	enableEditingActions: PropTypes.bool,
-	canMultiUndo: PropTypes.bool,
 	canUndo: PropTypes.bool,
 	canRedo: PropTypes.bool,
 	canCutCopy: PropTypes.bool,
@@ -353,7 +351,6 @@ const mapStateToProps = (state, ownProps) => ({
 	notificationMessages: state.notifications,
 	enableInternalObjectModel: state.canvasconfig.enableInternalObjectModel,
 	enableEditingActions: state.canvasconfig.enableEditingActions,
-	canMultiUndo: ownProps.canvasController.getAllUndoCommands().length > 1,
 	canUndo: ownProps.canvasController.canUndo(),
 	canRedo: ownProps.canvasController.canRedo(),
 	canCutCopy: ownProps.canvasController.canCutCopy(),

package/src/common-canvas/common-canvas.scss

@@ -120,12 +120,6 @@ $panel-border-color: $border-subtle-01;
 			border-color: transparent;
 			box-shadow: inset 2px 2px $button-tertiary, inset -6px -2px $button-tertiary;
 		}
-		// Set padding so overflow icon appears in the center (horizontally). This
-		// offsets the 5px which are set in the code to make the overflow icon
-		// be generated correctly.
-		.toolbar-item-content {
-			padding-left: 4px;
-		}
 	}
 }
 

package/src/common-canvas/svg-canvas-renderer.js

@@ -24,7 +24,7 @@ import * as d3Fetch from "d3-fetch";
 const d3 = Object.assign({}, d3Selection, d3Fetch);
 
 const markdownIt = require("markdown-it")({
-	html: false, // Don't allow HTML to be executed in comments.
+	html: true, // Allow HTML to be executed in comments.
 	linkify: false, // Don't convert strings, in URL format, to be links.
 	typographer: true
 });
@@ -1765,7 +1765,15 @@ export default class SVGCanvasRenderer {
 	}
 
 	removeNodes(removeSel) {
-		// Remove any foreign objects for react nodes, if necessary.
+		// Remove any JSX decorations for the nodes being removed to
+		// unmount their React objects.
+		removeSel
+			.selectAll(".d3-foreign-object-dec-jsx")
+			.each((d, idx, exts) =>
+				this.externalUtils.removeExternalObject(d, idx, exts));
+
+		// Remove any foreign objects for React nodes to
+		// unmount their React objects.
 		removeSel
 			.selectChildren(".d3-foreign-object-external-node")
 			.each((d, idx, exts) =>

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Elyra Authors
+ * Copyright 2023-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,28 +25,39 @@ export default class SvgCanvasExternal {
 	}
 
 	addNodeExternalObject(node, i, foreignObjects) {
-		const container = foreignObjects[i];
-		const root = createRoot(container);
-
-		root.render(
+		const jsx = (
 			<node.layout.nodeExternalObject
 				nodeData={node}
 				canvasController={this.ren.canvasController}
 				externalUtils={this}
 			/>
 		);
+		this.renderExternalObject(jsx, foreignObjects[i]);
 	}
 
 	addDecExternalObject(dec, i, foreignObjects) {
-		const container = foreignObjects[i];
-		const root = createRoot(container);
-		root.render(dec.jsx);
+		this.renderExternalObject(dec.jsx, foreignObjects[i]);
+	}
+
+	renderExternalObject(jsx, container) {
+		if (!container.root) {
+			container.root = createRoot(container);
+		}
+		container.root.render(jsx);
 	}
 
 	removeExternalObject(obj, i, foreignObjects) {
 		const container = foreignObjects[i];
-		const root = createRoot(container);
-		root.unmount();
+		if (!container.root) {
+			container.root = createRoot(container);
+		}
+		// Unmount in Timeout to stop this warning from appearing:
+		// "Warning: Attempted to synchronously unmount a root while
+		// React was already rendering."
+		setTimeout(() => {
+			container.root.unmount();
+			container.root = null;
+		});
 	}
 
 	getActiveNodes() {

package/src/common-properties/components/editor-form/editor-form.jsx

@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { setActiveTab } from "./../../actions";
-import { Tab, Tabs, TabList, TabPanel, Link, TabPanels } from "@carbon/react";
+import { Tab, Tabs, TabList, TabPanel, Link, TabPanels, Accordion, AccordionItem } from "@carbon/react";
 import * as PropertyUtil from "./../../util/property-utils";
 import { MESSAGE_KEYS, CARBON_ICONS, CONDITION_MESSAGE_TYPE, STATES, CATEGORY_VIEW } from "./../../constants/constants";
 import { cloneDeep, isEmpty, sortBy, get, filter } from "lodash";
@@ -73,9 +73,12 @@ class EditorForm extends React.Component {
 		this.FIRST_TEARSHEET_ID = null;
 		this.TEARSHEETS = {};
 		this.visibleTearsheet = null;
+		this.defaultOpenTab = props.activeTab;
+		this.alertOpenTab = null;
 
 	}
 
+
 	shouldComponentUpdate(nextProps, nextState) {
 		if (!this.props.controller.isSummaryPanelShowing() && !this.props.controller.isSubPanelsShowing()) {
 			// only update list of error messages when no summary panel or sub-panel is shown,
@@ -120,11 +123,21 @@ class EditorForm extends React.Component {
 		if (this.props.activeTab === panelId) {
 			activeTab = "";
 		}
+		if (this.alertOpenTab === panelId) {
+			this.alertOpenTab = null;
+		}
+		if (this.defaultOpenTab === panelId) {
+			this.defaultOpenTab = null;
+		}
 		this.props.setActiveTab(activeTab);
 	}
 
 	_handleMessageClick(controlId, ev) {
 		const control = this.props.controller.getControl(controlId);
+		this.alertOpenTab = control.parentCategoryId;
+		if (this.defaultOpenTab === this.alertOpenTab) {
+			this.defaultOpenTab = null;
+		}
 		this.props.setActiveTab(control.parentCategoryId);
 	}
 
@@ -134,6 +147,7 @@ class EditorForm extends React.Component {
 
 	genPrimaryTabs(key, tabs, propertyId, indexof) {
 		const tabContent = [];
+		const tabContentAcc = [];
 		const tabLists = [];
 		const tabPanels = [];
 		let hasAlertsTab = false;
@@ -170,10 +184,8 @@ class EditorForm extends React.Component {
 				);
 			}
 			if (this.props.rightFlyout && this.props.categoryView !== CATEGORY_VIEW.TABS) {
-				let panelArrow = <Icon type={CARBON_ICONS.CHEVRONARROWS.DOWN} className="properties-category-caret-down" />;
 				let categoryOpen = false;
 				if (this.props.activeTab === tab.group) {
-					panelArrow = <Icon type={CARBON_ICONS.CHEVRONARROWS.UP} className="properties-category-caret-up" />;
 					categoryOpen = true;
 				}
 				if (tab.content.itemType !== ItemType.TEARSHEET && nonTearsheetTabs.length === 1) {
@@ -184,20 +196,20 @@ class EditorForm extends React.Component {
 						</div>
 					);
 				} else {
-					tabContent.push(
+					tabContentAcc.push(
 						<div key={this._getContainerIndex(hasAlertsTab, i) + "-" + key}
 							className={classNames("properties-category-container", { "properties-hidden-container": tab.content.itemType === ItemType.TEARSHEET })}
 						>
-							<button type="button" onClick={this._showCategoryPanel.bind(this, tab.group)}
-								className={classNames("properties-category-title", { "properties-light-enabled": this.props.controller.getLight() }) }
+							<AccordionItem title={`${tab.text}${this._getMessageCountForCategory(tab) ? this._getMessageCountForCategory(tab) : ""}`}
+								// Open Tab with Alert Message when from Alerts Tab or a open Default Tab
+								open={ this.defaultOpenTab === tab.group || this.alertOpenTab === tab.group }
+								onHeadingClick={this._showCategoryPanel.bind(this, tab.group)}
+								className={`${classNames("properties-category-content",
+									{ "show": categoryOpen })}`}
 							>
-								{tab.text}{this._getMessageCountForCategory(tab)}
-								{panelArrow}
-							</button>
-							<div className={classNames("properties-category-content", { "show": categoryOpen }) }>
 								{panelItems}
 								{additionalComponent}
-							</div>
+							</AccordionItem>
 						</div>
 					);
 				}
@@ -230,9 +242,16 @@ class EditorForm extends React.Component {
 
 		if (this.props.rightFlyout && this.props.categoryView !== CATEGORY_VIEW.TABS) {
 			return (
-				<div key={"cat." + key} className="properties-categories">
-					{tabContent}
-				</div>
+				<>
+					{tabContent.length ? (<div key={"cat." + key} className="properties-categories">
+						{tabContent}
+					</div>) : null}
+					{tabContentAcc.length ? (<Accordion size="lg">
+						<div key={"cat." + key} className="properties-categories">
+							{tabContentAcc}
+						</div>
+					</Accordion>) : null}
+				</>
 			);
 		}
 		return (

package/src/common-properties/components/editor-form/editor-form.scss

@@ -46,55 +46,53 @@ $primary-tab-height: $spacing-08;
 	}
 }
 
-.properties-category-container {
-	position: relative;
-	&:last-of-type {
-		.properties-category-content.show {
-			border-bottom: 0;
-		}
+.properties-subtabs,
+.properties-primaryTabs {
+	.cds--tabs__nav {
+		overflow-x: auto; // override carbon so scrollbar doesn't always show
 	}
 }
 
-.properties-category-title {
-	@include type-style("body-long-01");
-	text-decoration-color: $text-primary;
-	color: $text-primary;
+.properties-categories {
+	.properties-category-content .cds--accordion__content {
+		padding: $spacing-05;
 
-	height: 46px;
-	width: 100%;
+		/*  
+			Accordion Carbon Component currently doesn't support Accordions inside an Accordion
+			By default inner Accordions will be in open state and won't close on click
+		*/
 
-	display: flex;
-	background-color: $background;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0 $spacing-05;
-	border: 0; // override for button styling
-	outline: none; // override for button styling
-	border-bottom: 1px solid $layer-accent-01;
-	cursor: pointer;
-	&:hover {
-		background-color: $layer-hover-01;
-	}
-	> svg {
-		height: 20px;
-		width: 20px;
-		fill: $icon-primary;
+		// Handle Initial state where Accordion is closed to hide the content and rotate arrow to indicate the same.
+		.cds--accordion__item {
+			.cds--accordion__content {
+				display: none;
+			}
+
+			.cds--accordion__arrow {
+				transform: rotate(90deg);
+			}
+		}
+
+		// Handle Open state where Accordion is opened to show the content and rotate arrow.
+		.cds--accordion__item.cds--accordion__item--active {
+			.cds--accordion__content {
+				display: block;
+			}
+			.cds--accordion__arrow {
+				transform: rotate(270deg);
+			}
+		}
 	}
-}
 
-.properties-category-content {
-	height: 100%;
-	padding: $spacing-05;
-	border-bottom: 1px solid $layer-accent-01;
-	display: none;
-	&.show {
-		display: inherit;
+	// Remove Default borders for Accordions
+	.properties-category-content {
+		border-top: 0px;
+		border-bottom: 1px solid $layer-accent-01;
 	}
-}
 
-.properties-subtabs, .properties-primaryTabs {
-	.cds--tabs__nav {
-		overflow-x: auto; // override carbon so scrollbar doesn't always show
+	// Remove default accordion padding
+	.properties-category-content .cds--accordion__wrapper { 
+		padding: 0;
 	}
 }
 
@@ -125,7 +123,6 @@ $primary-tab-height: $spacing-08;
 .properties-link-text-container {
 	display: flex;
 	align-items: center;
-	padding: $spacing-04 0 0 0;
 	svg {
 		margin-right: $spacing-03;
 	}
@@ -143,7 +140,8 @@ $primary-tab-height: $spacing-08;
 }
 
 // Display in full height if inside a tearsheet
-.properties-editor-form.tearsheet-container, .properties-editor-form.right-flyout-tabs-view {
+.properties-editor-form.tearsheet-container,
+.properties-editor-form.right-flyout-tabs-view {
 	height: 100%;
 
 	.properties-primaryTabs {
@@ -152,7 +150,8 @@ $primary-tab-height: $spacing-08;
 		border-bottom: 1px solid $layer-accent-01;
 	}
 
-	.properties-primary-tab-panel.tearsheet-container, .properties-primary-tab-panel.right-flyout-tabs-view {
+	.properties-primary-tab-panel.tearsheet-container,
+	.properties-primary-tab-panel.right-flyout-tabs-view {
 		height: calc(100% - #{$primary-tab-height});
 		position: relative;
 		top: $primary-tab-height;

package/src/common-properties/controls/control-factory.js

@@ -23,6 +23,7 @@ import { PropertyDef } from "./../form/PropertyDef";
 import { makeControl } from "./../form/EditorForm";
 import { L10nProvider } from "./../util/L10nProvider";
 import * as ControlUtils from "./../util/control-utils";
+import { Layer } from "@carbon/react";
 
 import TextfieldControl from "./textfield";
 import ReadonlyControl from "./readonly";
@@ -346,6 +347,12 @@ export default class ControlFactory {
 			createdControl = (<ReadonlyControl {...props} />);
 		}
 
+		const createdControlLayered = (
+			<Layer level={this.controller.getLight() && control.light ? 1 : 0} className="properties-control-layer">
+				{createdControl}
+			</Layer>
+		);
+
 		/*
 		* <ControlItem /> should be called from every control.
 		* Adding this temporary condition so that we can change one control at a time.
@@ -366,12 +373,12 @@ export default class ControlFactory {
 						className
 					)}
 				>
-					{createdControl}
+					{createdControlLayered}
 					{action}
 				</div>
 			);
 		}
-		return createdControl;
+		return createdControlLayered;
 	}
 
 	/**

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { TextInput, Layer } from "@carbon/react";
+import { TextInput } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { parse, format, isValid } from "date-fns";
@@ -73,19 +73,17 @@ class DatefieldControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<TextInput
-						{...validationProps}
-						autoComplete="off"
-						id={this.id}
-						disabled={this.props.state === STATES.DISABLED}
-						placeholder={this.props.control.additionalText}
-						onChange={this.handleChange.bind(this)}
-						value={this.value}
-						labelText={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-					/>
-				</Layer>
+				<TextInput
+					{...validationProps}
+					autoComplete="off"
+					id={this.id}
+					disabled={this.props.state === STATES.DISABLED}
+					placeholder={this.props.control.additionalText}
+					onChange={this.handleChange.bind(this)}
+					value={this.value}
+					labelText={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { DatePicker, DatePickerInput, Layer } from "@carbon/react";
+import { DatePicker, DatePickerInput } from "@carbon/react";
 import classNames from "classnames";
 
 import ValidationMessage from "../../components/validation-message";
@@ -71,28 +71,26 @@ class DatepickerControl extends React.Component {
 
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<DatePicker
-						className="properties-datepicker-wrapper-parent"
-						datePickerType={DATEPICKER_TYPE.SINGLE}
-						dateFormat={this.dateFormat}
-						onChange={this.handleChange.bind(this)}
-						locale={this.locale}
-					>
-						<DatePickerInput
-							{...validationProps}
-							id={this.id}
-							className="properties-datepicker-wrapper-input"
-							placeholder={this.props.control.additionalText}
-							labelText={!this.props.tableControl && this.props.controlItem}
-							disabled={this.props.state === STATES.DISABLED}
-							size={this.getDatepickerSize()}
-							onChange={this.handleInputChange.bind(this)}
-							value={this.state.value}
-							helperText={!this.props.tableControl && helperText}
-						/>
-					</DatePicker>
-				</Layer>
+				<DatePicker
+					className="properties-datepicker-wrapper-parent"
+					datePickerType={DATEPICKER_TYPE.SINGLE}
+					dateFormat={this.dateFormat}
+					onChange={this.handleChange.bind(this)}
+					locale={this.locale}
+				>
+					<DatePickerInput
+						{...validationProps}
+						id={this.id}
+						className="properties-datepicker-wrapper-input"
+						placeholder={this.props.control.additionalText}
+						labelText={!this.props.tableControl && this.props.controlItem}
+						disabled={this.props.state === STATES.DISABLED}
+						size={this.getDatepickerSize()}
+						onChange={this.handleInputChange.bind(this)}
+						value={this.state.value}
+						helperText={!this.props.tableControl && helperText}
+					/>
+				</DatePicker>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);