Fix: unify POSTs when toggling sidebar to prevent db lock (#12129)

src-ui/src/app/components/app-frame/app-frame.component.spec.ts

@@ -243,9 +243,19 @@ describe('AppFrameComponent', () => {
 
   it('should support toggling slim sidebar and saving', fakeAsync(() => {
     const saveSettingSpy = jest.spyOn(settingsService, 'set')
+    settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [])
     expect(component.slimSidebarEnabled).toBeFalsy()
     expect(component.slimSidebarAnimating).toBeFalsy()
     component.toggleSlimSidebar()
+    const requests = httpTestingController.match(
+      `${environment.apiBaseUrl}ui_settings/`
+    )
+    expect(requests).toHaveLength(1)
+    expect(requests[0].request.body.settings.slim_sidebar).toBe(true)
+    expect(
+      requests[0].request.body.settings.attributes_sections_collapsed
+    ).toEqual(['attributes'])
+    requests[0].flush({ success: true })
     expect(component.slimSidebarAnimating).toBeTruthy()
     tick(200)
     expect(component.slimSidebarAnimating).toBeFalsy()
@@ -254,6 +264,10 @@ describe('AppFrameComponent', () => {
       SETTINGS_KEYS.SLIM_SIDEBAR,
       true
     )
+    expect(saveSettingSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      ['attributes']
+    )
   }))
 
   it('should show error on toggle slim sidebar if store settings fails', () => {

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -140,10 +140,24 @@ export class AppFrameComponent
 
   toggleSlimSidebar(): void {
     this.slimSidebarAnimating = true
-    this.slimSidebarEnabled = !this.slimSidebarEnabled
+    const slimSidebarEnabled = !this.slimSidebarEnabled
-    if (this.slimSidebarEnabled) {
+    this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, slimSidebarEnabled)
-      this.attributesSectionsCollapsed = true
+    if (slimSidebarEnabled) {
+      this.settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [
+        CollapsibleSection.ATTRIBUTES,
+      ])
     }
+    this.settingsService
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`
+          )
+          console.warn(error)
+        },
+      })
     setTimeout(() => {
       this.slimSidebarAnimating = false
     }, 200) // slightly longer than css animation for slim sidebar