Merge pull request #2744 from Start9Labs/update/marketplace-lib-fix

fix(marketplace): get rid of `AbstractMarketplaceService`
Start9Labs · Sep 25, 2024 · 1867df7 · 1867df7
2 parents 1e4fb84 + 4f19142
commit 1867df7
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 178 deletions.
diff --git a/web/package.json b/web/package.json
@@ -13,6 +13,7 @@
     "check:setup": "tsc --project projects/setup-wizard/tsconfig.json --noEmit --skipLibCheck",
     "check:ui": "tsc --project projects/ui/tsconfig.json --noEmit --skipLibCheck",
     "build:deps": "rm -rf .angular/cache && (cd ../patch-db/client && npm ci && npm run build) && (cd ../sdk && make bundle)",
+    "build:deps:win": "rimraf .angular/cache && (cd ../sdk && npm ci && npm run build) && (cd ../patch-db/client && npm ci && npm run build)",
     "build:install": "ng run install-wizard:build",
     "build:setup": "ng run setup-wizard:build",
     "build:ui": "ng run ui:build",

diff --git a/web/projects/marketplace/src/components/menu/menu.component.html b/web/projects/marketplace/src/components/menu/menu.component.html
@@ -1,113 +1,108 @@
 <header>
-  <ng-container *tuiLet="registry$ | async as registry">
-    <div class="title">
-      <store-icon
-        [class.tui-skeleton]="!registry"
-        [class.tui-skeleton_rounded]="!registry"
-        size="60px"
-        [url]="registry?.url || ''"
-        [marketplace]="iconConfig"
+  <div class="title">
+    <store-icon
+      [class.tui-skeleton]="!registry"
+      [class.tui-skeleton_rounded]="!registry"
+      size="60px"
+      [url]="registry?.url || ''"
+      [marketplace]="iconConfig"
+    />
+    <h1 [class.tui-skeleton]="!registry">
+      {{ registry?.info?.name || 'Loading store...' }}
+    </h1>
+    <!-- change registry modal -->
+    <ng-content select="[slot=desktop]"></ng-content>
+  </div>
+  <!-- mobile nav -->
+  <div class="nav-mobile">
+    <div class="nav-mobile-bar">
+      <!-- mobile search -->
+      <marketplace-search
+        [(query)]="query"
+        (queryChange)="onQueryChange($event)"
       />
-      <h1 [class.tui-skeleton]="!registry">
-        {{ registry?.info?.name || 'Loading store...' }}
-      </h1>
-      <!-- change registry modal -->
-      <ng-content select="[slot=desktop]"></ng-content>
-    </div>
-    <!-- mobile nav -->
-    <div class="nav-mobile">
-      <div class="nav-mobile-bar">
-        <!-- mobile search -->
-        <marketplace-search
-          [(query)]="query"
-          (queryChange)="onQueryChange($event)"
+      <button
+        tuiButton
+        type="button"
+        appearance="link"
+        (click)="toggleMenu(true)"
+        (tuiActiveZoneChange)="toggleMenu($event)"
+        [style.--tui-padding]="'1.2rem'"
+      >
+        <store-icon
+          size="42px"
+          [style.height]="'42px'"
+          [style.border-radius]="'100%'"
+          [url]="registry?.url || ''"
+          [marketplace]="iconConfig"
+          [class.tui-skeleton]="!registry"
+          [class.tui-skeleton_rounded]="!registry"
         />
-        <button
-          tuiButton
-          type="button"
-          appearance="link"
-          (click)="toggleMenu(true)"
-          (tuiActiveZoneChange)="toggleMenu($event)"
-          [style.--tui-padding]="'1.2rem'"
+        <nav
+          *tuiSidebar="open; direction: 'right'; autoWidth: true"
+          class="nav-mobile-sidebar divide-bar"
         >
-          <store-icon
-            size="42px"
-            [style.height]="'42px'"
-            [style.border-radius]="'100%'"
-            [url]="registry?.url || ''"
-            [marketplace]="iconConfig"
-            [class.tui-skeleton]="!registry"
-            [class.tui-skeleton_rounded]="!registry"
-          />
-          <nav
-            *tuiSidebar="open; direction: 'right'; autoWidth: true"
-            class="nav-mobile-sidebar divide-bar"
-          >
-            <div class="nav-mobile-sidebar-top">
-              <h1 [class.tui-skeleton]="!registry">
-                {{ registry?.info?.name }}
-              </h1>
-              <button
-                [style.--tui-padding]="0"
-                tuiButton
-                type="button"
-                appearance="icon"
-                iconStart="@tui.x"
-                (tuiActiveZoneChange)="toggleMenu($event)"
-                (click)="toggleMenu(false)"
-              ></button>
+          <div class="nav-mobile-sidebar-top">
+            <h1 [class.tui-skeleton]="!registry">
+              {{ registry?.info?.name }}
+            </h1>
+            <button
+              [style.--tui-padding]="0"
+              tuiButton
+              type="button"
+              appearance="icon"
+              iconStart="@tui.x"
+              (tuiActiveZoneChange)="toggleMenu($event)"
+              (click)="toggleMenu(false)"
+            ></button>
+          </div>
+          <!-- change registry modal -->
+          <ng-content select="[slot=mobile]"></ng-content>
+          <div class="nav-mobile-sidebar-bottom divide-bar">
+            <marketplace-categories
+              [categories]="registry?.info?.categories"
+              [category]="query ? '' : category"
+              (categoryChange)="onCategoryChange($event); toggleMenu(false)"
+            />
+            <div>
+              <!-- link to store for brochure -->
+              <ng-content select="[slot=store-mobile]" />
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href="https://docs.start9.com/0.3.5.x/developer-docs/"
+              >
+                <span>Package a service</span>
+                <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
+              </a>
             </div>
