ui: adds install/uninstall warnings

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

@@ -38,9 +38,12 @@ export class DependenciesComponent implements OnInit, Loadable, Colorable {
   label: string
   $color$ = new BehaviorSubject('medium')
 
-  constructor (private readonly popoverController: PopoverController) { }
+  constructor (private readonly popoverController: PopoverController) {
+    console.log('dependencies')
+   }
 
   load () {
+    console.log('loading dependencies')
     this.$color$.next(this.$color$.getValue())
   }
 

ui/src/app/components/install-wizard/developer-notes/developer-notes.component.html

@@ -1,17 +1,12 @@
-<div *ngIf="!($loading$ | async) && !params.skipCompletionDialogue" class="slide-content">
+<div class="slide-content">
   <div style="margin-top: 25px;">
     <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
       <ion-label [color]="$color$ | async" style="font-size: xx-large; font-weight: bold;">
-        {{successText}}
+        Warning
       </ion-label>
     </div>
     <div class="long-message">
-    {{summary}}
+    {{params.developerNotes}}
     </div>
   </div>
 </div>
-
-<div *ngIf="$loading$ | async" class="center-spinner">
-  <ion-spinner color="warning" name="lines"></ion-spinner>
-  <ion-label class="long-message">{{label}}</ion-label>
-</div>

ui/src/app/components/install-wizard/developer-notes/developer-notes.component.ts

@@ -1,8 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { BehaviorSubject, from, Subject } from 'rxjs'
-import { takeUntil } from 'rxjs/operators'
-import { markAsLoadingDuring$ } from 'src/app/services/loader.service'
-import { capitalizeFirstLetter } from 'src/app/util/misc.util'
+import { BehaviorSubject, Subject } from 'rxjs'
 import { Colorable, Loadable } from '../loadable'
 import { WizardAction } from '../wizard-types'
 
@@ -18,50 +15,13 @@ export class DeveloperNotesComponent implements OnInit, Loadable, Colorable {
   }
 
   $loading$ = new BehaviorSubject(false)
-  $color$ = new BehaviorSubject('medium')
+  $color$ = new BehaviorSubject('warning')
   $cancel$ = new Subject<void>()
 
-  load () {}
+  load () { }
 
   constructor () { }
   ngOnInit () {
-    switch (this.params.action) {
-      case 'install':
-        this.summary = `Installation of ${this.params.title} is now in progress. You will receive a notification when the installation has completed.`
-        this.label = `${capitalizeFirstLetter(this.params.verb)} ${this.params.title}...`
-        this.$color$.next('primary')
-        this.successText = 'In Progress'
-        break
-      case 'downgrade':
-        this.summary = `Downgrade for ${this.params.title} is now in progress. You will receive a notification when the downgrade has completed.`
-        this.label = `${capitalizeFirstLetter(this.params.verb)} ${this.params.title}...`
-        this.$color$.next('primary')
-        this.successText = 'In Progress'
-        break
-      case 'update':
-        this.summary = `Update for ${this.params.title} is now in progress. You will receive a notification when the update has completed.`
-        this.label = `${capitalizeFirstLetter(this.params.verb)} ${this.params.title}...`
-        this.$color$.next('primary')
-        this.successText = 'In Progress'
-        break
-      case 'uninstall':
-        this.summary = `${capitalizeFirstLetter(this.params.title)} has been successfully uninstalled.`
-        this.label = `${capitalizeFirstLetter(this.params.verb)} ${this.params.title}...`
-        this.$color$.next('success')
-        this.successText = 'Success'
-        break
-      case 'stop':
-        this.summary = `${capitalizeFirstLetter(this.params.title)} has been successfully stopped.`
-        this.label = `${capitalizeFirstLetter(this.params.verb)} ${this.params.title}...`
-        this.$color$.next('success')
-        this.successText = 'Success'
-        break
-      case 'configure':
-        this.summary = `New config for ${this.params.title} has been successfully saved.`
-        this.label = `${capitalizeFirstLetter(this.params.verb)} ${this.params.title}...`
-        this.$color$.next('success')
-        this.successText = 'Success'
-        break
-    }
+    console.log('Developer Notes', this.params)
   }
 }

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

@@ -10,8 +10,8 @@
 <ion-content>
   <ion-slides *ngIf="!($error$ | async)" id="slide-show" style="--bullet-background: white" pager="false">
     <ion-slide *ngFor="let slide of params.slideDefinitions">
-      <developer-notes #components *ngIf="slide.selector === 'developer=notes'" [params]="slide.params"></dependencies>
       <dependencies #components *ngIf="slide.selector === 'dependencies'" [params]="slide.params"></dependencies>
+      <developer-notes #components *ngIf="slide.selector === 'developer-notes'" [params]="slide.params"></developer-notes>
       <dependents #components *ngIf="slide.selector === 'dependents'" [params]="slide.params" [finished]="finished"></dependents>
       <complete #components *ngIf="slide.selector === 'complete'" [params]="slide.params" [finished]="finished"></complete>
     </ion-slide>

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

