diff --git a/canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js b/canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js index 0d38cda88a..02d4246e6f 100644 --- a/canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js +++ b/canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js @@ -365,39 +365,39 @@ describe("toolbar notification icon state renders correctly", () => { wrapper.update(); let notificationIcon = wrapper.find(".toggleNotificationPanel-action"); expect(notificationIcon).to.have.length(1); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1); canvasController.setNotificationMessages([notificationMessage0, notificationMessage1]); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.success")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.success")).to.have.length(1); canvasController.setNotificationMessages([notificationMessage0, notificationMessage1, notificationMessage2]); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.warning")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.warning")).to.have.length(1); canvasController.setNotificationMessages(notificationMessages); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.error")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.error")).to.have.length(1); expect(canvasController.getNotificationMessages().length).to.equal(4); canvasController.setNotificationMessages([notificationMessage0, notificationMessage1, notificationMessage2]); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.warning")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.warning")).to.have.length(1); canvasController.setNotificationMessages([notificationMessage0, notificationMessage1]); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.success")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.success")).to.have.length(1); canvasController.setNotificationMessages([notificationMessage0]); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1); canvasController.setNotificationMessages([]); wrapper.update(); // TODO need to fix @@ -436,30 +436,30 @@ describe("notification counter and color updates correctly", () => { canvasController ); let notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - let notificationCounter = notificationIcon.find(".toolbar-item-content.notificationCounterIcon > .toolbar-text-content"); + let notificationCounter = notificationIcon.find(".toolbar-item.notificationCounterIcon .toolbar-text-content"); expect(notificationCounter.text()).to.equal(" 0 "); canvasController.setNotificationMessages([notificationMessage0]); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - notificationCounter = notificationIcon.find(".toolbar-item-content.notificationCounterIcon > .toolbar-text-content"); + notificationCounter = notificationIcon.find(".toolbar-item.notificationCounterIcon .toolbar-text-content"); expect(notificationIcon).to.have.length(1); expect(notificationCounter.text()).to.equal(" 1 "); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1); canvasController.setNotificationMessages(Array(9).fill(notificationMessage0)); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - notificationCounter = notificationIcon.find(".toolbar-item-content.notificationCounterIcon > .toolbar-text-content"); + notificationCounter = notificationIcon.find(".toolbar-item.notificationCounterIcon .toolbar-text-content"); expect(notificationCounter.text()).to.equal(" 9 "); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1); canvasController.setNotificationMessages(Array(10).fill(notificationMessage0)); wrapper.update(); notificationIcon = wrapper.find(".toggleNotificationPanel-action"); - notificationCounter = notificationIcon.find(".toolbar-item-content.notificationCounterIcon > .toolbar-text-content"); + notificationCounter = notificationIcon.find(".toolbar-item.notificationCounterIcon .toolbar-text-content"); expect(notificationCounter.text()).to.equal(" 9+ "); - expect(notificationIcon.find(".toolbar-item-content.notificationCounterIcon.info")).to.have.length(1); + expect(notificationIcon.find(".toolbar-item.notificationCounterIcon.info")).to.have.length(1); }); it("notification dot updates to indicate the correct message type", () => { @@ -481,33 +481,33 @@ describe("notification counter and color updates correctly", () => { canvasController ); - let notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content"); + let notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action"); let indicatorClasses = notificationIcon.prop("className"); - expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon default"); + expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon"); canvasController.setNotificationMessages([notificationMessage0]); wrapper.update(); - notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content"); + notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action"); indicatorClasses = notificationIcon.prop("className"); - expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon info default"); + expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon info"); canvasController.setNotificationMessages([notificationMessage0, notificationMessage1]); wrapper.update(); - notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content"); + notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action"); indicatorClasses = notificationIcon.prop("className"); - expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon success default"); + expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon success"); canvasController.setNotificationMessages([notificationMessage0, notificationMessage1, notificationMessage2]); wrapper.update(); - notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content"); + notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action"); indicatorClasses = notificationIcon.prop("className"); - expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon warning default"); + expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon warning"); canvasController.setNotificationMessages([notificationMessage0, notificationMessage1, notificationMessage2, notificationMessage3]); wrapper.update(); - notificationIcon = wrapper.find(".toggleNotificationPanel-action .toolbar-item-content"); + notificationIcon = wrapper.find(".toolbar-item.toggleNotificationPanel-action"); indicatorClasses = notificationIcon.prop("className"); - expect(indicatorClasses).to.equal("toolbar-item-content notificationCounterIcon error default"); + expect(indicatorClasses).to.equal("toolbar-item default toggleNotificationPanel-action notificationCounterIcon error"); }); }); diff --git a/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js b/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js index 03d14d3bab..260eb569eb 100644 --- a/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js +++ b/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js @@ -2326,7 +2326,7 @@ export default class CanvasController { this.objectModel.setZoom(data.zoom, data.pipelineId); break; } - case "togglePalette": { + case "paletteToggle": { this.togglePalette(); break; } 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 0c4799b482..a4f9e64c15 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx @@ -24,7 +24,8 @@ import Toolbar from "../toolbar/toolbar.jsx"; import Logger from "../logging/canvas-logger.js"; import NotificationPanel from "../notification-panel/notification-panel.jsx"; import { ERROR, WARNING, SUCCESS, INFO, PALETTE_LAYOUT_NONE, - NOTIFICATION_ICON_CLASS, TOOLBAR_TOGGLE_NOTIFICATION_PANEL, TOOLBAR_LAYOUT_TOP } + NOTIFICATION_ICON_CLASS, TOOLBAR_TOGGLE_NOTIFICATION_PANEL, TOOLBAR_LAYOUT_TOP, + TOOLBAR_TOGGLE_PALETTE } from "../common-canvas/constants/canvas-constants"; class CommonCanvasToolbar extends React.Component { @@ -164,9 +165,13 @@ class CommonCanvasToolbar extends React.Component { // Add the new togglePalette icon if the palette is enabled. if (this.props.isPaletteEnabled) { - const paletteOpenClose = this.props.isPaletteOpen - ? { action: "paletteClose", label: paletteLabel, enable: true } - : { action: "paletteOpen", label: paletteLabel, enable: true }; + // Applications may need to detect these legacy classes to detect which action + // is to be performed. So add them as additional classes. Also, jest tests require them. + const className = this.props.isPaletteOpen ? "paletteClose-action" : "paletteOpen-action"; + + const paletteOpenClose = + { action: TOOLBAR_TOGGLE_PALETTE, label: paletteLabel, enable: true, + isSelected: this.props.isPaletteOpen, className }; const paletteTools = [ paletteOpenClose, diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss index afd92d3600..d067503b38 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss +++ b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss @@ -295,17 +295,17 @@ $panel-border-color: $ui-03; border-width: 2px; } -.toolbar-item-content.notificationCounterIcon { - &.error > div > svg > .dot { +.toolbar-item.notificationCounterIcon { + &.error .toolbar-icon .dot { fill: $support-01; } - &.warning > div > svg > .dot { + &.warning .toolbar-icon .dot { fill: $support-03; } - &.success > div > svg > .dot { + &.success .toolbar-icon .dot { fill: $support-02; } - &.info > div > svg > .dot { + &.info .toolbar-icon .dot { fill: $support-04; } } diff --git a/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js b/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js index 5ad941612d..174690fd34 100644 --- a/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js +++ b/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js @@ -190,6 +190,7 @@ export const TOOLBAR_ARRANGE_VERTICALLY = "arrangeVertically"; export const TOOLBAR_TOGGLE_NOTIFICATION_PANEL = "toggleNotificationPanel"; export const TOOLBAR_OPEN_PALETTE = "paletteOpen"; export const TOOLBAR_CLOSE_PALETTE = "paletteClose"; +export const TOOLBAR_TOGGLE_PALETTE = "paletteToggle"; export const TOOLBAR_EXPAND_SUPERNODE_IN_PLACE = "expandSuperNodeInPlace"; export const TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE = "collapseSuperNodeInPlace"; export const TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE = "displaySubPipeline"; 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 68a3d7d0eb..0bba0a726a 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx +++ b/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx @@ -192,7 +192,8 @@ class ToolbarActionItem extends React.Component { "toolbar-item-selected": actionObj.isSelected }, kindAsClass, - actionName); + actionName, + this.props.actionObj.className); const subArea = this.isSubAreaDisplayed() ? this.generateSubArea() : null; diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx index f297f8a0ee..26be7e1e50 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx +++ b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx @@ -36,7 +36,7 @@ import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO, TOOLBAR_DELETE_SELECTED_OBJECTS, TOOLBAR_DELETE_LINK, TOOLBAR_ZOOM_IN, TOOLBAR_ZOOM_OUT, TOOLBAR_ZOOM_FIT, TOOLBAR_ARRANGE_HORIZONALLY, TOOLBAR_ARRANGE_VERTICALLY, - TOOLBAR_OPEN_PALETTE, TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL, + TOOLBAR_OPEN_PALETTE, TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL, TOOLBAR_SHOW_COMMENTS, TOOLBAR_HIDE_COMMENTS, TOOLBAR_EXPAND_SUPERNODE_IN_PLACE, TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE, TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE, TOOLBAR_SET_NODE_LABEL_EDIT, TOOLBAR_SET_COMMENT_EDIT_MODE } @@ -117,6 +117,8 @@ class ToolbarButtonItem extends React.Component { return ; case (TOOLBAR_CLOSE_PALETTE): return ; + case (TOOLBAR_TOGGLE_PALETTE): + return ; // Non-carbon icons case (TOOLBAR_ARRANGE_HORIZONALLY): @@ -195,7 +197,6 @@ class ToolbarButtonItem extends React.Component { const itemContentClassName = classNames( "toolbar-item-content", - actionObj.className ? actionObj.className : null, { "overflow": this.props.isInMenu, "disabled": !actionObj.enable, "default": !actionObj.kind }); // If no 'kind' is set, use ghost and then override colors using the "default" class in innerDivClassName.