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/package.json

@@ -15,8 +15,8 @@
     "build:setup-wizard": "ng run setup-wizard:build",
     "build:ui": "ng run ui:build",
     "build:all": "npm run build:deps && npm run build:diagnostic-ui && npm run build:setup-wizard && npm run build:ui",
-    "start:diagnostic-ui": "npm run-script build-config && ionic serve --project diagnostic-ui --host 0.0.0.0",
-    "start:setup-wizard": "npm run-script build-config && ionic serve --project setup-wizard --host 0.0.0.0",
+    "start:diagnostic": "npm run-script build-config && ionic serve --project diagnostic-ui --host 0.0.0.0",
+    "start:setup": "npm run-script build-config && ionic serve --project setup-wizard --host 0.0.0.0",
     "start:ui": "npm run-script build-config && ionic serve --project ui --ip --host 0.0.0.0",
     "start:ui:proxy": "npm run-script build-config && ionic serve --project ui --ip --host 0.0.0.0 -- --proxy-config proxy.conf.json",
     "build-config": "node build-config.js"

frontend/projects/setup-wizard/src/app/pages/success/success.page.html

@@ -1,4 +1,4 @@
-<ion-content>
+<ion-content [scrollEvents]="true" (ionScrollEnd)="checkBottom()">
   <ion-grid>
     <ion-row>
       <ion-col>
@@ -147,8 +147,27 @@
               </p>
             </div>
           </ion-card-content>
+          <div id="bottom-div"></div>
         </ion-card>
 
+        <!-- scroll down -->
+        <div
+          [ngStyle]="{
+            position: 'fixed',
+            bottom: isOnBottom ? '-42px' : '24px',
+            transition: 'bottom 0.15s ease-out 0s',
+            right: '50%',
+            width: '120px',
+            'margin-right': '-60px',
+            'z-index': '1000'
+          }"
+        >
+          <ion-button color="warning" (click)="scrollToBottom()">
+            More
+            <ion-icon slot="end" name="chevron-down"></ion-icon>
+          </ion-button>
+        </div>
+
         <!-- cert elem -->
         <a hidden id="install-cert" download="embassy.crt"></a>
 

frontend/projects/setup-wizard/src/app/pages/success/success.page.ts

@@ -1,6 +1,12 @@
 import { DOCUMENT } from '@angular/common'
-import { Component, EventEmitter, Inject, Output } from '@angular/core'
-import { ToastController } from '@ionic/angular'
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { IonContent, ToastController } from '@ionic/angular'
 import {
   copyToClipboard,
   DownloadHTMLService,
@@ -15,8 +21,13 @@ import { StateService } from 'src/app/services/state.service'
   providers: [DownloadHTMLService],
 })
 export class SuccessPage {
+  @ViewChild(IonContent)
+  private content?: IonContent
+
   @Output() onDownload = new EventEmitter()
 
+  isOnBottom = true
+
   constructor(
     @Inject(DOCUMENT) private readonly document: Document,
     private readonly toastCtrl: ToastController,
@@ -38,6 +49,8 @@ export class SuccessPage {
   }
 
   async ngAfterViewInit() {
+    setTimeout(() => this.checkBottom(), 42)
+
     try {
       await this.stateService.completeEmbassy()
       this.document
@@ -88,4 +101,16 @@ export class SuccessPage {
     let html = this.document.getElementById('downloadable')?.innerHTML || ''
     this.downloadHtml.download('embassy-info.html', html)
   }
+
+  checkBottom() {
+    const bottomDiv = document.getElementById('bottom-div')
+    console.error(bottomDiv)
+    this.isOnBottom =
+      !!bottomDiv &&
+      bottomDiv.getBoundingClientRect().top - 192 < window.innerHeight
+  }
+
+  scrollToBottom() {
+    this.content?.scrollToBottom(250)
+  }
 }

frontend/projects/setup-wizard/src/app/services/rpc-encrypted.service.ts

@@ -44,7 +44,7 @@ export class RPCEncryptedService {
       .then(res => JSON.parse(res))
       .catch(e => {
         if (!e.status && !e.statusText) {
-          throw new EncryptionError()
+          throw new NetworkError()
         } else {
           throw new HttpError(e)
         }
@@ -54,9 +54,10 @@ export class RPCEncryptedService {
   }
 }
 
-class EncryptionError {
+class NetworkError {
   readonly code = null
-  readonly message = 'Invalid Key'
+  readonly message =
+    'Network Error. Please try refreshing the page or clearing your browser cache'
   readonly details = null
 }
 

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> = {