Fix/chore: refactor some signal-backed conversion technical debt (#13902)

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

@@ -193,6 +193,23 @@ describe('AppFrameComponent', () => {
     expect(savedViewSpy).toHaveBeenCalled()
   })
 
+  it('should update reinitialized signal-backed settings without manual change detection', async () => {
+    settingsService.initializeSettings().subscribe()
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}ui_settings/`)
+      .flush({
+        settings: { app_title: 'Reactive title' },
+        user: {},
+        permissions: [],
+      })
+
+    await fixture.whenStable()
+
+    expect(
+      fixture.nativeElement.querySelector('.brand-title').textContent
+    ).toBe('Reactive title')
+  })
+
   it('should check for update if enabled', () => {
     const updateCheckSpy = jest.spyOn(remoteVersionService, 'checkForUpdates')
     updateCheckSpy.mockImplementation(() => {

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

@@ -98,6 +98,29 @@ export class AppFrameComponent
   readonly isMenuCollapsed = signal(true)
   readonly slimSidebarAnimating = signal(false)
   readonly mobileSearchHidden = signal(false)
+  private readonly versionSetting = this.settingsService.getSignal<string>(
+    SETTINGS_KEYS.VERSION
+  )
+  private readonly appTitleSetting = this.settingsService.getSignal<string>(
+    SETTINGS_KEYS.APP_TITLE
+  )
+  private readonly appLogoSetting = this.settingsService.getSignal<string>(
+    SETTINGS_KEYS.APP_LOGO
+  )
+  private readonly slimSidebarSetting = this.settingsService.getSignal<boolean>(
+    SETTINGS_KEYS.SLIM_SIDEBAR
+  )
+  private readonly attributesSectionsCollapsedSetting =
+    this.settingsService.getSignal<CollapsibleSection[]>(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED
+    )
+  private readonly aiEnabledSetting = this.settingsService.getSignal<boolean>(
+    SETTINGS_KEYS.AI_ENABLED
+  )
+  private readonly sidebarViewsShowCountSetting =
+    this.settingsService.getSignal<boolean>(
+      SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT
+    )
   private lastScrollY: number = 0
 
   constructor() {
@@ -191,33 +214,23 @@ export class AppFrameComponent
   }
 
   get versionString(): string {
-    this.settingsService.trackChanges()
-    return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
+    return `${environment.appTitle} v${this.versionSetting()}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
   }
 
   get appTitle(): string {
-    this.settingsService.trackChanges()
-    return (
-      this.settingsService.get(SETTINGS_KEYS.APP_TITLE) || environment.appTitle
-    )
+    return this.appTitleSetting() || environment.appTitle
   }
 
   get customAppTitle(): string {
-    this.settingsService.trackChanges()
-    return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
+    return this.appTitleSetting()
   }
 
   get hasCustomBranding(): boolean {
-    this.settingsService.trackChanges()
-    return !!(
-      this.settingsService.get(SETTINGS_KEYS.APP_TITLE)?.length ||
-      this.settingsService.get(SETTINGS_KEYS.APP_LOGO)?.length
-    )
+    return !!(this.appTitleSetting()?.length || this.appLogoSetting()?.length)
   }
 
   get customAppLogo(): string {
-    this.settingsService.trackChanges()
-    const logo = this.settingsService.get(SETTINGS_KEYS.APP_LOGO)
+    const logo = this.appLogoSetting()
     return logo?.length
       ? environment.apiBaseUrl.replace(/\/api\/$/, logo)
       : null
@@ -262,8 +275,7 @@ export class AppFrameComponent
   }
 
   get slimSidebarEnabled(): boolean {
-    this.settingsService.trackChanges()
-    return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
+    return this.slimSidebarSetting()
   }
 
   set slimSidebarEnabled(enabled: boolean) {
@@ -286,10 +298,9 @@ export class AppFrameComponent
   }
 
   get attributesSectionsCollapsed(): boolean {
-    this.settingsService.trackChanges()
-    return this.settingsService
-      .get(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED)
-      ?.includes(CollapsibleSection.ATTRIBUTES)
+    return this.attributesSectionsCollapsedSetting()?.includes(
+      CollapsibleSection.ATTRIBUTES
+    )
   }
 
   set attributesSectionsCollapsed(collapsed: boolean) {
@@ -312,8 +323,7 @@ export class AppFrameComponent
   }
 
   get aiEnabled(): boolean {
-    this.settingsService.trackChanges()
-    return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
+    return this.aiEnabledSetting()
   }
 
   @HostListener('window:resize')
@@ -480,9 +490,8 @@ export class AppFrameComponent
   }
 
   get showSidebarCounts(): boolean {
-    this.settingsService.trackChanges()
     return (
-      this.settingsService.get(SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT) &&
+      this.sidebarViewsShowCountSetting() &&
       !this.settingsService.organizingSidebarSavedViews()
     )
   }

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

@@ -81,6 +81,10 @@ export class GlobalSearchComponent implements OnInit {
   private hotkeyService = inject(HotKeyService)
   private settingsService = inject(SettingsService)
   private locationStrategy = inject(LocationStrategy)
+  private readonly searchFullTypeSetting =
+    this.settingsService.getSignal<GlobalSearchType>(
+      SETTINGS_KEYS.SEARCH_FULL_TYPE
+    )
 
   public DataType = DataType
   readonly query = signal<string>(null)
@@ -97,11 +101,7 @@ export class GlobalSearchComponent implements OnInit {
   @ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
 
   get useAdvancedForFullSearch(): boolean {
-    this.settingsService.trackChanges()
-    return (
-      this.settingsService.get(SETTINGS_KEYS.SEARCH_FULL_TYPE) ===
-      GlobalSearchType.ADVANCED
-    )
+    return this.searchFullTypeSetting() === GlobalSearchType.ADVANCED
   }
 
   constructor() {