Skip to content

Commit 52b408a

Browse files
NHristov-sapNHristov-sap
authored
feat(ui5-view-settings-dialog): add custom tabs (#13325)
This PR introduces `ui5-view-settings-dialog-custom-tab` component that allows to add tabs with custom contents to the `ui5-view-settings-dialog` component. Custom tabs can be added among the default ones: <img width="380" height="551" alt="image" src="https://github.com/user-attachments/assets/cbdec143-3bdc-4354-b498-2b96618d7607" /> or without the default ones (just custom tabs): <img width="384" height="552" alt="image" src="https://github.com/user-attachments/assets/afe99c9b-e945-4dd3-9e3a-3b744a138a64" />
1 parent bdb43dc commit 52b408a

18 files changed

Lines changed: 950 additions & 10 deletions

File tree

‎packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import GroupItem from "../../src/GroupItem.js";
33
import SortItem from "../../src/SortItem.js";
44
import FilterItem from "../../src/FilterItem.js";
55
import FilterItemOption from "../../src/FilterItemOption.js";
6+
import ViewSettingsDialogCustomTab from "../../src/ViewSettingsDialogCustomTab.js";
67

78
describe("View settings dialog - confirm event", () => {
89
it("should throw confirm event after selecting sort options and confirm button", () => {
@@ -524,4 +525,228 @@ describe("ViewSettingsDialog Tests", () => {
524525
cy.get("@items")
525526
.should("have.length", 3);
526527
});
528+
529+
it("should render custom tabs after built-in tabs", () => {
530+
cy.mount(
531+
<ViewSettingsDialog id="vsdCustomOrder">
532+
<SortItem slot="sortItems" text="Name"></SortItem>
533+
<FilterItem slot="filterItems" text="Category">
534+
<FilterItemOption slot="values" text="A"></FilterItemOption>
535+
</FilterItem>
536+
<GroupItem slot="groupItems" text="Department"></GroupItem>
537+
<ViewSettingsDialogCustomTab slot="customTabs" title="Advanced Settings" tooltip="Advanced" icon="action-settings">
538+
<div id="advanced-tab-content">Advanced settings</div>
539+
</ViewSettingsDialogCustomTab>
540+
<ViewSettingsDialogCustomTab slot="customTabs" title="Metrics Panel" tooltip="Metrics" icon="table-view">
541+
<div id="metrics-tab-content">Metrics settings</div>
542+
</ViewSettingsDialogCustomTab>
543+
</ViewSettingsDialog>
544+
);
545+
546+
cy.get("#vsdCustomOrder")
547+
.as("vsd")
548+
.invoke("prop", "open", true);
549+
550+
cy.get("@vsd")
551+
.shadow()
552+
.find("[ui5-segmented-button-item]")
553+
.as("items")
554+
.should("have.length", 5);
555+
556+
cy.get("@items")
557+
.eq(0)
558+
.should("have.attr", "data-mode", "Sort");
559+
560+
cy.get("@items")
561+
.eq(1)
562+
.should("have.attr", "data-mode", "Filter");
563+
564+
cy.get("@items")
565+
.eq(2)
566+
.should("have.attr", "data-mode", "Group");
567+
568+
cy.get("@items")
569+
.eq(3)
570+
.invoke("attr", "data-mode")
571+
.should("match", /^customTabs-\d+$/);
572+
573+
cy.get("@items")
574+
.eq(3)
575+
.should("have.attr", "tooltip", "Advanced");
576+
577+
cy.get("@items")
578+
.eq(4)
579+
.invoke("attr", "data-mode")
580+
.should("match", /^customTabs-\d+$/);
581+
582+
cy.get("@items")
583+
.eq(3)
584+
.realClick();
585+
586+
cy.get("@vsd")
587+
.shadow()
588+
.find(".ui5-vsd-title")
589+
.should("have.text", "View Settings");
590+
591+
cy.get("@vsd")
592+
.shadow()
593+
.find(".ui5-vsd-custom-tab-title")
594+
.should("have.text", "Advanced Settings");
595+
596+
cy.get("@vsd")
597+
.find("#advanced-tab-content")
598+
.should("be.visible");
599+
});
600+
601+
it("should render only custom tabs when no built-in tabs are provided", () => {
602+
cy.mount(
603+
<ViewSettingsDialog id="vsdCustomOnly">
604+
<ViewSettingsDialogCustomTab slot="customTabs" title="General Settings" tooltip="General" icon="action-settings">
605+
<div id="general-tab-content">General content</div>
606+
</ViewSettingsDialogCustomTab>
607+
<ViewSettingsDialogCustomTab slot="customTabs" title="Extra Settings" tooltip="Extra" icon="table-view">
608+
<div id="extra-tab-content">Extra content</div>
609+
</ViewSettingsDialogCustomTab>
610+
</ViewSettingsDialog>
611+
);
612+
613+
cy.get("#vsdCustomOnly")
614+
.as("vsd")
615+
.invoke("prop", "open", true);
616+
617+
cy.get("@vsd")
618+
.shadow()
619+
.find("[ui5-segmented-button-item]")
620+
.should("have.length", 2);
621+
622+
cy.get("@vsd")
623+
.shadow()
624+
.find(".ui5-vsd-title")
625+
.should("have.text", "View Settings");
626+
627+
cy.get("@vsd")
628+
.shadow()
629+
.find(".ui5-vsd-custom-tab-title")
630+
.should("have.text", "General Settings");
631+
632+
cy.get("@vsd")
633+
.find("#general-tab-content")
634+
.should("be.visible");
635+
636+
cy.get("@vsd")
637+
.shadow()
638+
.find("[ui5-segmented-button-item]")
639+
.eq(1)
640+
.realClick();
641+
642+
cy.get("@vsd")
643+
.shadow()
644+
.find(".ui5-vsd-custom-tab-title")
645+
.should("have.text", "Extra Settings");
646+
});
647+
648+
it("should keep Reset button disabled by default when settings are initial", () => {
649+
cy.mount(
650+
<ViewSettingsDialog id="vsd">
651+
<SortItem slot="sortItems" text="Name"></SortItem>
652+
<SortItem slot="sortItems" text="Position"></SortItem>
653+
</ViewSettingsDialog>
654+
);
655+
656+
cy.get("#vsd")
657+
.as("vsd")
658+
.invoke("prop", "open", true);
659+
660+
cy.get("@vsd")
661+
.shadow()
662+
.find(".ui5-vsd-header ui5-button")
663+
.should("have.attr", "disabled");
664+
});
665+
666+
it("should keep Reset button always enabled when enableReset is set", () => {
667+
cy.mount(
668+
<ViewSettingsDialog id="vsd" enableReset={true}>
669+
<SortItem slot="sortItems" text="Name"></SortItem>
670+
<SortItem slot="sortItems" text="Position"></SortItem>
671+
</ViewSettingsDialog>
672+
);
673+
674+
cy.get("#vsd")
675+
.as("vsd")
676+
.invoke("prop", "open", true);
677+
678+
cy.get("@vsd")
679+
.shadow()
680+
.find(".ui5-vsd-header ui5-button")
681+
.should("not.have.attr", "disabled");
682+
});
683+
684+
it("should fire reset-click event when Reset button is clicked", () => {
685+
cy.mount(
686+
<ViewSettingsDialog id="vsd" enableReset={true} onResetClick={cy.stub().as("resetClick")}>
687+
<SortItem slot="sortItems" text="Name"></SortItem>
688+
<SortItem slot="sortItems" text="Position"></SortItem>
689+
</ViewSettingsDialog>
690+
);
691+
692+
cy.get("#vsd")
693+
.as("vsd")
694+
.invoke("prop", "open", true);
695+
696+
cy.get("@vsd")
697+
.shadow()
698+
.find(".ui5-vsd-header ui5-button")
699+
.should("not.have.attr", "disabled");
700+
701+
cy.get("@vsd")
702+
.shadow()
703+
.find(".ui5-vsd-header ui5-button")
704+
.realClick();
705+
706+
cy.get("@resetClick")
707+
.should("have.been.calledOnce");
708+
});
709+
710+
it("should reset built-in settings and fire reset-click when Reset is clicked", () => {
711+
cy.mount(
712+
<ViewSettingsDialog id="vsd" enableReset={true} onResetClick={cy.stub().as("resetClick")}>
713+
<SortItem slot="sortItems" text="Name"></SortItem>
714+
<SortItem slot="sortItems" text="Position"></SortItem>
715+
</ViewSettingsDialog>
716+
);
717+
718+
cy.get("#vsd")
719+
.as("vsd")
720+
.invoke("prop", "open", true);
721+
722+
// Change sort order to Descending
723+
cy.get("@vsd")
724+
.shadow()
725+
.find("[sort-order] ui5-li")
726+
.eq(1)
727+
.realClick();
728+
729+
// Verify Descending is selected
730+
cy.get("@vsd")
731+
.shadow()
732+
.find("[sort-order] ui5-li")
733+
.eq(1)
734+
.should("have.attr", "selected");
735+
736+
// Click Reset
737+
cy.get("@vsd")
738+
.shadow()
739+
.find(".ui5-vsd-header ui5-button")
740+
.realClick();
741+
742+
// Verify Ascending is selected again
743+
cy.get("@vsd")
744+
.shadow()
745+
.find("[sort-order] ui5-li")
746+
.eq(0)
747+
.should("have.attr", "selected");
748+
749+
cy.get("@resetClick")
750+
.should("have.been.calledOnce");
751+
});
527752
});

0 commit comments

Comments
 (0)