ui: adds developer-notes component

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

@@ -0,0 +1,17 @@
+<div *ngIf="!($loading$ | async) && !params.skipCompletionDialogue" 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}}
+      </ion-label>
+    </div>
+    <div class="long-message">
+    {{summary}}
+    </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.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { DeveloperNotesComponent } from './developer-notes.component'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+@NgModule({
+  declarations: [
+    DeveloperNotesComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+    SharingModule,
+  ],
+  exports: [DeveloperNotesComponent],
+})
+export class DeveloperNotesComponentModule { }

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

@@ -0,0 +1,67 @@
+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 { Colorable, Loadable } from '../loadable'
+import { WizardAction } from '../wizard-types'
+
+@Component({
+  selector: 'developer-notes',
+  templateUrl: './developer-notes.component.html',
+  styleUrls: ['../install-wizard.component.scss'],
+})
+export class DeveloperNotesComponent implements OnInit, Loadable, Colorable {
+  @Input() params: {
+    action: WizardAction
+    developerNotes: string
+  }
+
+  $loading$ = new BehaviorSubject(false)
+  $color$ = new BehaviorSubject('medium')
+  $cancel$ = new Subject<void>()
+
+  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
+    }
+  }
+}

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

@@ -10,6 +10,7 @@
 <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>
       <dependents #components *ngIf="slide.selector === 'dependents'" [params]="slide.params" [finished]="finished"></dependents>
       <complete #components *ngIf="slide.selector === 'complete'" [params]="slide.params" [finished]="finished"></complete>

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

@@ -7,6 +7,7 @@ import { SharingModule } from 'src/app/modules/sharing.module'
 import { DependenciesComponentModule } from './dependencies/dependencies.component.module'
 import { DependentsComponentModule } from './dependents/dependents.component.module'
 import { CompleteComponentModule } from './complete/complete.component.module'
+import { DeveloperNotesComponentModule } from './developer-notes/developer-notes.component.module'
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { CompleteComponentModule } from './complete/complete.component.module'
     DependenciesComponentModule,
     DependentsComponentModule,
     CompleteComponentModule,
+    DeveloperNotesComponentModule,
   ],
   exports: [InstallWizardComponent],
 })

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

@@ -7,6 +7,7 @@ import { capitalizeFirstLetter } from 'src/app/util/misc.util'
 import { CompleteComponent } from './complete/complete.component'
 import { DependenciesComponent } from './dependencies/dependencies.component'
 import { DependentsComponent } from './dependents/dependents.component'
+import { DeveloperNotesComponent } from './developer-notes/developer-notes.component'
 import { Colorable, Loadable } from './loadable'
 import { WizardAction } from './wizard-types'
 
@@ -88,14 +89,14 @@ export class InstallWizardComponent extends Cleanup implements OnInit {
 }
 
 export interface SlideCommon {
-  selector: string
+  selector: string // component http selector
   cancelButton: {
     // indicates the existence of a cancel button, and whether to have text or an icon 'x' by default.
     afterLoading?: { text?: string },
     whileLoading?: { text?: string }
   }
-  nextButton?: string,
-  finishButton?: string
+  nextButton?: string, // existence and content of next button
+  finishButton?: string // existence and content of finish button
 }
 
 export type SlideDefinition = SlideCommon & (
@@ -108,6 +109,9 @@ export type SlideDefinition = SlideCommon & (
   } | {
     selector: 'complete',
     params: CompleteComponent['params']
+  } | {
+    selector: 'developer-notes',
+    params: DeveloperNotesComponent['params']
   }
 )
 

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[]
+    id: string, title: string, version: string, serviceRequirements: AppDependency[], developerNotes?: string
   }): InstallWizardComponent['params'] {
-    const { id, title, version, serviceRequirements } = values
+    const { id, title, version, serviceRequirements, developerNotes } = values
 
     validate(id, exists, 'missing id')
     validate(title, exists, 'missing title')
@@ -22,6 +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,
+      }},
       { selector: 'dependencies', cancelButton: { afterLoading: { text: 'Cancel' } }, nextButton: 'Install', params: {
         action, title, version, serviceRequirements,
       }},
@@ -38,6 +41,7 @@ export class WizardBaker {
     id: string, title: string, version: string, serviceRequirements: AppDependency[]
   }): InstallWizardComponent['params'] {
     const { id, title, version, serviceRequirements } = values
+
     validate(id, exists, 'missing id')
     validate(title, exists, 'missing title')
     validate(version, exists, 'missing version')