#1968 Canvas background context toolbar should disappear when mouse c… (

#1969)

canvas_modules/common-canvas/src/common-canvas/common-canvas.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-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.
@@ -126,11 +126,18 @@ $panel-border-color: $border-subtle-01;
 .text-toolbar,
 .context-toolbar  {
 	position: absolute;
-	// top and left will be calculated and set for the text toolbar programmatically
-	// top, left and width will be calculated and set for the context toolbar programmatically
+	// For text toolbar - top and left will be calculated and set programmatically
+	// For context toolbar - top, left and width will be calculated and set programmatically.
+	// 'width' is set for the context toolbar because the overflow button must be forced to
+	// appear by setting the width approriately (see cc-context-toolbar.jsx).
 	top: 0;
 	left: 0;
 	width: fit-content;
+	// This bottom border allows the canvas context toolbar to disappear, if the mouse
+	// cursor is immediately moved away from the toolbar, after it opens. That's because,
+	// when the toolbar opens, the border will be underneath the mouse cursor and so the
+	// mouseLeave event is fired when the cursor is moved away.
+	border-bottom: 4px solid transparent;
 
 	.toolbar-div {
 		// Position the div 'relative' to text-toolbar so we can animate its

canvas_modules/harness/cypress/e2e/canvas/context-toolbar.cy.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright 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.
+ * 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.
+ */
+
+describe("Test of context toolbar", function() {
+	beforeEach(() => {
+		cy.viewport(1400, 650);
+		cy.visit("/");
+		cy.setCanvasConfig({ "selectedContextToolbar": true });
+		cy.openCanvasPalette("modelerPalette.json");
+		cy.openCanvasDefinition("commentColorCanvas.json");
+	});
+
+	it("Test context toolbar appears for a comment and node", function() {
+		// Test the context toolbar appears OK for a comment
+		cy.hoverOverComment(" comment 1");
+		cy.verifyContextToolbarPosition("163px", "69px");
+
+		// The comment should have two non-overflow toolbar items.
+		cy.verifyContextToolbarNonOverflowItems(2);
+
+		// Test the context toolbar appears OK for a node
+		cy.hoverOverNode("DRUG1n");
+		cy.verifyContextToolbarPosition("99px", "185px");
+
+		// The node should have one non-overflow toolbar item.
+		cy.verifyContextToolbarNonOverflowItems(1);
+	});
+
+	it("Test click on context toolbar button works OK", function() {
+		// Make the context toolbar appears for a node
+		cy.hoverOverNode("DRUG1n");
+
+		// See if click on Delete button works.
+		cy.verifyNumberOfNodes(6);
+		cy.clickContextToolbarButton("deleteSelectedObjects");
+		cy.verifyNumberOfNodes(5);
+	});
+
+	it("Test click on context toolbar overflow menu works OK", function() {
+		cy.hoverOverNode("DRUG1n");
+
+		// Open the overflow menu
+		cy.clickContextToolbarOverflowButton();
+
+		// See if we can click the disconnect option in the overflow menu
+		cy.verifyNumberOfLinks(8);
+		cy.clickOptionFromContextToolbarOverflow("Disconnect");
+		cy.verifyNumberOfLinks(7);
+	});
+
+	it("Test moving mouse cursor away from canvas context toolbar removes the toolbar", function() {
+		// Right click on the canvas should display the canvas context toolbar
+		cy.rightClickToDisplayContextMenu(380, 100);
+		cy.verifyContextToolbarPosition("348px", "66px");
+
+		// Move the mouse away from the context menu which should make it disappear
+		cy.moveOutOfContextToolbar(380, 150);
+
+		// Check to make sure context toolbar has been removed.
+		cy.verifyContextToolbarNotVisible();
+	});
+});

canvas_modules/harness/cypress/support/canvas/comments-cmds.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-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.
@@ -331,3 +331,11 @@ Cypress.Commands.add("selectTextInComment", (textToSelect, commentText) => {
 			tas[0].setSelectionRange(start, end);
 		});
 });
