fix: progress not updating (#1055)

ui/src/app/modules/sharing.module.ts

@@ -1,9 +1,17 @@
 import { NgModule } from '@angular/core'
-import { EmverComparesPipe, EmverSatisfiesPipe, EmverDisplayPipe } from '../pipes/emver.pipe'
+import {
+  EmverComparesPipe,
+  EmverSatisfiesPipe,
+  EmverDisplayPipe,
+} from '../pipes/emver.pipe'
 import { IncludesPipe } from '../pipes/includes.pipe'
 import { TypeofPipe } from '../pipes/typeof.pipe'
 import { MarkdownPipe } from '../pipes/markdown.pipe'
-import { TruncateCenterPipe, TruncateEndPipe, TruncateTailPipe } from '../pipes/truncate.pipe'
+import {
+  TruncateCenterPipe,
+  TruncateEndPipe,
+  TruncateTailPipe,
+} from '../pipes/truncate.pipe'
 import { MaskPipe } from '../pipes/mask.pipe'
 import { HasUiPipe, LaunchablePipe } from '../pipes/ui.pipe'
 import { EmptyPipe } from '../pipes/empty.pipe'
@@ -12,6 +20,7 @@ import { InstallState } from '../pipes/install-state.pipe'
 import { TextSpinnerComponentModule } from '../components/text-spinner/text-spinner.component.module'
 import { ConvertBytesPipe } from '../pipes/convert-bytes.pipe'
 import { DurationToSecondsPipe } from '../pipes/unit-conversion.pipe'
+import { InstallProgressPipe } from '../pipes/install-progress.pipe'
 
 @NgModule({
   declarations: [
@@ -19,6 +28,7 @@ import { DurationToSecondsPipe } from '../pipes/unit-conversion.pipe'
     EmverSatisfiesPipe,
     TypeofPipe,
     IncludesPipe,
+    InstallProgressPipe,
     InstallState,
     MarkdownPipe,
     TruncateCenterPipe,
@@ -33,9 +43,7 @@ import { DurationToSecondsPipe } from '../pipes/unit-conversion.pipe'
     ConvertBytesPipe,
     DurationToSecondsPipe,
   ],
-  imports: [
+  imports: [TextSpinnerComponentModule],
-    TextSpinnerComponentModule,
-  ],
   exports: [
     EmverComparesPipe,
     EmverSatisfiesPipe,
@@ -48,6 +56,7 @@ import { DurationToSecondsPipe } from '../pipes/unit-conversion.pipe'
     MaskPipe,
     EmverDisplayPipe,
     HasUiPipe,
+    InstallProgressPipe,
     InstallState,
     LaunchablePipe,
     EmptyPipe,
@@ -58,4 +67,4 @@ import { DurationToSecondsPipe } from '../pipes/unit-conversion.pipe'
     TextSpinnerComponentModule,
   ],
 })
-export class SharingModule { }
+export class SharingModule {}

ui/src/app/pages/apps-routes/app-show/app-show.page.html

@@ -31,7 +31,7 @@
     <!-- ** installing, updating, restoring ** -->
     <ion-content *ngIf="showProgress(pkg)">
       <app-show-progress
-        *ngIf="pkg['install-progress'] | installState as installProgress"
+        *ngIf="pkg | installState as installProgress"
         [pkg]="pkg"
         [installProgress]="installProgress"
       ></app-show-progress>

ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.html

@@ -5,7 +5,7 @@
       size="x-large"
       weight="500"
       [disconnected]="connectionFailure"
-      [installProgress]="(progress | installState)?.totalProgress"
+      [installProgress]="(pkg | installState)?.totalProgress"
       [rendering]="PR[status.primary]"
       [sigtermTimeout]="pkg.manifest.main['sigterm-timeout']"
     ></status>

ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts

@@ -1,12 +1,6 @@
-import {
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  Input,
-} from '@angular/core'
 import { UiLauncherService } from 'src/app/services/ui-launcher.service'
 import {
-  InstallProgress,
   InterfaceDef,
   PackageDataEntry,
   PackageState,
@@ -68,10 +62,6 @@ export class AppShowStatusComponent {
     return this.pkg.manifest.interfaces
   }
 
-  get progress(): InstallProgress | undefined {
-    return this.pkg['install-progress']
-  }
-
   get pkgStatus(): Status {
     return this.pkg.installed.status
   }

ui/src/app/pages/apps-routes/app-show/pipes/to-dependencies.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
 import { NavigationExtras } from '@angular/router'
 import { NavController } from '@ionic/angular'
 import { combineLatest, Observable } from 'rxjs'
-import { filter, map } from 'rxjs/operators'
+import { filter, map, startWith } from 'rxjs/operators'
 import { DependentInfo, exists } from 'src/app/util/misc.util'
 import {
   DependencyError,
@@ -48,12 +48,13 @@ export class ToDependenciesPipe implements PipeTransform {
         'dependency-errors',
       ),
     ]).pipe(
-      filter(deps => deps.every(exists)),
+      filter(deps => deps.every(exists) && !!pkg.installed),
       map(([currentDeps, depErrors]) =>
         Object.keys(currentDeps)
           .filter(id => !!pkg.manifest.dependencies[id])
           .map(id => this.setDepValues(pkg, id, depErrors)),
       ),
+      startWith([]),
     )
   }
 

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html

@@ -117,9 +117,9 @@
                     <ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
                   </p>
                   <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
-                    <ion-text color="primary" *ngIf="(localPkg['install-progress'] | installState) as progress">
+                    <ion-text color="primary" *ngIf="(localPkg['install-progress'] | installProgress) as progress">
                       Installing
-                      <span class="loading-dots"></span>{{ progress.totalProgress < 99 ? progress.totalProgress + '%' : 'finalizing' }}
+                      <span class="loading-dots"></span>{{ progress }}
                     </ion-text>
                   </p>
                   <p *ngIf="localPkg.state === PackageState.Removing">

ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html

@@ -32,9 +32,9 @@
                   </p>
                   <!-- installing, updating -->
                   <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
-                    <ion-text color="primary" *ngIf="(localPkg['install-progress'] | installState) as progress">
+                    <ion-text color="primary" *ngIf="(localPkg['install-progress'] | installProgress) as progress">
                       Installing
-                      <span class="loading-dots"></span>{{ progress.totalProgress < 99 ? progress.totalProgress + '%' : 'finalizing' }}
+                      <span class="loading-dots"></span>{{ progress }}
                     </ion-text>
                   </p>
                   <!-- removing -->

ui/src/app/pipes/install-progress.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { InstallProgress } from '../services/patch-db/data-model'
+import { packageLoadingProgress } from '../util/package-loading-progress'
+
+@Pipe({
+  name: 'installProgress',
+})
+export class InstallProgressPipe implements PipeTransform {
+  transform(loadData: InstallProgress): string {
+    const { totalProgress } = packageLoadingProgress(loadData)
+
+    return totalProgress < 99 ? totalProgress + '%' : 'finalizing'
+  }
+}

ui/src/app/pipes/install-state.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { InstallProgress } from '../services/patch-db/data-model'
+import { PackageDataEntry } from '../services/patch-db/data-model'
 import {
   packageLoadingProgress,
   ProgressData,
@@ -9,7 +9,7 @@ import {
   name: 'installState',
 })
 export class InstallState implements PipeTransform {
-  transform(loadData: InstallProgress): ProgressData | null {
+  transform(pkg: PackageDataEntry): ProgressData | null {
-    return packageLoadingProgress(loadData)
+    return packageLoadingProgress(pkg['install-progress'])
   }
 }