@@ -81,10 +81,15 @@ export class InstallWizardComponent extends Cleanup implements OnInit {
   private async slide () {
     if (this.slideComponents[this.slideIndex + 1] === undefined) { return this.finished({ final: true }) }
     this.slideIndex += 1
-    await this.slideContainer.lockSwipes(false)
-    await Promise.all([this.contentContainer.scrollToTop(), this.slideContainer.slideNext()])
-    await this.slideContainer.lockSwipes(true)
     this.currentSlide.load()
+    await this.slideContainer.lockSwipes(false)
+    await Promise.all([
+      this.contentContainer.scrollToTop(),
+      this.slideContainer.slideNext(500),
+    ])
+    await this.slideContainer.lockSwipes(true)
+    this.slideContainer.update()
+    // this.currentSlide.load()
   }
 }
 

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

@@ -9,9 +9,9 @@ export class WizardBaker {
   constructor (private readonly apiService: ApiService, private readonly appModel: AppModel) { }
 
   install (values: {
-    id: string, title: string, version: string, serviceRequirements: AppDependency[], developerNotes?: string
+    id: string, title: string, version: string, serviceRequirements: AppDependency[], installWarning?: string
   }): InstallWizardComponent['params'] {
-    const { id, title, version, serviceRequirements, developerNotes } = values
+    const { id, title, version, serviceRequirements, installWarning } = values
 
     validate(id, exists, 'missing id')
     validate(title, exists, 'missing title')
@@ -22,9 +22,9 @@ export class WizardBaker {
     const toolbar: TopbarParams  = { action, title, version }
 
     const slideDefinitions: SlideDefinition[] = [
-      { selector: 'developer-notes', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Next', params: {
-        action, title, version, serviceRequirements,
-      }},
+      installWarning ? { selector: 'developer-notes', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Next', params: {
+        action, developerNotes: installWarning,
+      }} : undefined,
       { selector: 'dependencies', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Install', params: {
         action, title, version, serviceRequirements,
       }},
@@ -34,13 +34,13 @@ export class WizardBaker {
         }),
       }},
     ]
-    return { toolbar, slideDefinitions }
+    return { toolbar, slideDefinitions: slideDefinitions.filter(exists) }
   }
 
   update (values: {
-    id: string, title: string, version: string, serviceRequirements: AppDependency[]
+    id: string, title: string, version: string, serviceRequirements: AppDependency[], installWarning?: string
   }): InstallWizardComponent['params'] {
-    const { id, title, version, serviceRequirements } = values
+    const { id, title, version, serviceRequirements, installWarning } = values
 
     validate(id, exists, 'missing id')
     validate(title, exists, 'missing title')
@@ -51,6 +51,9 @@ export class WizardBaker {
     const toolbar: TopbarParams  = { action, title, version }
 
     const slideDefinitions: SlideDefinition[] = [
+      installWarning ? { selector: 'developer-notes', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Next', params: {
+        action, developerNotes: installWarning,
+      }} : undefined,
       { selector: 'dependencies', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Update', params: {
         action, title, version, serviceRequirements,
       }},
@@ -63,13 +66,13 @@ export class WizardBaker {
         }),
       }},
     ]
-    return { toolbar, slideDefinitions }
+    return { toolbar, slideDefinitions: slideDefinitions.filter(exists) }
   }
 
   downgrade (values: {
-    id: string, title: string, version: string, serviceRequirements: AppDependency[]
+    id: string, title: string, version: string, serviceRequirements: AppDependency[], installWarning?: string
   }): InstallWizardComponent['params'] {
-    const { id, title, version, serviceRequirements } = values
+    const { id, title, version, serviceRequirements, installWarning } = values
 
     validate(id, exists, 'missing id')
     validate(title, exists, 'missing title')
@@ -80,6 +83,9 @@ export class WizardBaker {
     const toolbar: TopbarParams  = { action, title, version }
 
     const slideDefinitions: SlideDefinition[] = [
+      installWarning ? { selector: 'developer-notes', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Next', params: {
+        action, developerNotes: installWarning,
+      }} : undefined,
       { selector: 'dependencies', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Downgrade', params: {
         action, title, version, serviceRequirements,
       }},
@@ -92,13 +98,13 @@ export class WizardBaker {
         }),
       }},
     ]
-    return { toolbar, slideDefinitions }
+    return { toolbar, slideDefinitions: slideDefinitions.filter(exists) }
   }
 
   uninstall (values: {
-    id: string, title: string, version: string
+    id: string, title: string, version: string, uninstallWarning?: string
   }): InstallWizardComponent['params'] {
-    const { id, title, version } = values
+    const { id, title, version, uninstallWarning } = values
 
     validate(id, exists, 'missing id')
     validate(title, exists, 'missing title')
@@ -108,6 +114,9 @@ export class WizardBaker {
     const toolbar: TopbarParams  = { action, title, version }
 
     const slideDefinitions: SlideDefinition[] = [
+      uninstallWarning ? { selector: 'developer-notes', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Next', params: {
+        action, developerNotes: uninstallWarning,
+      }} : undefined,
       { selector: 'dependents', cancelButton: { whileLoading: { }, afterLoading: { text: 'Cancel' } }, nextButton: 'Uninstall', params: {
         action, verb: 'uninstalling', title, fetchBreakages: () => this.apiService.uninstallApp(id, true).then( ({ breakages }) => breakages ),
       }},
@@ -115,7 +124,7 @@ export class WizardBaker {
         action, verb: 'uninstalling', title, executeAction: () => this.apiService.uninstallApp(id).then(() => this.appModel.delete(id)),
       }},
     ]
-    return { toolbar, slideDefinitions }
+    return { toolbar, slideDefinitions: slideDefinitions.filter(exists) }
   }
 
   stop (values: {