drew updates

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

@@ -0,0 +1,10 @@
+<div class="slide-content">
+  <div style="margin-top: 25px;">
+    <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
+      <ion-label [color]="params.titleColor" style="font-size: xx-large; font-weight: bold;">
+        {{ params.title }}
+      </ion-label>
+    </div>
+    <div class="long-message" [innerHTML]="params.notes | markdown"></div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { BehaviorSubject, Subject } from 'rxjs'
+import { Loadable } from '../loadable'
+
+@Component({
+  selector: 'alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['../install-wizard.component.scss'],
+})
+export class AlertComponent implements OnInit, Loadable {
+  @Input() params: {
+    alert: string
+    title: string
+    titleColor: string
+  }
+
+  loading$ = new BehaviorSubject(false)
+  cancel$ = new Subject<void>()
+
+  load () { }
+
+  constructor () { }
+  ngOnInit () { }
+}

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

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

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

@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs'
 import { capitalizeFirstLetter, pauseFor } from 'src/app/util/misc.util'
 import { CompleteComponent } from './complete/complete.component'
 import { DependentsComponent } from './dependents/dependents.component'
+import { AlertComponent } from './alert/alert.component'
 import { NotesComponent } from './notes/notes.component'
 import { Loadable } from './loadable'
 import { WizardAction } from './wizard-types'
@@ -92,6 +93,7 @@ export interface SlideDefinition {
   slide:
     { selector: 'dependents', params: DependentsComponent['params'] } |
     { selector: 'complete', params: CompleteComponent['params'] } |
+    { selector: 'alert', params: AlertComponent['params'] } |
     { selector: 'notes', params: NotesComponent['params'] }
   bottomBar: {
     cancel: {

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

@@ -2,9 +2,12 @@
   <div style="margin-top: 25px;">
     <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
       <ion-label [color]="params.titleColor" style="font-size: xx-large; font-weight: bold;">
-        {{params.title}}
+        {{ params.title }}
       </ion-label>
     </div>
-    <div class="long-message" [innerHTML]="params.notes | markdown"></div>
+    <div *ngFor="let note of params.notes | keyvalue : asIsOrder">
+      <h2>{{ note.key }}</h2>
+      <div class="long-message" [innerHTML]="note.value | markdown"></div>
+    </div>
   </div>
 </div>

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

@@ -9,7 +9,7 @@ import { Loadable } from '../loadable'
 })
 export class NotesComponent implements OnInit, Loadable {
   @Input() params: {
-    notes: string
+    notes: { [version: string]: string }
     title: string
     titleColor: string
   }
@@ -21,4 +21,8 @@ export class NotesComponent implements OnInit, Loadable {
 
   constructor () { }
   ngOnInit () { }
+
+  asIsOrder () {
+    return 0
+  }
 }

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

@@ -27,9 +27,9 @@ export class WizardBaker {
     const slideDefinitions: SlideDefinition[] = [
       installAlert ? {
         slide: {
-          selector: 'notes',
+          selector: 'alert',
           params: {
-            notes: installAlert,
+            alert: installAlert,
             title: 'Warning',
             titleColor: 'warning',
           },
@@ -72,9 +72,9 @@ export class WizardBaker {
     const slideDefinitions: SlideDefinition[] = [
       installAlert ? {
         slide: {
-          selector: 'notes',
+          selector: 'alert',
           params: {
-            notes: installAlert,
+            alert: installAlert,
             title: 'Warning',
             titleColor: 'warning',
           },
@@ -120,7 +120,7 @@ export class WizardBaker {
   }
 
   updateOS (values: {
-    version: string, releaseNotes: string
+    version: string, releaseNotes: { [version: string]: string }
   }): InstallWizardComponent['params'] {
     const { version, releaseNotes } = values
 
@@ -176,9 +176,9 @@ export class WizardBaker {
     const slideDefinitions: SlideDefinition[] = [
       installAlert ? {
         slide: {
-          selector: 'notes',
+          selector: 'alert',
           params: {
-            notes: installAlert,
+            alert: installAlert,
             title: 'Warning',
             titleColor: 'warning',
           },
@@ -232,9 +232,9 @@ export class WizardBaker {
     const slideDefinitions: SlideDefinition[] = [
       {
         slide: {
-          selector: 'notes',
+          selector: 'alert',
           params: {
-            notes: uninstallAlert || defaultUninstallationWarning(title),
+            alert: uninstallAlert || defaultUninstallationWarning(title),
             title: 'Warning',
             titleColor: 'warning',
           },