From 449968bc4e91a2aba3e2d78b43f089b7436b3b65 Mon Sep 17 00:00:00 2001 From: Lucy C <12953208+elvece@users.noreply.github.com> Date: Wed, 6 Jul 2022 17:10:22 -0600 Subject: [PATCH] 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 --- frontend/package-lock.json | 14 ++--- frontend/package.json | 2 +- frontend/projects/shared/styles/shared.scss | 23 +++++++++ .../form-object/form-object.component.ts | 20 ++++++-- .../action-marketplace.component.html | 39 ++++++++++++++ .../action-marketplace.component.module.ts | 12 +++++ .../action-marketplace.component.scss | 16 ++++++ .../action-marketplace.component.ts | 20 ++++++++ .../modals/app-config/app-config.page.html | 2 +- .../modals/app-config/app-config.page.scss | 4 ++ .../generic-input.component.module.ts | 1 - .../apps-routes/app-show/app-show.module.ts | 2 + .../app-show/pipes/to-buttons.pipe.ts | 51 ++++++++++--------- 13 files changed, 168 insertions(+), 38 deletions(-) create mode 100644 frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.html create mode 100644 frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.module.ts create mode 100644 frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.scss create mode 100644 frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 353d5496b6..da651f2486 100644 --- 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", diff --git a/frontend/package.json b/frontend/package.json index 0efd74c5e7..37b4d68856 100644 --- 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 index b6e0fcf772..defef4faab 100644 --- 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 index 22e50e9de4..9310f483d5 100644 --- 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() @Output() onExpand = new EventEmitter() @Output() hasNewOptions = new EventEmitter() @@ -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 new file mode 100644 index 0000000000..24883e7a1e --- /dev/null +++ b/frontend/projects/ui/src/app/modals/action-marketplace/action-marketplace.component.html @@ -0,0 +1,39 @@ + + + + + + + + {{ title }} + + + + +
+
+

This service was installed from:

+

{{ packageMarketplace }}

+

But you are currently connected to:

+

{{ currentMarketplace }}

+
+
+
+

To switch marketplaces visit your

+ Marketplace Settings +

or you can

+ Continue to {{ currentMarketplace }} +
+
+ + diff --git 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 new file mode 100644 index 0000000000..fb8936cf4c --- /dev/null +++ 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 {} 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 new file mode 100644 index 0000000000..9b41203c7f --- /dev/null +++ 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; +} \ No newline at end of file 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 new file mode 100644 index 0000000000..89332e68b2 --- /dev/null +++ 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 index da2a84e364..608ccc2835 100644 --- 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" > - + {{ 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 index 98a2553cd5..e568528a84 100644 --- 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; } \ No newline at end of file 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 index a135720702..d2b1faab49 100644 --- 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 index 08794ca7f8..0269ad56db 100644 --- 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 index 37dc1047a6..e32bb4ec3f 100644 --- 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: -

- ${pkgM} -

but you are currently connected to:

- ${currentM} -

- 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() } }