@elyra/canvas 12.36.0 → 12.38.0

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

@@ -131,6 +131,11 @@ export default class PropertiesController {
 		return get(this.propertiesConfig, "locale", DEFAULT_LOCALE);
 	}
 
+	// Return the id of top-level active tab or accordion
+	getTopLevelActiveGroupId() {
+		return this.propertiesStore.getActiveTab();
+	}
+
 	isTearsheetContainer() {
 		return this.propertiesConfig.containerType === "Tearsheet";
 	}

package/src/context-menu/common-context-menu.jsx

@@ -17,21 +17,22 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { MenuItem, SubMenu } from "react-contextmenu";
 import { ChevronRight16 } from "@carbon/icons-react";
 import ColorPicker from "../color-picker";
 
 // context-menu sizing
-const CONTEXT_MENU_WIDTH = 160; // see context-menu.css .react-context-menu margin
-const CONTEXT_MENU_LINK_HEIGHT = 30; // see context-menu.css .react-context-menu-item height
-const CONTEXT_MENU_DIVIDER_HEIGHT = 1; // see context-menu.css .react-context-menu-item height
+const CONTEXT_MENU_WIDTH = 160; // See context-menu.scss
+const CONTEXT_MENU_LINK_HEIGHT = 30; // See context-menu.scss
+const CONTEXT_MENU_DIVIDER_HEIGHT = 1; // See context-menu.scss
 const EXTRA_OFFSET = 5; // Extra offset for vertical menu positioning
 
 
 class CommonContextMenu extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {};
+		this.state = {
+			displaySubMenuAction: ""
+		};
 		this.itemSelected = this.itemSelected.bind(this);
 		this.colorClicked = this.colorClicked.bind(this);
 	}
@@ -53,6 +54,7 @@ class CommonContextMenu extends React.Component {
 		this.props.contextHandler("colorSelectedObjects", { color });
 	}
 
