feat: migrate to Angular 14 and RxJS 7 (#1681)

* feat: migrate to Angular 14 and RxJS 7

* chore: update ng-qrcode

* chore: update patch-db

* chore: remove unnecessary generics

frontend/angular.json

@@ -426,9 +426,8 @@
       }
     }
   },
-  "defaultProject": "ui",
   "cli": {
-    "defaultCollection": "@ionic/angular-toolkit"
+    "schematicCollections": ["@ionic/angular-toolkit"]
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

frontend/package.json

@@ -22,15 +22,15 @@
     "build-config": "node build-config.js"
   },
   "dependencies": {
-    "@angular/animations": "^13.3.0",
-    "@angular/common": "^13.3.0",
-    "@angular/compiler": "^13.3.0",
-    "@angular/core": "^13.3.0",
-    "@angular/forms": "^13.3.0",
-    "@angular/platform-browser": "^13.3.0",
-    "@angular/platform-browser-dynamic": "^13.3.0",
-    "@angular/router": "^13.3.0",
-    "@ionic/angular": "^6.0.13",
+    "@angular/animations": "^14.1.0",
+    "@angular/common": "^14.1.0",
+    "@angular/compiler": "^14.1.0",
+    "@angular/core": "^14.1.0",
+    "@angular/forms": "^14.1.0",
+    "@angular/platform-browser": "^14.1.0",
+    "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/router": "^14.1.0",
+    "@ionic/angular": "^6.1.15",
     "@ionic/storage-angular": "^3.0.6",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@start9labs/argon2": "^0.1.0",
@@ -47,10 +47,10 @@
     "marked": "^4.0.0",
     "monaco-editor": "^0.33.0",
     "mustache": "^4.2.0",
-    "ng-qrcode": "^6.0.0",
+    "ng-qrcode": "^7.0.0",
     "patch-db-client": "file: ../../../patch-db/client",
     "pbkdf2": "^3.1.2",
-    "rxjs": "^6.6.7",
+    "rxjs": "^7.5.6",
     "swiper": "^8.2.4",
     "ts-matches": "^5.1.7",
     "tslib": "^2.3.0",
@@ -58,10 +58,10 @@
     "zone.js": "^0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.1.4",
-    "@angular/cli": "^13.1.4",
-    "@angular/compiler-cli": "^13.3.0",
-    "@angular/language-service": "^13.3.0",
+    "@angular-devkit/build-angular": "^14.1.0",
+    "@angular/cli": "^14.1.0",
+    "@angular/compiler-cli": "^14.1.0",
+    "@angular/language-service": "^14.1.0",
     "@ionic/cli": "^6.19.0",
     "@types/aes-js": "^3.1.1",
     "@types/dompurify": "^2.3.3",
@@ -74,7 +74,7 @@
     "@types/uuid": "^8.3.1",
     "husky": "^4.3.8",
     "lint-staged": "^12.3.7",
-    "ng-packagr": "^13.3.0",
+    "ng-packagr": "^14.1.0",
     "node-html-parser": "^5.3.3",
     "prettier": "^2.6.1",
     "raw-loader": "^4.0.2",

frontend/projects/diagnostic-ui/src/app/app.module.ts

@@ -15,7 +15,6 @@ const { useMocks } = require('../../../../config.json') as WorkspaceConfig
 
 @NgModule({
   declarations: [AppComponent],
-  entryComponents: [],
   imports: [
     HttpClientModule,
     BrowserModule,

frontend/projects/diagnostic-ui/src/app/services/http.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { HttpError, RpcError } from '@start9labs/shared'
+import { firstValueFrom } from 'rxjs'
 
 @Injectable({
   providedIn: 'root',
@@ -16,11 +17,7 @@ export class HttpService {
 
   async httpRequest<T>(body: RPCOptions): Promise<T> {
     const url = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/rpc/v1`
-    return this.http
-      .post(url, body)
-      .toPromise()
-      .then(a => a as T)
-      .catch(e => {
+    return firstValueFrom(this.http.post<T>(url, body)).catch(e => {
       throw new HttpError(e)
     })
   }

frontend/projects/setup-wizard/src/app/app.module.ts

@@ -26,7 +26,6 @@ const { useMocks } = require('../../../../config.json') as WorkspaceConfig
 
 @NgModule({
   declarations: [AppComponent],
-  entryComponents: [],
   imports: [
     BrowserModule,
     IonicModule.forRoot({

frontend/projects/setup-wizard/src/app/services/api/http.service.ts

@@ -1,11 +1,6 @@
 import { Injectable } from '@angular/core'
-import {
-  HttpClient,
-  HttpErrorResponse,
-  HttpHeaders,
-  HttpParams,
-} from '@angular/common/http'
-import { Observable } from 'rxjs'
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
+import { firstValueFrom, Observable } from 'rxjs'
 import * as aesjs from 'aes-js'
 import * as pbkdf2 from 'pbkdf2'
 import { HttpError, RpcError } from '@start9labs/shared'
@@ -70,8 +65,7 @@ export class HttpService {
 
     const req = this.http.post(url, options.body, options)
 
-    return req
-      .toPromise()
+    return firstValueFrom(req)
       .then(res =>
         AES_CTR.decryptPbkdf2(
           this.productKey || '',
@@ -112,8 +106,7 @@ export class HttpService {
       options,
     ) as any
 
-    return req
-      .toPromise()
+    return firstValueFrom(req)
       .then(res => res.body)
       .catch(e => {
         throw new HttpError(e)

frontend/projects/shared/src/util/unused.ts

@@ -67,8 +67,8 @@ export function partitionArray<T>(
   ts: T[],
   condition: (t: T) => boolean,
 ): [T[], T[]] {
-  const yes = [] as T[]
-  const no = [] as T[]
+  const yes: T[] = []
+  const no: T[] = []
   ts.forEach(t => {
     if (condition(t)) {
       yes.push(t)

frontend/projects/ui/src/app/app.module.ts

@@ -22,7 +22,6 @@ import { PatchDbModule } from './services/patch-db/patch-db.module'
 
 @NgModule({
   declarations: [AppComponent],
-  entryComponents: [],
   imports: [
     HttpClientModule,
     BrowserAnimationsModule,

frontend/projects/ui/src/app/app.providers.ts

@@ -1,6 +1,6 @@
 import { Bootstrapper, DBCache } from 'patch-db-client'
 import { APP_INITIALIZER, ErrorHandler, Provider } from '@angular/core'
-import { FormBuilder } from '@angular/forms'
+import { UntypedFormBuilder } from '@angular/forms'
 import { Router, RouteReuseStrategy } from '@angular/router'
 import { IonicRouteStrategy, IonNav } from '@ionic/angular'
 import { Storage } from '@ionic/storage-angular'
@@ -20,7 +20,7 @@ const { useMocks } = require('../../../../config.json') as WorkspaceConfig
 
 export const APP_PROVIDERS: Provider[] = [
   FilterPackagesPipe,
-  FormBuilder,
+  UntypedFormBuilder,
   IonNav,
   {
     provide: RouteReuseStrategy,

frontend/projects/ui/src/app/components/app-wizard/wizard-defs.ts

@@ -6,6 +6,7 @@ import { ApiService } from '../../services/api/embassy-api.service'
 import { AppWizardComponent, SlideDefinition } from './app-wizard.component'
 import { ConfigService } from 'src/app/services/config.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
+import { firstValueFrom } from 'rxjs'
 
 @Injectable({ providedIn: 'root' })
 export class WizardDefs {
@@ -39,12 +40,12 @@ export class WizardDefs {
           verb: 'beginning update for',
           title,
           Fn: () =>
-            this.marketplaceService
-              .installPackage({
+            firstValueFrom(
+              this.marketplaceService.installPackage({
                 id,
                 'version-spec': version ? `=${version}` : undefined,
-              })
-              .toPromise(),
+              }),
+            ),
         },
       },
     ]
@@ -80,12 +81,12 @@ export class WizardDefs {
           verb: 'beginning downgrade for',
           title,
           Fn: () =>
-            this.marketplaceService
-              .installPackage({
+            firstValueFrom(
+              this.marketplaceService.installPackage({
                 id,
                 'version-spec': version ? `=${version}` : undefined,
-              })
-              .toPromise(),
+              }),
+            ),
         },
       },
     ]

frontend/projects/ui/src/app/components/form-object/form-object.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core'
 import {
   AbstractFormGroupDirective,
-  FormArray,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormGroup,
 } from '@angular/forms'
 import {
   AlertButton,
@@ -36,7 +36,7 @@ interface Config {
 })
 export class FormObjectComponent {
   @Input() objectSpec!: ConfigSpec
-  @Input() formGroup!: FormGroup
+  @Input() formGroup!: UntypedFormGroup
   @Input() unionSpec?: ValueSpecUnion
   @Input() current?: Config
   @Input() original?: Config
@@ -153,7 +153,7 @@ export class FormObjectComponent {
   }
 
   addListItem(key: string, markDirty = true, val?: string): void {
-    const arr = this.formGroup.get(key) as FormArray
+    const arr = this.formGroup.get(key) as UntypedFormArray
     if (markDirty) arr.markAsDirty()
     const listSpec = this.objectSpec[key] as ValueSpecList
     const newItem = this.formService.getListItem(listSpec, val)
@@ -330,7 +330,7 @@ export class FormObjectComponent {
   private deleteListItem(key: string, index: number, markDirty = true): void {
     if (this.objectListDisplay[key])
       this.objectListDisplay[key][index].height = '0px'
-    const arr = this.formGroup.get(key) as FormArray
+    const arr = this.formGroup.get(key) as UntypedFormArray
     if (markDirty) arr.markAsDirty()
     pauseFor(250).then(() => {
       if (this.objectListDisplay[key])

frontend/projects/ui/src/app/modals/app-config/app-config.page.ts

@@ -16,7 +16,7 @@ import { DependentInfo } from 'src/app/types/dependent-info'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { FormGroup } from '@angular/forms'
+import { UntypedFormGroup } from '@angular/forms'
 import {
   convertValuesRecursive,
   FormService,
@@ -40,7 +40,7 @@ export class AppConfigPage {
   pkg!: PackageDataEntry
   loadingText!: string
   configSpec!: ConfigSpec
-  configForm!: FormGroup
+  configForm!: UntypedFormGroup
 
   original?: object // only if existing config
   diff?: string[] // only if dependent info

frontend/projects/ui/src/app/modals/generic-form/generic-form.page.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { FormGroup } from '@angular/forms'
+import { UntypedFormGroup } from '@angular/forms'
 import { ModalController } from '@ionic/angular'
 import {
   convertValuesRecursive,
@@ -25,7 +25,7 @@ export class GenericFormPage {
   @Input() initialValue: object = {}
 
   submitBtn!: ActionButton
-  formGroup!: FormGroup
+  formGroup!: UntypedFormGroup
 
   constructor(
     private readonly modalCtrl: ModalController,

frontend/projects/ui/src/app/pages/apps-routes/app-list/package-info.pipe.ts

@@ -14,10 +14,6 @@ export class PackageInfoPipe implements PipeTransform {
   transform(pkg: PackageDataEntry): Observable<PkgInfo> {
     return this.patch
       .watch$('package-data', pkg.manifest.id)
-      .pipe(
-        filter<PackageDataEntry>(Boolean),
-        startWith(pkg),
-        map(getPackageInfo),
-      )
+      .pipe(filter(Boolean), startWith(pkg), map(getPackageInfo))
   }
 }

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.ts

@@ -21,6 +21,7 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { Breakages } from 'src/app/services/api/api.types'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { getAllPackages } from 'src/app/util/get-package-data'
+import { firstValueFrom } from 'rxjs'
 
 @Component({
   selector: 'marketplace-show-controls',
@@ -136,12 +137,12 @@ export class MarketplaceShowControlsComponent {
     const { id, version } = this.pkg.manifest
 
     try {
-      await this.marketplaceService
-        .installPackage({
+      await firstValueFrom(
+        this.marketplaceService.installPackage({
           id,
           'version-spec': `=${version}`,
-        })
-        .toPromise()
+        }),
+      )
     } catch (e: any) {
       this.errToast.present(e)
     } finally {

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts

@@ -23,10 +23,7 @@ export class MarketplaceShowPage {
 
   readonly localPkg$ = this.patch
     .watch$('package-data', this.pkgId)
-    .pipe(
-      filter<PackageDataEntry>(Boolean),
-      shareReplay({ bufferSize: 1, refCount: true }),
-    )
+    .pipe(filter(Boolean), shareReplay({ bufferSize: 1, refCount: true }))
 
   readonly pkg$: Observable<MarketplacePkg | null> = this.loadVersion$.pipe(
     switchMap(version =>

frontend/projects/ui/src/app/services/form.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core'
 import {
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
   ValidatorFn,
   Validators,
 } from '@angular/forms'
@@ -31,12 +31,12 @@ const Mustache = require('mustache')
   providedIn: 'root',
 })
 export class FormService {
-  constructor(private readonly formBuilder: FormBuilder) {}
+  constructor(private readonly formBuilder: UntypedFormBuilder) {}
 
   createForm(
     spec: ConfigSpec,
     current: { [key: string]: any } = {},
-  ): FormGroup {
+  ): UntypedFormGroup {
     return this.getFormGroup(spec, [], current)
   }
 
@@ -44,7 +44,7 @@ export class FormService {
     spec: ValueSpecUnion | ListValueSpecUnion,
     selection: string,
     current?: { [key: string]: any } | null,
-  ): FormGroup {
+  ): UntypedFormGroup {
     const { variants, tag } = spec
     const { name, description, warning } = isFullUnion(spec)
       ? spec
@@ -85,8 +85,11 @@ export class FormService {
     config: ConfigSpec,
     validators: ValidatorFn[] = [],
     current?: { [key: string]: any } | null,
-  ): FormGroup {
-    let group: Record<string, FormGroup | FormArray | FormControl> = {}
+  ): UntypedFormGroup {
+    let group: Record<
+      string,
+      UntypedFormGroup | UntypedFormArray | UntypedFormControl
+    > = {}
     Object.entries(config).map(([key, spec]) => {
       if (spec.type === 'pointer') return
       group[key] = this.getFormEntry(spec, current ? current[key] : undefined)
@@ -97,7 +100,7 @@ export class FormService {
   private getFormEntry(
     spec: ValueSpec,
     currentValue?: any,
-  ): FormGroup | FormArray | FormControl {
+  ): UntypedFormGroup | UntypedFormArray | UntypedFormControl {
     let validators: ValidatorFn[]
     let value: any
     switch (spec.type) {
@@ -250,7 +253,7 @@ export function listInRange(stringRange: string): ValidatorFn {
 
 export function listItemIssue(): ValidatorFn {
   return parentControl => {
-    const { controls } = parentControl as FormArray
+    const { controls } = parentControl as UntypedFormArray
     const problemChild = controls.find(c => c.invalid)
     if (problemChild) {
       return { listItemIssue: { value: 'Invalid entries' } }
@@ -512,7 +515,7 @@ function isUnion(spec: any): spec is ListValueSpecUnion {
 
 export function convertValuesRecursive(
   configSpec: ConfigSpec,
-  group: FormGroup,
+  group: UntypedFormGroup,
 ) {
   Object.entries(configSpec).forEach(([key, valueSpec]) => {
     const control = group.get(key)
@@ -524,13 +527,13 @@ export function convertValuesRecursive(
     } else if (valueSpec.type === 'string') {
       if (!control.value) control.setValue(null)
     } else if (valueSpec.type === 'object') {
-      convertValuesRecursive(valueSpec.spec, group.get(key) as FormGroup)
+      convertValuesRecursive(valueSpec.spec, group.get(key) as UntypedFormGroup)
     } else if (valueSpec.type === 'union') {
-      const formGr = group.get(key) as FormGroup
+      const formGr = group.get(key) as UntypedFormGroup
       const spec = valueSpec.variants[formGr.controls[valueSpec.tag.id].value]
       convertValuesRecursive(spec, formGr)
     } else if (valueSpec.type === 'list') {
-      const formArr = group.get(key) as FormArray
+      const formArr = group.get(key) as UntypedFormArray
       const { controls } = formArr
 
       if (valueSpec.subtype === 'number') {
@@ -544,16 +547,16 @@ export function convertValuesRecursive(
       } else if (valueSpec.subtype === 'object') {
         controls.forEach(formGroup => {
           const objectSpec = valueSpec.spec as ListValueSpecObject
-          convertValuesRecursive(objectSpec.spec, formGroup as FormGroup)
+          convertValuesRecursive(objectSpec.spec, formGroup as UntypedFormGroup)
         })
       } else if (valueSpec.subtype === 'union') {
         controls.forEach(formGroup => {
           const unionSpec = valueSpec.spec as ListValueSpecUnion
           const spec =
             unionSpec.variants[
-              (formGroup as FormGroup).controls[unionSpec.tag.id].value
+              (formGroup as UntypedFormGroup).controls[unionSpec.tag.id].value
             ]
-          convertValuesRecursive(spec, formGroup as FormGroup)
+          convertValuesRecursive(spec, formGroup as UntypedFormGroup)
         })
       }
     }

frontend/projects/ui/src/app/services/http.service.ts

@@ -1,6 +1,13 @@
 import { Injectable } from '@angular/core'
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
-import { from, interval, Observable, race } from 'rxjs'
+import {
+  Observable,
+  from,
+  interval,
+  race,
+  firstValueFrom,
+  lastValueFrom,
+} from 'rxjs'
 import { map, take } from 'rxjs/operators'
 import { ConfigService } from './config.service'
 import { Revision } from 'patch-db-client'
@@ -90,8 +97,9 @@ export class HttpService {
         break
     }
 
-    return (httpOpts.timeout ? withTimeout(req, httpOpts.timeout) : req)
-      .toPromise()
+    return firstValueFrom(
+      httpOpts.timeout ? withTimeout(req, httpOpts.timeout) : req,
+    )
       .then(res => res.body)
       .catch(e => {
         throw new HttpError(e)
@@ -183,7 +191,7 @@ function hasParams(
 
 function withTimeout<U>(req: Observable<U>, timeout: number): Observable<U> {
   return race(
-    from(req.toPromise()), // this guarantees it only emits on completion, intermediary emissions are suppressed.
+    from(lastValueFrom(req)), // this guarantees it only emits on completion, intermediary emissions are suppressed.
     interval(timeout).pipe(
       take(1),
       map(() => {

frontend/projects/ui/src/app/util/get-marketplace.ts

@@ -1,9 +1,10 @@
 import { first } from 'rxjs/operators'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { UIMarketplaceData } from 'src/app/services/patch-db/data-model'
+import { firstValueFrom } from 'rxjs'
 
 export function getMarketplace(
   patch: PatchDbService,
 ): Promise<UIMarketplaceData> {
-  return patch.watch$('ui', 'marketplace').pipe(first()).toPromise()
+  return firstValueFrom(patch.watch$('ui', 'marketplace'))
 }

frontend/projects/ui/src/app/util/get-package-data.ts

@@ -1,16 +1,17 @@
 import { first } from 'rxjs/operators'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { firstValueFrom } from 'rxjs'
 
 export function getPackage(
   patch: PatchDbService,
   id: string,
 ): Promise<PackageDataEntry> {
-  return patch.watch$('package-data', id).pipe(first()).toPromise()
+  return firstValueFrom(patch.watch$('package-data', id))
 }
 
 export function getAllPackages(
   patch: PatchDbService,
 ): Promise<Record<string, PackageDataEntry>> {
-  return patch.watch$('package-data').pipe(first()).toPromise()
+  return firstValueFrom(patch.watch$('package-data'))
 }

frontend/projects/ui/src/app/util/get-server-info.ts

@@ -1,7 +1,8 @@
 import { first } from 'rxjs/operators'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { ServerInfo } from 'src/app/services/patch-db/data-model'
+import { firstValueFrom } from 'rxjs'
 
 export function getServerInfo(patch: PatchDbService): Promise<ServerInfo> {
-  return patch.watch$('server-info').pipe(first()).toPromise()
+  return firstValueFrom(patch.watch$('server-info'))
 }

frontend/tsconfig.json

@@ -16,7 +16,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2020",
     "lib": ["es2020", "dom"],
     "paths": {