#2128 Toggle buttons controlling Notification Panel not working in Te… (

#2129) Signed-off-by: CTomlyn <[email protected]>
elyra-ai · Aug 30, 2024 · e57f393 · e57f393
1 parent 52e740e
commit e57f393
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx
@@ -89,7 +89,9 @@ class ToolbarActionItem extends React.Component {
 
 	clickOutside(evt) {
 		if (this.isSubAreaDisplayed()) {
-			const items = document.getElementsByClassName(this.generateActionName());
+			const toolbarSelector = `.toolbar-div[instanceid='${this.props.instanceId}']`;
+			const toolbarElement = document.querySelector(toolbarSelector);
+			const items = toolbarElement.getElementsByClassName(this.generateActionName());
 			const isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;
 
 			if (!isOver && !this.props.actionObj.leaveSubAreaOpenOnClickOutside) {

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu-item.jsx
@@ -61,7 +61,9 @@ class ToolbarSubMenuItem extends React.Component {
 
 	clickOutside(evt) {
 		if (this.state.subAreaDisplayed) {
-			const items = document.getElementsByClassName(this.generateActionName());
+			const toolbarSelector = `.toolbar-div[instanceid='${this.props.instanceId}']`;
+			const toolbarElement = document.querySelector(toolbarSelector);
+			const items = toolbarElement.getElementsByClassName(this.generateActionName());
 			const isOver = items?.length > 0 ? items[0].contains(evt.target) : false;
 
 			if (!isOver && !this.props.actionObj.leaveSubAreaOpenOnClickOutside) {

diff --git a/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx b/canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx
@@ -253,16 +253,10 @@ export default class SidePanelForms extends React.Component {
 		this.props.setStateValue(fieldName, notificationConfig);
 	}
 
-	notificationConfigToggle(value, control) {
-		let id = control;
-		let fieldName = "notificationConfig";
-		if (id.slice(-1) === "2") {
-			id = control.slice(0, -1);
-			fieldName = "notificationConfig2";
-		}
-		const notificationConfig = this.props.getStateValue(fieldName);
-		notificationConfig[id] = value;
-		this.props.setStateValue(notificationConfig, fieldName);
+	notificationConfigToggle(notifConfig, field, value) {
+		const configObj = this.props.getStateValue(notifConfig);
+		configObj[field] = value;
+		this.props.setStateValue(notifConfig, configObj);
 	}
 
 	exampleAppOptionChange(value) {
@@ -1563,13 +1557,13 @@ export default class SidePanelForms extends React.Component {
 				id="keepOpen" // Set ID to corresponding field in App.js state
 				labelText="Keep Notification Center Open. When enabled, clicking outside the notification center will not close it"
 				toggled={this.props.getStateValue("notificationConfig").keepOpen}
-				onToggle={(val) => this.setStateValue(val, "notificationConfig")}
+				onToggle={(val) => this.notificationConfigToggle("notificationConfig", "keepOpen", val)}
 			/>
 			<Toggle
 				id="secondaryButtonDisabled" // Set ID to corresponding field in App.js state
 				labelText="Disable the notification center secondary button"
 				toggled={this.props.getStateValue("notificationConfig").secondaryButtonDisabled}
-				onToggle={(val) => this.setStateValue(val, "secondaryButtonDisabled")}
+				onToggle={(val) => this.notificationConfigToggle("notificationConfig", "secondaryButtonDisabled", val)}
 			/>
 		</div>);
 
@@ -1616,7 +1610,7 @@ export default class SidePanelForms extends React.Component {
 				disabled={!this.props.getStateValue("selectedExtraCanvasDisplayed")}
 				labelText="Keep Notification Center Open. When enabled, clicking outside the notification center will not close it"
 				toggled={this.props.getStateValue("notificationConfig2").keepOpen}
-				onToggle={(val) => this.setStateValue(val, "notificationConfig2")}
+				onToggle={(val) => this.notificationConfigToggle("notificationConfig2", "keepOpen", val)}
 			/>
 		</div>);