Fix dashboard.iframeUrl by keeping iframeUrl updated

src/app/dashboard/dashboard.component.html

@@ -1,10 +1,8 @@
 <div [attr.class]="layout | async">
   <div class="tfw-grid-main-components">
     <div class="tfw-header"><app-header></app-header></div>
-    <div [ngClass]="{'hide-attribute': hideMessages | async}"
+    <div [ngClass]="{'hide-attribute': hideMessages | async}" class="tfw-messages">
-         class="tfw-messages"
+      <app-messages></app-messages>
-         #tfwmessages>
-      <app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
     </div>
     <div class="tfw-web tao-grid-top-left"
          [ngClass]="{'deploy-blur': deploying || (polling | async)}">

src/app/dashboard/dashboard.component.ts

@@ -7,6 +7,7 @@ import { DashboardConfigService } from '../services/config.service';
 import { HttpClient } from '@angular/common/http';
 import { delay, retryWhen, tap } from 'rxjs/operators';
 import { FSMUpdateService } from '../services/fsmupdate.service';
+import { MessagesComponent } from '../messages/messages.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -18,7 +19,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   polling = new BehaviorSubject<boolean>(false);
   deploymentNotificationSubscription: Subscription;
   @ViewChild('webiframe', {static: false}) webiframe: ElementRef;
-  @ViewChild('tfwmessages', {static: false}) messages: ElementRef;
+  @ViewChild(MessagesComponent, {static: false}) messages: MessagesComponent;
   @ViewChild('urlbar', {static: false}) urlbar: ElementRef;
 
   layout = this.configService.layout;
@@ -69,7 +70,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   subscribeResizeOnLayoutChange() {
     this.configService.layout.subscribe(() => {
       this.emitResizeEvent();
-      setTimeout(() => this.scrollMessagesToBottom(), 0);
+      setTimeout(() => this.messages.scrollToBottom(), 0);
     });
   }
 
@@ -99,7 +100,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   reloadIframeHandler(message: WebSocketMessage) {
-    setTimeout(() => this.reloadIframeNoSubmit(), 200);
+    setTimeout(() => this.reloadIframe(), 200);
   }
 
   setLayout(layout: string) {
@@ -114,14 +115,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   reloadIframe() {
     setTimeout(() => {
-      this.webiframe.nativeElement.contentWindow.location.reload(true);
+      this.webiframe.nativeElement.contentWindow.frames.location.href = this.iframeUrl.value;
-    });
-  }
-
-  reloadIframeNoSubmit() {
-    // Sometimes it is needed to reload the iframe without resending the previous form data
-    setTimeout(() => {
-      this.webiframe.nativeElement.contentWindow.location = this.webiframe.nativeElement.contentWindow.location.href;
     });
   }
 
@@ -132,18 +126,16 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.terminalMenuItem.next(item);
   }
 
-  scrollMessagesToBottom() {
-    const element = this.messages.nativeElement;
-    // This must be done in the Angular event loop to avoid messing up
-    // change detection (not in the template like ConsoleComponent does)
-    element.scrollTop = element.scrollHeight;
-  }
-
   iframeLoad() {
     if (this.webiframe && this.iframeUrl.value) {
       const href = this.webiframe.nativeElement.contentWindow.frames.location.href;
-      const niceURL = href.match(/.*?\/\/.*?(\/.*)/)[1];
+      const match = href.match(/.*?\/\/.*?(\/.*)/);
-      this.actualIframeUrl = niceURL;
+      if (match !== null) {
+        // iframes on Firefox can have an about:blank
+        // contentWindow after firing a (load) event
+        const niceURL = match[1];
+        this.actualIframeUrl = niceURL;
+      }
     }
   }
 
@@ -156,7 +148,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     ) {
       return;
     }
-    this.webiframe.nativeElement.contentWindow.frames.location.href = this.urlbar.nativeElement.value;
+    this.iframeUrl.next(this.urlbar.nativeElement.value);
   }
 
   reloadIframeWhenResponseOk() {
@@ -169,6 +161,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
         errors.pipe(
           tap(
             response => {
+              if (this.iframeUrl.value === '') {
+                this.iframeReloadSubscription.unsubscribe();
+                this.polling.next(false);
+              }
               if (response.status === 200) {
                 this.iframeReloadSubscription.unsubscribe();
                 this.polling.next(false);

src/app/message-types/bot-messages.ts

@@ -1,9 +1,5 @@
 import { WebSocketMessage } from './websocket-message';
 
-export interface MessageConfig extends WebSocketMessage {
-  originator?: string;
-}
-
 export interface MessageData {
   originator?: string;
   timestamp?: Date;

src/app/messages/messages.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
 import { MessageData, Message } from '../message-types/bot-messages';
 import { MarkdownService } from '../services/markdown.service';
 import { WebSocketService } from '../services/websocket.service';
@@ -19,7 +19,8 @@ export class MessagesComponent implements OnInit {
   constructor(
     private markdownService: MarkdownService,
     private websocketService: WebSocketService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private ref: ElementRef
   ) {}
 
   ngOnInit() {
@@ -27,6 +28,7 @@ export class MessagesComponent implements OnInit {
       message => {
         this.writeMessage(message);
         this.newMessageEvent.emit();
+        this.scrollToBottom();
     });
 
     this.websocketService.connect();
@@ -41,6 +43,11 @@ export class MessagesComponent implements OnInit {
     this.changeDetectorRef.detectChanges();
   }
 
+  scrollToBottom() {
+    const element = this.ref.nativeElement.parentElement;
+    element.scrollTop = element.scrollHeight;
+  }
+
   transformMessage(message: MessageData) {
     message.message = this.convertMarkdownToHTML(message.message);
     if (!message.timestamp) {