-            <!-- change registry modal -->
-            <ng-content select="[slot=mobile]"></ng-content>
-            <div class="nav-mobile-sidebar-bottom divide-bar">
-              <marketplace-categories
-                [categories]="registry?.info?.categories"
-                [category]="query ? '' : category"
-                (categoryChange)="onCategoryChange($event); toggleMenu(false)"
-              />
-              <div>
-                <!-- link to store for brochure -->
-                <ng-content select="[slot=store-mobile]" />
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://docs.start9.com/0.3.5.x/developer-docs/"
-                >
-                  <span>Package a service</span>
-                  <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
-                </a>
-              </div>
-            </div>
-          </nav>
-        </button>
-      </div>
+          </div>
+        </nav>
+      </button>
     </div>
-    <!-- desktop nav -->
-    <nav class="nav-desktop">
-      <!-- desktop search -->
-      <marketplace-search
-        [query]="query"
-        (queryChange)="onQueryChange($event)"
+  </div>
+  <!-- desktop nav -->
+  <nav class="nav-desktop">
+    <!-- desktop search -->
+    <marketplace-search [query]="query" (queryChange)="onQueryChange($event)" />
+    <div class="nav-desktop-container">
+      <marketplace-categories
+        [categories]="registry?.info?.categories"
+        [category]="query ? '' : category"
+        (categoryChange)="onCategoryChange($event)"
       />
-      <div class="nav-desktop-container">
-        <marketplace-categories
-          [categories]="registry?.info?.categories"
-          [category]="query ? '' : category"
-          (categoryChange)="onCategoryChange($event)"
-        />
-        <div>
-          <!-- link to store for brochure -->
-          <ng-content select="[slot=store]" />
-          <a
-            target="_blank"
-            rel="noreferrer"
-            href="https://docs.start9.com/0.3.5.x/developer-docs/"
-          >
-            <span>Package a service</span>
-            <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
-          </a>
-        </div>
+      <div>
+        <!-- link to store for brochure -->
+        <ng-content select="[slot=store]" />
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://docs.start9.com/0.3.5.x/developer-docs/"
+        >
+          <span>Package a service</span>
+          <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
+        </a>
       </div>
-    </nav>
-  </ng-container>
+    </div>
+  </nav>
 </header>
diff --git a/web/projects/marketplace/src/components/menu/menu.component.ts b/web/projects/marketplace/src/components/menu/menu.component.ts
@@ -5,10 +5,10 @@ import {
   Input,
   OnDestroy,
 } from '@angular/core'
+import { MarketplaceConfig } from '@start9labs/shared'
 import { Subject, takeUntil } from 'rxjs'
-import { AbstractMarketplaceService } from '../../services/marketplace.service'
 import { AbstractCategoryService } from '../../services/category.service'
