Fix/misc UI (#1622)

* show available marketplace updates in menu * complete feature * delete unused class * update tsmatches to remove console log * fix merge conflict * change config header font size * fix new options emission for config elements * delete unecessary import * add custom modal for service marketplace conflict action * cleanup * remove unecessary imports * pr cleanup of unused imports and classes Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
2026-03-26 02:11:53 +00:00 · 2022-07-06 17:10:22 -06:00
parent b0a55593c1
commit 449968bc4e
13 changed files with 168 additions and 38 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -38,7 +38,7 @@
        "pbkdf2": "^3.1.2",
        "rxjs": "^6.6.7",
        "swiper": "^8.2.4",
-        "ts-matches": "^5.1.0",
+        "ts-matches": "^5.1.7",
        "tslib": "^2.3.0",
        "uuid": "^8.3.2",
        "zone.js": "^0.11.5"
@@ -13293,9 +13293,9 @@
      }
    },
    "node_modules/ts-matches": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/ts-matches/-/ts-matches-5.1.5.tgz",
-      "integrity": "sha512-PdashZCpn30SFH9mboHq3/rmC3wntKajw5IkQcSX9HhbcV7FoP3/nJzjFII6ZhRyoAV0mrDXWoblJulpMlh65g=="
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ts-matches/-/ts-matches-5.1.8.tgz",
+      "integrity": "sha512-NDt8UCwE21SBJ9q3gWJUWyFUmOpYLv7zD7x5dWgriqBDDFo9gMIxLkGPwGqMBlMhlu5SOdsxokMhU9Xu1FllMA=="
    },
    "node_modules/ts-node": {
      "version": "10.7.0",
@@ -24142,9 +24142,9 @@
      "dev": true
    },
    "ts-matches": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/ts-matches/-/ts-matches-5.1.5.tgz",
