@elyra/canvas 12.37.0 → 12.39.0

package/package.json

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

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

@@ -1735,6 +1735,20 @@ export default class CanvasController {
 		this.objectModel.clearSavedZoomValues();
 	}
 
+	getViewPortDimensions() {
+		if (this.canvasContents) {
+			return this.getSVGCanvasD3().getTransformedViewportDimensions();
+		}
+		return null;
+	}
+
+	getCanvasDimensionsWithPadding() {
+		if (this.canvasContents) {
+			return this.getSVGCanvasD3().getCanvasDimensionsWithPadding();
+		}
+		return null;
+	}
+
 	// ---------------------------------------------------------------------------
 	// Utility/helper methods
 	// ---------------------------------------------------------------------------

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

@@ -196,6 +196,10 @@ export default class SVGCanvasD3 {
 		return this.renderer.getTransformedViewportDimensions();
 	}
 
+	getCanvasDimensionsWithPadding() {
+		return this.renderer.getCanvasDimensionsWithPadding();
+	}
+
 	getGhostNode(nodeTemplate) {
 		return this.renderer.getGhostNode(nodeTemplate);
 	}

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

@@ -227,6 +227,10 @@ export default class SVGCanvasRenderer {
 		return this.zoomUtils.getTransformedViewportDimensions();
 	}
 
+	getCanvasDimensionsWithPadding() {
+		return this.zoomUtils.getCanvasDimensionsWithPadding();
+	}
+
 	// Returns the data object for the parent supernode that references the
 	// active pipeline (managed by this renderer). We get the supernode by
 	// looking through the overall canvas info object.

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

@@ -136,6 +136,7 @@ class EditorForm extends React.Component {
 		const tabContent = [];
 		let hasAlertsTab = false;
 		let modalSelected = 0;
+		let hiddenTabs = 0;
 		const nonTearsheetTabs = tabs.filter((t) => t.content.itemType !== ItemType.TEARSHEET);
 		const tearsheetTabs = tabs.filter((t) => t.content.itemType === ItemType.TEARSHEET);
 		const totalTabs = tearsheetTabs.concat(nonTearsheetTabs);
@@ -144,6 +145,7 @@ class EditorForm extends React.Component {
 			const tab = totalTabs[i];
 			const tabState = this.props.controller.getPanelState({ name: tab.group });
 			if (tabState === STATES.HIDDEN) {
+				hiddenTabs++;
 				continue;
 			}
 			if (i === 0 && tab.group === ALERT_TAB_GROUP) {
@@ -198,7 +200,7 @@ class EditorForm extends React.Component {
 				}
 			} else {
 				if (this.props.activeTab === tab.group) {
-					modalSelected = i;
+					modalSelected = i - hiddenTabs; // Adjust the Carbon Tabs index to accomodate hidden tabs
 				}
 				tabContent.push(
 					<Tab

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/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";
 
 
@@ -120,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);
@@ -236,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,11 +15,9 @@
  */
 
 $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
@@ -41,15 +39,22 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 
 .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;
@@ -86,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;