Skip to content

Commit

Permalink
#1642 Tab content not rendered when previous tab is hidden (#1643)
Browse files Browse the repository at this point in the history 
Signed-off-by: Carita Ou <[email protected]>
  • Loading branch information
@caritaou
caritaou authored Dec 6, 2023
1 parent 370e5dc commit e37a676
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 5 deletions.
31 changes: 29 additions & 2 deletions canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
Expand All @@ -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", () => {
Expand Down Expand Up @@ -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);
Expand Down
70 changes: 69 additions & 1 deletion canvas_modules/common-canvas/__tests__/test_resources/paramDefs/tab_paramDef.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
{
Expand Down Expand Up @@ -143,6 +145,14 @@
{
"id": "readonly_primary_panel",
"type": "string"
},
{
"id": "hideTab1",
"type": "boolean"
},
{
"id": "hideTab4",
"type": "boolean"
}
],
"uihints": {
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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
}
}
}
}
]
}
4 changes: 3 additions & 1 deletion canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) {
Expand Down Expand Up @@ -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(
<Tab
Expand Down
70 changes: 69 additions & 1 deletion canvas_modules/harness/test_resources/parameterDefs/tab_paramDef.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
{
Expand Down Expand Up @@ -143,6 +145,14 @@
{
"id": "readonly_primary_panel",
"type": "string"
},
{
"id": "hideTab1",
"type": "boolean"
},
{
"id": "hideTab4",
"type": "boolean"
}
],
"uihints": {
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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
}
}
}
}
]
}

0 comments on commit e37a676

Please sign in to comment.