This is an automated email from the ASF dual-hosted git repository.
linxinyuan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/texera.git
The following commit(s) were added to refs/heads/main by this push:
new a0c1918358 feat: add save button for sidebar tabs on the admin
settings page (#3801)
a0c1918358 is described below
commit a0c1918358eacc62f4211ba8dee1b96c16a5cdc1
Author: Xuan Gu <[email protected]>
AuthorDate: Thu Oct 2 14:12:57 2025 -0700
feat: add save button for sidebar tabs on the admin settings page (#3801)
### **Purpose**
This PR resolves #3788, which suggests the sidebar tabs section should
be consistent with other settings sections by using a unified save
button. This change allows users make multiple tab changes and save them
all at once; after a successful save, the page auto-refreshes to reflect
the updated sidebar.
### **Changes**
- Removed `(ngModelChange)` event handlers from individual tab switches
- Added unified Save button alongside Reset button for sidebar tabs
- Modified `saveTabs()` method to batch save all tab settings using
forkJoin, page refresh after a successful save
- Fixed the arrow icon position shifting when expanding the tab list
### **Demonstration**
| Before | After |
|:------:|:-----:|
| <img
src="https://github.com/user-attachments/assets/edd0f991-695c-4d29-8f73-75b929418577";
alt="Before" width="360" /> | <img
src="https://github.com/user-attachments/assets/85168027-8949-449e-912c-02279d8fe1c6";
alt="After" width="360" /> |
Setting page:
<img width="1422" height="1066" alt="ui"
src="https://github.com/user-attachments/assets/7d87ec36-4478-46d0-83e5-0f1dcd1c1156";
/>
Co-authored-by: Xinyuan Lin <[email protected]>
---
.../admin/settings/admin-settings.component.html | 39 ++++++++++------------
.../admin/settings/admin-settings.component.scss | 6 ++++
.../admin/settings/admin-settings.component.ts | 20 +++++------
3 files changed, 33 insertions(+), 32 deletions(-)
diff --git
a/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.html
b/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.html
index 21f42c8a09..a0ea29e77b 100644
---
a/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.html
+++
b/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.html
@@ -117,8 +117,7 @@
<span>Hub</span>
<nz-switch
class="tab-switch"
- [(ngModel)]="sidebarTabs.hub_enabled"
- (ngModelChange)="saveTabs('hub_enabled')">
+ [(ngModel)]="sidebarTabs.hub_enabled">
</nz-switch>
</summary>
@@ -127,8 +126,7 @@
<nz-switch
class="tab-switch"
[(ngModel)]="sidebarTabs.home_enabled"
- [nzDisabled]="!sidebarTabs.hub_enabled"
- (ngModelChange)="saveTabs('home_enabled')">
+ [nzDisabled]="!sidebarTabs.hub_enabled">
</nz-switch>
</div>
@@ -137,8 +135,7 @@
<nz-switch
class="tab-switch"
[(ngModel)]="sidebarTabs.workflow_enabled"
- [nzDisabled]="!sidebarTabs.hub_enabled"
- (ngModelChange)="saveTabs('workflow_enabled')">
+ [nzDisabled]="!sidebarTabs.hub_enabled">
</nz-switch>
</div>
@@ -147,8 +144,7 @@
<nz-switch
class="tab-switch"
[(ngModel)]="sidebarTabs.dataset_enabled"
- [nzDisabled]="!sidebarTabs.hub_enabled"
- (ngModelChange)="saveTabs('dataset_enabled')">
+ [nzDisabled]="!sidebarTabs.hub_enabled">
</nz-switch>
</div>
</details>
@@ -163,8 +159,7 @@
<span>Your Work</span>
<nz-switch
class="tab-switch"
- [(ngModel)]="sidebarTabs.your_work_enabled"
- (ngModelChange)="saveTabs('your_work_enabled')">
+ [(ngModel)]="sidebarTabs.your_work_enabled">
</nz-switch>
</summary>
@@ -173,8 +168,7 @@
<nz-switch
class="tab-switch"
[(ngModel)]="sidebarTabs.projects_enabled"
- [nzDisabled]="!sidebarTabs.your_work_enabled"
- (ngModelChange)="saveTabs('projects_enabled')">
+ [nzDisabled]="!sidebarTabs.your_work_enabled">
</nz-switch>
</div>
@@ -183,8 +177,7 @@
<nz-switch
class="tab-switch"
[(ngModel)]="sidebarTabs.workflows_enabled"
- [nzDisabled]="!sidebarTabs.your_work_enabled"
- (ngModelChange)="saveTabs('workflows_enabled')">
+ [nzDisabled]="!sidebarTabs.your_work_enabled">
</nz-switch>
</div>
@@ -193,8 +186,7 @@
<nz-switch
class="tab-switch"
[(ngModel)]="sidebarTabs.datasets_enabled"
- [nzDisabled]="!sidebarTabs.your_work_enabled"
- (ngModelChange)="saveTabs('datasets_enabled')">
+ [nzDisabled]="!sidebarTabs.your_work_enabled">
</nz-switch>
</div>
@@ -203,8 +195,7 @@
<nz-switch
class="tab-switch"
[(ngModel)]="sidebarTabs.quota_enabled"
- [nzDisabled]="!sidebarTabs.your_work_enabled"
- (ngModelChange)="saveTabs('quota_enabled')">
+ [nzDisabled]="!sidebarTabs.your_work_enabled">
</nz-switch>
</div>
@@ -213,8 +204,7 @@
<nz-switch
class="tab-switch"
[(ngModel)]="sidebarTabs.forum_enabled"
- [nzDisabled]="!sidebarTabs.your_work_enabled"
- (ngModelChange)="saveTabs('forum_enabled')">
+ [nzDisabled]="!sidebarTabs.your_work_enabled">
</nz-switch>
</div>
</details>
@@ -223,12 +213,17 @@
<span>About</span>
<nz-switch
class="tab-switch"
- [(ngModel)]="sidebarTabs.about_enabled"
- (ngModelChange)="saveTabs('about_enabled')">
+ [(ngModel)]="sidebarTabs.about_enabled">
</nz-switch>
</div>
<div class="button-row">
+ <button
+ nz-button
+ nzType="primary"
+ (click)="saveTabs()">
+ Save
+ </button>
<button
nz-button
nzType="default"
diff --git
a/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.scss
b/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.scss
index 3f7e648d92..a5d3b4a878 100644
---
a/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.scss
+++
b/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.scss
@@ -64,6 +64,12 @@
margin-left: auto;
}
+.arrow {
+ width: 12px;
+ height: 12px;
+ transform-origin: center center;
+}
+
details[open] .arrow {
transform: rotate(90deg);
}
diff --git
a/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.ts
b/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.ts
index 52a8c5d2e0..3f5221ba2c 100644
---
a/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.ts
+++
b/core/gui/src/app/dashboard/component/admin/settings/admin-settings.component.ts
@@ -170,19 +170,19 @@ export class AdminSettingsComponent implements OnInit {
setTimeout(() => window.location.reload(), this.RELOAD_DELAY);
}
- saveTabs(tab: keyof SidebarTabs): void {
- const displayTab = tab
- .replace("_enabled", "")
- .split("_")
- .map(word => word.charAt(0).toUpperCase() + word.slice(1))
- .join(" ");
+ saveTabs(): void {
+ const saveRequests = (Object.keys(this.sidebarTabs) as (keyof
SidebarTabs)[]).map(tab =>
+ this.adminSettingsService.updateSetting(tab,
this.sidebarTabs[tab].toString())
+ );
- this.adminSettingsService
- .updateSetting(tab, this.sidebarTabs[tab].toString())
+ forkJoin(saveRequests)
.pipe(untilDestroyed(this))
.subscribe({
- next: () => this.message.success(`${displayTab} tab saved
successfully.`),
- error: () => this.message.error(`Failed to save ${displayTab} tab.`),
+ next: () => {
+ this.message.success("Tabs saved successfully.");
+ setTimeout(() => window.location.reload(), this.RELOAD_DELAY);
+ },
+ error: () => this.message.error("Failed to save tabs."),
});
}
