diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js index 702fbe7113..ea865b232f 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js @@ -41,7 +41,7 @@ describe("subtabs visible and enabled conditions work correctly", () => { let wrapper; let controller; beforeEach(() => { - const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef); + const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef, { categoryView: "tabs" }); wrapper = renderedObject.wrapper; controller = renderedObject.controller; }); @@ -68,6 +68,33 @@ describe("subtabs visible and enabled conditions work correctly", () => { subTab = wrapper.find("li[data-id='properties-table-subtab']"); expect(subTab).to.have.length(0); }); + + it("hidden and non hidden tabs display correctly", () => { + let primaryTabs = wrapper.find(".properties-primaryTabs"); + let tab1 = primaryTabs.find("li[title='Tab Test']"); + let tab2 = primaryTabs.find("li[title='Tab Test2']"); + let tab3 = primaryTabs.find("li[title='Tab Test3']"); + let tab4 = primaryTabs.find("li[title='Tab Test4']"); + expect(tab1).to.have.length(1); + expect(tab2).to.have.length(1); + expect(tab3).to.have.length(1); + expect(tab4).to.have.length(1); + + controller.updatePropertyValue({ name: "hideTab1" }, true); + controller.updatePropertyValue({ name: "hideTab4" }, true); + wrapper.update(); + + primaryTabs = wrapper.find(".properties-primaryTabs"); + tab1 = primaryTabs.find("li[title='Tab Test']"); + tab2 = primaryTabs.find("li[title='Tab Test2']"); + tab3 = primaryTabs.find("li[title='Tab Test3']"); + tab4 = primaryTabs.find("li[title='Tab Test4']"); + + expect(tab1).to.have.length(0); + expect(tab2).to.have.length(1); + expect(tab3).to.have.length(1); + expect(tab4).to.have.length(0); + }); }); describe("subtabs classNames applied correctly", () => { @@ -107,7 +134,7 @@ describe("subtabs renders correctly in a Tearsheet container", () => { it("should have rendered subtabs with leftnav classnames", () => { const primaryTabs = wrapper.find("div.properties-primary-tab-panel.tearsheet-container"); - expect(primaryTabs).to.have.length(4); + expect(primaryTabs).to.have.length(5); const primaryTab = primaryTabs.at(2); // Tab Test2 expect(primaryTab.find("div.properties-sub-tab-container.vertical.properties-leftnav-container")).to.have.length(1); diff --git a/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/tab_paramDef.json b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/tab_paramDef.json index 91c190537c..755c927dc8 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/tab_paramDef.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/tab_paramDef.json @@ -31,7 +31,9 @@ ], "readonly_double_subtabs": "If multiple subtabs are defined in a tearsheet, additional padding is required to avoid overlay.", "readonly_nested_panel": "Tearsheet: Display subtabs in panel within group will result in additional padding.", - "readonly_primary_panel": "Tearsheet: Display subtabs in primary group will flush the leftnav to the footer buttons." + "readonly_primary_panel": "Tearsheet: Display subtabs in primary group will flush the leftnav to the footer buttons.", + "hideTab1": false, + "hideTab4": false }, "parameters": [ { @@ -143,6 +145,14 @@ { "id": "readonly_primary_panel", "type": "string" + }, + { + "id": "hideTab1", + "type": "boolean" + }, + { + "id": "hideTab4", + "type": "boolean" } ], "uihints": { @@ -576,6 +586,17 @@ }, "type": "subTabs", "group_info": [ + { + "id": "tab-condition", + "type": "controls", + "label": { + "default": "Tab Conditions" + }, + "parameter_refs": [ + "hideTab1", + "hideTab4" + ] + }, { "id": "range-fields-subtab3", "type": "controls", @@ -690,6 +711,25 @@ } ] }, + { + "id": "Primary4", + "label": { + "default": "Tab Test4" + }, + "type": "panels", + "group_info": [ + { + "id": "tab-hidden-condition", + "type": "textPanel", + "label": { + "default": "Tab Hidden Condition Test" + }, + "description": { + "default": "This tab will be visible when the hideTab4 checkbox is selected from Tab Test3." + } + } + ] + }, { "id": "tearsheetHidden", "label": { @@ -804,6 +844,34 @@ } } } + }, + { + "visible": { + "group_refs": [ + "Primary" + ], + "evaluate": { + "condition": { + "parameter_ref": "hideTab1", + "op": "equals", + "value": false + } + } + } + }, + { + "visible": { + "group_refs": [ + "Primary4" + ], + "evaluate": { + "condition": { + "parameter_ref": "hideTab4", + "op": "equals", + "value": false + } + } + } } ] } 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 019f697b16..54dbcf2f35 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 @@ -136,6 +136,7 @@ class EditorForm extends React.Component { const tabContent = []; let hasAlertsTab = false; let modalSelected = 0; + let hiddenTabs = 0; const nonTearsheetTabs = tabs.filter((t) => t.content.itemType !== ItemType.TEARSHEET); const tearsheetTabs = tabs.filter((t) => t.content.itemType === ItemType.TEARSHEET); const totalTabs = tearsheetTabs.concat(nonTearsheetTabs); @@ -144,6 +145,7 @@ class EditorForm extends React.Component { const tab = totalTabs[i]; const tabState = this.props.controller.getPanelState({ name: tab.group }); if (tabState === STATES.HIDDEN) { + hiddenTabs++; continue; } if (i === 0 && tab.group === ALERT_TAB_GROUP) { @@ -198,7 +200,7 @@ class EditorForm extends React.Component { } } else { if (this.props.activeTab === tab.group) { - modalSelected = i; + modalSelected = i - hiddenTabs; // Adjust the Carbon Tabs index to accomodate hidden tabs } tabContent.push(