#1604 Added property config to hide Alerts tab and message count on t…

…ab names (#1605)

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]);
+		});
+	});
+
+});

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: {

canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx

@@ -87,6 +87,9 @@ class EditorForm extends React.Component {
 	}
 
 	_getMessageCountForCategory(tab) {
+		if (!this.props.showAlertsTab) {
+			return null;
+		}
 		if (tab.group === ALERT_TAB_GROUP) {
 			return " (" + this.messages.length + ")";
 		}
@@ -609,7 +612,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.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
@@ -668,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

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={this.props.propertiesConfig.showAlertsTab !== false}
 			/>);
 
 			if (this.props.propertiesConfig.containerType === "Editing") {
@@ -630,6 +631,7 @@ PropertiesMain.propTypes = {
 		maxLengthForSingleLineControls: PropTypes.number,
 		convertValueDataTypes: PropTypes.bool,
 		showRequiredIndicator: PropTypes.bool,
+		showAlertsTab: PropTypes.bool,
 		locale: PropTypes.string
 	}),
 	callbacks: PropTypes.shape({

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,

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,

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

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,