+
+Cypress.Commands.add("hoverOverComment", (commentText) => {
+	cy.getCommentWithText(commentText)
+		.trigger("mouseenter");
+	cy.getCommentWithText(commentText)
+		.trigger("mouseover");
+});
+

canvas_modules/harness/cypress/support/canvas/context-toolbar-cmds.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright 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.
+ * 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.
+ */
+
+
+Cypress.Commands.add("clickContextToolbarOverflowButton", () => {
+	cy.getContextToolbarOverflowItem().click();
+});
+
+Cypress.Commands.add("getContextToolbarOverflowItem", () => {
+	cy.findOverflowItem(cy.getContextToolbar());
+});
+
+Cypress.Commands.add("clickContextToolbarButton", (optionName) => {
+	cy.getOptionFromContextToolbar(optionName).click();
+});
+
+Cypress.Commands.add("getOptionFromContextToolbar", (optionName) => {
+	cy.getContextToolbar()
+		.find(".toolbar-item." + optionName + "-action")
+		.first();
+});
+
+Cypress.Commands.add("clickOptionFromContextToolbarOverflow", (optionName) => {
+	cy.getOptionFromContextToolbarOverflow(optionName).click();
+});
+
+Cypress.Commands.add("getOptionFromContextToolbarOverflow", (optionName) => {
+	cy.getContextToolbar()
+		.find(".toolbar-popover-list")
+		.find(".toolbar-sub-menu-item")
+		.then((options) => {
+			for (let idx = 0; idx < options.length; idx++) {
+				if (options[idx].outerText === optionName) {
+					return options[idx];
+				}
+			}
+			return null;
+		});
+});
+
+Cypress.Commands.add("moveOutOfContextToolbar", (xPos, yPos) => {
+	// Note: react uses mouseout even though cc-context-toolbar is listening to mouseleave.
+	cy.get(".context-toolbar")
+		.trigger("mouseout", xPos, yPos, { force: true });
+});
+
+Cypress.Commands.add("getContextToolbar", () => {
+	cy.get(".context-toolbar");
+});
+