+	// Returns the size of the menu passed in.
 	calculateMenuSize(menu) {
 		var numDividers = 0;
 		for (let i = 0; i < menu.length; ++i) {
@@ -101,6 +103,7 @@ class CommonContextMenu extends React.Component {
 		return menuPos;
 	}
 
+	// Returns true of all the items in a sub-menu are disabled.
 	areAllSubmenuItemsDisabled(submenuItems) {
 		let itemCount = 0;
 		let disabledCount = 0;
@@ -115,11 +118,8 @@ class CommonContextMenu extends React.Component {
 		return disabledCount === itemCount;
 	}
 
+	// Builds a new menu based on the menu defintion passed in.
 	buildMenu(menuDefinition, menuSize, menuPos, canvasRect) {
-		const customDivider = {
-			className: "contextmenu-divider"
-		};
-
 		const menuItems = [];
 
 		let runningYPos = 0;
@@ -134,7 +134,7 @@ class CommonContextMenu extends React.Component {
 
 			if (divider) {
 				if (!previousDivider) {
-					menuItems.push(<MenuItem attributes={customDivider} key={i + 1} onClick={() => {}} divider />);
+					menuItems.push(<div key={i + 1} className={"context-menu-divider"} />);
 					runningYPos += CONTEXT_MENU_DIVIDER_HEIGHT;
 					previousDivider = true;
 				}
@@ -152,7 +152,7 @@ class CommonContextMenu extends React.Component {
 
 			} else if (submenu) {
 				previousDivider = false;
-				const disabled = { disabled: this.areAllSubmenuItemsDisabled(menuDefinition[i].menu) };
+				const disabled = this.areAllSubmenuItemsDisabled(menuDefinition[i].menu);
 				const subMenuSize = this.calculateMenuSize(menuDefinition[i].menu);
 				const subMenuContent = this.buildMenu(menuDefinition[i].menu, menuSize, menuPos, canvasRect);
 
@@ -164,12 +164,18 @@ class CommonContextMenu extends React.Component {
 
 			} else {
 				previousDivider = false;
-				const disabled = { disabled: menuDefinition[i].enable === false };
-				menuItems.push(
-					<MenuItem onClick={this.itemSelected.bind(null, menuDefinition[i].action)} key={i + 1} {...disabled}>
+				const className = "context-menu-item" +
+					(menuDefinition[i].enable === false ? " disabled" : "");
+
+				const onClickFunction = menuDefinition[i].enable === false
+					? null
+					: this.itemSelected.bind(null, menuDefinition[i].action);
+
+				menuItems.push((
+					<div key={i + 1} className={className} onClick={onClickFunction} role="menuitem">
 						{menuDefinition[i].label}
-					</MenuItem>
-				);
+					</div>
+				));
 				runningYPos += CONTEXT_MENU_LINK_HEIGHT;
 			}
 		}
@@ -182,20 +188,39 @@ class CommonContextMenu extends React.Component {
 		);
 	}
 
+	subMenuMouseEnter(action) {
+		this.setState({ displaySubMenuAction: action });
+	}
+
+	subMenuMouseLeave(action) {
+		this.setState({ displaySubMenuAction: "" });
+	}
+
+	// Builds a sub-menu for the menuitem identified by the index into the menudefintion.
 	buildSubMenu(menuDefinition, index, subMenuContent, runningYPos, menuPos,
 		menuSize, subMenuSize, canvasRect, disabled) {
 		const rtl = this.buildRtlState(menuPos, menuSize, subMenuSize, canvasRect);
-		const subMenuPosStyle = this.buildSubMenuPosStyle(runningYPos, menuPos, subMenuSize, canvasRect);
+		const subMenuPosStyle = this.buildSubMenuPosStyle(runningYPos, menuPos, subMenuSize, canvasRect, rtl);
+		const menuItem = menuDefinition[index];
 
 		const icon = (<ChevronRight16 />);
-		const menuItem = <div>{menuDefinition[index].label}{icon} </div>;
+		const menuItemContent = <div>{menuItem.label}{icon} </div>;
+		const menuItemClass = "context-menu-item " + (disabled ? " disabled" : "");
+		const subMenuClass = "context-menu-popover context-menu-submenu" +
+			(this.state.displaySubMenuAction === menuItem.action ? " context-menu--visible" : "");
+		const onMouseEnter = (disabled ? null : this.subMenuMouseEnter.bind(this, menuItem.action));
+		const onMouseLeave = (disabled ? null : this.subMenuMouseLeave.bind(this));
 
 		return (
-			<SubMenu title={menuItem} key={index + 1} className="contextmenu-submenu" rtl={rtl} {...disabled}>
-				<div key={index + 1} style={subMenuPosStyle} className="context-menu-popover">
+			<div key={index + 1} className={menuItemClass} aria-haspopup role="menuitem"
+				onMouseEnter={onMouseEnter}
+				onMouseLeave={onMouseLeave}
+			>
+				{menuItemContent}
+				<div style={subMenuPosStyle} className={subMenuClass}>
 					{subMenuContent}
 				</div>
-			</SubMenu>
+			</div>
 		);
 	}
 
@@ -206,13 +231,14 @@ class CommonContextMenu extends React.Component {
 		// Ensure that the combined menu position, plus the menu width,
 		//  plus the submenu width, does not exceed the viewport bounds.
 		return (menuPos.x + menuSize.width + subMenuSize.width > canvasRect.right);
-
 	}
 
-	// Returns a style object that can be applied to the sub-menu to adjust
-	// its vertical (y) position. This may be necessary if the submenu is tall
-	// enough that it would be displayed off the bottom of the canvas area.
-	buildSubMenuPosStyle(runningYPos, menuPos, subMenuSize, canvasRect) {
+	// Returns a style object that can be applied to the sub-menu to adjust its:
+	// * vertical (y) position: If the submenu is tall enough that it would be
+	// displayed off the bottom of the canvas area.
+	// * horizontal (x) position: If the sub-menu needs to appear on the left
+	// side of the main menu (rtl === true).
+	buildSubMenuPosStyle(runningYPos, menuPos, subMenuSize, canvasRect, rtl) {
 		// Does the submenu go below the bottom of the viewport?
 		const y = canvasRect.bottom - (menuPos.y + runningYPos + subMenuSize.height);
 
@@ -224,6 +250,11 @@ class CommonContextMenu extends React.Component {
 		const subMenuPosStyle = {
 			top: offset + "px" // Use negative to push the menu up
 		};
+
+		if (rtl) {
+			subMenuPosStyle.left = -CONTEXT_MENU_WIDTH + "px";
+		}
+
 		return subMenuPosStyle;
 	}
 

package/src/context-menu/context-menu.scss

@@ -21,42 +21,29 @@
 	cursor: pointer;
 	min-width: 160px;
 	background-color: $ui-01;
+	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	border: 0;
 	outline: none;
-	position: absolute;
-	z-index: 2;
 	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
 	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
 	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
-}
+	position: absolute;
 
-.context-menu-popover.popover>.arrow {
-	display: none;
-}
-.context-menu-popover.popover>.popover-content {
-	padding: 0;
-}
+	// For cascaded sub-menu
+	&.context-menu-submenu {
+		top: 0;
+		left: 100%;
+		display: none;
 
-.react-contextmenu {
-	min-width: 160px;
-	text-align: left;
-	background-color: $ui-02;
-	-webkit-background-clip: padding-box;
-	background-clip: padding-box;
-	border-radius: 0.25rem;
-	outline: none;
-	display: none;
-	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
-	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
-	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
+		// Makes the cascaded sub-menu visible.
+		&.context-menu--visible {
+			display: inline-grid;
+		}
+	}
 }
 
-.react-contextmenu--visible {
-	display: inline-grid;
-}
-
-.react-contextmenu-item {
+.context-menu-item {
 	height: 30px;
 	padding: 0 1em;
 	clear: both;
@@ -67,38 +54,31 @@
 	border: 0;
 	display: flex;
 	align-items: center;
-}
+	position: relative; // Needed to allow sub-menu, if there is one,  to be positioned correctly
 
-.react-contextmenu-item.react-contextmenu-item--disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
+	&.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-.react-contextmenu-item:active,
-.react-contextmenu-item:focus,
-.react-contextmenu-item:hover {
-	background: $hover-ui;
-	text-decoration: none;
-	border: 0;
-	outline: none; /* Suppress Chrome's blue active border */
-}
+	&:active,
+	&:focus,
+	&:hover {
+		background: $hover-ui;
+		text-decoration: none;
+		border: 0;
+		outline: none; /* Suppress Chrome's blue active border */
+	}
 
-.react-contextmenu-item.react-contextmenu-submenu {
-	padding: 0;
-}
-
-.react-contextmenu-item.react-contextmenu-submenu > div {
-	padding-right: 27px;
-}
-
-/* Style for the chevron '>' in menu item that opens a submenu. */
-.react-contextmenu-item svg {
-	color: $text-01;
-	position: absolute;
-	right: 12px;
+	/* Style for the chevron '>' in menu item that opens a submenu. */
+	& svg {
+		color: $text-01;
+		position: absolute;
+		right: 12px;
+	}
 }
 
-.react-contextmenu-item.contextmenu-divider {
+.context-menu-divider {
 	height: 1px;
 	display: block;
 	overflow: hidden;

package/src/notification-panel/notification-panel.jsx

@@ -22,7 +22,7 @@ import Icon from "./../icons/icon.jsx";
 import { Button } from "carbon-components-react";
 import { Close16 } from "@carbon/icons-react";
 import Logger from "../logging/canvas-logger.js";
-import { DEFAULT_NOTIFICATION_HEADER, NOTIFICATION_ICON_CLASS } from "./../common-canvas/constants/canvas-constants.js";
+import { DEFAULT_NOTIFICATION_HEADER } from "./../common-canvas/constants/canvas-constants.js";
 import defaultMessages from "../../locales/notification-panel/locales/en.json";
 
 
@@ -37,6 +37,8 @@ class NotificationPanel extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {};
+
+		this.firstTime = true;
 		this.logger = new Logger("NotificationPanel");
 		this.handleNotificationPanelClickOutside = this.handleNotificationPanelClickOutside.bind(this);
 		this.closeNotificationPanel = this.closeNotificationPanel.bind(this);
@@ -118,20 +120,17 @@ class NotificationPanel extends React.Component {
 	handleNotificationPanelClickOutside(e) {
 		if (this.props.isNotificationOpen &&
 				this.props.notificationConfig &&
-				!this.props.notificationConfig.keepOpen) {
-			const notificationIcon = document.getElementsByClassName(NOTIFICATION_ICON_CLASS)[0];
-			const notificationHeader = document.getElementsByClassName("notification-panel-header")[0];
-			const notificationMessages = document.getElementsByClassName("notification-panel-messages-container")[0];
-
-			if (notificationIcon && !notificationIcon.contains(e.target) &&
-					notificationHeader && !notificationHeader.contains(e.target) &&
-					notificationMessages && !notificationMessages.contains(e.target)) {
-				this.props.canvasController.toolbarActionHandler("closeNotificationPanel");
-				e.stopPropagation(); // Prevent D3 canvas code from clearing the selections.
-			}
+				!this.props.notificationConfig.keepOpen &&
+				this.isClickOutsideNotificationPanel(e)) {
+			this.props.canvasController.toolbarActionHandler("closeNotificationPanel");
+			e.stopPropagation(); // Prevent D3 canvas code from clearing the selections.
 		}
 	}
 
+	isClickOutsideNotificationPanel(e) {
+		return !e.target.closest(".notification-panel");
+	}
+
 	notificationCallback(id, messageCallback) {
 		if (messageCallback) {
 			messageCallback(id);
@@ -160,7 +159,10 @@ class NotificationPanel extends React.Component {
 			return null;
 		}
 
-		const notificationPanelClassName = this.props.isNotificationOpen ? "" : "panel-hidden";
+		let notificationPanelClassName = this.props.isNotificationOpen ? "" : "panel-hidden";
+		notificationPanelClassName += this.firstTime ? "" : " panel-transition";
+		this.firstTime = false;
+
 		const notificationHeader = this.props.notificationConfig && this.props.notificationConfig.notificationHeader
 			? this.props.notificationConfig.notificationHeader
 			: DEFAULT_NOTIFICATION_HEADER;
@@ -231,14 +233,12 @@ class NotificationPanel extends React.Component {
 					</div>
 					{notificationSubtitle}
 				</div>
-				<div className="notification-panel-messages-container">
-					<div className="notification-panel-messages">
-						{notificationPanelMessages}
-					</div>
-					<div className="notification-panel-button-container">
-						{clearAll}
-						{secondaryButton}
-					</div>
+				<div className="notification-panel-messages">
+					{notificationPanelMessages}
+				</div>
+				<div className="notification-panel-button-container">
+					{clearAll}
+					{secondaryButton}
 				</div>
 			</div>
 		</div>);

package/src/notification-panel/notification-panel.scss

@@ -15,39 +15,46 @@
  */
 
 $notification-panel-header-height: 33px;
-$notification-panel-subtitle-height: 20px;
 $notification-message-height: 48px;
 $notification-left-border-color-width: 4px;
 $notification-panel-button-container-height: 49px;
-$notification-panel-header-container-height: $notification-panel-header-height + $notification-panel-subtitle-height + 32px;
 $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 
 // This section adds an ease-in ease-out effect for the notification-panel-container
 .notification-panel-container {
-	transition: 0.25s ease-in-out;
 	opacity: 1;
 	margin-top: 0;
 	z-index: 2; // Ensure panel appears on top of bottom panel.
 
 	&.panel-hidden {
-		transition: 0.25s ease-in-out;
 		display: block;
 		opacity: 0;
 		visibility: hidden;
 	}
+
+	&.panel-transition {
+		transition: 0.25s ease-in-out;
+	}
 }
 
 .notification-panel {
 	position: absolute;
-	width: 320px;
-	height: 100%;
-	max-height: 635px;
-	right: 0;
 	top: $toolbar-button-height;
+	right: 0;
+
+	width: 320px;
+	height: fit-content;
+	min-height: calc(#{$notification-panel-header-height} + #{$notification-panel-button-container-height} + #{$notification-message-height});
+	max-height: calc(100% - 53px);
+
+	display: grid;
+	flex-direction: column;
+	grid-template-rows: auto 1fr auto;
 }
 
 .notification-panel-header-container {
 	min-height: $notification-panel-header-height;
+	height: fit-content;
 	width: inherit;
 	background-color: $ui-01;
 	display: flex;
@@ -84,18 +91,12 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 	font-weight: 400;
 }
 
-.notification-panel-messages-container {
-	width: inherit;
-	max-height: calc(100% - #{$notification-panel-header-height} - #{$notification-panel-subtitle-height});
-	height: 100%;
-}
 .notification-panel-messages {
-	max-height: calc(100% - #{$notification-panel-header-container-height} - #{$notification-panel-button-container-height});
-	height: fit-content;
 	overflow-y: auto;
 	line-height: normal;
 	background-color: $ui-01;
 	border: 1px solid $ui-03;
+	max-height: 448px;
 	.notifications-button-container {
 		border-bottom: 1px solid $ui-03;
 		min-height: $notification-message-height;

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

@@ -87,7 +87,7 @@ class PaletteContentListItem extends React.Component {
 	}
 
 	onDoubleClick() {
-		if (this.props.canvasController.createAutoNode) {
+		if (this.props.canvasController.createAutoNode && !this.isItemDisabled()) {
 			const nodeTemplate = this.props.canvasController.convertNodeTemplate(this.props.nodeTypeInfo.nodeType);
 			this.props.canvasController.createAutoNode(nodeTemplate);
 		}
@@ -233,6 +233,21 @@ class PaletteContentListItem extends React.Component {
 		return highlightedElements;
 	}
 
+	// Returns the class to be applied to the main div for this palette
+	// item depending on whether we are displaying search results (or not)
+	// and if there is a special palette class specified (or not).
+	getMainDivClass() {
+		const paletteClass = this.props.nodeTypeInfo?.nodeType?.app_data?.ui_data?.palette_class_name;
+
+		let mainDivClass = this.props.isDisplaySearchResult
+			? "palette-list-item search-result"
+			: "palette-list-item";
+
+		mainDivClass += (paletteClass ? " " + paletteClass : "");
+
+		return mainDivClass;
+	}
+
 	showFullDescription() {
 		this.setState({ showFullDescription: true });
 	}
@@ -241,14 +256,17 @@ class PaletteContentListItem extends React.Component {
 		this.setState({ showFullDescription: false });
 	}
 
-	imageDrag() {
-		return false;
+	// Returns true if this item is disabled and should not be draggable or double-clicked
+	// from the palette.
+	isItemDisabled() {
+		const disabled = this.props.nodeTypeInfo.nodeType?.app_data?.ui_data?.palette_disabled;
+		return !this.props.isEditingEnabled || disabled;
 	}
 
 	render() {
 		let itemText = null;
 		let labelText = get(this.props, "nodeTypeInfo.nodeType.app_data.ui_data.label", "");
-		let draggable = this.props.isEditingEnabled ? "true" : "false";
+		let draggable = this.isItemDisabled() ? "false" : "true";
 		let icon = null;
 
 		if (has(this.props.nodeTypeInfo.nodeType, "app_data.ui_data.image")) {
@@ -287,9 +305,7 @@ class PaletteContentListItem extends React.Component {
 			icon = (<Icon type={CANVAS_CARBON_ICONS.WARNING_UNFILLED} className="palette-list-item-icon-warning" draggable="false" />);
 		}
 
-		const mainDivClass = this.props.isDisplaySearchResult
-			? "palette-list-item search-result"
-			: "palette-list-item";
+		const mainDivClass = this.getMainDivClass();
 
 		const categoryLabel = this.props.isDisplaySearchResult
 			? (<div className={"palette-list-item-category-label"}>{this.getHighlightedCategoryLabel()}</div>)