@elyra/canvas 12.35.0 → 12.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.35.0",
+  "version": "12.36.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",
@@ -70,7 +70,7 @@
     "deep-freeze": "0.0.1",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.5",
-    "eslint": "7.9.0",
+    "eslint": "^7.32.0",
     "eslint-config-canvas": "file:../eslint-config-canvas",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-react": "7.21.2",

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

@@ -2045,13 +2045,15 @@ export default class CanvasController {
 	// the host app from editActionHandler. The editActionHandler method
 	// does not intercept this action.
 	createNodeFromDataAt(x, y, dropData, pipelineId) {
-		const data = dropData.data;
-		data.offsetX = x;
-		data.offsetY = y;
-		data.pipelineId = pipelineId;
-		data.editSource = "canvas";
+		if (dropData?.data) {
+			const data = dropData.data;
+			data.offsetX = x;
+			data.offsetY = y;
+			data.pipelineId = pipelineId;
+			data.editSource = "canvas";
 
-		this.editActionHandler(data);
+			this.editActionHandler(data);
+		}
 	}
 
 	canNewNodeBeDroppedOnLink(nodeType) {

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

@@ -547,9 +547,9 @@ class CanvasContents extends React.Component {
 						onDragEnter={this.dragEnter}
 						onDragLeave={this.dragLeave}
 					>
-						{stateTag}
-						{emptyCanvas}
 						{svgCanvasDiv}
+						{emptyCanvas}
+						{stateTag}
 						{contextMenu}
 						{textToolbar}
 						{dropZoneCanvas}

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

@@ -4038,7 +4038,9 @@ export default class SVGCanvasRenderer {
 
 	removeContextToolbar() {
 		this.canvasController.setMouseInObject(false);
-		setTimeout(() => this.canvasController.closeContextToolbar(), 200);
+		if (this.canvasController.isContextMenuDisplayed()) {
+			setTimeout(() => this.canvasController.closeContextToolbar(), 200);
+		}
 	}
 
 	recreateContextToolbar(d3Event, d, objType) {
@@ -6409,27 +6411,12 @@ export default class SVGCanvasRenderer {
 		handlesGrp
 			.append(this.canvasLayout.linkStartHandleObject)
 			.attr("class", (d) => "d3-link-handle-start")
-			// Use mouse down instead of click because it gets called before drag start.
-			.on("mousedown", (d3Event, d) => {
-				this.logger.log("Link start handle - mouse down");
-				if (!this.config.enableDragWithoutSelect) {
-					this.selectObjectD3Event(d3Event, d, "link");
-				}
-				this.logger.log("Link end handle - finished mouse down");
-			});
+			.call(this.attachStartHandleListeners.bind(this));
 
 		handlesGrp
 			.append(this.canvasLayout.linkEndHandleObject)
 			.attr("class", (d) => "d3-link-handle-end")
-			// Use mouse down instead of click because it gets called before drag start.
-			.on("mousedown", (d3Event, d) => {
-				this.logger.log("Link end handle - mouse down");
-				if (!this.config.enableDragWithoutSelect) {
-					this.selectObjectD3Event(d3Event, d, "link");
-				}
-				this.logger.log("Link end handle - finished mouse down");
-			});
-
+			.call(this.attachEndHandleListeners.bind(this));
 	}
 
 	// Updates the start and end link handles for the handle groups passed in.
@@ -6492,6 +6479,32 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	// Attaches any required event listeners to the start handles of the links.
+	attachStartHandleListeners(startHandles) {
+		startHandles
+			// Use mouse down instead of click because it gets called before drag start.
+			.on("mousedown", (d3Event, d) => {
+				this.logger.log("Link start handle - mouse down");
+				if (!this.config.enableDragWithoutSelect) {
+					this.selectObjectD3Event(d3Event, d, "link");
+				}
+				this.logger.log("Link end handle - finished mouse down");
+			});
+	}
+
+	// Attaches any required event listeners to the end handles of the links.
+	attachEndHandleListeners(endHandles) {
+		endHandles
+			// Use mouse down instead of click because it gets called before drag start.
+			.on("mousedown", (d3Event, d) => {
+				this.logger.log("Link end handle - mouse down");
+				if (!this.config.enableDragWithoutSelect) {
+					this.selectObjectD3Event(d3Event, d, "link");
+				}
+				this.logger.log("Link end handle - finished mouse down");
+			});
+	}
+
 	// Sets the custom inline styles on the link object passed in.
 	setLinkLineStyles(linkObj, link, type) {
 		const style = CanvasUtils.getObjectStyle(link, "line", type);

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

@@ -251,6 +251,7 @@ CommonProperties.propTypes = {
 		maxLengthForSingleLineControls: PropTypes.number,
 		convertValueDataTypes: PropTypes.bool,
 		showRequiredIndicator: PropTypes.bool,
+		showAlertsTab: PropTypes.bool,
 		locale: PropTypes.string
 	}),
 	callbacks: PropTypes.shape({
@@ -290,6 +291,7 @@ CommonProperties.defaultProps = {
 		maxLengthForSingleLineControls: 128,
 		convertValueDataTypes: false,
 		showRequiredIndicator: true,
+		showAlertsTab: true,
 		locale: DEFAULT_LOCALE
 	},
 	callbacks: {

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

@@ -87,6 +87,9 @@ class EditorForm extends React.Component {
 	}
 
 	_getMessageCountForCategory(tab) {
+		if (!this.props.showAlertsTab) {
+			return null;
+		}
 		if (tab.group === ALERT_TAB_GROUP) {
 			return " (" + this.messages.length + ")";
 		}
@@ -609,7 +612,7 @@ class EditorForm extends React.Component {
 
 	render() {
 		let uiItems = this.props.controller.getUiItems();
-		if (!isEmpty(this.messages) && uiItems[0].itemType === "primaryTabs" && uiItems[0].tabs && uiItems[0].tabs.length > 1) {
+		if (this.props.showAlertsTab && !isEmpty(this.messages) && uiItems[0].itemType === "primaryTabs" && uiItems[0].tabs && uiItems[0].tabs.length > 1) {
 			// create a new copy for uiItems object so that alerts are not added multiple times
 			uiItems = cloneDeep(uiItems);
 			uiItems[0].tabs.unshift(this.genAlertsTab(this.messages)); // add alerts tab to the beginning of the tabs array
@@ -668,6 +671,7 @@ EditorForm.propTypes = {
 	customPanels: PropTypes.array,
 	rightFlyout: PropTypes.bool,
 	categoryView: PropTypes.oneOf([CATEGORY_VIEW.ACCORDIONS, CATEGORY_VIEW.TABS]),
+	showAlertsTab: PropTypes.bool,
 	activeTab: PropTypes.string, // set by redux
 	setActiveTab: PropTypes.func, // set by redux
 	messages: PropTypes.array // set by redux

package/src/common-properties/properties-main/properties-main.jsx

@@ -517,6 +517,7 @@ class PropertiesMain extends React.Component {
 				customPanels={this.props.customPanels}
 				rightFlyout={this.props.propertiesConfig.rightFlyout}
 				categoryView={this.props.propertiesConfig.categoryView}
+				showAlertsTab={this.props.propertiesConfig.showAlertsTab !== false}
 			/>);
 
 			if (this.props.propertiesConfig.containerType === "Editing") {
@@ -630,6 +631,7 @@ PropertiesMain.propTypes = {
 		maxLengthForSingleLineControls: PropTypes.number,
 		convertValueDataTypes: PropTypes.bool,
 		showRequiredIndicator: PropTypes.bool,
+		showAlertsTab: PropTypes.bool,
 		locale: PropTypes.string
 	}),
 	callbacks: PropTypes.shape({

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

@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
-$notification-panel-header-height: 35px;
+$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
@@ -37,7 +40,8 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 .notification-panel {
 	position: absolute;
 	width: 320px;
-	height: fit-content;
+	height: 100%;
+	max-height: 635px;
 	right: 0;
 	top: $toolbar-button-height;
 }
@@ -70,7 +74,7 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 
 .notification-panel-button-container {
 	width: 100%;
-	height: 49px;
+	height: $notification-panel-button-container-height;
 	background-color: $ui-01;
 	display: flex;
 	justify-content: space-between;
@@ -82,11 +86,11 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 
 .notification-panel-messages-container {
 	width: inherit;
-	max-height: calc(100% - #{$notification-panel-header-height});
-	height: fit-content;
+	max-height: calc(100% - #{$notification-panel-header-height} - #{$notification-panel-subtitle-height});
+	height: 100%;
 }
 .notification-panel-messages {
-	max-height: 500px;
+	max-height: calc(100% - #{$notification-panel-header-container-height} - #{$notification-panel-button-container-height});
 	height: fit-content;
 	overflow-y: auto;
 	line-height: normal;

package/src/palette/palette.scss

@@ -275,18 +275,18 @@ $palette-search-container-height: 41px;
 }
 
 .palette-flyout-category-text-abbr {
-	line-height: 46px;  /* Must be same as containing div height */
+	line-height: 1.2;
 	margin-left: 0;
 }
 
 .palette-flyout-category-text-no-image {
-	line-height: 46px;  /* Must be same as containing div height */
-	margin-left: 16px;
+	line-height: 1.2;
+	margin-left: 10px;
 	width: 170px;
 }
 
 .palette-flyout-category-count {
-	line-height: 46px;  /* Must be same as containing div height */
+	line-height: 1.2;
 	padding-left: 5px;
 }