-      "integrity": "sha512-PdashZCpn30SFH9mboHq3/rmC3wntKajw5IkQcSX9HhbcV7FoP3/nJzjFII6ZhRyoAV0mrDXWoblJulpMlh65g=="
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ts-matches/-/ts-matches-5.1.8.tgz",
+      "integrity": "sha512-NDt8UCwE21SBJ9q3gWJUWyFUmOpYLv7zD7x5dWgriqBDDFo9gMIxLkGPwGqMBlMhlu5SOdsxokMhU9Xu1FllMA=="
    },
    "ts-node": {
      "version": "10.7.0",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,7 +52,7 @@
    "pbkdf2": "^3.1.2",
    "rxjs": "^6.6.7",
    "swiper": "^8.2.4",
-    "ts-matches": "^5.1.0",
+    "ts-matches": "^5.1.7",
    "tslib": "^2.3.0",
    "uuid": "^8.3.2",
    "zone.js": "^0.11.5"
--- a/frontend/projects/shared/styles/shared.scss
+++ b/frontend/projects/shared/styles/shared.scss
@@ -1,4 +1,5 @@
 $wide-modal: 900px;
+$medium-modal: 600px;

 body {
  -webkit-user-select: text;
@@ -40,6 +41,28 @@ ion-modal::part(content) {
  }
 }

+.medium-modal {
+  &::part(content) {
+    position: absolute;
+    height: 80% !important;
+    top: 10%;
+    width: 90% !important;
+    left: 5% !important;
+  }
+}
+
+@media (min-width: 1000px) {
+  .medium-modal {
+    &::part(content) {
+      position: absolute;
+      height: 80% !important;
+      top: 10%;
+      width: $medium-modal !important;
+      left: calc((100vw - $medium-modal) / 2) !important;
+    }
+  }
+}
+
@media (min-width: 1000px) {
  ion-modal::part(content) {
    position: absolute;
--- a/frontend/projects/ui/src/app/components/form-object/form-object.component.ts
+++ b/frontend/projects/ui/src/app/components/form-object/form-object.component.ts
@@ -26,6 +26,9 @@ import { pauseFor } from '@start9labs/shared'
 import { v4 } from 'uuid'
 const Mustache = require('mustache')

+interface Config {
+  [key: string]: any
+}
@Component({
  selector: 'form-object',
  templateUrl: './form-object.component.html',
@@ -35,8 +38,8 @@ export class FormObjectComponent {
  @Input() objectSpec: ConfigSpec
  @Input() formGroup: FormGroup
  @Input() unionSpec?: ValueSpecUnion
-  @Input() current?: { [key: string]: any }
-  @Input() original?: { [key: string]: any }
+  @Input() current?: Config
+  @Input() original?: Config
  @Output() onInputChange = new EventEmitter<void>()
  @Output() onExpand = new EventEmitter<void>()
  @Output() hasNewOptions = new EventEmitter<void>()
@@ -85,9 +88,16 @@ export class FormObjectComponent {
      }
    })

-    if (Object.values(this.original || {}).some(v => v === undefined)) {
+    // setTimeout hack to avoid ExpressionChangedAfterItHasBeenCheckedError
+    setTimeout(() => {
+      if (this.original) {
+        Object.keys(this.current || {}).forEach(key => {
+          if ((this.original as Config)[key] === undefined) {
            this.hasNewOptions.emit()
          }
+        })
+      }
+    }, 10)
  }

  getEnumListDisplay(arr: string[], spec: ListValueSpecOf<'enum'>): string {
--- a/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.html
+++ b/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.html
@@ -0,0 +1,39 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{ title }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ng-container>
+    <div class="center text-center">
+      <div class="card">
+        <h4>This service was installed from:</h4>
+        <p class="courier-new color-success-shade">{{ packageMarketplace }}</p>
+        <h4>But you are currently connected to:</h4>
+        <p class="courier-new color-primary-shade">{{ currentMarketplace }}</p>
+      </div>
+      <br />
+      <div>
+        <p>To switch marketplaces visit your</p>
+        <ion-button
+          color="success"
+          routerLink="embassy/marketplaces"
+          (click)="dismiss()"
+          >Marketplace Settings</ion-button
+        >
+        <p>or you can</p>
+        <ion-button
+          [routerLink]="['marketplace/', pkgId]"
+          click="dismiss()"
+          (click)="dismiss()"
+          >Continue to {{ currentMarketplace }}</ion-button
+        >
+      </div>
+    </div>
+  </ng-container>
+</ion-content>
--- a/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.module.ts
+++ b/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+import { ActionMarketplaceComponent } from './action-marketplace.component'
+
+@NgModule({
+  declarations: [ActionMarketplaceComponent],
+  imports: [CommonModule, IonicModule, RouterModule.forChild([])],
+  exports: [ActionMarketplaceComponent],
+})
+export class ActionMarketplaceComponentModule {}
--- a/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.scss
+++ b/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.scss
@@ -0,0 +1,16 @@
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.card {
+  background: rgba(53, 56, 62, 0.768);
+  border-radius: 7px;
+  padding: 27px;
+}
--- a/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.ts
+++ b/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+
+@Component({
+  selector: 'action-marketplace',
+  templateUrl: './action-marketplace.component.html',
+  styleUrls: ['./action-marketplace.component.scss'],
+})
+export class ActionMarketplaceComponent {
+  @Input() title: string
+  @Input() packageMarketplace: string
+  @Input() currentMarketplace: string
+  @Input() pkgId: string
+
+  constructor(private readonly modalCtrl: ModalController) {}
+
+  dismiss() {
+    this.modalCtrl.dismiss()
+  }
+}
--- a/frontend/projects/ui/src/app/modals/app-config/app-config.page.html
+++ b/frontend/projects/ui/src/app/modals/app-config/app-config.page.html
@@ -26,7 +26,7 @@
        *ngIf="hasConfig && !pkg.installed?.status?.configured && !configForm.dirty"
        class="ion-padding-bottom"
      >
-        <ion-text color="success">
+        <ion-text class="header-details" color="success">
          <span *ngIf="!original; else hasOriginal">
            {{ pkg.manifest.title }} has been automatically configured with
            recommended defaults. Make whatever changes you want, then click
--- a/frontend/projects/ui/src/app/modals/app-config/app-config.page.scss
+++ b/frontend/projects/ui/src/app/modals/app-config/app-config.page.scss
@@ -6,3 +6,7 @@
  --border-width: 0;
  --inner-border-width: 0;
 }
+
+.header-details {
+  font-size: 20px;
+}
--- a/frontend/projects/ui/src/app/modals/generic-input/generic-input.component.module.ts
+++ b/frontend/projects/ui/src/app/modals/generic-input/generic-input.component.module.ts
@@ -5,7 +5,6 @@ import { IonicModule } from '@ionic/angular'
 import { RouterModule } from '@angular/router'
 import { SharedPipesModule } from '@start9labs/shared'
 import { FormsModule } from '@angular/forms'
-import { MaskPipeModule } from 'src/app/pipes/mask/mask.module'

@NgModule({
  declarations: [GenericInputComponent],
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
@@ -21,6 +21,7 @@ import { ToButtonsPipe } from './pipes/to-buttons.pipe'
 import { ToDependenciesPipe } from './pipes/to-dependencies.pipe'
 import { ToStatusPipe } from './pipes/to-status.pipe'
 import { ProgressDataPipe } from './pipes/progress-data.pipe'
+import { ActionMarketplaceComponentModule } from 'src/app/modals/action-marketplace/action-marketplace.component.module'

 const routes: Routes = [
  {
@@ -55,6 +56,7 @@ const routes: Routes = [
    EmverPipesModule,
    LaunchablePipeModule,
    UiPipeModule,
+    ActionMarketplaceComponentModule,
  ],
 })
 export class AppShowPageModule {}
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts
@@ -15,6 +15,7 @@ import { ModalService } from 'src/app/services/modal.service'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { from } from 'rxjs'
 import { Marketplace } from '@start9labs/marketplace'
+import { ActionMarketplaceComponent } from 'src/app/modals/action-marketplace/action-marketplace.component'
 export interface Button {
  title: string
  description: string
@@ -166,7 +167,11 @@ export class ToButtonsPipe implements PipeTransform {
      }

      button.action = () =>
-        this.differentMarketplaceAction(pkgTitle, marketplaceTitle)
+        this.differentMarketplaceAction(
+          pkgTitle,
+          marketplaceTitle,
+          pkg.manifest.id,
+        )
      button.description = 'Service was installed from a different marketplace'
    }
    return button
@@ -184,28 +189,28 @@ export class ToButtonsPipe implements PipeTransform {
      await alert.present()
    }
  }
-  private async differentMarketplaceAction(pkgM: string, currentM: string) {
-    const alert = await this.alertCtrl.create({
-      header: 'Marketplace Conflict',
-      message: `This service was installed from:
-        <br><br>
-        <span class="courier-new color-success-shade">${pkgM}</span>
-        <br><br>but you are currently connected to:<br><br>
-        <span class="courier-new color-primary-shade">${currentM}</span>
-        <br><br>
-        To view the marketplace listing for this service, visit your Marketplace Settings and change marketplaces.`,
+
+  private async differentMarketplaceAction(
+    packageMarketplace: string,
+    currentMarketplace: string,
+    pkgId: string,
+  ) {
+    const modal = await this.modalCtrl.create({
+      component: ActionMarketplaceComponent,
+      componentProps: {
+        title: 'Marketplace Conflict',
+        packageMarketplace,
+        currentMarketplace,
+        pkgId,
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
          },
-        {
-          text: 'Go to Settings',
-          handler: () => this.navCtrl.navigateForward(['embassy/marketplaces']),
-          cssClass: 'enter-click',
-        },
        ],
+      },
+      cssClass: 'medium-modal',
    })
-    await alert.present()
+    await modal.present()
  }
 }