fixed #66 - warn when no versions are added

frontend/src/app/components/main.component.pug

@@ -30,6 +30,14 @@
 
 .terminal
     iframe(#iframe, [hidden]='!showApp')
+    .alert.alert-warning.d-flex.border-0.m-0(*ngIf='noVersionsAdded')
+        fa-icon.me-2([icon]='_warningIcon', [fixedWidth]='true')
+        div
+            div You haven't added any Tabby versions, see here #[a(href='https://github.com/Eugeny/tabby-web#adding-tabby-app-versions', target='_blank') for instructions].
+    .alert.alert-warning.d-flex.border-0.m-0(*ngIf='missingVersion')
+        fa-icon.me-2([icon]='_warningIcon', [fixedWidth]='true')
+        div
+            div You've last used this config with Tabby v{{missingVersion}}, which is no longer available on this server.
     .alert.alert-warning.d-flex.border-0.m-0(*ngIf='showApp && !loginService.user')
         fa-icon.me-2([icon]='_saveIcon', [fixedWidth]='true')
         div

frontend/src/app/components/main.component.ts

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http'
 import { Title } from '@angular/platform-browser'
 import { AppConnectorService } from '../services/appConnector.service'
 
-import { faCog, faFile, faPlus, faSave, faSignInAlt, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+import { faCog, faExclamationTriangle, faFile, faPlus, faSave, faSignInAlt, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { SettingsModalComponent } from './settingsModal.component'
 import { ConfigModalComponent } from './configModal.component'
@@ -24,8 +24,11 @@ export class MainComponent {
   _addIcon = faPlus
   _configIcon = faFile
   _saveIcon = faSave
+  _warningIcon = faExclamationTriangle
 
   showApp = false
+  noVersionsAdded = false
+  missingVersion: string|undefined
 
   @ViewChild('iframe') iframe: ElementRef
 
@@ -39,6 +42,9 @@ export class MainComponent {
   ) {
     titleService.setTitle('Tabby')
     window.addEventListener('message', this.connectorRequestHandler)
+    config.ready$.subscribe(() => {
+      this.noVersionsAdded = config.configs.length === 0
+    })
   }
 
   connectorRequestHandler = event => {
@@ -81,11 +87,19 @@ export class MainComponent {
     }
   }
 
-  reloadApp (config: Config, version: Version) {
+  reloadApp (config: Config, version?: Version) {
+    if (!version) {
+      this.missingVersion = config.last_used_with_version
+      version = this.config.getLatestStableVersion()
+      if (!version) {
+        return
+      }
+    }
+    this.missingVersion = undefined
     // TODO check config incompatibility
     setTimeout(() => {
-      this.appConnector.setState(config, version)
-      this.loadApp(config, version)
+      this.appConnector.setState(config, version!)
+      this.loadApp(config, version!)
     })
   }
 

frontend/src/common/services/config.service.ts

@@ -39,7 +39,7 @@ export class ConfigService {
   async createNewConfig (): Promise<Config> {
     const configData = {
       content: '{}',
-      last_used_with_version: this._activeVersion?.version ?? this.getLatestStableVersion().version,
+      last_used_with_version: this._activeVersion?.version ?? this.getLatestStableVersion()?.version,
     }
     if (!this.loginService.user) {
       const config = {
@@ -112,7 +112,7 @@ export class ConfigService {
     this.versions = (await this.http.get('/api/1/versions').toPromise()) as Version[]
     this.versions.sort((a, b) => -semverCompare(a.version, b.version))
 
-    if (!this.configs.length) {
+    if (!this.configs.length && this.versions.length) {
       await this.createNewConfig()
     }