strict null checks

terminus-plugin-manager/src/components/pluginsSettingsTab.component.pug

@@ -8,9 +8,9 @@
     button.btn.btn-outline-info.btn-sm.ml-auto((click)='openPluginsFolder()')
         i.fas.fa-folder
         span Plugins folder
-    
+
 .list-group.list-group-flush.mt-2
-    .list-group-item.d-flex.align-items-center(*ngFor='let plugin of pluginManager.installedPlugins|orderBy:"name"')
+    .list-group-item.d-flex.align-items-center(*ngFor='let plugin of pluginManager.installedPlugins')
         .mr-auto.d-flex.flex-column
             div
                 strong {{plugin.name}}
@@ -33,15 +33,15 @@
             (click)='enablePlugin(plugin)'
         )
             i.fas.fa-fw.fa-play
-                
+
         button.btn.btn-secondary.ml-2(
             *ngIf='!config.store.pluginBlacklist.includes(plugin.name)',
             (click)='disablePlugin(plugin)'
         )
             i.fas.fa-fw.fa-pause
-            
+
         button.btn.btn-danger.ml-2(
-            (click)='uninstallPlugin(plugin)', 
+            (click)='uninstallPlugin(plugin)',
             *ngIf='!plugin.isBuiltin',
             [disabled]='busy[plugin.name] != undefined'
         )
@@ -65,7 +65,7 @@ div
 
 
     .list-group.list-group-flush.mb-4(*ngIf='availablePlugins$')
-        ng-container(*ngFor='let plugin of (availablePlugins$|async|orderBy:"name")')
+        ng-container(*ngFor='let plugin of (availablePlugins$|async)')
             .list-group-item.d-flex.align-items-center(*ngIf='!isAlreadyInstalled(plugin)')
                 button.btn.btn-primary.mr-3(
                     (click)='installPlugin(plugin)',
@@ -73,7 +73,7 @@ div
                 )
                     i.fas.fa-fw.fa-download(*ngIf='busy[plugin.name] != BusyState.Installing')
                     i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Installing')
-                
+
                 div((click)='showPluginInfo(plugin)')
                     div
                         strong {{plugin.name}}

terminus-plugin-manager/src/components/pluginsSettingsTab.component.ts

@@ -1,5 +1,5 @@
 import { BehaviorSubject, Observable } from 'rxjs'
-import { debounceTime, distinctUntilChanged, first, tap, flatMap } from 'rxjs/operators'
+import { debounceTime, distinctUntilChanged, first, tap, flatMap, map } from 'rxjs/operators'
 import * as semver from 'semver'
 
 import { Component, Input } from '@angular/core'
@@ -18,7 +18,7 @@ export class PluginsSettingsTabComponent {
     @Input() availablePlugins$: Observable<PluginInfo[]>
     @Input() availablePluginsQuery$ = new BehaviorSubject<string>('')
     @Input() availablePluginsReady = false
-    @Input() knownUpgrades: {[id: string]: PluginInfo} = {}
+    @Input() knownUpgrades: {[id: string]: PluginInfo|null} = {}
     @Input() busy: {[id: string]: BusyState} = {}
     @Input() erroredPlugin: string
     @Input() errorMessage: string
@@ -43,9 +43,12 @@ export class PluginsSettingsTabComponent {
                     }))
                 })
             )
-        this.availablePlugins$.pipe(first()).subscribe(available => {
+        this.availablePlugins$.pipe(first(), map((plugins: PluginInfo[]) => {
+            plugins.sort((a, b) => a.name > b.name ? 1 : -1)
+            return plugins
+        })).subscribe(available => {
             for (const plugin of this.pluginManager.installedPlugins) {
-                this.knownUpgrades[plugin.name] = available.find(x => x.name === plugin.name && semver.gt(x.version, plugin.version))
+                this.knownUpgrades[plugin.name] = available.find(x => x.name === plugin.name && semver.gt(x.version, plugin.version)) || null
             }
         })
     }
@@ -91,7 +94,7 @@ export class PluginsSettingsTabComponent {
     }
 
     async upgradePlugin (plugin: PluginInfo): Promise<void> {
-        return this.installPlugin(this.knownUpgrades[plugin.name])
+        return this.installPlugin(this.knownUpgrades[plugin.name]!)
     }
 
     showPluginInfo (plugin: PluginInfo) {

terminus-plugin-manager/src/index.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
-import { NgPipesModule } from 'ngx-pipes'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 
 import { SettingsTabProvider } from 'terminus-settings'
@@ -15,7 +14,6 @@ import { PluginsSettingsTabProvider } from './settings'
         BrowserModule,
         FormsModule,
         NgbModule,
-        NgPipesModule,
     ],
     providers: [
         { provide: SettingsTabProvider, useClass: PluginsSettingsTabProvider, multi: true },