Hard code registry icons (#1951)

* component for store icons

* order registries and abstract registry urls

* use helper functionm

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

@@ -15,6 +15,7 @@ import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/b
 import { MarketplaceStatusModule } from '../marketplace-status/marketplace-status.module'
 import { MarketplaceListPage } from './marketplace-list.page'
 import { MarketplaceSettingsPageModule } from 'src/app/modals/marketplace-settings/marketplace-settings.module'
+import { StoreIconComponentModule } from 'src/app/components/store-icon/store-icon.component.module'
 
 const routes: Routes = [
   {
@@ -39,6 +40,7 @@ const routes: Routes = [
     SearchModule,
     SkeletonModule,
     MarketplaceSettingsPageModule,
+    StoreIconComponentModule,
   ],
   declarations: [MarketplaceListPage],
   exports: [MarketplaceListPage],

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

@@ -24,14 +24,7 @@
     <ion-row>
       <ion-col size="12">
         <div class="heading">
-          <img
-            *ngIf="details.icon; else noIcon"
-            [src]="'data:image/png;base64,' + details.icon | trustUrl"
-            alt=""
-          />
-          <ng-template #noIcon>
-            <ion-icon name="storefront-outline"></ion-icon>
-          </ng-template>
+          <store-icon class="icon" [url]="details.url"></store-icon>
           <h1 class="montserrat ion-text-center">{{ details.name }}</h1>
         </div>
         <ion-button fill="clear" (click)="presentModalMarketplaceSettings()">

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

@@ -1,15 +1,14 @@
 .heading {
-  $icon-size: 64px;
   margin-top: 32px;
-  img {
-    max-width: $icon-size;
-  }
   h1 {
     font-size: 42px;
   }
-  ion-icon {
-    font-size: $icon-size;
-  }
+}
+
+.icon {
+  display: inline-block;
+  max-width: 80px;
+  font-size: 80px;
 }
 
 .divider {

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

@@ -4,6 +4,7 @@ import { AbstractMarketplaceService } from '@start9labs/marketplace'
 import { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
 import { MarketplaceSettingsPage } from 'src/app/modals/marketplace-settings/marketplace-settings.page'
+import { ConfigService } from 'src/app/services/config.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 
@@ -30,25 +31,26 @@ export class MarketplaceListPage {
   readonly localPkgs$ = this.patch.watch$('package-data')
 
   readonly details$ = this.marketplaceService.getSelectedHost$().pipe(
-    map(({ url, name, icon }) => {
+    map(({ url, name }) => {
+      const { start9, community, beta } = this.config.marketplace
       let color: string
       let description: string
       switch (url) {
-        case 'https://registry.start9.com/':
+        case start9:
           color = 'success'
           description =
             'Services from this registry are packaged and maintained by the Start9 team. If you experience an issue or have a questions related to a service from this registry, one of our dedicated support staff will be happy to assist you.'
           break
-        case 'https://beta-registry.start9.com/':
-          color = 'primary'
-          description =
-            'Services from this registry are undergoing active testing and may contain bugs. <b>Install at your own risk</b>. If you discover a bug or have a suggestion for improvement, please report it to the Start9 team in our community testing channel on Matrix.'
-          break
-        case 'https://community-registry.start9.com/':
+        case community:
           color = 'tertiary'
           description =
             'Services from this registry are packaged and maintained by members of the Start9 community. <b>Install at your own risk</b>. If you experience an issue or have a question related to a service in this marketplace, please reach out to the package developer for assistance.'
           break
+        case beta:
+          color = 'primary'
+          description =
+            'Services from this registry are undergoing active testing and may contain bugs. <b>Install at your own risk</b>. If you discover a bug or have a suggestion for improvement, please report it to the Start9 team in our community testing channel on Matrix.'
+          break
         default:
           // alt marketplace
           color = 'warning'
@@ -59,7 +61,6 @@ export class MarketplaceListPage {
       return {
         name,
         url,
-        icon,
         color,
         description,
       }
@@ -71,6 +72,7 @@ export class MarketplaceListPage {
     @Inject(AbstractMarketplaceService)
     private readonly marketplaceService: MarketplaceService,
     private readonly modalCtrl: ModalController,
+    private readonly config: ConfigService,
   ) {}
 
   category = 'featured'

frontend/projects/ui/src/app/pages/updates/updates.module.ts

@@ -8,6 +8,7 @@ import { MarkdownPipeModule, SharedPipesModule } from '@start9labs/shared'
 import { SkeletonListComponentModule } from 'src/app/components/skeleton-list/skeleton-list.component.module'
 import { RoundProgressModule } from 'angular-svg-round-progressbar'
 import { InstallProgressPipeModule } from 'src/app/pipes/install-progress/install-progress.module'
+import { StoreIconComponentModule } from 'src/app/components/store-icon/store-icon.component.module'
 
 const routes: Routes = [
   {
@@ -27,6 +28,7 @@ const routes: Routes = [
     MarkdownPipeModule,
     RoundProgressModule,
     InstallProgressPipeModule,
+    StoreIconComponentModule,
   ],
   declarations: [UpdatesPage, FilterUpdatesPipe],
 })

frontend/projects/ui/src/app/pages/updates/updates.page.html

@@ -9,26 +9,24 @@
 
 <ion-content class="ion-padding">
   <ion-item-group *ngIf="data$ | async as data">
-    <ng-container *ngFor="let host of data.hosts | keyvalue">
+    <ng-container *ngFor="let host of data.hosts">
       <ion-item-divider>
-        {{ host.value.name }} &nbsp;
-        <img
-          style="max-width: 24px"
-          [src]="'data:image/png;base64,' + host.value.icon | trustUrl"
-          alt=""
-        />
+        {{ host.name }} &nbsp;
+        <div style="max-width: 16px">
+          <store-icon [url]="host.url"></store-icon>
+        </div>
       </ion-item-divider>
 
       <div class="ion-padding-start ion-padding-bottom">
-        <ion-item *ngIf="data.errors.includes(host.key)">
+        <ion-item *ngIf="data.errors.includes(host.url)">
           <ion-text color="danger">Request Failed</ion-text>
         </ion-item>
 
         <ng-container
-          *ngIf="data.marketplace[host.key]?.packages as packages else loading"
+          *ngIf="data.marketplace[host.url]?.packages as packages else loading"
         >
           <ng-container
-            *ngIf="packages | filterUpdates : data.localPkgs : host.key as updates"
+            *ngIf="packages | filterUpdates : data.localPkgs : host.url as updates"
           >
             <ion-item *ngFor="let pkg of updates">
               <ng-container *ngIf="data.localPkgs[pkg.manifest.id] as local">
@@ -64,7 +62,7 @@
                     ></ion-spinner>
                     <ng-template #updateBtn>
                       <ion-button
-                        (click)="update(pkg.manifest.id, host.key)"
+                        (click)="update(pkg.manifest.id, host.url)"
                         color="dark"
                         strong
                       >

frontend/projects/ui/src/app/pages/updates/updates.page.ts

@@ -12,7 +12,7 @@ import {
   Marketplace,
   MarketplaceManifest,
   MarketplacePkg,
-  StoreIdentifier,
+  StoreIdentity,
 } from '@start9labs/marketplace'
 import { Emver } from '@start9labs/shared'
 import { Pipe, PipeTransform } from '@angular/core'
@@ -20,7 +20,7 @@ import { combineLatest, Observable } from 'rxjs'
 import { PrimaryRendering } from '../../services/pkg-status-rendering.service'
 
 interface UpdatesData {
-  hosts: Record<string, StoreIdentifier>
+  hosts: StoreIdentity[]
   marketplace: Marketplace
   localPkgs: Record<string, PackageDataEntry>
   errors: string[]