reintroduce dep breakages for update/downgrade and style alerts every…

…where

frontend/projects/diagnostic-ui/src/app/pages/home/home.page.ts

@@ -141,10 +141,9 @@ export class HomePage {
 
   async presentAlertRepairDisk() {
     const alert = await this.alertCtrl.create({
-      header: 'RepairDisk',
-      message: new IonicSafeString(
-        `<ion-text color="warning">Warning:</ion-text> This action will attempt to preform a disk repair operation and system reboot. No data will be deleted. This action should only be executed if directed by a Start9 support specialist. We recommend backing up your device before preforming this action. If anything happens to the device during the reboot (between the bep and chime), such as loosing power, a power surge, unplugging the drive, or unplugging the Embassy, the filesystem *will* be in an unrecoverable state. Please proceed with caution.`,
-      ),
+      header: 'Warning',
+      message:
+        'This action will attempt to preform a disk repair operation and system reboot. No data will be deleted. This action should only be executed if directed by a Start9 support specialist. We recommend backing up your device before preforming this action. If anything happens to the device during the reboot (between the bep and chime), such as loosing power, a power surge, unplugging the drive, or unplugging the Embassy, the filesystem *will* be in an unrecoverable state. Please proceed with caution.',
       buttons: [
         {
           text: 'Cancel',
@@ -164,6 +163,7 @@ export class HomePage {
           cssClass: 'enter-click',
         },
       ],
+      cssClass: 'alert-warning-message',
     })
     await alert.present()
   }

frontend/projects/marketplace/src/services/marketplace.service.ts

@@ -3,8 +3,6 @@ import { MarketplacePkg } from '../types/marketplace-pkg'
 import { Marketplace } from '../types/marketplace'
 
 export abstract class AbstractMarketplaceService {
-  abstract install(id: string, version?: string): Observable<unknown>
-
   abstract getMarketplace(): Observable<Marketplace>
 
   abstract getReleaseNotes(id: string): Observable<Record<string, string>>

frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts

@@ -100,6 +100,7 @@ export class EmbassyPage {
                 this.presentModalPassword(drive)
               }
             },
+            cssClass: 'enter-click',
           },
         ],
       })

frontend/projects/ui/src/app/app/menu/menu.component.ts

@@ -75,8 +75,8 @@ export class MenuComponent {
         },
         {
           text: 'Logout',
-          cssClass: 'enter-click',
           handler: () => this.logout(),
+          cssClass: 'enter-click',
         },
       ],
     })

frontend/projects/ui/src/app/modals/app-config/app-config.page.ts