canvas_modules/harness/cypress/support/canvas/node-cmds.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-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.
@@ -210,7 +210,8 @@ Cypress.Commands.add("rightClickTargetPortOfNode", (nodeName, trgPortId) => {
 
 Cypress.Commands.add("hoverOverNode", (nodeName) => {
 	cy.getNodeWithLabel(nodeName)
-		.trigger("mouseenter")
+		.trigger("mouseenter");
+	cy.getNodeWithLabel(nodeName)
 		.trigger("mouseover");
 });
 

canvas_modules/harness/cypress/support/canvas/toolbar-cmds.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-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.
@@ -124,27 +124,11 @@ Cypress.Commands.add("clearAllNotificationMessages", () => {
 });
 
 Cypress.Commands.add("clickToolbarOverflow", () => {
-	cy.getToolbarOverflowItem().click();
-});
-
-
-Cypress.Commands.add("getToolbarOverflowItem", () => {
-	cy.getCanvasToolbar()
-		.find(".toolbar-overflow-item")
-		.then((items) => {
-			let overflowItem = null;
-			let topRow = 0;
-			for (let i = 0; i < items.length; i++) {
-				const rect = items[i].getBoundingClientRect();
-				if (i === 0) {
-					topRow = rect.top;
-				}
-				if (rect.top === topRow) {
-					overflowItem = items[i];
-				}
-			}
-			return overflowItem;
-		});
+	cy.getCanvasToolbarOverflowItem().click();
+});
+
+Cypress.Commands.add("getCanvasToolbarOverflowItem", () => {
+	cy.findOverflowItem(cy.getCanvasToolbar());
 });
 
 Cypress.Commands.add("getToolbarActionInOverflowMenu", (action) => {

canvas_modules/harness/cypress/support/canvas/utils-cmds.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-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.
@@ -92,3 +92,41 @@ export function extractTransformValues(transform) {
 
 	return { x: 0, y: 0, k: 1 };
 }
+
+Cypress.Commands.add("findOverflowItem", (bar) => {
+	bar
+		.find(".toolbar-overflow-item")
+		.then((items) => {
+			let overflowItem = null;
+			let topRow = 0;
+			for (let i = 0; i < items.length; i++) {
+				const rect = items[i].getBoundingClientRect();
+				if (i === 0) {
+					topRow = rect.top;
+				}
+				if (rect.top === topRow) {
+					overflowItem = items[i];
+				}
+			}
+			return overflowItem;
+		});
+});
+
+
+// Returns an array of items frm the array passed in that are
+// on thw top row of the toolbar.
+export function getToolbarTopRowItems(items) {
+	const topRowItems = [];
+	let topRow = 0;
+	for (let i = 0; i < items.length; i++) {
+		const rect = items[i].getBoundingClientRect();
+		if (i === 0) {
+			topRow = rect.top;
+		}
+		if (rect.top === topRow) {
+			topRowItems.push(items[i]);
+		}
+	}
+	return topRowItems;
+}
+

canvas_modules/harness/cypress/support/canvas/verification-cmds.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-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.
@@ -16,7 +16,7 @@
 /* eslint max-len: "off" */
 
 import * as testUtils from "../../utils/eventlog-utils";
-import { extractTransformValues } from "./utils-cmds.js";
+import { extractTransformValues, getToolbarTopRowItems } from "./utils-cmds.js";
 
 const mainCanvasSelector = "#canvas-div-0 > #d3-svg-canvas-div-0 > .svg-area > .d3-canvas-group > .d3-nodes-links-group > ";
 const dataLinkSelector = mainCanvasSelector + ".d3-link-group.d3-data-link .d3-link-line";
@@ -602,6 +602,10 @@ Cypress.Commands.add("verifyNumberOfSelectedObjects", (noOfSelectedObjects) => {
 		});
 });
 
+Cypress.Commands.add("verifyOptionInContextToolbar", (optionName) => {
+	cy.getOptionFromContextToolbar(optionName).should("have.length", 1);
+});
+
 Cypress.Commands.add("verifyOptionInContextMenu", (optionName) => {
 	cy.getOptionFromContextMenu(optionName).should("have.length", 1);
 });
@@ -624,6 +628,33 @@ Cypress.Commands.add("verifyContextMenuPosition", (distFromLeft, distFromTop) =>
 		});
 });
 
+Cypress.Commands.add("verifyContextToolbarPosition", (distFromLeft, distFromTop) => {
+	cy.get(".context-toolbar").first()
+		.invoke("css", "left")
+		.then((cssValue) => {
+			cy.verifyPixelValueInCompareRange(distFromLeft, cssValue);
+		});
+	cy.get(".context-toolbar").first()
+		.invoke("css", "top")
+		.then((cssValue) => {
+			cy.verifyPixelValueInCompareRange(distFromTop, cssValue);
+		});
+});
+
+Cypress.Commands.add("verifyContextToolbarNotVisible", () => {
+	cy.get(".context-toolbar")
+		.should("not.exist");
+});
+
+Cypress.Commands.add("verifyContextToolbarNonOverflowItems", (noOfItems) => {
+	cy.get(".context-toolbar")
+		.find(".toolbar-item")
+		.then((items) => {
+			const topRowItems = getToolbarTopRowItems(items);
+			expect(topRowItems.length).equal(noOfItems);
+		});
+});
+
 Cypress.Commands.add("verifySubmenuPushedUpBy", (distFromTop) => {
 	// last() returns context submenu
 	cy.get(".context-menu-popover").last()

canvas_modules/harness/cypress/support/e2e.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-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.
@@ -19,6 +19,7 @@ import "./properties/properties-cmds";
 import "./properties/properties-verification-cmds";
 import "./canvas/comments-cmds";
 import "./canvas/context-menu-cmds";
+import "./canvas/context-toolbar-cmds";
 import "./canvas/keyboard-cmds";
 import "./canvas/link-cmds";
 import "./canvas/node-cmds";