From 3369a85db613630b0580012a92846a0ed4365df2 Mon Sep 17 00:00:00 2001 From: Neha Gokhale Date: Tue, 17 Oct 2023 14:58:57 -0700 Subject: [PATCH 1/3] #1604 Added property config to hide Alerts tab and message count on tab names Signed-off-by: Neha Gokhale --- .../conditions/alerts-test.js | 53 +++++++++++++++++++ .../common-properties/common-properties.jsx | 2 + .../components/editor-form/editor-form.jsx | 6 ++- .../properties-main/properties-main.jsx | 1 + canvas_modules/harness/src/client/App.js | 3 ++ .../flows/flows-properties.jsx | 1 + .../sidepanel-properties-param-def.json | 21 +++++++- .../properties/sidepanel-properties.jsx | 2 + 8 files changed, 87 insertions(+), 2 deletions(-) diff --git a/canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js b/canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js index b63bf85791..6a297c8d20 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js @@ -18,6 +18,7 @@ import propertyUtils from "../../_utils_/property-utils"; import { expect } from "chai"; import numberfieldParamDef from "../../test_resources/paramDefs/numberfield_paramDef.json"; import structuretableParamDef from "../../test_resources/paramDefs/structuretable_paramDef.json"; +import actionParamDef from "../../test_resources/paramDefs/action_paramDef.json"; import tableUtils from "./../../_utils_/table-utils"; describe("condition messages should add alerts tab", () => { @@ -275,3 +276,55 @@ describe("condition messages should add alerts tab for tables", () => { }); }); + +describe("Show/hide Alerts tab based on showAlertsTab boolean in propertiesConfig", () => { + + it("Hide Alerts tab when showAlertsTab=false in propertiesConfig", () => { + // No "Alerts" tab. Also no messageCount next to Summary Panel Actions. + const categoryLabels = ["Actions", "Conditions", "Summary Panel Actions"]; + + const renderedObject = propertyUtils.flyoutEditorForm(actionParamDef, { showAlertsTab: false }); + const wrapper = renderedObject.wrapper; + + const allCategories = wrapper.find("div.properties-category-container"); + expect(allCategories).to.have.length(3); + + allCategories.forEach((category, idx) => { + const categoryTitle = category.find("button.properties-category-title").text(); + expect(categoryTitle).to.equal(categoryLabels[idx]); + }); + }); + + it("Show Alerts tab when showAlertsTab=true in propertiesConfig", () => { + // Shows "Alerts" tab and messageCount next to Summary Panel Actions. + const categoryLabels = ["Alerts (1)", "Actions", "Conditions", "Summary Panel Actions (1)"]; + + const renderedObject = propertyUtils.flyoutEditorForm(actionParamDef, { showAlertsTab: true }); + const wrapper = renderedObject.wrapper; + + const allCategories = wrapper.find("div.properties-category-container"); + expect(allCategories).to.have.length(4); + + allCategories.forEach((category, idx) => { + const categoryTitle = category.find("button.properties-category-title").text(); + expect(categoryTitle).to.equal(categoryLabels[idx]); + }); + }); + + it("Show Alerts tab when showAlertsTab is not set in propertiesConfig", () => { + // Shows "Alerts" tab and messageCount next to Summary Panel Actions. + const categoryLabels = ["Alerts (1)", "Actions", "Conditions", "Summary Panel Actions (1)"]; + + const renderedObject = propertyUtils.flyoutEditorForm(actionParamDef); + const wrapper = renderedObject.wrapper; + + const allCategories = wrapper.find("div.properties-category-container"); + expect(allCategories).to.have.length(4); + + allCategories.forEach((category, idx) => { + const categoryTitle = category.find("button.properties-category-title").text(); + expect(categoryTitle).to.equal(categoryLabels[idx]); + }); + }); + +}); diff --git a/canvas_modules/common-canvas/src/common-properties/common-properties.jsx b/canvas_modules/common-canvas/src/common-properties/common-properties.jsx index f79358ac86..bace8c7f60 100644 --- a/canvas_modules/common-canvas/src/common-properties/common-properties.jsx +++ b/canvas_modules/common-canvas/src/common-properties/common-properties.jsx @@ -251,6 +251,7 @@ CommonProperties.propTypes = { maxLengthForSingleLineControls: PropTypes.number, convertValueDataTypes: PropTypes.bool, showRequiredIndicator: PropTypes.bool, + showAlertsTab: PropTypes.bool, locale: PropTypes.string }), callbacks: PropTypes.shape({ @@ -290,6 +291,7 @@ CommonProperties.defaultProps = { maxLengthForSingleLineControls: 128, convertValueDataTypes: false, showRequiredIndicator: true, + showAlertsTab: true, locale: DEFAULT_LOCALE }, callbacks: { diff --git a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx index cad028d07c..5d22d8911a 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx @@ -51,6 +51,7 @@ class EditorForm extends React.Component { this.state = { showFieldPicker: false }; + this.showAlertsTab = props.controller ? get(props.controller.getPropertiesConfig(), "showAlertsTab", true) : true; this.genPanel = this.genPanel.bind(this); this.genUIContent = this.genUIContent.bind(this); @@ -87,6 +88,9 @@ class EditorForm extends React.Component { } _getMessageCountForCategory(tab) { + if (!this.showAlertsTab) { + return null; + } if (tab.group === ALERT_TAB_GROUP) { return " (" + this.messages.length + ")"; } @@ -609,7 +613,7 @@ class EditorForm extends React.Component { render() { let uiItems = this.props.controller.getUiItems(); - if (!isEmpty(this.messages) && uiItems[0].itemType === "primaryTabs" && uiItems[0].tabs && uiItems[0].tabs.length > 1) { + if (this.showAlertsTab && !isEmpty(this.messages) && uiItems[0].itemType === "primaryTabs" && uiItems[0].tabs && uiItems[0].tabs.length > 1) { // create a new copy for uiItems object so that alerts are not added multiple times uiItems = cloneDeep(uiItems); uiItems[0].tabs.unshift(this.genAlertsTab(this.messages)); // add alerts tab to the beginning of the tabs array diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx index 96f9d0c278..0e2db11dde 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx +++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx @@ -630,6 +630,7 @@ PropertiesMain.propTypes = { maxLengthForSingleLineControls: PropTypes.number, convertValueDataTypes: PropTypes.bool, showRequiredIndicator: PropTypes.bool, + showAlertsTab: PropTypes.bool, locale: PropTypes.string }), callbacks: PropTypes.shape({ diff --git a/canvas_modules/harness/src/client/App.js b/canvas_modules/harness/src/client/App.js index 51ccae43ba..bc72704725 100644 --- a/canvas_modules/harness/src/client/App.js +++ b/canvas_modules/harness/src/client/App.js @@ -257,6 +257,7 @@ class App extends React.Component { heading: false, light: true, showRequiredIndicator: true, + showAlertsTab: true, enableResize: true, initialEditorSize: "small", conditionHiddenPropertyHandling: "null", @@ -1997,6 +1998,7 @@ class App extends React.Component { trimSpaces: this.state.trimSpaces, heading: this.state.heading, showRequiredIndicator: this.state.showRequiredIndicator, + showAlertsTab: this.state.showAlertsTab, enableResize: this.state.enableResize, conditionHiddenPropertyHandling: this.state.conditionHiddenPropertyHandling, conditionDisabledPropertyHandling: this.state.conditionDisabledPropertyHandling, @@ -2644,6 +2646,7 @@ class App extends React.Component { heading: this.state.heading, light: this.state.light, showRequiredIndicator: this.state.showRequiredIndicator, + showAlertsTab: this.state.showAlertsTab, enableResize: this.state.enableResize, returnValueFiltering: this.state.returnValueFiltering, initialEditorSize: this.state.initialEditorSize, diff --git a/canvas_modules/harness/src/client/components/custom-canvases/flows/flows-properties.jsx b/canvas_modules/harness/src/client/components/custom-canvases/flows/flows-properties.jsx index f61f1c7efe..e223adaae6 100644 --- a/canvas_modules/harness/src/client/components/custom-canvases/flows/flows-properties.jsx +++ b/canvas_modules/harness/src/client/components/custom-canvases/flows/flows-properties.jsx @@ -119,6 +119,7 @@ export default class FlowsProperties extends React.Component { trimSpaces: true, heading: true, showRequiredIndicator: true, + showAlertsTab: true, returnValueFiltering: [], maxLengthForMultiLineControls: 1024, maxLengthForSingleLineControls: 128, diff --git a/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties-param-def.json b/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties-param-def.json index 8f2e976412..4b458f5751 100644 --- a/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties-param-def.json +++ b/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties-param-def.json @@ -14,6 +14,7 @@ "heading": false, "light": true, "showRequiredIndicator": true, + "showAlertsTab": true, "enableResize": true, "initialEditorSize": "small", "conditionHiddenPropertyHandling": "null", @@ -112,6 +113,11 @@ "default": true, "type": "boolean" }, + { + "id": "showAlertsTab", + "default": true, + "type": "boolean" + }, { "id": "enableResize", "default": true, @@ -343,6 +349,16 @@ }, "control": "toggle" }, + { + "parameter_ref": "showAlertsTab", + "label": { + "default": "showAlertsTab" + }, + "description": { + "default": "Show 'Alerts' tab" + }, + "control": "toggle" + }, { "parameter_ref": "enableResize", "label": { @@ -650,6 +666,7 @@ "trimSpaces", "heading", "showRequiredIndicator", + "showAlertsTab", "enableResize", "conditionHiddenPropertyHandling", "conditionDisabledPropertyHandling", @@ -803,6 +820,8 @@ "tableButtonEnabled.toggle.on.label": "enable", "tableButtonEnabled.toggle.off.label": "disable", "showRequiredIndicator.toggle.on.label": "required", - "showRequiredIndicator.toggle.off.label": "optional" + "showRequiredIndicator.toggle.off.label": "optional", + "showAlertsTab.toggle.on.label": "show", + "showAlertsTab.toggle.off.label": "hide" } } diff --git a/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties.jsx b/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties.jsx index 77f43e0097..9828461a16 100644 --- a/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties.jsx +++ b/canvas_modules/harness/src/client/components/sidepanel/properties/sidepanel-properties.jsx @@ -82,6 +82,7 @@ export default class SidePanelProperties extends React.Component { "heading": this.props.propertiesConfig.heading, "light": this.props.propertiesConfig.light, "showRequiredIndicator": this.props.propertiesConfig.showRequiredIndicator, + "showAlertsTab": this.props.propertiesConfig.showAlertsTab, "enableResize": this.props.propertiesConfig.enableResize, "initialEditorSize": this.props.propertiesConfig.initialEditorSize, "conditionHiddenPropertyHandling": this.props.propertiesConfig.conditionHiddenPropertyHandling, @@ -343,6 +344,7 @@ SidePanelProperties.propTypes = { heading: PropTypes.bool, light: PropTypes.bool, showRequiredIndicator: PropTypes.bool, + showAlertsTab: PropTypes.bool, enableResize: PropTypes.bool, returnValueFiltering: PropTypes.string, initialEditorSize: PropTypes.string, From aec936566d5865e68fab47c372e3b6ebe7d460b1 Mon Sep 17 00:00:00 2001 From: Neha Gokhale Date: Tue, 17 Oct 2023 15:57:40 -0700 Subject: [PATCH 2/3] Pass showAlertsTab in props to editor-form Signed-off-by: Neha Gokhale --- .../components/editor-form/editor-form.jsx | 6 +++--- .../common-properties/properties-main/properties-main.jsx | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx index 5d22d8911a..019f697b16 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx @@ -51,7 +51,6 @@ class EditorForm extends React.Component { this.state = { showFieldPicker: false }; - this.showAlertsTab = props.controller ? get(props.controller.getPropertiesConfig(), "showAlertsTab", true) : true; this.genPanel = this.genPanel.bind(this); this.genUIContent = this.genUIContent.bind(this); @@ -88,7 +87,7 @@ class EditorForm extends React.Component { } _getMessageCountForCategory(tab) { - if (!this.showAlertsTab) { + if (!this.props.showAlertsTab) { return null; } if (tab.group === ALERT_TAB_GROUP) { @@ -613,7 +612,7 @@ class EditorForm extends React.Component { render() { let uiItems = this.props.controller.getUiItems(); - if (this.showAlertsTab && !isEmpty(this.messages) && uiItems[0].itemType === "primaryTabs" && uiItems[0].tabs && uiItems[0].tabs.length > 1) { + if (this.props.showAlertsTab && !isEmpty(this.messages) && uiItems[0].itemType === "primaryTabs" && uiItems[0].tabs && uiItems[0].tabs.length > 1) { // create a new copy for uiItems object so that alerts are not added multiple times uiItems = cloneDeep(uiItems); uiItems[0].tabs.unshift(this.genAlertsTab(this.messages)); // add alerts tab to the beginning of the tabs array @@ -672,6 +671,7 @@ EditorForm.propTypes = { customPanels: PropTypes.array, rightFlyout: PropTypes.bool, categoryView: PropTypes.oneOf([CATEGORY_VIEW.ACCORDIONS, CATEGORY_VIEW.TABS]), + showAlertsTab: PropTypes.bool, activeTab: PropTypes.string, // set by redux setActiveTab: PropTypes.func, // set by redux messages: PropTypes.array // set by redux diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx index 0e2db11dde..846259af63 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx +++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx @@ -517,6 +517,7 @@ class PropertiesMain extends React.Component { customPanels={this.props.customPanels} rightFlyout={this.props.propertiesConfig.rightFlyout} categoryView={this.props.propertiesConfig.categoryView} + showAlertsTab={(typeof this.props.propertiesConfig.showAlertsTab !== "undefined") ? this.props.propertiesConfig.showAlertsTab : true} />); if (this.props.propertiesConfig.containerType === "Editing") { From 810e9fa7a11d562732f15f1c42e0d9703e1492f1 Mon Sep 17 00:00:00 2001 From: Neha Gokhale Date: Wed, 18 Oct 2023 13:38:39 -0700 Subject: [PATCH 3/3] Updated condition Signed-off-by: Neha Gokhale --- .../src/common-properties/properties-main/properties-main.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx index 846259af63..ad1354181e 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx +++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx @@ -517,7 +517,7 @@ class PropertiesMain extends React.Component { customPanels={this.props.customPanels} rightFlyout={this.props.propertiesConfig.rightFlyout} categoryView={this.props.propertiesConfig.categoryView} - showAlertsTab={(typeof this.props.propertiesConfig.showAlertsTab !== "undefined") ? this.props.propertiesConfig.showAlertsTab : true} + showAlertsTab={this.props.propertiesConfig.showAlertsTab !== false} />); if (this.props.propertiesConfig.containerType === "Editing") {