From e57f393cc7cb3c650fbf79d1f29ccfb1bd021b2d Mon Sep 17 00:00:00 2001 From: CTomlyn Date: Fri, 30 Aug 2024 11:34:49 -0700 Subject: [PATCH] =?UTF-8?q?#2128=20Toggle=20buttons=20controlling=20Notifi?= =?UTF-8?q?cation=20Panel=20not=20working=20in=20Te=E2=80=A6=20(#2129)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: CTomlyn --- .../src/toolbar/toolbar-action-item.jsx | 4 +++- .../src/toolbar/toolbar-sub-menu-item.jsx | 4 +++- .../sidepanel/canvas/sidepanel-canvas.jsx | 20 +++++++------------ 3 files changed, 13 insertions(+), 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 index 705fa44021..0d97daec79 100644 --- 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 index 094096af90..d8faac4de0 100644 --- 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 index c8fec8fbdf..4f2e15ee85 100644 --- 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)} /> this.setStateValue(val, "secondaryButtonDisabled")} + onToggle={(val) => this.notificationConfigToggle("notificationConfig", "secondaryButtonDisabled", val)} /> ); @@ -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)} /> );