Make credential dialogue reactive

src/app/dialogues/credentials/credentials.component.html

-<div class="mat-typography">
+<div *ngIf="(stateItem$ | async) as stateItem" class="mat-typography">
   <h2>Credentials</h2>
   <p>
-  For access to the service {{ service.name }} at {{ service.site.name }} additional credentials are needed.
+  For access to the service {{ stateItem.service.name }} at {{ stateItem.service.site.name }} additional credentials are needed.
   The additional credentials are listed below.
   </p>
   <div *ngIf="credentialCount > 0" style="margin-bottom: 50px;">

src/app/dialogues/credentials/credentials.component.ts

 import { Component, OnInit, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatTableDataSource } from '@angular/material';
 
+import { Observable } from 'rxjs';
+
 import { UserService } from '../../user.service';
 import { DeploymentState, Service, CredentialState } from '../../types/types.module';
 
@@ -12,7 +14,7 @@ import { DeploymentState, Service, CredentialState } from '../../types/types.mod
 export class CredentialsComponent implements OnInit {
 
   public columns = ["name", "value"];
-  public stateItem: DeploymentState;
+  public stateItem$: Observable<DeploymentState>;
   public service: Service;
   public credentialCount: number = 0;
   public table: MatTableDataSource<any>;
@@ -21,26 +23,32 @@ export class CredentialsComponent implements OnInit {
     public userService: UserService,
     @Inject(MAT_DIALOG_DATA) public data: any,
   ) {
+    if (data) {
+      this.stateItem$ = data.stateItem$;
+    }
   }
 
   ngOnInit() {
-    if (this.data) {
-      this.stateItem = this.data.stateItem;
-      this.service = this.stateItem.service;
+    if (this.stateItem$) {
+      this.stateItem$.subscribe(
+        (stateItem: DeploymentState) => {
+          this.service = stateItem.service;
 
-      const credentialList = [];
-      for (const key in this.stateItem.credentials) {
-        if (this.stateItem.credentials.hasOwnProperty(key)) {
-          credentialList.push(
-            {
-              name: key,
-              value: this.stateItem.credentials[key],
+          const credentialList = [];
+          for (const key in stateItem.credentials) {
+            if (stateItem.credentials.hasOwnProperty(key)) {
+              credentialList.push(
+                {
+                  name: key,
+                  value: stateItem.credentials[key],
+                }
+              );
             }
-          );
+          }
+          this.credentialCount = credentialList.length;
+          this.table =  new MatTableDataSource(credentialList);
         }
-      }
-      this.credentialCount = credentialList.length;
-      this.table =  new MatTableDataSource(credentialList);
+      );
     }
   }
 }

src/app/dialogues/dialog.service.ts

 import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
+import { Observable } from 'rxjs';
+
 import { ProfileComponent } from './profile/profile.component';
 import { AccountComponent } from './account/account.component';
 import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
 import { CredentialsComponent } from './credentials/credentials.component';
 import { MessageComponent } from './message/message.component';
 
-import * as t from '../types/types.module';
+import { User, DeploymentState } from '../types/types.module';
 
 @Injectable()
 export class DialogService {
@@ -38,7 +40,7 @@ export class DialogService {
     }
   }
 
-  public openProfile(user: t.User) {
+  public openProfile(user: User) {
     this.profileDialog = this.dialog.open(
       ProfileComponent,
       this.settingsData({
@@ -54,7 +56,7 @@ export class DialogService {
     );
   }
 
-  public openQuestionnaire(stateItem: t.DeploymentState) {
+  public openQuestionnaire(stateItem: DeploymentState) {
     this.questionnaireDialog = this.dialog.open(
       QuestionnaireComponent,
       this.settingsData({
@@ -63,16 +65,16 @@ export class DialogService {
     );
   }
 
-  public openCredentials(stateItem: t.DeploymentState) {
+  public openCredentials(stateItem$: Observable<DeploymentState>) {
     this.credentialsDialog = this.dialog.open(
       CredentialsComponent,
       this.settingsData({
-        stateItem: stateItem,
+        stateItem$: stateItem$,
       }),
     );
   }
 
-  public openMessage(stateItem: t.DeploymentState) {
+  public openMessage(stateItem: DeploymentState) {
     this.messageDialog = this.dialog.open(
       MessageComponent,
       this.settingsData({

src/app/vo-data/vo-data.component.html

@@ -51,7 +51,7 @@
 				  <button (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
 				</td>
 				<td *ngIf="stateItem.state === 'deployed'">
-				  <button (click)="dialog.openCredentials(stateItem)" mat-raised-button class="mat-elevation-z6"> Credentials </button>
+				  <button (click)="dialog.openCredentials(subscribeStateItem(site, service))" mat-raised-button class="mat-elevation-z6"> Credentials </button>
 				</td>
 				<td *ngIf="stateItem.state === 'failed'">
 				  <button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Failure </button>