fix duplicate patch updates, add scroll button to setup success (#1800)

* fix duplicate patch updates, add scroll button to setup success

* update path

* update patch

* update patch

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

@@ -1,7 +1,7 @@
 <ng-container *ngIf="pkg$ | async as pkg">
   <app-show-header [pkg]="pkg"></app-show-header>
 
-  <ion-content *ngIf="pkg | toDependencies | async as dependencies">
+  <ion-content *ngIf="pkg | toDependencies as dependencies">
     <ion-item-group *ngIf="pkg | toStatus as status">
       <!-- ** status ** -->
       <app-show-status

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

@@ -6,7 +6,6 @@ import {
   PackageDataEntry,
   PackageMainStatus,
   PackageState,
-  UIMarketplaceData,
 } from 'src/app/services/patch-db/data-model'
 import {
   PackageStatus,
@@ -16,11 +15,7 @@ import { filter, tap } from 'rxjs/operators'
 import { ActivatedRoute } from '@angular/router'
 import { getPkgId } from '@start9labs/shared'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
-import {
-  AbstractMarketplaceService,
-  Marketplace,
-} from '@start9labs/marketplace'
-import { Observable } from 'rxjs'
+import { AbstractMarketplaceService } from '@start9labs/marketplace'
 
 const STATES = [
   PackageState.Installing,

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

@@ -1,16 +1,12 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { NavigationExtras } from '@angular/router'
 import { NavController } from '@ionic/angular'
-import { combineLatest, Observable } from 'rxjs'
-import { filter, map, startWith } from 'rxjs/operators'
 import {
-  DataModel,
   DependencyError,
   DependencyErrorType,
   PackageDataEntry,
 } from 'src/app/services/patch-db/data-model'
 import { DependentInfo } from 'src/app/types/dependent-info'
-import { PatchDB } from 'patch-db-client'
 import { ModalService } from 'src/app/services/modal.service'
 
 export interface DependencyInfo {
@@ -28,35 +24,18 @@ export interface DependencyInfo {
 })
 export class ToDependenciesPipe implements PipeTransform {
   constructor(
-    private readonly patch: PatchDB<DataModel>,
     private readonly navCtrl: NavController,
     private readonly modalService: ModalService,
   ) {}
 
-  transform(pkg: PackageDataEntry): Observable<DependencyInfo[]> {
-    return combineLatest([
-      this.patch.watch$(
-        'package-data',
-        pkg.manifest.id,
-        'installed',
-        'current-dependencies',
-      ),
-      this.patch.watch$(
-        'package-data',
-        pkg.manifest.id,
-        'installed',
-        'status',
-        'dependency-errors',
-      ),
-    ]).pipe(
-      filter(deps => deps.every(Boolean) && !!pkg.installed),
-      map(([currentDeps, depErrors]) =>
-        Object.keys(currentDeps)
-          .filter(id => !!pkg.manifest.dependencies[id])
-          .map(id => this.setDepValues(pkg, id, depErrors)),
-      ),
-      startWith([]),
-    )
+  transform(pkg: PackageDataEntry): DependencyInfo[] {
+    if (!pkg.installed) return []
+
+    return Object.keys(pkg.installed?.['current-dependencies'])
+      .filter(id => !!pkg.manifest.dependencies[id])
+      .map(id =>
+        this.setDepValues(pkg, id, pkg.installed!.status['dependency-errors']),
+      )
   }
 
   private setDepValues(

frontend/projects/ui/src/app/services/api/embassy-mock-api.service.ts

@@ -863,11 +863,16 @@ export class MockApiService extends ApiService {
     }
 
     setTimeout(() => {
-      const patch2: Operation<PackageDataEntry>[] = [
+      const patch2: Operation<any>[] = [
         {
           op: PatchOp.REPLACE,
-          path: `/package-data/${id}`,
-          value: { ...Mock.LocalPkgs[id] },
+          path: `/package-data/${id}/state`,
+          value: PackageState.Installed,
+        },
+        {
+          op: PatchOp.ADD,
+          path: `/package-data/${id}/installed`,
+          value: { ...Mock.LocalPkgs[id].installed },
         },
         {
           op: PatchOp.REMOVE,

frontend/projects/ui/src/app/services/patch-db/patch-db.factory.ts

@@ -1,5 +1,12 @@
 import { InjectionToken, Injector } from '@angular/core'
-import { bufferTime, catchError, switchMap, take, tap } from 'rxjs/operators'
+import {
+  bufferTime,
+  catchError,
+  filter,
+  switchMap,
+  take,
+  tap,
+} from 'rxjs/operators'
 import { Update } from 'patch-db-client'
 import { DataModel } from './data-model'
 import { defer, EMPTY, from, interval, merge, Observable } from 'rxjs'
@@ -22,6 +29,7 @@ export function sourceFactory(
 
     const websocket$ = api.openPatchWebsocket$().pipe(
       bufferTime(250),
+      filter(updates => !!updates.length),
       catchError((_, watch$) => {
         connectionService.websocketConnected$.next(false)
 

frontend/projects/ui/src/app/services/pkg-status-rendering.service.ts

@@ -167,7 +167,11 @@ export const PrimaryRendering: Record<string, StatusRendering> = {
     color: 'success',
     showDots: false,
   },
-  [PrimaryStatus.NeedsConfig]: { display: 'Needs Config', color: 'warning' },
+  [PrimaryStatus.NeedsConfig]: {
+    display: 'Needs Config',
+    color: 'warning',
+    showDots: false,
+  },
 }
 
 export const DependencyRendering: Record<string, StatusRendering> = {