Make whole frontend dynamically configurable to avoid rebuilds

src/app/ide/ide.component.html

@@ -14,7 +14,7 @@
   </div>
 
   <div class="btn-group-sm tfw-deploy-btn-group">
-    <button *ngIf="showDeployButton"
+    <button *ngIf="showDeployButton | async"
             type="submit"
             class="btn tfw-deploy-btn tao-grid-top-center"
             (click)="sendCodeIfDirty(); deployCode()"
@@ -23,13 +23,13 @@
             [class.deploy]="deployButtonState === DeployButtonState.DEPLOYING"
             [class.disabled]="deployButtonState === DeployButtonState.DEPLOYING || deployButtonState === DeployButtonState.DEPLOYED"
             [class.failed]="deployButtonState === DeployButtonState.FAILED">
-      <span *ngIf="deployButtonState === DeployButtonState.TODEPLOY">{{deployButtonText['TODEPLOY']}}</span>
+      <span *ngIf="deployButtonState === DeployButtonState.TODEPLOY">{{(deployButtonText | async)['TODEPLOY']}}</span>
       <span *ngIf="deployButtonState === DeployButtonState.DEPLOYED">
         <img src="images/greentick_icon.svg"/>
-        <span>{{deployButtonText['DEPLOYED']}}</span>
+        <span>{{(deployButtonText | async)['DEPLOYED']}}</span>
       </span>
-      <span *ngIf="deployButtonState === DeployButtonState.DEPLOYING"><div class="loader"></div>{{deployButtonText['DEPLOYING']}}</span>
-      <span *ngIf="deployButtonState === DeployButtonState.FAILED">{{deployButtonText['FAILED']}}</span>
+      <span *ngIf="deployButtonState === DeployButtonState.DEPLOYING"><div class="loader"></div>{{(deployButtonText | async)['DEPLOYING']}}</span>
+      <span *ngIf="deployButtonState === DeployButtonState.FAILED">{{(deployButtonText | async)['FAILED']}}</span>
     </button>
   </div>
 </div>

src/app/ide/ide.component.ts

@@ -4,7 +4,7 @@ import { WebSocketMessage } from '../message-types/websocket-message';
 import { IDEMessage } from '../message-types/ide-message';
 import { DeployMessage } from '../message-types/deploy-message';
 import { DeploymentNotificationService } from '../services/deployment-notification.service';
-import { config } from '../config';
+import { IdeConfigService } from '../services/config.service';
 import { LanguageMap } from './language-map';
 import { first } from 'rxjs/operators';
 
@@ -31,19 +31,19 @@ export class IdeComponent implements OnInit {
 
   files: string[];
   filename = '';
-  code: string = config.ide.defaultCode;
+  code = 'Loading your file...';
 
   codeState = CodeState.SAVED;
   deployButtonState = DeployButtonState.DEPLOYED;
-  deployButtonText = config.ide.deployButtonText;
-  showDeployButton: boolean = config.ide.showDeployButton;
+  deployButtonText = this.configService.deployButtonText;
+  showDeployButton = this.configService.showDeployButton;
   autosave = null;
 
   editorOptions = {
     theme: 'vs-dark',
-    language: config.ide.defaultLanguage,
+    language: 'text',
     glyphMargin: false,
-    minimap: {enabled: config.ide.showMiniMap}
+    minimap: {enabled: false}
   };
 
   command_handlers = {
@@ -54,10 +54,12 @@ export class IdeComponent implements OnInit {
 
   constructor(private webSocketService: WebSocketService,
               private changeDetectorRef: ChangeDetectorRef,
-              private deploymentNotificationService: DeploymentNotificationService) { }
+              private deploymentNotificationService: DeploymentNotificationService,
+              private configService: IdeConfigService) {}
 
   ngOnInit() {
     this.webSocketService.connect();
+    this.configService.init();
     this.subscribeWS();
     this.subscribeFirstLanguageDetection();
     this.requestCode();
@@ -77,7 +79,7 @@ export class IdeComponent implements OnInit {
 
   subscribeFirstLanguageDetection() {
     this.webSocketService.observeKey<IDEMessage>('ide.read').pipe(first()).subscribe(
-      () => this.autoDetectEditorLanguageIfEnabled(this.filename)
+      () => this.autoDetectEditorLanguage(this.filename)
     );
   }
 
@@ -108,10 +110,7 @@ export class IdeComponent implements OnInit {
     this.deploymentNotificationService.deploying.next(false);
   }
 
-  autoDetectEditorLanguageIfEnabled(filename: string) {
-    if (!config.ide.autoDetectFileLanguage) {
-      return;
-    }
+  autoDetectEditorLanguage(filename: string) {
     const extension = filename.substr(filename.lastIndexOf('.') + 1);
     let language = LanguageMap[extension];
     language = (language === undefined) ? 'text' : language;
@@ -132,7 +131,7 @@ export class IdeComponent implements OnInit {
     }
     this.autosave = setInterval(
       () => { this.sendCodeIfDirty(); },
-      config.ide.autoSaveInterval
+      this.configService.autoSaveInterval.value
     );
   }
 
@@ -142,7 +141,7 @@ export class IdeComponent implements OnInit {
     }
     this.filename = file;
     this.requestCode();
-    this.autoDetectEditorLanguageIfEnabled(this.filename);
+    this.autoDetectEditorLanguage(this.filename);
   }
 
   editorWriteHandler() {