skip prompt if no dep issues

ui/src/app/components/install-wizard/dependents/dependents.component.html

@@ -3,26 +3,24 @@
   <ion-label class="long-message">Checking for installed services which depend on {{ params.title }}...</ion-label>
 </div>
 
-<div *ngIf="!(loading$ | async)" class="slide-content">
+<div *ngIf="!(loading$ | async) && !!dependentViolation" class="slide-content">
   <div style="margin-top: 25px;">
+
     <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
-      <ion-label color="warning" style="font-size: xx-large; font-weight: bold;"
-        *ngIf="hasDependentViolation">
+      <ion-label color="warning" style="font-size: xx-large; font-weight: bold;">
         WARNING
       </ion-label>
-      <ion-label color="success" style="font-size: x-large; font-weight: bold; text-transform: capitalize;"
-        *ngIf="!hasDependentViolation">
-        READY
-      </ion-label>
     </div>
 
-    <div *ngIf="message" class="long-message">
-      {{ message }}
+    <div class="long-message">
+      {{ dependentViolation }}
     </div>
-    <div *ngIf="hasDependentViolation" style="margin: 25px 0px;">
+
+    <div style="margin: 25px 0px;">
       <div style="border-width: 0px 0px 1px 0px; font-size: unset; text-align: left; font-weight: bold; margin-left: 13px; border-style: solid; border-color: var(--ion-color-light-tint);">
         <ion-text color="warning">Affected Services</ion-text>
       </div>
+
       <ion-item
         style="--ion-item-background: margin-top: 5px"
         *ngFor="let dep of dependentBreakages | keyvalue"

ui/src/app/components/install-wizard/dependents/dependents.component.ts

@@ -27,8 +27,8 @@ export class DependentsComponent {
   }
 
   dependentBreakages: Breakages
-  hasDependentViolation: boolean
-  message: string | null = null
+  dependentViolation: string | undefined
+
   loading$ = new BehaviorSubject(false)
   cancel$ = new Subject<void>()
 
@@ -45,11 +45,10 @@ export class DependentsComponent {
     .subscribe(
       {
         complete: () => {
-          this.hasDependentViolation = this.dependentBreakages && !isEmptyObject(this.dependentBreakages)
-          if (this.hasDependentViolation) {
-            this.message = `${capitalizeFirstLetter(this.params.verb)} ${this.params.title} will prohibit the following services from functioning properly and may cause them to stop if they are currently running.`
+          if (this.dependentBreakages && !isEmptyObject(this.dependentBreakages)) {
+            this.dependentViolation = `${capitalizeFirstLetter(this.params.verb)} ${this.params.title} will prohibit the following services from functioning properly and may cause them to stop if they are currently running.`
           } else {
-            this.message = `No other services installed on your Embassy will be affected by this action.`
+            this.transitions.next()
           }
         },
         error: (e: Error) => this.transitions.error(new Error(`Fetching dependent service information failed: ${e.message || e}`)),

ui/src/app/components/install-wizard/prebaked-wizards.ts

@@ -33,7 +33,9 @@ export class WizardBaker {
           },
         },
         bottomBar: {
-          cancel: { afterLoading: { text: 'Cancel' } },
+          cancel: {
+            afterLoading: { text: 'Cancel' },
+          },
           next: 'Next',
         },
       } : undefined,
@@ -48,8 +50,10 @@ export class WizardBaker {
           },
         },
         bottomBar: {
-          cancel: { afterLoading: { text: 'Cancel' } },
-          next: 'Update Anyways',
+          cancel: {
+            afterLoading: { text: 'Cancel' },
+          },
+          next: 'Update Anyway',
         },
       },
       {
@@ -94,7 +98,10 @@ export class WizardBaker {
           },
         },
         bottomBar: {
-          cancel: { afterLoading: { text: 'Cancel' } }, next: 'Begin Update',
+          cancel: {
+            afterLoading: { text: 'Cancel' },
+          },
+          next: 'Begin Update',
         },
       },
       {
@@ -137,7 +144,12 @@ export class WizardBaker {
             titleColor: 'warning',
           },
         },
-        bottomBar: { cancel: { afterLoading: { text: 'Cancel' } }, next: 'Next' },
+        bottomBar: {
+          cancel: {
+            afterLoading: { text: 'Cancel' },
+          },
+          next: 'Next',
+        },
       } : undefined,
       { slide: {
           selector: 'dependents',
@@ -149,7 +161,11 @@ export class WizardBaker {
           },
         },
         bottomBar: {
-          cancel: { whileLoading: { }, afterLoading: { text: 'Cancel' } }, next: 'Downgrade Anyways',
+          cancel: {
+            whileLoading: { },
+            afterLoading: { text: 'Cancel' },
+          },
+          next: 'Downgrade Anyway',
         },
       },
       { slide: {
@@ -191,7 +207,11 @@ export class WizardBaker {
             titleColor: 'warning',
           },
         },
-        bottomBar: { cancel: { afterLoading: { text: 'Cancel' } }, next: 'Continue' },
+        bottomBar: {
+          cancel: {
+            afterLoading: { text: 'Cancel' },
+          },
+          next: 'Continue' },
       },
       {
         slide: {
@@ -203,7 +223,12 @@ export class WizardBaker {
             fetchBreakages: () => this.embassyApi.dryUninstallPackage({ id }).then(breakages => breakages),
           },
         },
-        bottomBar: { cancel: { whileLoading: { }, afterLoading: { text: 'Cancel' } }, next: 'Uninstall' },
+        bottomBar: {
+          cancel: {
+            whileLoading: { },
+            afterLoading: { text: 'Cancel' },
+          },
+          next: 'Uninstall' },
       },
       {
         slide: {
@@ -215,7 +240,12 @@ export class WizardBaker {
             executeAction: () => this.embassyApi.uninstallPackage({ id }),
           },
         },
-        bottomBar: { finish: 'Dismiss', cancel: { whileLoading: { } } },
+        bottomBar: {
+          finish: 'Dismiss',
+          cancel: {
+            whileLoading: { },
+          },
+        },
       },
     ]
     return { toolbar, slideDefinitions: slideDefinitions.filter(exists) }
@@ -242,7 +272,12 @@ export class WizardBaker {
             fetchBreakages: () => this.embassyApi.dryStopPackage({ id }).then(breakages => breakages),
           },
         },
-        bottomBar: { cancel: { whileLoading: { }, afterLoading: { text: 'Cancel' } }, next: 'Stop Service' },
+        bottomBar: {
+          cancel: {
+            whileLoading: { },
+            afterLoading: { text: 'Cancel' },
+          },
+          next: 'Stop Service' },
       },
       {
         slide: {
@@ -254,7 +289,12 @@ export class WizardBaker {
             executeAction: () => this.embassyApi.stopPackage({ id }),
           },
         },
-        bottomBar: { finish: 'Dismiss', cancel: { whileLoading: { } } },
+        bottomBar: {
+          finish: 'Dismiss',
+          cancel: {
+            whileLoading: { },
+          },
+        },
       },
     ]
     return { toolbar, slideDefinitions }
@@ -279,7 +319,11 @@ export class WizardBaker {
             title, fetchBreakages: () => Promise.resolve(breakages),
           },
         },
-        bottomBar: { cancel: { afterLoading: { text: 'Cancel' } }, next: 'Save Config Anyways' },
+        bottomBar: {
+          cancel: {
+            afterLoading: { text: 'Cancel' },
+          },
+          next: 'Save Config Anyway' },
       },
     ]
     return { toolbar, slideDefinitions }