Skip to content

feat(ui5-view-settings-dialog): add custom tabs #13325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NHristov-sap merged 7 commits into from
Apr 15, 2026
Merged

feat(ui5-view-settings-dialog): add custom tabs #13325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cfa33f5
wip(ui5-view-settings-dialog): add custom tabs (PoC)
NHristov-sap Mar 9, 2026
53dcdb9
wip(ui5-view-settings-dialog): fix lint errors
NHristov-sap Mar 9, 2026
249e13a
test(ui5-view-settings-dialog): fix lint errors
NHristov-sap Mar 9, 2026
fe26608
feat(ui5-view-settings-dialog): add custom tabs, samples and tests
NHristov-sap Mar 24, 2026
644ecfc
feat(ui5-view-settings-dialog): correct createComponent import in cus…
NHristov-sap Mar 25, 2026
b58f535
feat(ui5-view-settings-dialog): fix comments
NHristov-sap Mar 25, 2026
a3ae427
Merge branch 'main' into BL_vsd_custom_final
NHristov-sap Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
225 changes: 225 additions & 0 deletions packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import GroupItem from "../../src/GroupItem.js";
import SortItem from "../../src/SortItem.js";
import FilterItem from "../../src/FilterItem.js";
import FilterItemOption from "../../src/FilterItemOption.js";
import ViewSettingsDialogCustomTab from "../../src/ViewSettingsDialogCustomTab.js";

describe("View settings dialog - confirm event", () => {
it("should throw confirm event after selecting sort options and confirm button", () => {
Expand Down Expand Up @@ -524,4 +525,228 @@ describe("ViewSettingsDialog Tests", () => {
cy.get("@items")
.should("have.length", 3);
});

it("should render custom tabs after built-in tabs", () => {
cy.mount(
<ViewSettingsDialog id="vsdCustomOrder">
<SortItem slot="sortItems" text="Name"></SortItem>
<FilterItem slot="filterItems" text="Category">
<FilterItemOption slot="values" text="A"></FilterItemOption>
</FilterItem>
<GroupItem slot="groupItems" text="Department"></GroupItem>
<ViewSettingsDialogCustomTab slot="customTabs" title="Advanced Settings" tooltip="Advanced" icon="action-settings">
<div id="advanced-tab-content">Advanced settings</div>
</ViewSettingsDialogCustomTab>
<ViewSettingsDialogCustomTab slot="customTabs" title="Metrics Panel" tooltip="Metrics" icon="table-view">
<div id="metrics-tab-content">Metrics settings</div>
</ViewSettingsDialogCustomTab>
</ViewSettingsDialog>
);

cy.get("#vsdCustomOrder")
.as("vsd")
.invoke("prop", "open", true);

cy.get("@vsd")
.shadow()
.find("[ui5-segmented-button-item]")
.as("items")
.should("have.length", 5);

cy.get("@items")
.eq(0)
.should("have.attr", "data-mode", "Sort");

cy.get("@items")
.eq(1)
.should("have.attr", "data-mode", "Filter");

cy.get("@items")
.eq(2)
.should("have.attr", "data-mode", "Group");

cy.get("@items")
.eq(3)
.invoke("attr", "data-mode")
.should("match", /^customTabs-\d+$/);

cy.get("@items")
.eq(3)
.should("have.attr", "tooltip", "Advanced");

cy.get("@items")
.eq(4)
.invoke("attr", "data-mode")
.should("match", /^customTabs-\d+$/);

cy.get("@items")
.eq(3)
.realClick();

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-title")
.should("have.text", "View Settings");

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-custom-tab-title")
.should("have.text", "Advanced Settings");

cy.get("@vsd")
.find("#advanced-tab-content")
.should("be.visible");
});

it("should render only custom tabs when no built-in tabs are provided", () => {
cy.mount(
<ViewSettingsDialog id="vsdCustomOnly">
<ViewSettingsDialogCustomTab slot="customTabs" title="General Settings" tooltip="General" icon="action-settings">
<div id="general-tab-content">General content</div>
</ViewSettingsDialogCustomTab>
<ViewSettingsDialogCustomTab slot="customTabs" title="Extra Settings" tooltip="Extra" icon="table-view">
<div id="extra-tab-content">Extra content</div>
</ViewSettingsDialogCustomTab>
</ViewSettingsDialog>
);

cy.get("#vsdCustomOnly")
.as("vsd")
.invoke("prop", "open", true);

cy.get("@vsd")
.shadow()
.find("[ui5-segmented-button-item]")
.should("have.length", 2);

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-title")
.should("have.text", "View Settings");

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-custom-tab-title")
.should("have.text", "General Settings");

cy.get("@vsd")
.find("#general-tab-content")
.should("be.visible");

cy.get("@vsd")
.shadow()
.find("[ui5-segmented-button-item]")
.eq(1)
.realClick();

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-custom-tab-title")
.should("have.text", "Extra Settings");
});

it("should keep Reset button disabled by default when settings are initial", () => {
cy.mount(
<ViewSettingsDialog id="vsd">
<SortItem slot="sortItems" text="Name"></SortItem>
<SortItem slot="sortItems" text="Position"></SortItem>
</ViewSettingsDialog>
);

cy.get("#vsd")
.as("vsd")
.invoke("prop", "open", true);

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-header ui5-button")
.should("have.attr", "disabled");
});

it("should keep Reset button always enabled when enableReset is set", () => {
cy.mount(
<ViewSettingsDialog id="vsd" enableReset={true}>
<SortItem slot="sortItems" text="Name"></SortItem>
<SortItem slot="sortItems" text="Position"></SortItem>
</ViewSettingsDialog>
);

cy.get("#vsd")
.as("vsd")
.invoke("prop", "open", true);

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-header ui5-button")
.should("not.have.attr", "disabled");
});

it("should fire reset-click event when Reset button is clicked", () => {
cy.mount(
<ViewSettingsDialog id="vsd" enableReset={true} onResetClick={cy.stub().as("resetClick")}>
<SortItem slot="sortItems" text="Name"></SortItem>
<SortItem slot="sortItems" text="Position"></SortItem>
</ViewSettingsDialog>
);

cy.get("#vsd")
.as("vsd")
.invoke("prop", "open", true);

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-header ui5-button")
.should("not.have.attr", "disabled");

cy.get("@vsd")
.shadow()
.find(".ui5-vsd-header ui5-button")
.realClick();

cy.get("@resetClick")
.should("have.been.calledOnce");
});

it("should reset built-in settings and fire reset-click when Reset is clicked", () => {
cy.mount(
<ViewSettingsDialog id="vsd" enableReset={true} onResetClick={cy.stub().as("resetClick")}>
<SortItem slot="sortItems" text="Name"></SortItem>
<SortItem slot="sortItems" text="Position"></SortItem>
</ViewSettingsDialog>
);

cy.get("#vsd")
.as("vsd")
.invoke("prop", "open", true);

// Change sort order to Descending
cy.get("@vsd")
.shadow()
.find("[sort-order] ui5-li")
.eq(1)
.realClick();

// Verify Descending is selected
cy.get("@vsd")
.shadow()
.find("[sort-order] ui5-li")
.eq(1)
.should("have.attr", "selected");

// Click Reset
cy.get("@vsd")
.shadow()
.find(".ui5-vsd-header ui5-button")
.realClick();

// Verify Ascending is selected again
cy.get("@vsd")
.shadow()
.find("[sort-order] ui5-li")
.eq(0)
.should("have.attr", "selected");

cy.get("@resetClick")
.should("have.been.calledOnce");
});
});
Loading
Loading