diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx index a4f9e64c15..74bb59364e 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx @@ -184,7 +184,6 @@ class CommonCanvasToolbar extends React.Component { optionallyAddNotificationTool(rightBar) { if (this.props.notificationConfigExists) { - const notificationCount = this.props.notificationMessages.length; const notificationTools = [ { divider: true }, { action: TOOLBAR_TOGGLE_NOTIFICATION_PANEL, @@ -193,7 +192,8 @@ class CommonCanvasToolbar extends React.Component { extIsSubAreaDisplayed: this.props.isNotificationOpen, setExtIsSubAreaDisplayed: this.callExtIsSubAreaDisplayed.bind(this), className: this.getNotificationClassName(), - textContent: (notificationCount > 9) ? "9+" : notificationCount.toString(), + iconEnabled: this.props.notificationConfigIcon, + textContent: this.generateTextContent(), subPanel: NotificationPanel, subPanelData: { canvasController: this.props.canvasController }, leaveSubAreaOpenOnClickOutside: this.props.notificationConfigKeepOpen @@ -204,6 +204,18 @@ class CommonCanvasToolbar extends React.Component { return rightBar; } + // Returns a string to be displayed over the top of the default notificaiton + // icon. The string shows the number of notificaiton messages up to a maximum + // of nine. If the application provides its own icon in notificationConfigIcon, + // the 'text content' is not displayed so null is returned. + generateTextContent() { + if (this.props.notificationConfigIcon) { + return null; + } + const notificationCount = this.props.notificationMessages.length; + return (notificationCount > 9) ? "9+" : notificationCount.toString(); + } + callExtIsSubAreaDisplayed(state) { if (state) { this.props.canvasController.openNotificationPanel(); @@ -323,6 +335,7 @@ CommonCanvasToolbar.propTypes = { notificationConfigExists: PropTypes.object, notificationConfigEnable: PropTypes.bool, notificationConfigLabel: PropTypes.string, + notificationConfigIcon: PropTypes.string, notificationConfigKeepOpen: PropTypes.bool, enableInternalObjectModel: PropTypes.bool, enableEditingActions: PropTypes.bool, @@ -347,6 +360,7 @@ const mapStateToProps = (state, ownProps) => ({ notificationConfigExists: state.notificationpanel?.config, notificationConfigEnable: state.notificationpanel?.config?.enable, notificationConfigLabel: state.notificationpanel?.config?.label, + notificationConfigIcon: state.notificationpanel?.config?.toolbarIcon, notificationConfigKeepOpen: state.notificationpanel?.config?.keepOpen, notificationMessages: state.notifications, enableInternalObjectModel: state.canvasconfig.enableInternalObjectModel, diff --git a/canvas_modules/harness/src/client/App.js b/canvas_modules/harness/src/client/App.js index 84eb3c7b3e..3d5d7dffea 100644 --- a/canvas_modules/harness/src/client/App.js +++ b/canvas_modules/harness/src/client/App.js @@ -311,6 +311,7 @@ class App extends React.Component { label: "Notifications", notificationHeader: "Notification Center", notificationSubtitle: "subtitle", + toolbarIcon: null, enable: true, emptyMessage: "You don't have any notifications right now.", clearAllMessage: "Clear all", @@ -324,6 +325,7 @@ class App extends React.Component { label: "Notifications", notificationHeader: "Notification Center Canvas 2", notificationSubtitle: "subtitle", + toolbarIcon: null, enable: true, emptyMessage: "You don't have any notifications right now.", clearAllMessage: "Clear all", 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 4f2e15ee85..6de5162a19 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 @@ -103,6 +103,8 @@ import { TOOLBAR_LAYOUT_TOP } from "@elyra/canvas/src/common-canvas/constants/canvas-constants.js"; +import { Notification } from "@carbon/react/icons"; + import FormsService from "../../../services/FormsService"; export default class SidePanelForms extends React.Component { @@ -1565,6 +1567,15 @@ export default class SidePanelForms extends React.Component { toggled={this.props.getStateValue("notificationConfig").secondaryButtonDisabled} onToggle={(val) => this.notificationConfigToggle("notificationConfig", "secondaryButtonDisabled", val)} /> + (val + ? this.notificationConfigToggle("notificationConfig", "toolbarIcon", ()) + : this.notificationConfigToggle("notificationConfig", "toolbarIcon", null)) + } + /> ); var configureNotificationCenter2 = (
diff --git a/docs/pages/03.02.03-notification-config.md b/docs/pages/03.02.03-notification-config.md index 4d4dcc2d74..7752919bc7 100644 --- a/docs/pages/03.02.03-notification-config.md +++ b/docs/pages/03.02.03-notification-config.md @@ -15,6 +15,7 @@ The Notification Config object looks like this: notificationSubtitle: "subtitle", emptyMessage: "You don't have any notifications right now.", clearAllMessage: "Clear all", + toolbarIcon: null, keepOpen: true, clearAllCallback: () => { console.log("Clear All clicked"); } }; @@ -34,6 +35,8 @@ The Notification Config object looks like this: * **clearAllMessage** - String to be displayed on a button displayed at the bottom of the panel. The button can be clicked to clear all the messages from the panel. If omitted the button, and the footer area of the panel it appears in, will not be displayed. +* **toolbarIcon** - Either null or JSX. This specifies what icon should be shown in the toolbar button that opens the notification panel. The default is null which indicates that the default icon should be displayed. If JSX is provided, it should contain the icon to be displayed. For example, if `)` is specified, where `Notification` is imported from `"@carbon/react/icons"`, the Bell icon will be shown in the toolbar in place of the default. + * **keepOpen** - A boolean which indicates when the panel will close. The default is false. If set to false, the panel will close when the user clicks on the page somewhere outside the panel. If set to true the panel will remain open when the user clicks somewhere on the page outside of the panel. With the option the user must click the `x` icon in the top right of the panel, or click the notification toolbar icon, to close the panel. * **clearAllCallback** - An optional callback function that will be called every time the "clear all" button is clicked.