UI fixes (#2014)

* fix html displaying in marketplace banner description

* always bold install risk copy

* display correct pkg in marketplace when diff registry, copy changes

Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
Co-authored-by: Matt Hill <MattDHill@users.noreply.github.com>

frontend/projects/marketplace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@start9labs/marketplace",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "peerDependencies": {
     "@angular/common": ">=13.2.0",
     "@angular/core": ">=13.2.0",

frontend/projects/marketplace/src/services/marketplace.service.ts

@@ -8,13 +8,13 @@ export abstract class AbstractMarketplaceService {
 
   abstract getMarketplace$(): Observable<Marketplace>
 
-  abstract getSelectedStore$(): Observable<StoreData | null>
+  abstract getSelectedStore$(): Observable<StoreData>
 
   abstract getPackage$(
     id: string,
     version: string,
     url?: string,
-  ): Observable<MarketplacePkg | undefined>
+  ): Observable<MarketplacePkg> // could be {} so need to check in show page
 
   abstract fetchReleaseNotes$(
     id: string,

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

@@ -36,28 +36,16 @@ export class ToMessagePipe implements PipeTransform {
   constructor(private readonly stateService: StateService) {}
 
   transform(progress: number | null): string {
-    switch (this.stateService.setupType) {
-      case 'fresh':
-      case 'attach':
-        return 'Setting up your Embassy'
-      case 'restore':
-        if (!progress) {
-          return 'Initializing'
-        } else if (progress < 1) {
-          return 'Restoring data. This can take a while'
-        } else {
-          return 'Finalizing data restore'
-        }
-      case 'transfer':
-        if (!progress) {
-          return 'Preparing data. Depending on how much data you have, this could take up to 1 hour'
-        } else if (progress < 1) {
-          return 'Transferring data'
-        } else {
-          return 'Finalizing data transfer'
-        }
-      default:
-        return ''
+    if (['fresh', 'attach'].includes(this.stateService.setupType || '')) {
+      return 'Setting up your Embassy'
+    }
+
+    if (!progress) {
+      return 'Preparing data. This can take a while'
+    } else if (progress < 1) {
+      return 'Copying data'
+    } else {
+      return 'Finalizing'
     }
   }
 }

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

@@ -59,7 +59,7 @@ export class SuccessPage {
       const ret = await this.api.complete()
       if (!this.isKiosk) {
         this.torAddress = ret['tor-address']
-        this.lanAddress = ret['lan-address']
+        this.lanAddress = ret['lan-address'].replace('https', 'http')
         this.cert = ret['root-ca']
 
         await this.api.exit()

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

@@ -15,7 +15,7 @@
     <ion-item [color]="details.color">
       <ion-icon slot="start" name="information-circle-outline"></ion-icon>
       <ion-label>
-        <h2 style="font-weight: 600">{{ details.description }}</h2>
+        <h2 style="font-weight: 600" [innerHTML]="details.description"></h2>
       </ion-label>
     </ion-item>
 

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

@@ -19,7 +19,6 @@ export class MarketplaceListPage {
   readonly back = !!this.route.snapshot.queryParamMap.get('back')
 
   readonly store$ = this.marketplaceService.getSelectedStore$().pipe(
-    filter(Boolean),
     map(({ info, packages }) => {
       const categories = new Set<string>()
       if (info.categories.includes('featured')) categories.add('featured')
@@ -57,7 +56,7 @@ export class MarketplaceListPage {
           // alt marketplace
           color = 'warning'
           description =
-            'This is a Custom Registry. Start9 cannot verify the integrity or functionality of services from this registry, and they may cause harm to your system. Install at your own risk.'
+            'This is a Custom Registry. Start9 cannot verify the integrity or functionality of services from this registry, and they may cause harm to your system. <b>Install at your own risk</b>.'
       }
 
       return {

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

@@ -2,7 +2,16 @@
 
 <ion-content class="ion-padding">
   <ng-container *ngIf="pkg$ | async as pkg else loading">
-    <ng-container *ngIf="!(pkg | empty)">
+    <ng-container *ngIf="pkg | empty; else show">
+      <ng-container *ngIf="loadVersion$ | async as version">
+        <h2>
+          {{ pkgId }} version {{ version === '*' ? 'latest' : version }} not
+          found in this registry
+        </h2>
+      </ng-container>
+    </ng-container>
+
+    <ng-template #show>
       <marketplace-package [pkg]="pkg"></marketplace-package>
       <marketplace-show-controls
         [url]="url"
@@ -24,7 +33,7 @@
         [pkg]="pkg"
         (version)="loadVersion$.next($event)"
       ></marketplace-additional>
-    </ng-container>
+    </ng-template>
   </ng-container>
 
   <ng-template #loading>

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

@@ -14,7 +14,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MarketplaceShowPage {
-  private readonly pkgId = getPkgId(this.route)
+  readonly pkgId = getPkgId(this.route)
   readonly url = this.route.snapshot.queryParamMap.get('url') || undefined
 
   readonly loadVersion$ = new BehaviorSubject<string>('*')

frontend/projects/ui/src/app/services/marketplace.service.ts

@@ -92,13 +92,13 @@ export class MarketplaceService implements AbstractMarketplaceService {
     shareReplay(1),
   )
 
-  private readonly selectedStore$: Observable<StoreData | null> =
+  private readonly selectedStore$: Observable<StoreData> =
     this.selectedHost$.pipe(
       switchMap(({ url }) =>
         this.marketplace$.pipe(
-          filter(m => !!m[url]),
-          take(1),
           map(m => m[url]),
+          filter(Boolean),
+          take(1),
         ),
       ),
     )
@@ -123,7 +123,7 @@ export class MarketplaceService implements AbstractMarketplaceService {
     return this.marketplace$
   }
 
-  getSelectedStore$(): Observable<StoreData | null> {
+  getSelectedStore$(): Observable<StoreData> {
     return this.selectedStore$
   }
 
@@ -131,18 +131,24 @@ export class MarketplaceService implements AbstractMarketplaceService {
     id: string,
     version: string,
     optionalUrl?: string,
-  ): Observable<MarketplacePkg | undefined> {
+  ): Observable<MarketplacePkg> {
     return this.patch.watch$('ui', 'marketplace').pipe(
-      switchMap(marketplace => {
-        const url = optionalUrl || marketplace['selected-url']
+      switchMap(uiMarketplace => {
+        const url = optionalUrl || uiMarketplace['selected-url']
 
-        if (version !== '*' || !marketplace['known-hosts'][url]) {
+        if (version !== '*' || !uiMarketplace['known-hosts'][url]) {
           return this.fetchPackage$(id, version, url)
         }
 
-        return this.selectedStore$.pipe(
+        return this.marketplace$.pipe(
+          map(m => m[url]),
           filter(Boolean),
-          map(s => s.packages.find(p => p.manifest.id === id)),
+          take(1),
+          map(
+            store =>
+              store.packages.find(p => p.manifest.id === id) ||
+              ({} as MarketplacePkg),
+          ),
         )
       }),
     )
@@ -184,6 +190,37 @@ export class MarketplaceService implements AbstractMarketplaceService {
     )
   }
 
+  fetchReleaseNotes$(
+    id: string,
+    url?: string,
+  ): Observable<Record<string, string>> {
+    return this.selectedHost$.pipe(
+      switchMap(m => {
+        return from(
+          this.api.marketplaceProxy<Record<string, string>>(
+            `/package/v0/release-notes/${id}`,
+            {},
+            url || m.url,
+          ),
+        )
+      }),
+    )
+  }
+
+  fetchStatic$(id: string, type: string, url?: string): Observable<string> {
+    return this.selectedHost$.pipe(
+      switchMap(m => {
+        return from(
+          this.api.marketplaceProxy<string>(
+            `/package/v0/${type}/${id}`,
+            {},
+            url || m.url,
+          ),
+        )
+      }),
+    )
+  }
+
   private fetchStore$(url: string): Observable<StoreData | null> {
     return combineLatest([this.fetchInfo$(url), this.fetchPackages$(url)]).pipe(
       map(([info, packages]) => ({ info, packages })),
@@ -221,44 +258,13 @@ export class MarketplaceService implements AbstractMarketplaceService {
     )
   }
 
-  fetchPackage$(
+  private fetchPackage$(
     id: string,
     version: string,
     url: string,
-  ): Observable<MarketplacePkg | undefined> {
+  ): Observable<MarketplacePkg> {
     return this.fetchPackages$(url, { ids: [{ id, version }] }).pipe(
-      map(pkgs => pkgs[0]),
-    )
-  }
-
-  fetchReleaseNotes$(
-    id: string,
-    url?: string,
-  ): Observable<Record<string, string>> {
-    return this.selectedHost$.pipe(
-      switchMap(m => {
-        return from(
-          this.api.marketplaceProxy<Record<string, string>>(
-            `/package/v0/release-notes/${id}`,
-            {},
-            url || m.url,
-          ),
-        )
-      }),
-    )
-  }
-
-  fetchStatic$(id: string, type: string, url?: string): Observable<string> {
-    return this.selectedHost$.pipe(
-      switchMap(m => {
-        return from(
-          this.api.marketplaceProxy<string>(
-            `/package/v0/${type}/${id}`,
-            {},
-            url || m.url,
-          ),
-        )
-      }),
+      map(pkgs => pkgs[0] || {}),
     )
   }