Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: show number of tabs on the header (#18071)

Browse Source 
* number of tabs displayed alongside label

* styling for span removed

* feature added and cypress test cases written

* code refactoring after review
This commit is contained in:
Rishabh Kashyap 2022-11-08 20:50:58 +05:30 committed by GitHub
parent 5f8f8f9b70
commit 1e7c97c1f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Tab/Tab_spec.js
View File

@ -167,6 +167,19 @@ describe("Tab widget test", function() {
.contains("Aditya")
.should("have.class", "is-selected");
});
it("Validates Total Number Of Tabs Displayed In The Property Pane", () => {
cy.get(Layoutpage.tabNumber).should("have.text", "2 tabs");
});
it("Validates Total Number Of Tabs Displayed In The Property Pane After Adding A Tab", () => {
cy.get(Layoutpage.tabButton).click({ force: true });
cy.get(Layoutpage.tabNumber).should("have.text", "3 tabs");
});
it("Validates Total Number Of Tabs Displayed In The Property Pane After Deleting A Tab", () => {
cy.get(Layoutpage.tabDelete)
.eq(1)
.click({ force: true });
cy.get(Layoutpage.tabNumber).should("have.text", "2 tabs");
});
});
afterEach(() => {

3
app/client/cypress/locators/Layout.json
View File

@ -7,5 +7,6 @@
"tabDelete": ".t--property-control-tabs .t--delete-column-btn",
"tabContainer": "div[type='TABS_WIDGET']",
"tabEdit": ".t--property-control-tabs .t--edit-column-btn",
"tabVisibility": ".t--property-control-visible .bp3-control-indicator"
"tabVisibility": ".t--property-control-visible .bp3-control-indicator",
"tabNumber": ".t--number-of-tabs"
}

10
app/client/src/components/propertyControls/TabControl.tsx
View File

@ -31,6 +31,10 @@ const TabsWrapper = styled.div`
flex-direction: column;
`;
const NumberOfTabs = styled.div`
margin: 1% 0;
`;
type DroppableItem = BaseItemProps;
function AddTabButtonComponent({ widgetId }: any) {
@ -193,14 +197,18 @@ class TabControl extends BaseControl<ControlProps, State> {
});
};
render() {
const tabs = this.getTabItems();
return (
<TabsWrapper>
<NumberOfTabs className="t--number-of-tabs">
{tabs.length} tabs
</NumberOfTabs>
<DroppableComponent
deleteOption={this.deleteOption}
fixedHeight={370}
focusedIndex={this.state.focusedIndex}
itemHeight={45}
items={this.getTabItems()}
items={tabs}
onEdit={this.onEdit}
renderComponent={TabControlComponent}
toggleVisibility={this.toggleVisibility}