elyra-ai#1627 Cannot edit nodes below the notification panel (elyra-a…

…i#1628) Signed-off-by: srikant <[email protected]>
srikant-ch5 · Dec 14, 2023 · 17f6eec · 17f6eec
1 parent 0c93b37
commit 17f6eec
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 33 deletions.
diff --git a/canvas_modules/common-canvas/src/notification-panel/notification-panel.jsx b/canvas_modules/common-canvas/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>);

diff --git a/canvas_modules/common-canvas/src/notification-panel/notification-panel.scss b/canvas_modules/common-canvas/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;