no seeding marketplace"

dep icons

matt comments addressed

fix circular dependencies

Update marketplace.service.ts

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

@@ -15,18 +15,18 @@ export class AppReleaseNotes {
   pkgId: string
   loading = true
 
-  constructor (
+  constructor(
     private readonly route: ActivatedRoute,
     public marketplaceService: MarketplaceService,
     public errToast: ErrorToastService,
-  ) { }
+  ) {}
 
-  async ngOnInit () {
+  async ngOnInit() {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
     try {
       const promises = []
       if (!this.marketplaceService.releaseNotes[this.pkgId]) {
-        promises.push(this.marketplaceService.getReleaseNotes(this.pkgId))
+        promises.push(this.marketplaceService.cacheReleaseNotes(this.pkgId))
       }
       if (!this.marketplaceService.pkgs.length) {
         promises.push(this.marketplaceService.load())
@@ -39,11 +39,11 @@ export class AppReleaseNotes {
     }
   }
 
-  ngAfterViewInit () {
+  ngAfterViewInit() {
     this.content.scrollToPoint(undefined, 1)
   }
 
-  setSelected (selected: string) {
+  setSelected(selected: string) {
     if (this.selected === selected) {
       this.selected = null
     } else {
@@ -51,12 +51,12 @@ export class AppReleaseNotes {
     }
   }
 
-  getDocSize (selected: string) {
+  getDocSize(selected: string) {
     const element = document.getElementById(selected)
     return `${element.scrollHeight}px`
   }
 
-  asIsOrder (a: any, b: any) {
+  asIsOrder(a: any, b: any) {
     return 0
   }
 }

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

@@ -122,9 +122,7 @@
           <ion-col *ngFor="let pkg of pkgs" sizeXs="12" sizeSm="12" sizeMd="6">
             <ion-item [routerLink]="['/marketplace', pkg.manifest.id]">
               <ion-thumbnail slot="start">
-                <img
-                  [src]="sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,' + pkg.icon)"
-                />
+                <img [src]="('data:image/png;base64,' + pkg.icon) | sanitize" />
               </ion-thumbnail>
               <ion-label>
                 <h2 style="font-family: 'Montserrat'; font-weight: bold">

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

@@ -12,7 +12,6 @@ import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import Fuse from 'fuse.js/dist/fuse.min.js'
 import { exists, isEmptyObject } from 'src/app/util/misc.util'
 import { filter, first } from 'rxjs/operators'
-import { DomSanitizer } from '@angular/platform-browser'
 
 const defaultOps = {
   isCaseSensitive: false,
@@ -58,7 +57,6 @@ export class MarketplaceListPage {
     private readonly errToast: ErrorToastService,
     public readonly patch: PatchDbService,
     public readonly marketplaceService: MarketplaceService,
-    public readonly sanitizer: DomSanitizer,
   ) {}
 
   async ngOnInit() {

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

@@ -18,9 +18,7 @@
       <ion-row>
         <ion-col sizeXs="12" sizeSm="12" sizeMd="9" sizeLg="9" sizeXl="9">
           <div class="header">
-            <img
-              [src]="sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,' + pkg.icon)"
-            />
+            <img [src]="('data:image/png;base64,' + pkg.icon) | sanitize" />
             <div class="header-text">
               <h1 class="header-title">{{ pkg.manifest.title }}</h1>
               <p class="header-version">
@@ -200,7 +198,7 @@
               <ion-item [routerLink]="['/marketplace', dep.key]">
                 <ion-thumbnail slot="start">
                   <img
-                    [src]="'/marketplace' + pkg['dependency-metadata'][dep.key].icon"
+                    [src]="('data:image/png;base64,' + pkg['dependency-metadata'][dep.key].icon) | sanitize"
                   />
                 </ion-thumbnail>
                 <ion-label>

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

@@ -23,7 +23,6 @@ import { Subscription } from 'rxjs'
 import { MarkdownPage } from 'src/app/modals/markdown/markdown.page'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { MarketplacePkg } from 'src/app/services/api/api.types'
-import { DomSanitizer } from '@angular/platform-browser'
 
 @Component({
   selector: 'marketplace-show',
@@ -52,7 +51,6 @@ export class MarketplaceShowPage {
     private readonly patch: PatchDbService,
     private readonly embassyApi: ApiService,
     private readonly marketplaceService: MarketplaceService,
-    public readonly sanitizer: DomSanitizer,
   ) {}
 
   async ngOnInit() {

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

@@ -1,6 +1,11 @@
 import { Injectable } from '@angular/core'
-import { MarketplaceData, MarketplacePkg } from 'src/app/services/api/api.types'
+import {
+  MarketplaceData,
+  MarketplacePkg,
+  RR,
+} from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { ConfigService } from 'src/app/services/config.service'
 import { Emver } from 'src/app/services/emver.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
@@ -16,28 +21,43 @@ export class MarketplaceService {
       [version: string]: string
     }
   } = {}
+  marketplaceUrl: string
 
   constructor(
     private readonly api: ApiService,
     private readonly emver: Emver,
     private readonly patch: PatchDbService,
+    private readonly config: ConfigService,
   ) {}
 
+  async init() {
+    this.patch.watch$('ui', 'marketplace').subscribe(marketplace => {
+      if (!marketplace || !marketplace['selected-id']) {
+        this.marketplaceUrl = this.config.marketplace.url
+      } else {
+        this.marketplaceUrl =
+          marketplace['known-hosts'][marketplace['selected-id']].url
+      }
+    })
+  }
+
   async load(): Promise<void> {
     try {
       const [data, pkgs] = await Promise.all([
-        this.api.getMarketplaceData({}),
+        this.getMarketplaceData({}),
         this.getPkgs(1, 100),
       ])
       this.data = data
       this.pkgs = pkgs
-      const { 'selected-id': selectedId, 'known-hosts': knownHosts } =
-        this.patch.getData().ui.marketplace
-      if (knownHosts[selectedId].name !== this.data.name) {
-        this.api.setDbValue({
-          pointer: `/marketplace/known-hosts/${selectedId}/name`,
-          value: this.data.name,
-        })
+      if (this.patch.getData().ui.marketplace?.['selected-id']) {
+        const { 'selected-id': selectedId, 'known-hosts': knownHosts } =
+          this.patch.getData().ui.marketplace
+        if (knownHosts[selectedId].name !== this.data.name) {
+          this.api.setDbValue({
+            pointer: `/marketplace/known-hosts/${selectedId}/name`,
+            value: this.data.name,
+          })
+        }
       }
     } catch (e) {
       this.data = undefined
@@ -49,6 +69,11 @@ export class MarketplaceService {
   async getUpdates(localPkgs: {
     [id: string]: PackageDataEntry
   }): Promise<MarketplacePkg[]> {
+    const id = this.patch.getData().ui.marketplace?.['selected-id']
+    const url = id
+      ? this.patch.getData().ui.marketplace['known-hosts'][id].url
+      : this.config.marketplace.url
+
     const idAndCurrentVersions = Object.keys(localPkgs)
       .map(key => ({
         id: key,
@@ -56,12 +81,9 @@ export class MarketplaceService {
         marketplaceUrl: localPkgs[key].installed['marketplace-url'],
       }))
       .filter(pkg => {
-        return (
-          pkg.marketplaceUrl ===
-          this.patch.getData().ui.marketplace['known-hosts']['selected-id'].url
-        )
+        return pkg.marketplaceUrl === url
       })
-    const latestPkgs = await this.api.getMarketplacePkgs({
+    const latestPkgs = await this.getMarketplacePkgs({
       ids: idAndCurrentVersions,
       'eos-version-compat':
         this.patch.getData()['server-info']['eos-version-compat'],
@@ -75,7 +97,7 @@ export class MarketplaceService {
   }
 
   async getPkg(id: string, version = '*'): Promise<MarketplacePkg> {
-    const pkgs = await this.api.getMarketplacePkgs({
+    const pkgs = await this.getMarketplacePkgs({
       ids: [{ id, version }],
       'eos-version-compat':
         this.patch.getData()['server-info']['eos-version-compat'],
@@ -89,15 +111,15 @@ export class MarketplaceService {
     }
   }
 
-  async getReleaseNotes(id: string): Promise<void> {
-    this.releaseNotes[id] = await this.api.getReleaseNotes({ id })
+  async cacheReleaseNotes(id: string): Promise<void> {
+    this.releaseNotes[id] = await this.getReleaseNotes({ id })
   }
 
   private async getPkgs(
     page: number,
     perPage: number,
   ): Promise<MarketplacePkg[]> {
-    const pkgs = await this.api.getMarketplacePkgs({
+    const pkgs = await this.getMarketplacePkgs({
       page: String(page),
       'per-page': String(perPage),
       'eos-version-compat':
@@ -106,4 +128,36 @@ export class MarketplaceService {
 
     return pkgs
   }
+
+  async getMarketplaceData(
+    params: RR.GetMarketplaceDataReq,
+    url?: string,
+  ): Promise<RR.GetMarketplaceDataRes> {
+    url = url || this.marketplaceUrl
+    return this.api.marketplaceProxy('/package/data', params, url)
+  }
+
+  async getMarketplacePkgs(
+    params: RR.GetMarketplacePackagesReq,
+  ): Promise<RR.GetMarketplacePackagesRes> {
+    if (params.query) params.category = undefined
+    return this.api.marketplaceProxy(
+      '/package/index',
+      {
+        ...params,
+        ids: JSON.stringify(params.ids),
+      },
+      this.marketplaceUrl,
+    )
+  }
+
+  async getReleaseNotes(
+    params: RR.GetReleaseNotesReq,
+  ): Promise<RR.GetReleaseNotesRes> {
+    return this.api.marketplaceProxy(
+      '/package/release-notes',
+      params,
+      this.marketplaceUrl,
+    )
+  }
 }

frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.html

@@ -20,31 +20,28 @@
     </ion-item>
 
     <ion-item
-      [button]="mp.key !== patch.data.ui.marketplace['selected-id']"
+      [button]="mp.id !== selectedId"
       detail="false"
-      *ngFor="let mp of patch.data.ui.marketplace['known-hosts'] | keyvalue"
-      (click)="presentAction(mp.key)"
+      *ngFor="let mp of marketplaces"
+      (click)="presentAction(mp.id)"
     >
       <div
-        *ngIf="mp.key !== patch.data.ui.marketplace['selected-id']"
+        *ngIf="mp.id !== selectedId"
         slot="start"
         style="padding-right: 32px"
       ></div>
       <ion-icon
-        *ngIf="mp.key === patch.data.ui.marketplace['selected-id']"
+        *ngIf="mp.id === selectedId"
         slot="start"
         size="large"
         name="checkmark"
         color="success"
       ></ion-icon>
       <ion-label>
-        <h2>{{ mp.value.name }}</h2>
-        <p>{{ mp.value.url }}</p>
+        <h2>{{ mp.name }}</h2>
+        <p>{{ mp.url }}</p>
       </ion-label>
-      <ion-note
-        *ngIf="mp.key === patch.data.ui.marketplace['selected-id']"
-        slot="end"
-      >
+      <ion-note *ngIf="mp.id === selectedId" slot="end">
         <ion-text color="success">Selected</ion-text>
       </ion-note>
     </ion-item>

frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts

@@ -21,6 +21,9 @@ import { ConfigService } from '../../../services/config.service'
   styleUrls: ['marketplaces.page.scss'],
 })
 export class MarketplacesPage {
+  selectedId: string | undefined
+  marketplaces: { id: string | undefined; name: string; url: string }[] = []
+
   constructor(
     private readonly api: ApiService,
     private readonly loadingCtrl: LoadingController,
@@ -32,6 +35,30 @@ export class MarketplacesPage {
     public readonly patch: PatchDbService,
   ) {}
 
+  ngOnInit() {
+    this.patch.watch$('ui', 'marketplace').subscribe(mp => {
+      const marketplaces = [
+        {
+          id: undefined,
+          name: this.config.marketplace.name,
+          url: this.config.marketplace.url,
+        },
+      ]
+      if (mp) {
+        this.selectedId = mp['selected-id']
+        const alts = Object.entries(mp['known-hosts']).map(([k, v]) => {
+          return {
+            id: k,
+            name: v.name,
+            url: v.url,
+          }
+        })
+        marketplaces.push.apply(marketplaces, alts)
+      }
+      this.marketplaces = marketplaces
+    })
+  }
+
   async presentModalAdd() {
     const marketplaceSpec = getMarketplaceValueSpec()
     const modal = await this.modalCtrl.create({
@@ -82,6 +109,10 @@ export class MarketplacesPage {
       },
     ]
 
+    if (!id) {
+      buttons.shift()
+    }
+
     const action = await this.actionCtrl.create({
       header: id,
       subHeader: 'Manage marketplaces',
@@ -96,7 +127,10 @@ export class MarketplacesPage {
     const marketplace: UIMarketplaceData = JSON.parse(
       JSON.stringify(this.patch.data.ui.marketplace),
     )
-    const newMarketplace = marketplace['known-hosts'][id]
+
+    const url = id
+      ? marketplace['known-hosts'][id].url
+      : this.config.marketplace.url
 
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
@@ -106,10 +140,10 @@ export class MarketplacesPage {
     await loader.present()
 
     try {
-      await this.api.getMarketplaceData({}, newMarketplace.url)
+      await this.marketplaceService.getMarketplaceData({}, url)
     } catch (e) {
       this.errToast.present({
-        message: `Could not connect to ${newMarketplace.url}`,
+        message: `Could not connect to ${url}`,
       } as any)
       loader.dismiss()
       return
@@ -139,6 +173,7 @@ export class MarketplacesPage {
   }
 
   private async delete(id: string): Promise<void> {
+    if (!id) return
     const marketplace: UIMarketplaceData = JSON.parse(
       JSON.stringify(this.patch.data.ui.marketplace),
     )
@@ -161,14 +196,14 @@ export class MarketplacesPage {
   }
 
   private async save(url: string): Promise<void> {
-    const marketplace = JSON.parse(
-      JSON.stringify(this.patch.data.ui.marketplace),
-    ) as UIMarketplaceData
+    const marketplace = this.patch.data.ui.marketplace
+      ? (JSON.parse(
+          JSON.stringify(this.patch.data.ui.marketplace),
+        ) as UIMarketplaceData)
+      : { 'selected-id': undefined, 'known-hosts': {} }
 
     // no-op on duplicates
-    const currentUrls = Object.values(marketplace['known-hosts']).map(
-      u => new URL(u.url).hostname,
-    )
+    const currentUrls = this.marketplaces.map(mp => mp.url)
     if (currentUrls.includes(new URL(url).hostname)) return
 
     const loader = await this.loadingCtrl.create({
@@ -181,7 +216,7 @@ export class MarketplacesPage {
 
     try {
       const id = v4()
-      const { name } = await this.api.getMarketplaceData({}, url)
+      const { name } = await this.marketplaceService.getMarketplaceData({}, url)
       marketplace['known-hosts'][id] = { name, url }
     } catch (e) {
       this.errToast.present({ message: `Could not connect to ${url}` } as any)
@@ -201,14 +236,14 @@ export class MarketplacesPage {
   }
 
   private async saveAndConnect(url: string): Promise<void> {
-    const marketplace = JSON.parse(
-      JSON.stringify(this.patch.data.ui.marketplace),
-    ) as UIMarketplaceData
+    const marketplace = this.patch.data.ui.marketplace
+      ? (JSON.parse(
+          JSON.stringify(this.patch.data.ui.marketplace),
+        ) as UIMarketplaceData)
+      : { 'selected-id': undefined, 'known-hosts': {} }
 
     // no-op on duplicates
-    const currentUrls = Object.values(marketplace['known-hosts']).map(
-      u => new URL(u.url).hostname,
-    )
+    const currentUrls = this.marketplaces.map(mp => mp.url)
     if (currentUrls.includes(new URL(url).hostname)) return
 
     const loader = await this.loadingCtrl.create({
@@ -220,7 +255,7 @@ export class MarketplacesPage {
 
     try {
       const id = v4()
-      const { name } = await this.api.getMarketplaceData({}, url)
+      const { name } = await this.marketplaceService.getMarketplaceData({}, url)
       marketplace['known-hosts'][id] = { name, url }
       marketplace['selected-id'] = id
     } catch (e) {