@@ -201,17 +201,17 @@ export class AppConfigPage {
 
   private async presentAlertBreakages(breakages: Breakages): Promise<boolean> {
     let message: string | IonicSafeString =
-      '<ion-text color="warning">Warning:</ion-text> <p>As a result of this change, the following services will no longer work properly and may crash:</p><ul>'
+      'As a result of this change, the following services will no longer work properly and may crash:<ul>'
     const localPkgs = this.patch.getData()['package-data']
     const bullets = Object.keys(breakages).map(id => {
       const title = localPkgs[id].manifest.title
-      return `<li>${title}</li>`
+      return `<li><b>${title}</b></li>`
     })
     message = new IonicSafeString(`${message}${bullets}</ul>`)
 
     return new Promise(async resolve => {
       const alert = await this.alertCtrl.create({
-        header: 'Configure Service',
+        header: 'Warning',
         message,
         buttons: [
           {
@@ -229,6 +229,7 @@ export class AppConfigPage {
             cssClass: 'enter-click',
           },
         ],
+        cssClass: 'alert-warning-message',
       })
 
       await alert.present()

frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts

@@ -147,10 +147,8 @@ export class AppActionsPage {
     }
 
     const alert = await this.alertCtrl.create({
-      header: 'Uninstall',
-      message: new IonicSafeString(
-        `<ion-text color="warning">Warning:</ion-text> <p>${message}</p>`,
-      ),
+      header: 'Warning',
+      message,
       buttons: [
         {
           text: 'Cancel',
@@ -164,6 +162,7 @@ export class AppActionsPage {
           cssClass: 'enter-click',
         },
       ],
+      cssClass: 'alert-warning-message',
     })
 
     await alert.present()

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts

@@ -113,10 +113,8 @@ export class AppShowStatusComponent {
 
     if (message) {
       const alert = await this.alertCtrl.create({
-        header: 'Stop Service',
-        message: new IonicSafeString(
-          `<ion-text color="warning">Warning:</ion-text> <p>${message}</p>`,
-        ),
+        header: 'Warning',
+        message,
         buttons: [
           {
             text: 'Cancel',
@@ -130,6 +128,7 @@ export class AppShowStatusComponent {
             cssClass: 'enter-click',
           },
         ],
+        cssClass: 'alert-warning-message',
       })
 
       await alert.present()
@@ -212,7 +211,7 @@ export class AppShowStatusComponent {
   private async presentAlertStart(message: string): Promise<boolean> {
     return new Promise(async resolve => {
       const alert = await this.alertCtrl.create({
-        header: 'Warning',
+        header: 'Alert',
         message,
         buttons: [
           {

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.html

@@ -10,15 +10,15 @@
   <ng-container *ngIf="localPkg; else install">
     <ng-container *ngIf="localPkg.state === PackageState.Installed">
       <ion-button
-        *ngIf="(version | compareEmver: pkg.manifest.version) === -1"
+        *ngIf="(localVersion | compareEmver: pkg.manifest.version) === -1"
         expand="block"
         color="success"
         (click)="tryInstall()"
       >
         Update
       </ion-button>
       <ion-button
-        *ngIf="(version | compareEmver: pkg.manifest.version) === 1"
+        *ngIf="(localVersion | compareEmver: pkg.manifest.version) === 1"
         expand="block"
         color="warning"
         (click)="tryInstall()"
@@ -27,7 +27,7 @@
       </ion-button>
       <ng-container *ngIf="localStorageService.showDevTools$ | async">
         <ion-button
-          *ngIf="(version | compareEmver: pkg.manifest.version) === 0"
+          *ngIf="(localVersion | compareEmver: pkg.manifest.version) === 0"
           expand="block"
           color="success"
           (click)="tryInstall()"

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.ts

@@ -1,5 +1,14 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { AlertController } from '@ionic/angular'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+} from '@angular/core'
+import {
+  AlertController,
+  IonicSafeString,
+  LoadingController,
+} from '@ionic/angular'
 import {
   AbstractMarketplaceService,
   MarketplacePkg,
@@ -9,6 +18,15 @@ import {
   PackageState,
 } from 'src/app/services/patch-db/data-model'
 import { LocalStorageService } from 'src/app/services/local-storage.service'
+import { MarketplaceService } from 'src/app/services/marketplace.service'
+import { hasCurrentDeps } from 'src/app/util/has-deps'
+import { Emver } from '../../../../../../../shared/src/services/emver.service'
+import { first } from 'rxjs/operators'
+import { ErrorToastService } from '../../../../../../../shared/src/services/error-toast.service'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { isEmptyObject } from '../../../../../../../shared/src/util/misc.util'
+import { Breakages } from 'src/app/services/api/api.types'
+import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 
 @Component({
   selector: 'marketplace-show-controls',
@@ -25,39 +43,159 @@ export class MarketplaceShowControlsComponent {
 
   readonly PackageState = PackageState
 
+  loader: HTMLIonLoadingElement | undefined
+
   constructor(
     private readonly alertCtrl: AlertController,
-    private readonly marketplaceService: AbstractMarketplaceService,
     public readonly localStorageService: LocalStorageService,
+    @Inject(AbstractMarketplaceService)
+    private readonly marketplaceService: MarketplaceService,
+    private readonly loadingCtrl: LoadingController,
+    private readonly emver: Emver,
+    private readonly errToast: ErrorToastService,
+    private readonly embassyApi: ApiService,
+    private readonly patch: PatchDbService,
   ) {}
 
-  get version(): string {
+  get localVersion(): string {
     return this.localPkg?.manifest.version || ''
   }
 
   async tryInstall() {
-    const { id, title, version, alerts } = this.pkg.manifest
+    if (
+      this.localPkg &&
+      this.emver.compare(this.localVersion, this.pkg.manifest.version) !== 0 &&
+      hasCurrentDeps(this.localPkg)
+    ) {
+      this.dryInstall()
+    } else {
+      this.alertInstall()
+    }
+  }
+
+  private async dryInstall() {
+    this.loader = await this.loadingCtrl.create({
+      message: 'Checking dependent services...',
+    })
+    await this.loader.present()
+
+    const { id, version } = this.pkg.manifest
+
+    try {
+      const breakages = await this.embassyApi.dryUpdatePackage({
+        id,
+        version: `=${version}`,
+      })
+
+      if (isEmptyObject(breakages)) {
+        this.alertInstall()
+      } else {
+        const proceed = await this.presentAlertBreakages(breakages)
+        if (proceed) {
+          this.alertInstall()
+        }
+      }
+    } catch (e: any) {
+      this.errToast.present(e)
+    }
+  }
+
+  private async alertInstall() {
+    this.dismissLoader()
+
+    const installAlert = this.pkg.manifest.alerts.install
 
-    if (!alerts.install) {
-      this.marketplaceService.install(id, version).subscribe()
+    if (!installAlert) return this.install()
+
+    const alert = await this.alertCtrl.create({
+      header: 'Alert',
+      message: installAlert,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Install',
+          handler: () => {
+            this.install()
+          },
+          cssClass: 'enter-click',
+        },
+      ],
+    })
+    await alert.present()
+  }
+
+  private async install() {
+    const message = 'Beginning Install...'
+    if (this.loader) {
+      this.loader.message = message
     } else {
+      this.loader = await this.loadingCtrl.create({ message })
+      await this.loader.present()
+    }
+
+    const { id, version } = this.pkg.manifest
+
+    try {
+      await this.marketplaceService
+        .installPackage({
+          id,
+          'version-spec': `=${version}`,
+        })
+        .pipe(first())
+        .toPromise()
+    } catch (e: any) {
+      this.errToast.present(e)
+    } finally {
+      this.loader.dismiss()
+    }
+  }
+
+  private async presentAlertBreakages(breakages: Breakages): Promise<boolean> {
+    await this.dismissLoader()
+
+    let message: string | IonicSafeString =
+      'As a result of this update, the following services will no longer work properly and may crash:<ul>'
+    const localPkgs = this.patch.getData()['package-data']
+    const bullets = Object.keys(breakages).map(id => {
+      const title = localPkgs[id].manifest.title
+      return `<li><b>${title}</b></li>`
+    })
+    message = new IonicSafeString(`${message}${bullets}</ul>`)
+
+    return new Promise(async resolve => {
       const alert = await this.alertCtrl.create({
-        header: title,
-        subHeader: version,
-        message: alerts.install,
+        header: 'Warning',
+        message,
         buttons: [
           {
             text: 'Cancel',
             role: 'cancel',
+            handler: () => {
+              resolve(false)
+            },
           },
           {
-            text: 'Install',
-            handler: () =>
-              this.marketplaceService.install(id, version).subscribe(),
+            text: 'Continue',
+            handler: () => {
+              resolve(true)
+            },
+            cssClass: 'enter-click',
           },
         ],
+        cssClass: 'alert-warning-message',
       })
+
       await alert.present()
+    })
+  }
+
+  async dismissLoader() {
+    if (this.loader) {
+      await this.loader.dismiss()
+      this.loader = undefined
     }
   }
 }

frontend/projects/ui/src/app/pages/notifications/notifications.page.ts

@@ -99,10 +99,10 @@ export class NotificationsPage {
         },
         {
           text: 'Delete',
-          cssClass: 'enter-click',
           handler: () => {
             this.deleteAll()
           },
+          cssClass: 'enter-click',
         },
       ],
     })