-import { MarketplaceConfig } from '@start9labs/shared'
+import { StoreData } from '../../types'
 
 @Component({
   selector: 'menu',
@@ -20,10 +20,11 @@ export class MenuComponent implements OnDestroy {
   @Input({ required: true })
   iconConfig!: MarketplaceConfig
 
+  @Input({ required: true })
+  registry: (StoreData & { url?: string }) | null = null
+
   private destroy$ = new Subject<void>()
-  private readonly marketplaceService = inject(AbstractMarketplaceService)
   private readonly categoryService = inject(AbstractCategoryService)
-  readonly registry$ = this.marketplaceService.getRegistry$()
   category = ''
   query = ''
   open = false

diff --git a/web/projects/marketplace/src/modals/release-notes.component.ts b/web/projects/marketplace/src/modals/release-notes.component.ts
@@ -1,33 +1,27 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { MarketplacePkg } from '../../src/types'
 import { Exver, MarkdownPipeModule } from '@start9labs/shared'
 import { TuiButton, TuiDialogContext, TuiLoader } from '@taiga-ui/core'
 import { TuiAccordion } from '@taiga-ui/kit'
 import {
   POLYMORPHEUS_CONTEXT,
   PolymorpheusComponent,
 } from '@taiga-ui/polymorpheus'
-import { map } from 'rxjs'
-import { AbstractMarketplaceService } from '../services/marketplace.service'
+import { MarketplacePkg } from '../../src/types'
 
 @Component({
   standalone: true,
   template: `
-    @if (notes$ | async; as notes) {
-      <tui-accordion>
-        @for (note of notes | keyvalue: asIsOrder; track $index) {
-          <tui-accordion-item>
-            {{ note.key }}
-            <ng-template tuiAccordionItemContent>
-              <div [innerHTML]="note.value | markdown"></div>
-            </ng-template>
-          </tui-accordion-item>
-        }
-      </tui-accordion>
-    } @else {
-      <tui-loader textContent="Loading Release Notes" />
-    }
+    <tui-accordion>
+      @for (note of notes | keyvalue: asIsOrder; track $index) {
+        <tui-accordion-item>
+          {{ note.key }}
+          <ng-template tuiAccordionItemContent>
+            <div [innerHTML]="note.value | markdown"></div>
+          </ng-template>
+        </tui-accordion-item>
+      }
+    </tui-accordion>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
@@ -43,26 +37,20 @@ export class ReleaseNotesComponent {
   private readonly pkg =
     inject<TuiDialogContext<void, MarketplacePkg>>(POLYMORPHEUS_CONTEXT).data
 
-  readonly notes$ = inject(AbstractMarketplaceService)
-    .getRegistry$()
-    .pipe(
-      map(s => {
-        return Object.entries(this.pkg.otherVersions)
-          .filter(
-            ([v, _]) =>
-              this.exver.getFlavor(v) === this.pkg.flavor &&
-              this.exver.compareExver(this.pkg.version, v) === 1,
-          )
-          .reduce(
-            (obj, [version, info]) => ({
-              ...obj,
-              [version]: info.releaseNotes,
-            }),
-            {
-              [`${this.pkg.version} (current)`]: this.pkg.releaseNotes,
-            },
-          )
+  readonly notes = Object.entries(this.pkg.otherVersions)
+    .filter(
+      ([v, _]) =>
+        this.exver.getFlavor(v) === this.pkg.flavor &&
+        this.exver.compareExver(this.pkg.version, v) === 1,
+    )
+    .reduce(
+      (obj, [version, info]) => ({
+        ...obj,
+        [version]: info.releaseNotes,
       }),
+      {
+        [`${this.pkg.version} (current)`]: this.pkg.releaseNotes,
+      },
     )
 
   asIsOrder(a: any, b: any) {

diff --git a/web/projects/marketplace/src/pages/show/additional/additional.component.html b/web/projects/marketplace/src/pages/show/additional/additional.component.html
@@ -28,15 +28,15 @@ <h2 class="additional-detail-title">Information</h2>
       </ng-template>
       <!-- license -->
       <marketplace-additional-item
-        (click)="presentModalMd('License')"
+        (click)="static.emit('License')"
         [data]="pkg.license"
         label="License"
         icon="@tui.chevron-right"
         class="item-pointer"
       />
       <!-- instructions -->
       <marketplace-additional-item
-        (click)="presentModalMd('Instructions')"
+        (click)="static.emit('Instructions')"
         data="Click to view instructions"
         label="Instructions"
         icon="@tui.chevron-right"

diff --git a/web/projects/marketplace/src/pages/show/additional/additional.component.ts b/web/projects/marketplace/src/pages/show/additional/additional.component.ts
@@ -1,15 +1,14 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  inject,
+  EventEmitter,
   Input,
+  Output,
 } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
+import { CopyService } from '@start9labs/shared'
 import { TuiDialogService } from '@taiga-ui/core'
-import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
-import { CopyService, MarkdownComponent } from '@start9labs/shared'
 import { MarketplacePkg } from '../../../types'
-import { AbstractMarketplaceService } from '../../../services/marketplace.service'
 
 @Component({
   selector: 'marketplace-additional',
@@ -21,7 +20,8 @@ export class AdditionalComponent {
   @Input({ required: true })
   pkg!: MarketplacePkg
 
-  private readonly marketplaceService = inject(AbstractMarketplaceService)
+  @Output()
+  readonly static = new EventEmitter<string>()
 
   constructor(
     readonly copyService: CopyService,
@@ -30,19 +30,4 @@ export class AdditionalComponent {
   ) {}
 
   readonly url = this.route.snapshot.queryParamMap.get('url') || undefined
-
-  presentModalMd(label: string) {
-    this.dialogs
-      .open(new PolymorpheusComponent(MarkdownComponent), {
-        label,
-        size: 'l',
-        data: {
-          content: this.marketplaceService.getStatic$(
-            this.pkg,
-            label === 'License' ? 'LICENSE.md' : 'instructions.md',
-          ),
-        },
-      })
-      .subscribe()
-  }
 }