move marketplace settings into marketplace tab (#1895)

* move marketplace settings into marketplace tab

* Update frontend/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.page.ts

Co-authored-by: Lucy C <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { MarketplaceSettingsPage } from './marketplace-settings.page'
+import { SharedPipesModule } from '@start9labs/shared'
+
+@NgModule({
+  imports: [CommonModule, IonicModule, SharedPipesModule],
+  declarations: [MarketplaceSettingsPage],
+})
+export class MarketplaceSettingsPageModule {}

frontend/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.page.html

@@ -1,9 +1,11 @@
 <ion-header>
   <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="embassy"></ion-back-button>
-    </ion-buttons>
     <ion-title>Marketplace Settings</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 

frontend/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.page.ts

@@ -12,18 +12,18 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ValueSpecObject } from 'src/app/pkg-config/config-types'
 import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
 import { PatchDB } from 'patch-db-client'
-import { DataModel } from '../../../services/patch-db/data-model'
+import { DataModel } from 'src/app/services/patch-db/data-model'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { map } from 'rxjs/operators'
 import { firstValueFrom } from 'rxjs'
 
 @Component({
-  selector: 'marketplaces',
+  selector: 'marketplace-settings',
-  templateUrl: 'marketplaces.page.html',
+  templateUrl: 'marketplace-settings.page.html',
-  styleUrls: ['marketplaces.page.scss'],
+  styleUrls: ['marketplace-settings.page.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MarketplacesPage {
+export class MarketplaceSettingsPage {
   marketplace$ = this.patch.watch$('ui', 'marketplace').pipe(
     map(m => {
       const selected = m['selected-url']
@@ -57,6 +57,10 @@ export class MarketplacesPage {
     private readonly alertCtrl: AlertController,
   ) {}
 
+  async dismiss() {
+    this.modalCtrl.dismiss()
+  }
+
   async presentModalAdd() {
     const { name, spec } = getMarketplaceValueSpec()
     const modal = await this.modalCtrl.create({
@@ -200,7 +204,9 @@ export class MarketplacesPage {
     loader.message = 'Validating marketplace...'
     await loader.present()
 
-    const name = await firstValueFrom(this.marketplaceService.fetchInfo$(url))
+    const { name } = await firstValueFrom(
+      this.marketplaceService.fetchInfo$(url),
+    )
 
     // Save
     loader.message = 'Saving...'

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

@@ -14,6 +14,7 @@ import {
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 import { MarketplaceStatusModule } from '../marketplace-status/marketplace-status.module'
 import { MarketplaceListPage } from './marketplace-list.page'
+import { MarketplaceSettingsPageModule } from 'src/app/modals/marketplace-settings/marketplace-settings.module'
 
 const routes: Routes = [
   {
@@ -37,6 +38,7 @@ const routes: Routes = [
     CategoriesModule,
     SearchModule,
     SkeletonModule,
+    MarketplaceSettingsPageModule,
   ],
   declarations: [MarketplaceListPage],
   exports: [MarketplaceListPage],

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

@@ -24,6 +24,10 @@
     <ion-row>
       <ion-col size="12">
         <h1 class="heading montserrat ion-text-center">{{ details.name }}</h1>
+        <ion-button fill="clear" (click)="presentModalMarketplaceSettings()">
+          <ion-icon slot="start" name="repeat-outline"></ion-icon>
+          Switch Marketplaces
+        </ion-button>
         <marketplace-search [(query)]="query"></marketplace-search>
       </ion-col>
     </ion-row>

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

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { ModalController } from '@ionic/angular'
 import { AbstractMarketplaceService } from '@start9labs/marketplace'
 import { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
+import { MarketplaceSettingsPage } from 'src/app/modals/marketplace-settings/marketplace-settings.page'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 
@@ -67,11 +69,22 @@ export class MarketplaceListPage {
     private readonly patch: PatchDB<DataModel>,
     @Inject(AbstractMarketplaceService)
     private readonly marketplaceService: MarketplaceService,
+    private readonly modalCtrl: ModalController,
   ) {}
 
   category = 'featured'
   query = ''
 
+  async presentModalMarketplaceSettings() {
+    const modal = await this.modalCtrl.create({
+      component: MarketplaceSettingsPage,
+    })
+    modal.onDidDismiss().then(res => {
+      console.log(res)
+    })
+    await modal.present()
+  }
+
   onCategoryChange(category: string): void {
     this.category = category
     this.query = ''

frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { RouterModule, Routes } from '@angular/router'
-import { MarketplacesPage } from './marketplaces.page'
-import { SharedPipesModule } from '@start9labs/shared'
-
-const routes: Routes = [
-  {
-    path: '',
-    component: MarketplacesPage,
-  },
-]
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    RouterModule.forChild(routes),
-    SharedPipesModule,
-  ],
-  declarations: [MarketplacesPage],
-})
-export class MarketplacesPageModule {}

frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.scss

@@ -1,12 +0,0 @@
-.skeleton-parts {
-  padding-bottom: 6px;
-
-  ion-button::part(native) {
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-  }
-}
-
-.padding {
-  padding-right: 32px;
-}

frontend/projects/ui/src/app/pages/server-routes/server-routing.module.ts

@@ -34,13 +34,6 @@ const routes: Routes = [
         m => m.KernelLogsPageModule,
       ),
   },
-  {
-    path: 'marketplaces',
-    loadChildren: () =>
-      import('./marketplaces/marketplaces.module').then(
-        m => m.MarketplacesPageModule,
-      ),
-  },
   {
     path: 'metrics',
     loadChildren: () =>

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

@@ -424,17 +424,6 @@ export class ServerShowPage {
         detail: true,
         disabled$: of(false),
       },
-      {
-        title: 'Marketplace Settings',
-        description: 'Add or remove marketplaces',
-        icon: 'storefront-outline',
-        action: () =>
-          this.navCtrl.navigateForward(['marketplaces'], {
-            relativeTo: this.route,
-          }),
-        detail: true,
-        disabled$: of(false),
-      },
     ],
     Insights: [
       {