Enhancement: add upload count to button, link to tray, reduce notifications (#14501)

src-ui/src/app/components/common/upload-status-tray/upload-status-tray.component.spec.ts

@@ -1,12 +1,12 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { routes } from 'src/app/app-routing.module'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { PermissionsService } from 'src/app/services/permissions.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
 import {
   FileStatus,
   FileStatusPhase,
@@ -105,6 +105,26 @@ describe('UploadStatusTrayComponent', () => {
     expect(component.collapsed()).toBe(false)
   })
 
+  it('should expand on request', () => {
+    component.toggleCollapsed()
+    expect(component.collapsed()).toBe(true)
+    component.expand()
+    expect(component.collapsed()).toBe(false)
+  })
+
+  it('should expand when new uploads start', () => {
+    const uploadDocumentsService = TestBed.inject(UploadDocumentsService)
+    jest
+      .spyOn(uploadDocumentsService, 'uploadFile')
+      .mockImplementation(() => {})
+    websocketStatusService.newFileUpload('invoice.pdf')
+    fixture.detectChanges()
+    component.toggleCollapsed()
+    expect(component.collapsed()).toBe(true)
+    uploadDocumentsService.uploadFiles([new File(['one'], 'one.pdf')])
+    expect(component.collapsed()).toBe(false)
+  })
+
   it('should generate stats summary', () => {
     mockConsumerStatuses(websocketStatusService)
     expect(component.getStatusSummary()).toEqual(

src-ui/src/app/components/common/upload-status-tray/upload-status-tray.component.ts

@@ -1,5 +1,6 @@
 import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, effect, inject, signal } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { RouterModule } from '@angular/router'
 import {
   NgbAlertModule,
@@ -15,6 +16,7 @@ import {
   PermissionType,
 } from 'src/app/services/permissions.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
 import {
   FileStatus,
   FileStatusPhase,
@@ -40,6 +42,7 @@ export class UploadStatusTrayComponent extends ComponentWithPermissions {
   private websocketStatusService = inject(WebsocketStatusService)
   private settingsService = inject(SettingsService)
   private permissionsService = inject(PermissionsService)
+  private uploadDocumentsService = inject(UploadDocumentsService)
 
   readonly collapsed = signal(false)
 
@@ -49,6 +52,10 @@ export class UploadStatusTrayComponent extends ComponentWithPermissions {
     effect(() => {
       if (this.getStatus().length === 0) this.collapsed.set(false)
     })
+    this.uploadDocumentsService
+      .onUploadsStarted()
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.expand())
   }
 
   get canAddDocuments(): boolean {
@@ -138,6 +145,10 @@ export class UploadStatusTrayComponent extends ComponentWithPermissions {
     this.collapsed.update((collapsed) => !collapsed)
   }
 
+  expand() {
+    this.collapsed.set(false)
+  }
+
   dismiss(status: FileStatus) {
     this.websocketStatusService.dismiss(status)
   }