Enhancement: angular 19 (#8584)

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -2,7 +2,7 @@
   <div content tourAnchor="tour.upload-widget">
     <form class="justify-content-center d-flex flex-column align-items-center py-3 px-2">
       <span class="text-muted" i18n>Drop documents anywhere or</span>
-      <button class="btn btn-sm btn-outline-primary mt-3" (click)="fileUpload.click()" i18n>Browse files</button>
+      <button type="button" class="btn btn-sm btn-outline-primary mt-3" (click)="fileUpload.click()" i18n>Browse files</button>
       <input type="file" class="visually-hidden" (change)="onFileSelected($event)" multiple #fileUpload>
     </form>
     @if (getStatus().length > 0) {

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts

@@ -1,4 +1,3 @@
-import { DragDropModule } from '@angular/cdk/drag-drop'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
@@ -9,15 +8,9 @@ import {
 } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
-import {
-  NgbAlert,
-  NgbAlertModule,
-  NgbCollapse,
-  NgbModule,
-} from '@ng-bootstrap/ng-bootstrap'
+import { NgbAlert, NgbCollapse } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { routes } from 'src/app/app-routing.module'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import {
   ConsumerStatusService,
@@ -26,7 +19,6 @@ import {
 } from 'src/app/services/consumer-status.service'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
-import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 import { UploadFileWidgetComponent } from './upload-file-widget.component'
 
 const FAILED_STATUSES = [new FileStatus()]
@@ -55,17 +47,10 @@ describe('UploadFileWidgetComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        UploadFileWidgetComponent,
-        WidgetFrameComponent,
-        IfPermissionsDirective,
-      ],
       imports: [
-        NgbModule,
         RouterTestingModule.withRoutes(routes),
-        NgbAlertModule,
-        DragDropModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        UploadFileWidgetComponent,
       ],
       providers: [
         PermissionsGuard,

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -1,7 +1,17 @@
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, QueryList, ViewChildren } from '@angular/core'
-import { NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { RouterModule } from '@angular/router'
+import {
+  NgbAlert,
+  NgbAlertModule,
+  NgbCollapseModule,
+  NgbProgressbarModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import {
   ConsumerStatusService,
   FileStatus,
@@ -9,6 +19,7 @@ import {
 } from 'src/app/services/consumer-status.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
+import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 
 const MAX_ALERTS = 5
 
@@ -16,6 +27,18 @@ const MAX_ALERTS = 5
   selector: 'pngx-upload-file-widget',
   templateUrl: './upload-file-widget.component.html',
   styleUrls: ['./upload-file-widget.component.scss'],
+  imports: [
+    WidgetFrameComponent,
+    IfPermissionsDirective,
+    NgClass,
+    NgTemplateOutlet,
+    RouterModule,
+    NgbAlertModule,
+    NgbCollapseModule,
+    NgbProgressbarModule,
+    NgxBootstrapIconsModule,
+    TourNgBootstrapModule,
+  ],
 })
 export class UploadFileWidgetComponent extends ComponentWithPermissions {
   alertsExpanded = false