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>
Start9Labs · Jul 6, 2022 · 449968b · 449968b
1 parent b0a5559
commit 449968b
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 38 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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"

diff --git 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;

diff --git 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)) {
-      this.hasNewOptions.emit()
-    }
+    // 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 {

diff --git 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>
diff --git a/...tend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.module.ts b/...tend/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 {}
diff --git 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;
+}
diff --git 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()
+  }
+}
diff --git 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

diff --git 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
@@ -5,4 +5,8 @@
   // kills the lines
   --border-width: 0;
   --inner-border-width: 0;
+}
+
+.header-details {
+  font-size: 20px;
 }
diff --git 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],

diff --git 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 {}
diff --git 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.`,
-      buttons: [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-        },
-        {
-          text: 'Go to Settings',
-          handler: () => this.navCtrl.navigateForward(['embassy/marketplaces']),
-          cssClass: 'enter-click',
-        },
-      ],
+
+  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',
+          },
+        ],
+      },
+      cssClass: 'medium-modal',
     })
-    await alert.present()
+    await modal.present()
   }
 }