Change: more clearly handle init permissions error (#7334)

src-ui/messages.xlf

@@ -8683,21 +8683,21 @@
         <source>Successfully completed one-time migratration of settings to the database!</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/settings.service.ts</context>
-          <context context-type="linenumber">554</context>
+          <context context-type="linenumber">567</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5558341108007064934" datatype="html">
         <source>Unable to migrate settings to the database, please try saving manually.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/settings.service.ts</context>
-          <context context-type="linenumber">555</context>
+          <context context-type="linenumber">568</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1168781785897678748" datatype="html">
         <source>You can restart the tour from the settings page.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/settings.service.ts</context>
-          <context context-type="linenumber">625</context>
+          <context context-type="linenumber">638</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3852289441366561594" datatype="html">

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -39,7 +39,7 @@
   <div class="col-12 col-lg-4 col-xl-3 col-sidebar">
     <div class="row row-cols-1 g-4 mb-4 sticky-lg-top z-0">
       <div class="col">
-        <pngx-statistics-widget></pngx-statistics-widget>
+        <pngx-statistics-widget *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }"></pngx-statistics-widget>
       </div>
       <div class="col">
         <pngx-upload-file-widget></pngx-upload-file-widget>

src-ui/src/app/services/settings.service.spec.ts

@@ -2,7 +2,7 @@ import {
   HttpTestingController,
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
-import { TestBed } from '@angular/core/testing'
+import { fakeAsync, TestBed, tick } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -18,6 +18,7 @@ import { CustomFieldDataType } from '../data/custom-field'
 import { PermissionsService } from './permissions.service'
 import { DEFAULT_DISPLAY_FIELDS, DisplayField } from '../data/document'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { ToastService } from './toast.service'
 
 const customFields = [
   {
@@ -41,6 +42,7 @@ describe('SettingsService', () => {
   let customFieldsService: CustomFieldsService
   let permissionService: PermissionsService
   let subscription: Subscription
+  let toastService: ToastService
 
   const ui_settings: UiSettings = {
     user: {
@@ -105,6 +107,7 @@ describe('SettingsService', () => {
     customFieldsService = TestBed.inject(CustomFieldsService)
     permissionService = TestBed.inject(PermissionsService)
     settingsService = TestBed.inject(SettingsService)
+    toastService = TestBed.inject(ToastService)
   })
 
   afterEach(() => {
@@ -119,6 +122,18 @@ describe('SettingsService', () => {
     expect(req.request.method).toEqual('GET')
   })
 
+  it('should catch error and show toast on retrieve ui_settings error', fakeAsync(() => {
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}ui_settings/`)
+      .flush(
+        { detail: 'You do not have permission to perform this action.' },
+        { status: 403, statusText: 'Forbidden' }
+      )
+    tick(500)
+    expect(toastSpy).toHaveBeenCalled()
+  }))
+
   it('calls ui_settings api endpoint with POST on store', () => {
     let req = httpTestingController.expectOne(
       `${environment.apiBaseUrl}ui_settings/`

src-ui/src/app/services/settings.service.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { CookieService } from 'ngx-cookie-service'
-import { first, Observable, tap } from 'rxjs'
+import { catchError, first, Observable, of, tap } from 'rxjs'
 import {
   BRIGHTNESS,
   estimateBrightnessForColor,
@@ -288,6 +288,19 @@ export class SettingsService {
   public initializeSettings(): Observable<UiSettings> {
     return this.http.get<UiSettings>(this.baseUrl).pipe(
       first(),
+      catchError((error) => {
+        setTimeout(() => {
+          this.toastService.showError('Error loading settings', error)
+        }, 500)
+        return of({
+          settings: {
+            documentListSize: 10,
+            update_checking: { backend_setting: 'default' },
+          },
+          user: {},
+          permissions: [],
+        })
+      }),
       tap((uisettings) => {
         Object.assign(this.settings, uisettings.settings)
         if (this.get(SETTINGS_KEYS.APP_TITLE)?.length) {