Chore: bump Angular to 21.1.3, ngx-ui-tour-ng-bootstrap to v18 (#12015)

2026-02-07 23:42:46 -06:00 · 2026-02-05 19:37:59 -08:00
parent 71663fdbe2
commit 0f1cae03ec
20 changed files with 525 additions and 370 deletions
--- a/src-ui/package.json
+++ b/src-ui/package.json
@@ -11,15 +11,15 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/cdk": "^21.1.2",
-    "@angular/common": "~21.1.2",
-    "@angular/compiler": "~21.1.2",
-    "@angular/core": "~21.1.2",
-    "@angular/forms": "~21.1.2",
-    "@angular/localize": "~21.1.2",
-    "@angular/platform-browser": "~21.1.2",
-    "@angular/platform-browser-dynamic": "~21.1.2",
-    "@angular/router": "~21.1.2",
+    "@angular/cdk": "^21.1.3",
+    "@angular/common": "~21.1.3",
+    "@angular/compiler": "~21.1.3",
+    "@angular/core": "~21.1.3",
+    "@angular/forms": "~21.1.3",
+    "@angular/localize": "~21.1.3",
+    "@angular/platform-browser": "~21.1.3",
+    "@angular/platform-browser-dynamic": "~21.1.3",
+    "@angular/router": "~21.1.3",
    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
    "@ng-select/ng-select": "^21.2.0",
    "@ngneat/dirty-check-forms": "^3.0.3",
@@ -32,7 +32,7 @@
    "ngx-color": "^10.1.0",
    "ngx-cookie-service": "^21.1.0",
    "ngx-device-detector": "^11.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^17.0.1",
+    "ngx-ui-tour-ng-bootstrap": "^18.0.0",
    "rxjs": "^7.8.2",
    "tslib": "^2.8.1",
    "utif": "^3.1.0",
@@ -42,16 +42,16 @@
  "devDependencies": {
    "@angular-builders/custom-webpack": "^21.0.3",
    "@angular-builders/jest": "^21.0.3",
-    "@angular-devkit/core": "^21.1.2",
-    "@angular-devkit/schematics": "^21.1.2",
+    "@angular-devkit/core": "^21.1.3",
+    "@angular-devkit/schematics": "^21.1.3",
    "@angular-eslint/builder": "21.2.0",
    "@angular-eslint/eslint-plugin": "21.2.0",
    "@angular-eslint/eslint-plugin-template": "21.2.0",
    "@angular-eslint/schematics": "21.2.0",
    "@angular-eslint/template-parser": "21.2.0",
-    "@angular/build": "^21.1.2",
-    "@angular/cli": "~21.1.2",
-    "@angular/compiler-cli": "~21.1.2",
+    "@angular/build": "^21.1.3",
+    "@angular/cli": "~21.1.3",
+    "@angular/compiler-cli": "~21.1.3",
    "@codecov/webpack-plugin": "^1.9.1",
    "@playwright/test": "^1.58.1",
    "@types/jest": "^30.0.0",
--- a/src-ui/pnpm-lock.yaml
+++ b/src-ui/pnpm-lock.yaml
--- a/src-ui/src/app/app.component.spec.ts
+++ b/src-ui/src/app/app.component.spec.ts
@@ -9,7 +9,11 @@ import {
 import { Router, RouterModule } from '@angular/router'
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
 import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import {
+  provideUiTour,
+  TourNgBootstrap,
+  TourService,
+} from 'ngx-ui-tour-ng-bootstrap'
 import { Subject } from 'rxjs'
 import { routes } from './app-routing.module'
 import { AppComponent } from './app.component'
@@ -40,12 +44,12 @@ describe('AppComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [
-        TourNgBootstrapModule,
        RouterModule.forRoot(routes),
        NgbModalModule,
        AppComponent,
        ToastsComponent,
        FileDropComponent,
+        TourNgBootstrap,
        NgxBootstrapIconsModule.pick(allIcons),
      ],
      providers: [
@@ -53,6 +57,7 @@ describe('AppComponent', () => {
        DirtySavedViewGuard,
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
+        provideUiTour(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router, RouterOutlet } from '@angular/router'
-import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { first, Subscription } from 'rxjs'
 import { ToastsComponent } from './components/common/toasts/toasts.component'
 import { FileDropComponent } from './components/file-drop/file-drop.component'
@@ -21,12 +21,7 @@ import { WebsocketStatusService } from './services/websocket-status.service'
  selector: 'pngx-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
-  imports: [
-    FileDropComponent,
-    ToastsComponent,
-    TourNgBootstrapModule,
-    RouterOutlet,
-  ],
+  imports: [FileDropComponent, ToastsComponent, TourNgBootstrap, RouterOutlet],
 })
 export class AppComponent implements OnInit, OnDestroy {
  private settings = inject(SettingsService)
@@ -167,12 +162,7 @@ export class AppComponent implements OnInit, OnDestroy {
        })
    }

-    const prevBtnTitle = $localize`Prev`
-    const nextBtnTitle = $localize`Next`
-    const endBtnTitle = $localize`End`
-
-    this.tourService.initialize(
-      [
+    this.tourService.initialize([
      {
        anchorId: 'tour.dashboard',
        content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Views are found under Manage > Saved Views once you have created some.`,
@@ -256,19 +246,7 @@ export class AppComponent implements OnInit, OnDestroy {
          offset: 0,
        },
      },
-      ],
-      {
-        enableBackdrop: true,
-        backdropConfig: {
-          offset: 10,
-        },
-        prevBtnTitle,
-        nextBtnTitle,
-        endBtnTitle,
-        isOptional: true,
-        useLegacyTitle: true,
-      }
-    )
+    ])

    this.tourService.start$.subscribe(() => {
      this.renderer.addClass(document.body, 'tour-active')
--- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts
+++ b/src-ui/src/app/components/admin/settings/settings.component.spec.ts
@@ -16,6 +16,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import {
@@ -147,6 +148,7 @@ describe('SettingsComponent', () => {
        PermissionsGuard,
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
+        provideUiTour(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/app-frame/app-frame.component.spec.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.spec.ts
@@ -16,6 +16,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import { SavedView } from 'src/app/data/saved-view'
@@ -157,6 +158,7 @@ describe('AppFrameComponent', () => {
        PermissionsGuard,
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
+        provideUiTour(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -16,7 +16,7 @@ import {
  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
@@ -69,7 +69,7 @@ import { ToastsDropdownComponent } from './toasts-dropdown/toasts-dropdown.compo
    NgbNavModule,
    NgxBootstrapIconsModule,
    DragDropModule,
-    TourNgBootstrapModule,
+    TourNgBootstrap,
  ],
 })
 export class AppFrameComponent
--- a/src-ui/src/app/components/common/page-header/page-header.component.ts
+++ b/src-ui/src/app/components/common/page-header/page-header.component.ts
@@ -3,14 +3,14 @@ import { Component, Input, inject } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { environment } from 'src/environments/environment'

@Component({
  selector: 'pngx-page-header',
  templateUrl: './page-header.component.html',
  styleUrls: ['./page-header.component.scss'],
-  imports: [NgbPopoverModule, NgxBootstrapIconsModule, TourNgBootstrapModule],
+  imports: [NgbPopoverModule, NgxBootstrapIconsModule, TourNgBootstrap],
 })
 export class PageHeaderComponent {
  private titleService = inject(Title)
--- a/src-ui/src/app/components/dashboard/dashboard.component.spec.ts
+++ b/src-ui/src/app/components/dashboard/dashboard.component.spec.ts
@@ -5,8 +5,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import {
+  provideUiTour,
+  TourNgBootstrap,
+  TourService,
+} from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { SavedView } from 'src/app/data/saved-view'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
@@ -75,7 +79,7 @@ describe('DashboardComponent', () => {
      imports: [
        NgbAlertModule,
        RouterTestingModule,
-        TourNgBootstrapModule,
+        TourNgBootstrap,
        DragDropModule,
        NgxBootstrapIconsModule.pick(allIcons),
        DashboardComponent,
@@ -111,6 +115,7 @@ describe('DashboardComponent', () => {
        },
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
+        provideUiTour(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/src-ui/src/app/components/dashboard/dashboard.component.ts
@@ -8,7 +8,7 @@ import {
 import { Component, inject } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { SavedView } from 'src/app/data/saved-view'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
@@ -36,7 +36,7 @@ import { WelcomeWidgetComponent } from './widgets/welcome-widget/welcome-widget.
    WelcomeWidgetComponent,
    IfPermissionsDirective,
    DragDropModule,
-    TourNgBootstrapModule,
+    TourNgBootstrap,
    NgxBootstrapIconsModule,
    RouterModule,
  ],
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts
@@ -9,6 +9,7 @@ import {
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { routes } from 'src/app/app-routing.module'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { PermissionsService } from 'src/app/services/permissions.service'
@@ -61,6 +62,7 @@ describe('UploadFileWidgetComponent', () => {
        },
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
+        provideUiTour(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
@@ -7,7 +7,7 @@ import {
  NgbProgressbarModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } 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'
@@ -33,7 +33,7 @@ import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
    NgbAlertModule,
    NgbProgressbarModule,
    NgxBootstrapIconsModule,
-    TourNgBootstrapModule,
+    TourNgBootstrap,
  ],
 })
 export class UploadFileWidgetComponent extends ComponentWithPermissions {
--- a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.spec.ts
+++ b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { NgbAlert, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 import { WelcomeWidgetComponent } from './welcome-widget.component'
@@ -11,7 +12,7 @@ describe('WelcomeWidgetComponent', () => {

  beforeEach(async () => {
    TestBed.configureTestingModule({
-      providers: [PermissionsGuard],
+      providers: [PermissionsGuard, provideUiTour()],
      imports: [NgbAlertModule, WelcomeWidgetComponent, WidgetFrameComponent],
    }).compileComponents()

--- a/src-ui/src/app/components/document-list/document-list.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.spec.ts
@@ -16,6 +16,7 @@ import {
  NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { Subject, of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import {
@@ -105,6 +106,7 @@ describe('DocumentListComponent', () => {
        PermissionsGuard,
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
+        provideUiTour(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -21,7 +21,7 @@ import {
  NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { filter, first, map, Subject, switchMap, takeUntil } from 'rxjs'
 import {
  DEFAULT_DISPLAY_FIELDS,
@@ -99,7 +99,7 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
    NgbPaginationModule,
    NgClass,
    RouterModule,
-    TourNgBootstrapModule,
+    TourNgBootstrap,
  ],
 })
 export class DocumentListComponent
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
@@ -21,6 +21,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
@@ -251,6 +252,7 @@ describe('FilterEditorComponent', () => {
        SettingsService,
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
+        provideUiTour(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -16,7 +16,7 @@ import {
  NgbTypeaheadModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { Observable, Subject, from } from 'rxjs'
 import {
  catchError,
@@ -251,7 +251,7 @@ const DEFAULT_TEXT_FILTER_MODIFIER_OPTIONS = [
    NgbTypeaheadModule,
    FormsModule,
    ReactiveFormsModule,
-    TourNgBootstrapModule,
+    TourNgBootstrap,
  ],
 })
 export class FilterEditorComponent
--- a/src-ui/src/app/guards/dirty-saved-view.guard.spec.ts
+++ b/src-ui/src/app/guards/dirty-saved-view.guard.spec.ts
@@ -4,6 +4,7 @@ import { TestBed } from '@angular/core/testing'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { routes } from '../app-routing.module'
 import { ConfirmDialogComponent } from '../components/common/confirm-dialog/confirm-dialog.component'
 import { DocumentListComponent } from '../components/document-list/document-list.component'
@@ -30,6 +31,7 @@ describe('DirtySavedViewGuard', () => {
        DocumentListComponent,
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
+        provideUiTour(),
      ],
    })

--- a/src-ui/src/app/guards/permissions.guard.spec.ts
+++ b/src-ui/src/app/guards/permissions.guard.spec.ts
@@ -1,10 +1,10 @@
 import { TestBed } from '@angular/core/testing'
 import { ActivatedRoute, RouterState } from '@angular/router'
-import { TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { provideUiTour, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import {
  PermissionAction,
-  PermissionType,
  PermissionsService,
+  PermissionType,
 } from '../services/permissions.service'
 import { ToastService } from '../services/toast.service'
 import { PermissionsGuard } from './permissions.guard'
@@ -45,6 +45,7 @@ describe('PermissionsGuard', () => {
        },
        TourService,
        ToastService,
+        provideUiTour(),
      ],
    })

--- a/src-ui/src/main.ts
+++ b/src-ui/src/main.ts
@@ -145,7 +145,6 @@ import {
 } from 'ngx-bootstrap-icons'
 import { ColorSliderModule } from 'ngx-color/slider'
 import { CookieService } from 'ngx-cookie-service'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
 import { AppRoutingModule } from './app/app-routing.module'
 import { AppComponent } from './app/app.component'
 import { DirtyDocGuard } from './app/guards/dirty-doc.guard'
@@ -195,6 +194,7 @@ import localeUk from '@angular/common/locales/uk'
 import localeVi from '@angular/common/locales/vi'
 import localeZh from '@angular/common/locales/zh'
 import localeZhHant from '@angular/common/locales/zh-Hant'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { CorrespondentNamePipe } from './app/pipes/correspondent-name.pipe'
 import { DocumentTypeNamePipe } from './app/pipes/document-type-name.pipe'
 import { StoragePathNamePipe } from './app/pipes/storage-path-name.pipe'
@@ -374,7 +374,6 @@ bootstrapApplication(AppComponent, {
      PdfViewerModule,
      NgSelectModule,
      ColorSliderModule,
-      TourNgBootstrapModule,
      DragDropModule,
      NgxBootstrapIconsModule.pick(icons)
    ),
@@ -397,5 +396,16 @@ bootstrapApplication(AppComponent, {
      withInterceptors([withCsrfInterceptor, withApiVersionInterceptor]),
      withFetch()
    ),
+    provideUiTour({
+      enableBackdrop: true,
+      backdropConfig: {
+        offset: 10,
+      },
+      prevBtnTitle: $localize`Prev`,
+      nextBtnTitle: $localize`Next`,
+      endBtnTitle: $localize`End`,
+      isOptional: true,
+      useLegacyTitle: true,
+    }),
  ],
 }).catch((err) => console.error(err))