feat(marketplace): extract common components (#1338)

* feat(marketplace): extract common components

* chore: fix service provide

* feat(markdown): allow Observable content

* chore: remove unnecessary module import

* minor styling for marketplacee list

* only show loading for marketplace show if version change

* chore: get rid of unnecessary server request

* chore: fix version switching

Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

frontend/projects/marketplace/src/pipes/filter-packages.pipe.ts

@@ -1,8 +1,8 @@
-import { Pipe, PipeTransform } from '@angular/core'
+import { NgModule, Pipe, PipeTransform } from '@angular/core'
 import Fuse from 'fuse.js/dist/fuse.min.js'
 
-import { LocalPkg } from '../types/local-pkg'
 import { MarketplacePkg } from '../types/marketplace-pkg'
+import { MarketplaceManifest } from '../types/marketplace-manifest'
 
 const defaultOps = {
   isCaseSensitive: false,
@@ -31,9 +31,9 @@ const defaultOps = {
 export class FilterPackagesPipe implements PipeTransform {
   transform(
     packages: MarketplacePkg[] | null,
-    local: Record<string, LocalPkg>,
     query: string,
     category: string,
+    local: Record<string, { manifest: MarketplaceManifest }> = {},
   ): MarketplacePkg[] | null {
     if (!packages) {
       return null
@@ -63,3 +63,9 @@ export class FilterPackagesPipe implements PipeTransform {
       .map(p => p.item)
   }
 }
+
+@NgModule({
+  declarations: [FilterPackagesPipe],
+  exports: [FilterPackagesPipe],
+})
+export class FilterPackagesPipeModule {}

frontend/projects/marketplace/src/pipes/install-progress.pipe.ts

@@ -1,13 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-import { InstallProgress, packageLoadingProgress } from '@start9labs/shared'
-
-@Pipe({
-  name: 'installProgress',
-})
-export class InstallProgressPipe implements PipeTransform {
-  transform(loadData: InstallProgress): string {
-    const { totalProgress } = packageLoadingProgress(loadData)
-
-    return totalProgress < 99 ? totalProgress + '%' : 'finalizing'
-  }
-}

frontend/projects/marketplace/src/pipes/marketplace-pipes.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core'
-import { InstallProgressPipe } from './install-progress.pipe'
-import { TrustPipe } from './trust.pipe'
-import { FilterPackagesPipe } from './filter-packages.pipe'
-
-@NgModule({
-  declarations: [InstallProgressPipe, TrustPipe, FilterPackagesPipe],
-  exports: [InstallProgressPipe, TrustPipe, FilterPackagesPipe],
-})
-export class MarketplacePipesModule {}

frontend/projects/marketplace/src/pipes/trust.pipe.ts

@@ -1,13 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
-
-@Pipe({
-  name: 'trust',
-})
-export class TrustPipe implements PipeTransform {
-  constructor(public readonly sanitizer: DomSanitizer) {}
-
-  transform(base64Icon: string): SafeResourceUrl {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(base64Icon)
-  }
-}