fix: fix dynamic status and instructions modal (#1382)

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

@@ -9,7 +9,7 @@ import { ApiService } from './services/api/api.service'
 import { MockApiService } from './services/api/mock-api.service'
 import { LiveApiService } from './services/api/live-api.service'
 import { GlobalErrorHandler } from './services/global-error-handler.service'
-import { AbstractApiService, WorkspaceConfig } from '@start9labs/shared'
+import { WorkspaceConfig } from '@start9labs/shared'
 
 const { useMocks } = require('../../../../config.json') as WorkspaceConfig
 
@@ -30,10 +30,6 @@ const { useMocks } = require('../../../../config.json') as WorkspaceConfig
       provide: ApiService,
       useClass: useMocks ? MockApiService : LiveApiService,
     },
-    {
-      provide: AbstractApiService,
-      useExisting: ApiService,
-    },
     { provide: ErrorHandler, useClass: GlobalErrorHandler },
   ],
   bootstrap: [AppComponent],

frontend/projects/shared/src/components/markdown/markdown.component.ts

@@ -1,22 +1,22 @@
-import { Component, Input, Optional } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
+import { defer, isObservable, Observable, of } from 'rxjs'
+import { catchError, ignoreElements, share } from 'rxjs/operators'
 
 import { getErrorMessage } from '../../services/error-toast.service'
-import { AbstractApiService } from '../../services/api.service'
-import { defer, from, isObservable, Observable, of } from 'rxjs'
-import { catchError, ignoreElements, share } from 'rxjs/operators'
 
 @Component({
   selector: 'markdown',
   templateUrl: './markdown.component.html',
   styleUrls: ['./markdown.component.scss'],
 })
 export class MarkdownComponent {
-  @Input() contentUrl?: string
   @Input() content?: string | Observable<string>
   @Input() title = ''
 
-  private readonly data$ = defer(() => this.contentObservable).pipe(share())
+  private readonly data$ = defer(() =>
+    isObservable(this.content) ? this.content : of(this.content),
+  ).pipe(share())
 
   readonly error$ = this.data$.pipe(
     ignoreElements(),
@@ -25,23 +25,9 @@ export class MarkdownComponent {
 
   readonly content$ = this.data$.pipe(catchError(() => of([])))
 
-  constructor(
-    private readonly modalCtrl: ModalController,
-    @Optional()
-    private readonly embassyApi: AbstractApiService | null,
-  ) {}
+  constructor(private readonly modalCtrl: ModalController) {}
 
   async dismiss() {
     return this.modalCtrl.dismiss(true)
   }
-
-  private get contentObservable() {
-    if (isObservable(this.content)) {
-      return this.content
-    }
-
-    return this.contentUrl
-      ? from(this.embassyApi?.getStatic(this.contentUrl))
-      : of(this.content)
-  }
 }

frontend/projects/shared/src/public-api.ts

@@ -23,7 +23,6 @@ export * from './pipes/shared/trust.pipe'
 export * from './pipes/unit-conversion/unit-conversion.module'
 export * from './pipes/unit-conversion/unit-conversion.pipe'
 
-export * from './services/api.service'
 export * from './services/destroy.service'
 export * from './services/emver.service'
 export * from './services/error-toast.service'

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

@@ -5,6 +5,8 @@ import { AlertController, ModalController, NavController } from '@ionic/angular'
 import { MarkdownComponent } from '@start9labs/shared'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { ModalService } from 'src/app/services/modal.service'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { from } from 'rxjs'
 
 export interface Button {
   title: string
@@ -24,6 +26,7 @@ export class ToButtonsPipe implements PipeTransform {
     private readonly navCtrl: NavController,
     private readonly modalCtrl: ModalController,
     private readonly modalService: ModalService,
+    private readonly apiService: ApiService,
   ) {}
 
   transform(pkg: PackageDataEntry): Button[] {
@@ -103,7 +106,9 @@ export class ToButtonsPipe implements PipeTransform {
     const modal = await this.modalCtrl.create({
       componentProps: {
         title: 'Instructions',
-        contentUrl: pkg['static-files']['instructions'],
+        content: from(
+          this.apiService.getStatic(pkg['static-files']['instructions']),
+        ),
       },
       component: MarkdownComponent,
     })

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

@@ -21,6 +21,7 @@ export class MarketplaceListPage {
   ).pipe(
     filter(data => exists(data) && !isEmptyObject(data)),
     tap(pkgs => Object.values(pkgs).forEach(spreadProgress)),
+    map(pkgs => ({ ...pkgs })),
     startWith({}),
   )
 

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

@@ -1,4 +1,3 @@
-import { AbstractApiService } from '@start9labs/shared'
 import { Subject, Observable } from 'rxjs'
 import {
   Http,
@@ -14,10 +13,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
 import { RequestError } from '../http.service'
 import { map } from 'rxjs/operators'
 
-export abstract class ApiService
-  extends AbstractApiService
-  implements Source<DataModel>, Http<DataModel>
-{
+export abstract class ApiService implements Source<DataModel>, Http<DataModel> {
   protected readonly sync$ = new Subject<Update<DataModel>>()
 
   /** PatchDb Source interface. Post/Patch requests provide a source of patches to the db. */
@@ -28,6 +24,9 @@ export abstract class ApiService
       .pipe(map(result => ({ result, jsonrpc: '2.0' })))
   }
 
+  // for getting static files: ex icons, instructions, licenses
+  abstract getStatic(url: string): Promise<string>
+
   // db
 
   abstract getRevisions(since: number): Promise<RR.GetRevisionsRes>