Hard code registry icons (#1951)

* component for store icons

* order registries and abstract registry urls

* use helper functionm

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[]