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/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'))
 }