#2085 Page crashes when mousing over node while submenu toolbaritem i… (

#2086) Signed-off-by: CTomlyn <[email protected]> Signed-off-by: Matt Howard <[email protected]>
elyra-ai · Aug 5, 2024 · c1b1de0 · c1b1de0
1 parent abd4be5
commit c1b1de0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu.jsx
@@ -41,7 +41,7 @@ class ToolbarSubMenu extends React.Component {
 	}
 
 	componentDidMount() {
-		if (this.props.containingDivId && this.props.subMenuActions.length > 0) {
+		if (this.props.containingDivId && this.props.subMenuActions?.length > 0) {
 			adjustSubAreaPosition(this.areaRef,
 				this.props.containingDivId, this.props.expandDirection, this.props.actionItemRect);
 		}
@@ -53,7 +53,7 @@ class ToolbarSubMenu extends React.Component {
 
 	componentDidUpdate() {
 		if (this.state.focusAction !== "subarea") {
-			const actionObj = this.props.subMenuActions.find((sma) => sma.action === this.state.focusAction);
+			const actionObj = this.props.subMenuActions?.find((sma) => sma.action === this.state.focusAction);
 			if (!actionObj?.enable) {
 				const actionToSet = this.getClosestEnabledAction(this.state.focusAction);
 				if (actionToSet !== null) {
@@ -117,18 +117,18 @@ class ToolbarSubMenu extends React.Component {
 	}
 
 	getClosestEnabledAction(action) {
-		const index = this.props.subMenuActions.findIndex((sma) => sma.action === action);
+		const index = this.props.subMenuActions?.findIndex((sma) => sma.action === action);
 		let newAction = null;
 		let indexUp = index + 1;
 		let indexDown = index - 1;
 
-		while ((indexDown > -1 || indexUp < this.props.subMenuActions.length) && newAction === null) {
+		while ((indexDown > -1 || indexUp < this.props.subMenuActions?.length) && newAction === null) {
 			if (indexDown > -1 && this.props.subMenuActions[indexDown].enable) {
 				newAction = this.props.subMenuActions[indexDown].action;
 			} else {
 				indexDown--;
 			}
-			if (indexUp < this.props.subMenuActions.length && this.props.subMenuActions[indexUp].enable) {
+			if (indexUp < this.props.subMenuActions?.length && this.props.subMenuActions[indexUp].enable) {
 				newAction = this.props.subMenuActions[indexUp].action;
 			} else {
 				indexUp++;
@@ -140,7 +140,7 @@ class ToolbarSubMenu extends React.Component {
 	getFocusableActions() {
 		const focusableActions = [];
 
-		for (let i = 0; i < this.props.subMenuActions.length; i++) {
+		for (let i = 0; i < this.props.subMenuActions?.length; i++) {
 			if (this.props.subMenuActions[i].enable || this.props.subMenuActions[i].jsx) {
 				focusableActions.push(this.props.subMenuActions[i]);
 			}
@@ -170,7 +170,7 @@ class ToolbarSubMenu extends React.Component {
 	generateSubMenuItems() {
 		const newItems = [];
 
-		for (let i = 0; i < this.props.subMenuActions.length; i++) {
+		for (let i = 0; i < this.props.subMenuActions?.length; i++) {
 			const actionObj = this.props.subMenuActions[i];
 			if (actionObj) {
 				newItems.push(this.generateSubMenuItem(actionObj, i));
@@ -214,7 +214,7 @@ class ToolbarSubMenu extends React.Component {
 	}
 
 	render() {
-		if (this.props.subMenuActions.length > 0) {
+		if (this.props.subMenuActions?.length > 0) {
 			const style = this.props.isCascadeMenu
 				? generateSubAreaStyle(this.props.expandDirection, this.props.actionItemRect)
 				: null;
@@ -234,7 +234,7 @@ class ToolbarSubMenu extends React.Component {
 }
 
 ToolbarSubMenu.propTypes = {
-	subMenuActions: PropTypes.array.isRequired,
+	subMenuActions: PropTypes.array, // subMenuActions may occasionally be null, when menu is refreshed by React.
 	instanceId: PropTypes.number.isRequired,
 	toolbarActionHandler: PropTypes.func,
 	closeSubArea: PropTypes.func,

diff --git a/canvas_modules/harness/src/client/components/custom-canvases/logic/logic-canvas.jsx b/canvas_modules/harness/src/client/components/custom-canvases/logic/logic-canvas.jsx
@@ -18,6 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import { CommonCanvas, CanvasController } from "common-canvas"; // eslint-disable-line import/no-unresolved
+import { ColorPalette } from "@carbon/react/icons";
 
 import LogicFlow from "./logic-flow.json";
 import LogicPalette from "./logic-palette.json";
@@ -44,6 +45,7 @@ export default class LogicCanvas extends React.Component {
 			enableLinkDirection: "TopBottom",
 			enableLinkSelection: "LinkOnly",
 			enableSnapToGridType: "During",
+			enableContextToolbar: true,
 			paletteInitialState: true,
 			enableInsertNodeDroppedOnLink: true,
 			enableHighlightNodeOnNewLinkDrag: true,
@@ -119,12 +121,31 @@ export default class LogicCanvas extends React.Component {
 		// Implement
 	}
 
+	contextMenuHandler(source, defaultMenu) {
+		if (source.type === "link") {
+			const subMenuColorLink = [
+				{ action: "default-color", label: "Default Color", enable: true },
+				{ action: "red-color", label: "Red", enable: true },
+				{ action: "yellow-colorr", label: "Yellow", enable: true },
+				{ action: "green-color", label: "Green", enable: true }
+			];
+
+			return [
+				{ action: "color-submenu", icon: (<ColorPalette size={32} />), label: "Color link", enable: true,
+					submenu: true, menu: subMenuColorLink, toolbarItem: true },
+				{ action: "deleteSelectedObjects", enable: true, toolbarItem: true }
+			];
+		}
+		return defaultMenu;
+	}
+
 	render() {
 		const config = this.getConfig();
 		return (
 			<CommonCanvas
 				canvasController={this.canvasController}
 				editActionHandler={this.editActionHandler}
+				contextMenuHandler={this.contextMenuHandler}
 				config={config}
 			/>
 		);