update marketplace to use query params for registry url; comment out …

…updates page - will be refactored

web/projects/marketplace/package.json

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

web/projects/marketplace/src/components/menu/menu.component.ts

@@ -8,7 +8,7 @@ import {
 import { MarketplaceConfig } from '@start9labs/shared'
 import { Subject, takeUntil } from 'rxjs'
 import { AbstractCategoryService } from '../../services/category.service'
-import { StoreData } from '../../types'
+import { StoreDataWithUrl } from '../../types'
 
 @Component({
   selector: 'menu',
@@ -21,7 +21,7 @@ export class MenuComponent implements OnDestroy {
   iconConfig!: MarketplaceConfig
 
   @Input({ required: true })
-  registry: (StoreData & { url?: string }) | null = null
+  registry: StoreDataWithUrl | null = null
 
   private destroy$ = new Subject<void>()
   private readonly categoryService = inject(AbstractCategoryService)

web/projects/marketplace/src/types.ts

@@ -37,3 +37,5 @@ export type MarketplacePkg = T.PackageVersionInfo &
     version: string
     flavor: string | null
   }
+
+export type StoreDataWithUrl = StoreData & { url: string }

web/projects/ui/src/app/app.providers.ts

@@ -3,7 +3,6 @@ import { UntypedFormBuilder } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
   AbstractCategoryService,
-  AbstractMarketplaceService,
   FilterPackagesPipe,
 } from '@start9labs/marketplace'
 import { RELATIVE_URL, THEME, WorkspaceConfig } from '@start9labs/shared'
@@ -90,10 +89,6 @@ export const APP_PROVIDERS: Provider[] = [
     provide: THEME,
     useExisting: ThemeSwitcherService,
   },
-  {
-    provide: AbstractMarketplaceService,
-    useClass: MarketplaceService,
-  },
   {
     provide: AbstractCategoryService,
     useClass: CategoryService,

web/projects/ui/src/app/routes/portal/components/tabs.component.ts

@@ -50,6 +50,16 @@ const FILTER = ['/portal/system/settings', '/portal/system/marketplace']
       >
         Settings
       </a>
+      <a
+        tuiTabBarItem
+        icon="@tui.settings"
+        routerLink="/portal/system/settings"
+        routerLinkActive
+        [badge]="badge()"
+        (isActiveChange)="update()"
+      >
+        Settings
+      </a>
       <button
         tuiTabBarItem
         icon="@tui.ellipsis"

web/projects/ui/src/app/routes/portal/routes/system/marketplace/components/controls.component.ts

@@ -7,10 +7,7 @@ import {
   Input,
 } from '@angular/core'
 import { Router } from '@angular/router'
-import {
-  AbstractMarketplaceService,
-  MarketplacePkg,
-} from '@start9labs/marketplace'
+import { MarketplacePkg } from '@start9labs/marketplace'
 import {
   Exver,
   ErrorService,
@@ -106,12 +103,7 @@ export class MarketplaceControlsComponent {
   private readonly loader = inject(LoadingService)
   private readonly exver = inject(Exver)
   private readonly router = inject(Router)
-  private readonly marketplace = inject(
-    AbstractMarketplaceService,
-  ) as MarketplaceService
-
-  @Input()
-  url?: string
+  private readonly marketplaceService = inject(MarketplaceService)
 
   @Input({ required: true })
   pkg!: MarketplacePkg
@@ -125,19 +117,19 @@ export class MarketplaceControlsComponent {
   readonly showDevTools$ = inject(ClientStorageService).showDevTools$
 
   async tryInstall() {
-    const current = await firstValueFrom(this.marketplace.getSelectedHost$())
-    const url = this.url || current.url
+    const currentUrl = await firstValueFrom(
+      this.marketplaceService.getRegistryUrl$(),
+    )
     const originalUrl = this.localPkg?.registry || ''
-
     if (!this.localPkg) {
-      if (await this.alerts.alertInstall(this.pkg)) this.install(url)
+      if (await this.alerts.alertInstall(this.pkg)) this.install(currentUrl)
 
       return
     }
 
     if (
-      !sameUrl(url, originalUrl) &&
-      !(await this.alerts.alertMarketplace(url, originalUrl))
+      !sameUrl(currentUrl, originalUrl) &&
+      !(await this.alerts.alertMarketplace(currentUrl, originalUrl))
     ) {
       return
     }
@@ -148,9 +140,9 @@ export class MarketplaceControlsComponent {
       hasCurrentDeps(localManifest.id, await getAllPackages(this.patch)) &&
       this.exver.compareExver(localManifest.version, this.pkg.version) !== 0
     ) {
-      this.dryInstall(url)
+      this.dryInstall(currentUrl)
     } else {
-      this.install(url)
+      this.install(currentUrl)
     }
   }
 
@@ -178,7 +170,7 @@ export class MarketplaceControlsComponent {
     const { id, version } = this.pkg
 
     try {
-      await this.marketplace.installPackage(id, version, url)
+      await this.marketplaceService.installPackage(id, version, url)
     } catch (e: any) {
       this.errorService.handleError(e)
     } finally {

web/projects/ui/src/app/routes/portal/routes/system/marketplace/components/menu.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { CommonModule } from '@angular/common'
 import { MenuModule } from '@start9labs/marketplace'
 import {
   TuiDialogService,
@@ -8,12 +9,13 @@ import {
 } from '@taiga-ui/core'
 import { ConfigService } from 'src/app/services/config.service'
 import { MARKETPLACE_REGISTRY } from '../modals/registry.component'
+import { MarketplaceService } from 'src/app/services/marketplace.service'
 
 @Component({
   standalone: true,
   selector: 'marketplace-menu',
   template: `
-    <menu [iconConfig]="marketplace">
+    <menu [iconConfig]="marketplace" [registry]="registry$ | async">
       <button
         slot="desktop"
         tuiIconButton
@@ -45,11 +47,13 @@ import { MARKETPLACE_REGISTRY } from '../modals/registry.component'
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MenuModule, TuiButton, TuiIcon, TuiAppearance],
+  imports: [CommonModule, MenuModule, TuiButton, TuiIcon, TuiAppearance],
 })
 export class MarketplaceMenuComponent {
   private readonly dialogs = inject(TuiDialogService)
   readonly marketplace = inject(ConfigService).marketplace
+  private readonly marketplaceService = inject(MarketplaceService)
+  readonly registry$ = this.marketplaceService.getRegistry$()
 
   changeRegistry() {
     this.dialogs

web/projects/ui/src/app/routes/portal/routes/system/marketplace/marketplace.component.ts

@@ -5,14 +5,18 @@ import {
   AbstractCategoryService,
   FilterPackagesPipe,
 } from '@start9labs/marketplace'
-import { combineLatest, map } from 'rxjs'
+import { combineLatest, distinctUntilKeyChanged, map } from 'rxjs'
 import { MarketplaceNotificationComponent } from './components/notification.component'
 import { MarketplaceMenuComponent } from './components/menu.component'
 import { MarketplaceTileComponent } from './components/tile.component'
 import { MarketplaceControlsComponent } from './components/controls.component'
 import { MarketplacePreviewComponent } from './modals/preview.component'
 import { MarketplaceSidebarsComponent } from './components/sidebars.component'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
+import { ActivatedRoute, Router } from '@angular/router'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { PatchDB } from 'patch-db-client'
+import { DataModel } from 'src/app/services/patch-db/data-model'
 
 @Component({
   standalone: true,
@@ -21,7 +25,7 @@ import { MarketplaceService } from 'src/app/services/marketplace.service'
     <tui-scrollbar>
       <div class="marketplace-content-wrapper">
         <div class="marketplace-content-inner">
-          <marketplace-notification [url]="(details$ | async)?.url || ''" />
+          <marketplace-notification [url]="(details$ | async) || ''" />
           <div class="title-wrapper">
             <h1>
               {{ category$ | async | titlecase }}
@@ -152,11 +156,28 @@ export class MarketplaceComponent {
   private readonly categoryService = inject(AbstractCategoryService)
   private readonly marketplaceService = inject(MarketplaceService)
 
-  readonly details$ = this.marketplaceService.getSelectedHost$()
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly patch: PatchDB<DataModel>,
+  ) {
+    this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe(params => {
+      this.patch
+        .watch$('ui', 'marketplace')
+        .pipe(distinctUntilKeyChanged('selectedUrl'))
+        .subscribe(({ selectedUrl }) => {
+          this.marketplaceService.setRegistryUrl(
+            params.get('registry') || selectedUrl,
+          )
+        })
+    })
+  }
+
+  readonly details$ = this.marketplaceService.getRegistryUrl$()
   readonly category$ = this.categoryService.getCategory$()
   readonly filtered$ = combineLatest([
     this.marketplaceService
-      .getSelectedRegistry$()
+      .getRegistry$()
       .pipe(map(({ packages }) => packages)),
     this.categoryService.getQuery$(),
     this.category$,

web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/preview.component.ts

@@ -187,7 +187,7 @@ export class MarketplacePreviewComponent {
   private readonly exver = inject(Exver)
   private readonly router = inject(Router)
   private readonly marketplaceService = inject(MarketplaceService)
-  private readonly version$ = new BehaviorSubject<string>('*')
+  private readonly version$ = new BehaviorSubject<string | null>(null)
   private readonly flavor$ = this.router.routerState.root.queryParamMap.pipe(
     map(paramMap => paramMap.get('flavor')),
   )
@@ -202,7 +202,7 @@ export class MarketplacePreviewComponent {
 
   readonly flavors$ = this.flavor$.pipe(
     switchMap(current =>
-      this.marketplaceService.getSelectedRegistry$().pipe(
+      this.marketplaceService.getRegistry$().pipe(
         map(({ packages }) =>
           packages.filter(
             ({ id, flavor }) => id === this.pkgId && flavor !== current,

web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/registry.component.ts

@@ -9,12 +9,20 @@ import {
   toUrl,
 } from '@start9labs/shared'
 import {
-  AbstractMarketplaceService,
   StoreIconComponentModule,
   MarketplaceRegistryComponent,
 } from '@start9labs/marketplace'
-import { TuiDialogService, TuiIcon, TuiTitle, TuiButton } from '@taiga-ui/core'
-import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
+import {
+  TuiDialogService,
+  TuiIcon,
+  TuiTitle,
+  TuiButton,
+  TuiDialogContext,
+} from '@taiga-ui/core'
+import {
+  PolymorpheusComponent,
+  POLYMORPHEUS_CONTEXT,
+} from '@taiga-ui/polymorpheus'
 import { PatchDB } from 'patch-db-client'
 import { combineLatest, filter, firstValueFrom, map, Subscription } from 'rxjs'
 import { FormComponent } from 'src/app/routes/portal/components/form.component'
@@ -24,6 +32,7 @@ import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
 import { getMarketplaceValueSpec, getPromptOptions } from '../utils/registry'
 import { ConfigService } from 'src/app/services/config.service'
+import { ActivatedRoute, Router } from '@angular/router'
 
 @Component({
   standalone: true,
@@ -90,9 +99,10 @@ export class MarketplaceRegistryModal {
   private readonly errorService = inject(ErrorService)
   private readonly formDialog = inject(FormDialogService)
   private readonly dialogs = inject(TuiDialogService)
-  private readonly marketplace = inject(
-    AbstractMarketplaceService,
-  ) as MarketplaceService
+  private readonly marketplaceService = inject(MarketplaceService)
+  private readonly context = inject<TuiDialogContext>(POLYMORPHEUS_CONTEXT)
+  private readonly route = inject(ActivatedRoute)
+  private readonly router = inject(Router)
   private readonly hosts$ = inject<PatchDB<DataModel>>(PatchDB).watch$(
     'ui',
     'marketplace',
@@ -101,13 +111,13 @@ export class MarketplaceRegistryModal {
   readonly marketplaceConfig = inject(ConfigService).marketplace
 
   readonly stores$ = combineLatest([
-    this.marketplace.getKnownHosts$(),
-    this.marketplace.getSelectedHost$(),
+    this.marketplaceService.getKnownHosts$(),
+    this.marketplaceService.getRegistryUrl$(),
   ]).pipe(
-    map(([stores, selected]) =>
+    map(([stores, selectedUrl]) =>
       stores.map(s => ({
         ...s,
-        selected: sameUrl(s.url, selected.url),
+        selected: sameUrl(s.url, selectedUrl),
       })),
     ),
     // 0 and 1 are prod and community, 2 and beyond are alts
@@ -170,9 +180,10 @@ export class MarketplaceRegistryModal {
     loader.unsubscribe()
     loader.closed = false
     loader.add(this.loader.open('Changing Registry...').subscribe())
-
     try {
+      this.marketplaceService.setRegistryUrl(url)
       await this.api.setDbValue<string>(['marketplace', 'selectedUrl'], url)
+      this.context.$implicit.complete()
     } catch (e: any) {
       this.errorService.handleError(e)
     } finally {
@@ -210,7 +221,9 @@ export class MarketplaceRegistryModal {
     loader.closed = false
     loader.add(this.loader.open('Validating marketplace...').subscribe())
 
-    const { name } = await firstValueFrom(this.marketplace.fetchInfo$(url))
+    const { name } = await firstValueFrom(
+      this.marketplaceService.fetchInfo$(url),
+    )
 
     // Save
     loader.unsubscribe()

web/projects/ui/src/app/routes/portal/routes/system/system.module.ts

@@ -42,12 +42,12 @@ const ROUTES: Routes = [
     loadComponent: () => import('./sideload/sideload.component'),
     data: toNavigationItem('/portal/system/sideload'),
   },
-  {
-    title: systemTabResolver,
-    path: 'updates',
-    loadComponent: () => import('./updates/updates.component'),
-    data: toNavigationItem('/portal/system/updates'),
-  },
+  // {
+  //   title: systemTabResolver,
+  //   path: 'updates',
+  //   loadComponent: () => import('./updates/updates.component'),
+  //   data: toNavigationItem('/portal/system/updates'),
+  // },
   {
     title: systemTabResolver,
     path: 'metrics',