Make use of the enums in the state component

src/app/state/state.component.html

@@ -32,9 +32,9 @@
 
 	<!-- actions column -->
 	<td>
-		<div *ngIf="buttonActive">
-			<button (click)="buttonAction(state)" matTooltip="{{ buttonTooltip }}" color="{{ buttonColor }}" mat-raised-button class="mat-elevation-z6">
-				{{ buttonText }}
+		<div *ngIf="button !== undefined">
+			<button (click)="buttonAction(state)" matTooltip="{{ button.tooltip }}" color="{{ button.color }}" mat-raised-button class="mat-elevation-z6">
+				{{ button.text }}
 			</button>
 		</div>
 		<div *ngIf="!state.is_pending && state.is_credential_pending">

src/app/state/state.component.ts

@@ -5,7 +5,13 @@ import { Observable } from 'rxjs';
 import { UserService } from '../user.service';
 import { LanguageService } from '../language.service';
 import { DialogService } from '../dialogues/dialog.service';
-import { Site, Service, DeploymentState } from '../types/types.module';
+import { Site, Service, DeploymentState, StateID } from '../types/types.module';
+
+interface Button {
+  text: string;
+  tooltip: string;
+  color: string;
+}
 
 @Component({
   selector: '[deployment-state-tr]',
@@ -16,16 +22,41 @@ export class StateComponent implements OnInit {
 
   @Input() service: Service;
 
-  buttonStates: string[] = ['deployed', 'questionnaire', 'failed', 'rejected'];
-  public buttonActive = false;
-  public buttonColor = '';
-  public buttonText = '';
-  public buttonTooltip = '';
+  buttons: Record<StateID, Button | undefined> = {
+    'not_deployed' : undefined,
+    'deployment_pending': undefined,
+    'removal_pending': undefined,
+    'deployed': {
+      color: 'primary',
+      text: 'View Credentials',
+      tooltip: 'View detailed information about the deployed credentials'
+    },
+    'questionnaire': {
+      color: 'warn',
+      text: 'Submit Data',
+      tooltip: 'Submit missing data',
+    },
+    'failed': {
+      color: 'warn',
+      text: 'Show Error',
+      tooltip: 'Show more details on the error',
+    },
+    'rejected': {
+      color: 'warn',
+      text: 'Show Message',
+      tooltip: 'Show Message',
+    },
+  };
+
+  stateDescriptions: Record<StateID, string>;
+
+
+  // set in subscribe
+  public button: Button | undefined = undefined;
+  public stateDescription = '';
 
   public state$: Observable<DeploymentState>;
 
-  public stateDescription = '';
-
 
   constructor(
     public userService: UserService,
@@ -34,69 +65,33 @@ export class StateComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.state$ = this.userService.subscribeStateFor(this.service);
-    this.state$.subscribe(
-      (state: DeploymentState) => {
-        switch (state.state) {
-          case 'not_deployed':
-            this.stateDescription = `Your credentials are not deployed for ${ this.service.name }.`;
-            this.buttonActive = false;
-            break;
-          case 'deployment_pending':
-            this.stateDescription = `Waiting for the deployment of your credentials to ${ this.service.site.name }.`;
-            this.buttonActive = false;
-            break;
-          case 'removal_pending':
-            this.stateDescription = `Waiting for the removal of your credentials from ${ this.service.site.name }.`;
-            this.buttonActive = false;
-            break;
-
-          case 'deployed':
-            this.buttonActive = true;
-            this.buttonColor = 'primary';
-            this.buttonText = 'View Credentials';
-            this.buttonTooltip = 'View detailed information about the deployed credentials';
-            this.stateDescription = `
+    this.stateDescriptions = {
+      'not_deployed': `Your credentials are not deployed for ${ this.service.name }.`,
+      'deployment_pending': `Waiting for the deployment of your credentials to ${ this.service.site.name }.`,
+      'removal_pending': `Waiting for the removal of your credentials from ${ this.service.site.name }.`,
+      'deployed': `
               The credentials are deployed for this service ${ this.service.name }.
-              Click "${ this.buttonText }" see details on your deployed ssh keys and credentials.
-            `;
-            break;
-
-          case 'questionnaire':
-            this.buttonActive = true;
-            this.buttonColor = 'warn';
-            this.buttonText = 'Submit Data';
-            this.buttonTooltip = 'Submit missing data';
-            this.stateDescription = `
+              Click "${ this.buttons['deployed'].text }" see details on your deployed ssh keys and credentials.
+            `,
+      'questionnaire': `
               More data is needed to deploy your credentials.
-              Please click "${ this.buttonText }" to submit the missing data.
-            `;
-            break;
-          case 'failed':
-            this.buttonActive = true;
-            this.buttonColor = 'warn';
-            this.buttonText = 'Show Error';
-            this.buttonTooltip = this.buttonText;
-            this.stateDescription = `
+              Please click "${ this.buttons['questionnaire'].text }" to submit the missing data.
+            `,
+      'failed': `
               The deployment of your credentials failed, but will be tried again.
-              Please click "${ this.buttonText }" for more details concerning this error.
-            `;
-            break;
-          case 'rejected':
-            this.buttonActive = true;
-            this.buttonColor = 'warn';
-            this.buttonText = 'Show message';
-            this.buttonTooltip = this.buttonText;
-            this.stateDescription = `
+              Please click "${ this.buttons['failed'].text }" for more details concerning this error.
+            `,
+      'rejected': `
               The deployment of your credentials was rejected.
-              Please click "${ this.buttonText }" to show more details.
-            `;
-            break;
+              Please click "${ this.buttons['rejected'].text }" to show more details.
+            `,
+    };
 
-          default:
-            this.stateDescription = '';
-            this.buttonActive = false;
-        }
+    this.state$ = this.userService.subscribeStateFor(this.service);
+    this.state$.subscribe(
+      (state: DeploymentState) => {
+        this.button = this.buttons[state.state];
+        this.stateDescription = this.stateDescriptions[state.state];
       }
     );
   }
@@ -115,7 +110,6 @@ export class StateComponent implements OnInit {
   }
 
   public contactSupport() {
-    window.location.href = 'mailto:' + this.service.contact_email + '?subject=%5BFEUDAL%5D%20Help%20request%0A';
+    window.location.href = `mailto:${ this.service.contact_email }?subject=%5BFEUDAL%5D%20Help%20request%0A`;
   }
-
 }