Update Notification Refactor (#511)

* Replaced profile links to anchors so we can open in new tab if we like

* Refactored how update checking works. We now explicitly check and send back on the same API. We have a weekly job that will push an update to the user.

* Implemented a changelog tab

* Ported over a GA fix for using ' in PR bodies.

* Don't check cert for Github

UI/Web/src/app/admin/admin.module.ts

@@ -15,6 +15,7 @@ import { ManageSettingsComponent } from './manage-settings/manage-settings.compo
 import { FilterPipe } from './filter.pipe';
 import { EditRbsModalComponent } from './_modals/edit-rbs-modal/edit-rbs-modal.component';
 import { ManageSystemComponent } from './manage-system/manage-system.component';
+import { ChangelogComponent } from './changelog/changelog.component';
 
 
 
@@ -31,7 +32,8 @@ import { ManageSystemComponent } from './manage-system/manage-system.component';
     ManageSettingsComponent,
     FilterPipe,
     EditRbsModalComponent,
-    ManageSystemComponent
+    ManageSystemComponent,
+    ChangelogComponent
   ],
   imports: [
     CommonModule,

UI/Web/src/app/admin/changelog/changelog.component.html

@@ -0,0 +1,14 @@
+<ng-container *ngFor="let update of updates; let indx = index;">
+    <div class="card w-100 mb-2" style="width: 18rem;">
+        <div class="card-body">
+          <h5 class="card-title">{{update.updateTitle}}&nbsp;<span class="badge badge-secondary" *ngIf="update.updateVersion === update.currentVersion">Installed</span></h5>
+          <pre class="card-text update-body" [innerHtml]="update.updateBody | safeHtml"></pre>
+          <a *ngIf="!update.isDocker" href="{{update.updateUrl}}" class="btn btn-{{indx === 0 ? 'primary' : 'secondary'}} float-right" target="_blank">Download</a>
+        </div>
+      </div>
+</ng-container>
+
+
+<div class="spinner-border text-secondary" *ngIf="isLoading" role="status">
+    <span class="invisible">Loading...</span>
+</div>

UI/Web/src/app/admin/changelog/changelog.component.scss

@@ -0,0 +1,5 @@
+.update-body {
+    width: 100%;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}

UI/Web/src/app/admin/changelog/changelog.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { UpdateVersionEvent } from 'src/app/_models/events/update-version-event';
+import { ServerService } from 'src/app/_services/server.service';
+
+@Component({
+  selector: 'app-changelog',
+  templateUrl: './changelog.component.html',
+  styleUrls: ['./changelog.component.scss']
+})
+export class ChangelogComponent implements OnInit {
+
+  updates: Array<UpdateVersionEvent> = [];
+  isLoading: boolean = true;
+
+  constructor(private serverService: ServerService) { }
+
+  ngOnInit(): void {
+    this.serverService.getChangelog().subscribe(updates => {
+      this.updates = updates;
+      this.isLoading = false;
+    });
+  }
+}

UI/Web/src/app/admin/dashboard/dashboard.component.html

@@ -16,6 +16,9 @@
           </ng-container>
           <ng-container *ngIf="tab.fragment === 'system'">
             <app-manage-system></app-manage-system>
+          </ng-container>
+          <ng-container *ngIf="tab.fragment === 'changelog'">
+            <app-changelog></app-changelog>
         </ng-container>
         </ng-template>
       </li>

UI/Web/src/app/admin/dashboard/dashboard.component.ts

@@ -17,7 +17,8 @@ export class DashboardComponent implements OnInit {
     {title: 'General', fragment: ''},
     {title: 'Users', fragment: 'users'},
     {title: 'Libraries', fragment: 'libraries'},
-    {title: 'System', fragment: 'system'}
+    {title: 'System', fragment: 'system'},
+    {title: 'Changelog', fragment: 'changelog'},
   ];
   counter = this.tabs.length + 1;
   active = this.tabs[0];

UI/Web/src/app/admin/manage-system/manage-system.component.html

@@ -3,7 +3,7 @@
     <div class="float-right">
         <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
             <button class="btn btn-outline-primary mr-2" id="dropdownManual" ngbDropdownAnchor (focus)="myDrop.open()">
-                <ng-container *ngIf="backupDBInProgress || clearCacheInProgress">
+                <ng-container *ngIf="backupDBInProgress || clearCacheInProgress || isCheckingForUpdate || downloadLogsInProgress">
                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                     <span class="sr-only">Loading...</span>
                 </ng-container>
@@ -19,7 +19,7 @@
               <button ngbDropdownItem (click)="downloadLogs()" [disabled]="downloadLogsInProgress">
                 Download Logs
               </button>
-              <button ngbDropdownItem  (click)="checkForUpdates()" [disabled]="hasCheckedForUpdate">
+              <button ngbDropdownItem (click)="checkForUpdates()">
                 Check for Updates
               </button>
             </div>

UI/Web/src/app/admin/manage-system/manage-system.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { finalize, take, takeWhile } from 'rxjs/operators';
+import { UpdateNotificationModalComponent } from 'src/app/shared/update-notification/update-notification-modal.component';
 import { DownloadService } from 'src/app/shared/_services/download.service';
 import { ServerService } from 'src/app/_services/server.service';
 import { SettingsService } from '../settings.service';
@@ -21,11 +23,12 @@ export class ManageSystemComponent implements OnInit {
 
   clearCacheInProgress: boolean = false;
   backupDBInProgress: boolean = false;
-  hasCheckedForUpdate: boolean = false;
+  isCheckingForUpdate: boolean = false;
   downloadLogsInProgress: boolean = false;
 
   constructor(private settingsService: SettingsService, private toastr: ToastrService, 
-    private serverService: ServerService, public downloadService: DownloadService) { }
+    private serverService: ServerService, public downloadService: DownloadService, 
+    private modalService: NgbModal) { }
 
   ngOnInit(): void {
 
@@ -82,9 +85,15 @@ export class ManageSystemComponent implements OnInit {
   }
 
   checkForUpdates() {
-    this.hasCheckedForUpdate = true;
-    this.serverService.checkForUpdate().subscribe(() => { 
-      this.toastr.info('This might take a few minutes. If an update is available, the server will notify you.');
+    this.isCheckingForUpdate = true;
+    this.serverService.checkForUpdate().subscribe((update) => { 
+      this.isCheckingForUpdate = false;
+      if (update === null) {
+        this.toastr.info('No updates available');
+        return;
+      }
+      const modalRef = this.modalService.open(UpdateNotificationModalComponent, { scrollable: true, size: 'lg' });
+      modalRef.componentInstance.updateData = update;
     });
   }