#2132 Need ability to add custom icon to notificationConfig (#2133)

Signed-off-by: CTomlyn <[email protected]>

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,

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",

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)}
 			/>
+			<Toggle
+				id="toolbarIcon" // Set ID to corresponding field in App.js state
+				labelText="Set toolbar icon to Bell icon"
+				toggled={this.props.getStateValue("notificationConfig").toolbarIcon}
+				onToggle={(val) => (val
+					? this.notificationConfigToggle("notificationConfig", "toolbarIcon", (<Notification size={"32"} />))
+					: this.notificationConfigToggle("notificationConfig", "toolbarIcon", null))
+				}
+			/>
 		</div>);
 
 		var configureNotificationCenter2 = (<div className="harness-sidepanel-children" id="harness-sidepanel-configure-notification-center2">

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 `<Notification size={"32"} />)` 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.