Skip to content

Commit

Permalink
#2151 Allow applications to customize the default toolbar buttons' ic… (
Browse files Browse the repository at this point in the history 
#2153)

Signed-off-by: CTomlyn <[email protected]>
  • Loading branch information
@tomlyn
tomlyn authored Sep 17, 2024
1 parent b80fd6f commit 6291563
Show file tree
Hide file tree
Showing 12 changed files with 203 additions and 77 deletions.
20 changes: 10 additions & 10 deletions canvas_modules/common-canvas/__tests__/common-canvas/common-canvas-toolbar-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ describe("Common Canvas Toolbar renders correctly with config as OBJECT", () =>
expect(wrapper.find(".toolbar-item")).to.have.length(5);
expect(wrapper.find(".toolbar-divider")).to.have.length(2);

expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomIn-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomOut-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomToFit-action")).to.have.length(1);
Expand All @@ -77,7 +77,7 @@ describe("Common Canvas Toolbar renders correctly with config as OBJECT", () =>
expect(wrapper.find(".toolbar-item")).to.have.length(5);
expect(wrapper.find(".toolbar-divider")).to.have.length(2);

expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomIn-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomOut-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomToFit-action")).to.have.length(1);
Expand All @@ -100,7 +100,7 @@ describe("Common Canvas Toolbar renders correctly with config as OBJECT", () =>
expect(wrapper.find(".toolbar-item")).to.have.length(2);
expect(wrapper.find(".toolbar-divider")).to.have.length(2);

expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.toggleNotificationPanel-action")).to.have.length(1);
});

Expand Down Expand Up @@ -128,7 +128,7 @@ describe("Common Canvas Toolbar renders correctly with config as OBJECT", () =>
expect(wrapper.find(".toolbar-item")).to.have.length(10);
expect(wrapper.find(".toolbar-divider")).to.have.length(3);

expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.undo-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.redo-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.cut-action")).to.have.length(1);
Expand Down Expand Up @@ -168,7 +168,7 @@ describe("Common Canvas Toolbar renders correctly with config as OBJECT", () =>
expect(wrapper.find(".toolbar-item")).to.have.length(7);
expect(wrapper.find(".toolbar-divider")).to.have.length(3);

expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.undo-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.redo-action")).to.have.length(1);

Expand Down Expand Up @@ -207,7 +207,7 @@ describe("Common Canvas Toolbar renders correctly with config as OBJECT", () =>
expect(wrapper.find(".toolbar-item")).to.have.length(6);
expect(wrapper.find(".toolbar-divider")).to.have.length(2);

expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(0);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(0);
expect(wrapper.find(".toolbar-item.undo-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.redo-action")).to.have.length(1);

Expand Down Expand Up @@ -247,7 +247,7 @@ describe("Common Canvas Toolbar renders correctly with config as OBJECT", () =>
expect(wrapper.find(".toolbar-item")).to.have.length(6);
expect(wrapper.find(".toolbar-divider")).to.have.length(2);

expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.undo-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.redo-action")).to.have.length(1);

Expand Down Expand Up @@ -294,7 +294,7 @@ describe("Common Canvas Toolbar renders correctly with config as OBJECT", () =>
expect(wrapper.find(".toolbar-item.palette-action")).to.have.length(0);

// Should have a "togglePalette" action.
expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.undo-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.redo-action")).to.have.length(1);

Expand Down Expand Up @@ -371,7 +371,7 @@ describe("Common Canvas Toolbar renders correctly with config as ARRAY", () => {
expect(wrapper.find(".toolbar-item")).to.have.length(5);
expect(wrapper.find(".toolbar-divider")).to.have.length(2);

expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomIn-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomOut-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.zoomToFit-action")).to.have.length(1);
Expand All @@ -391,6 +391,6 @@ describe("Common Canvas Toolbar renders correctly with config as ARRAY", () => {
expect(wrapper.find(".toolbar-item.palette-action")).to.have.length(0);

// Should have a "togglePalette" action.
expect(wrapper.find(".toolbar-item.paletteClose-action")).to.have.length(1);
expect(wrapper.find(".toolbar-item.closePalette-action")).to.have.length(1);
});
});
6 changes: 3 additions & 3 deletions canvas_modules/common-canvas/src/common-canvas/canvas-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2406,15 +2406,15 @@ export default class CanvasController {
this.objectModel.setZoom(data.zoom, data.pipelineId);
break;
}
case "paletteToggle": {
case "togglePalette": {
this.togglePalette();
break;
}
case "paletteOpen": {
case "openPalette": {
this.openPalette();
break;
}
case "paletteClose": {
case "closePalette": {
this.closePalette();
break;
}
Expand Down
129 changes: 92 additions & 37 deletions canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,12 @@ class CommonCanvasToolbar extends React.Component {
return className;
}

// Returns the index of the action passed in, in the
// 'bar' passed in.
getToolIndexByAction(action, bar) {
return bar?.findIndex((a) => a.action === action);
}

generateToolbarConfig() {
let config = this.copyConfig();

Expand All @@ -113,10 +119,8 @@ class CommonCanvasToolbar extends React.Component {
config = this.getDefaultToolbar();
}

config = Object.assign({}, config,
{ leftBar: this.optionallyAddPaletteTool(config.leftBar || []) },
{ rightBar: this.optionallyAddNotificationTool(config.rightBar || []) }
);
config = this.optionallyAddPaletteTool(config);
config = this.optionallyAddNotificationTool(config);

return config;
}
Expand Down Expand Up @@ -148,7 +152,10 @@ class CommonCanvasToolbar extends React.Component {
this.props.canvasController.toolbarActionHandler(action);
}

optionallyAddPaletteTool(leftBar) {
optionallyAddPaletteTool(config) {
const leftBar = config.leftBar || [];
const rightBar = config.rightBar || [];

let paletteLabel = this.getLabel("toolbar.palette");

// If the leftBar contains and old palette action and if followed by a
Expand All @@ -163,57 +170,107 @@ class CommonCanvasToolbar extends React.Component {
}
}

// Add the new togglePalette icon if the palette is enabled.
// Add a new togglePalette icon if the palette is enabled and the app
// has not provided its own palette action.
if (this.props.isPaletteEnabled) {
// 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";
// TODO - In next major release, remove "paletteClose-action" and "paletteOpen-action"
const className = this.props.isPaletteOpen ? "closePalette-action paletteClose-action" : "openPalette-action paletteOpen-action";

const paletteOpenClose =
const togglePaletteAction =
{ action: TOOLBAR_TOGGLE_PALETTE, label: paletteLabel, enable: true,
isSelected: this.props.isPaletteOpen, className };

const paletteTools = [
paletteOpenClose,
{ divider: true }
];
return paletteTools.concat(newLeftBar);
const lbIdx = this.getToolIndexByAction(TOOLBAR_TOGGLE_PALETTE, leftBar);
const rbIdx = this.getToolIndexByAction(TOOLBAR_TOGGLE_PALETTE, rightBar);

if (lbIdx > -1) {
const lbAction = leftBar[lbIdx];
config.leftBar[lbIdx] = {
...togglePaletteAction,
label: lbAction.label ? lbAction.label : paletteLabel,
iconEnabled: lbAction.iconEnabled ? lbAction.iconEnabled : null, // null means Icon provided by the toolbar
incLabelWithIcon: lbAction.incLabelWithIcon ? lbAction.incLabelWithIcon : null,
tooltip: lbAction.tooltip ? lbAction.tooltip : null
};

} else if (rbIdx > -1) {
const rbAction = rightBar[rbIdx];
config.rightBar[rbIdx] = {
...togglePaletteAction,
label: rbAction.label ? rbAction.label : paletteLabel,
iconEnabled: rbAction.iconEnabled ? rbAction.iconEnabled : null, // null means Icon provided by the toolbar
incLabelWithIcon: rbAction.incLabelWithIcon ? rbAction.incLabelWithIcon : null,
tooltip: rbAction.tooltip ? rbAction.tooltip : null
};

} else {
const paletteTools = [
togglePaletteAction,
{ divider: true }
];
config.leftBar = paletteTools.concat(newLeftBar);
}
}
return newLeftBar;
return config;
}

optionallyAddNotificationTool(rightBar) {
optionallyAddNotificationTool(config) {
const leftBar = config.leftBar || [];
const rightBar = config.rightBar || [];

// Add a new toggleNotificationPanel icon if the notification panel exists
// and the app has not provided its own notification panel action.
if (this.props.notificationConfigExists) {
const notificationTools = [
{ divider: true },
const notificationCount = this.props.notificationMessages.length;

const toggleNotificationAction =
{ action: TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
label: this.props.notificationConfigLabel,
enable: this.props.notificationConfigEnable,
extIsSubAreaDisplayed: this.props.isNotificationOpen,
setExtIsSubAreaDisplayed: this.callExtIsSubAreaDisplayed.bind(this),
className: this.getNotificationClassName(),
iconEnabled: this.props.notificationConfigIcon,
textContent: this.generateTextContent(),
textContent: (notificationCount > 9) ? "9+" : notificationCount.toString(),
subPanel: NotificationPanel,
subPanelData: { canvasController: this.props.canvasController },
leaveSubAreaOpenOnClickOutside: this.props.notificationConfigKeepOpen
}
];
return rightBar.concat(notificationTools);
}
return rightBar;
}

// Returns a string to be displayed over the top of the default notification
// icon. The string shows the number of notification 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 lbIdx = this.getToolIndexByAction(TOOLBAR_TOGGLE_NOTIFICATION_PANEL, leftBar);
const rbIdx = this.getToolIndexByAction(TOOLBAR_TOGGLE_NOTIFICATION_PANEL, rightBar);

if (lbIdx > -1) {
const lbAction = leftBar[lbIdx];
config.leftBar[lbIdx] = {
...toggleNotificationAction,
iconEnabled: lbAction.iconEnabled ? lbAction.iconEnabled : null, // null means Icon provided by the toolbar
incLabelWithIcon: lbAction.incLabelWithIcon ? lbAction.incLabelWithIcon : null,
tooltip: lbAction.tooltip ? lbAction.tooltip : null,
textContent: null // Assume text conents is not needed with customized action
};

} else if (rbIdx > -1) {
const rbAction = rightBar[rbIdx];
config.rightBar[rbIdx] = {
...toggleNotificationAction,
iconEnabled: rbAction.iconEnabled ? rbAction.iconEnabled : null, // null means Icon provided by the toolbar
incLabelWithIcon: rbAction.incLabelWithIcon ? rbAction.incLabelWithIcon : null,
tooltip: rbAction.tooltip ? rbAction.tooltip : null,
textContent: null }; // Assume text conents is not needed with customized action


} else {
const notificationTools = [
{ divider: true },
toggleNotificationAction
];

config.rightBar = config.rightBar.concat(notificationTools);
}
}
const notificationCount = this.props.notificationMessages.length;
return (notificationCount > 9) ? "9+" : notificationCount.toString();
return config;
}

callExtIsSubAreaDisplayed(state) {
Expand Down Expand Up @@ -335,7 +392,6 @@ CommonCanvasToolbar.propTypes = {
notificationConfigExists: PropTypes.object,
notificationConfigEnable: PropTypes.bool,
notificationConfigLabel: PropTypes.string,
notificationConfigIcon: PropTypes.string,
notificationConfigKeepOpen: PropTypes.bool,
enableInternalObjectModel: PropTypes.bool,
enableEditingActions: PropTypes.bool,
Expand All @@ -360,7 +416,6 @@ 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,
Expand Down
6 changes: 3 additions & 3 deletions canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,9 +214,9 @@ export const TOOLBAR_ZOOM_FIT = "zoomToFit";
export const TOOLBAR_ARRANGE_HORIZONALLY = "arrangeHorizontally";
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_OPEN_PALETTE = "openPalette";
export const TOOLBAR_CLOSE_PALETTE = "closePalette";
export const TOOLBAR_TOGGLE_PALETTE = "togglePalette";
export const TOOLBAR_EXPAND_SUPERNODE_IN_PLACE = "expandSuperNodeInPlace";
export const TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE = "collapseSuperNodeInPlace";
export const TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE = "displaySubPipeline";
Expand Down
22 changes: 22 additions & 0 deletions canvas_modules/harness/cypress/e2e/canvas/toolbar.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,28 @@ describe("Test dual purpose toolbar button", function() {
});
});

describe("Test customized palette and notification panel buttons", function() {
beforeEach(() => {
cy.visit("/");
cy.setCanvasConfig({ "selectedToolbarType": "CustomizeAutoItems" });
});

it("Test clicking palette and notification panel buttons appear OK", function() {

// Check the customized palette and notification panel buttons appear OK
cy.verifyToolbarButtonEnabled("togglePalette", true);
cy.verifyToolbarButtonEnabled("toggleNotificationPanel", true);

// Click the customized palette button and make sure it opens the palette
cy.clickToolbarPaletteOpen();
cy.verifyLeftPanelWidth(256);

// Click the customized notification panel button and make sure it opens the notification panel
cy.clickToolbarNotifications();
cy.verifyToolbarSubPanelIsOpen("toggleNotificationPanel");
});
});

describe("Test overrideAutoEnableDisable toolbar config option", function() {
beforeEach(() => {
cy.visit("/");
Expand Down
7 changes: 7 additions & 0 deletions canvas_modules/harness/cypress/support/canvas/verification-cmds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -875,6 +875,13 @@ Cypress.Commands.add("verifyTopPanelWidth", (width) => {
});
});

Cypress.Commands.add("verifyLeftPanelWidth", (width) => {
cy.get(".palette-flyout-div").should((element) => {
// Use compareCloseTo here because top-panel width is slighyly different
// on the build machine to its width when running tests on a local machine.
compareCloseTo(element[0].offsetWidth, width);
});
});

Cypress.Commands.add("verifyCommentDimensions", (commentText, width, height) => {
cy.getCommentWithText(commentText)
Expand Down
Loading

0 comments on commit 6291563

Please sign in to comment.