Rework button workings

src/app/state/state.component.css

@@ -22,7 +22,10 @@ small {
 	font-size: small;
 }
 
-
 .width-limit {
 	max-width: 250px;
 }
+
+.bold {
+	font-weight: bold;
+}

src/app/state/state.component.html

@@ -7,7 +7,7 @@
 
 <!-- service column -->
 <td>
-	<h4>{{ service.name }}</h4>
+	<h4 style="font-weight: bold;">{{ service.name }}</h4>
 	<br>
 	<small>{{ service.description }}</small>
 </td>
@@ -27,29 +27,14 @@
 		</span>
 		<h4>{{ lang.printState(state.state) }}</h4>
 		<br>
-		<div class="mat-small">{{ tooltip(state) }}</div>
+		<div class="mat-small">{{ stateDescription }}</div>
 	</td>
 
 	<!-- actions column -->
 	<td>
-		<div *ngIf="state.state == 'deployed'">
-			<button (click)="dialog.openCredentials(state$)" mat-raised-button class="mat-elevation-z6">
-				Credentials
-			</button>
-		</div>
-		<div *ngIf="state.state == 'questionnaire'">
-			<button (click)="dialog.openQuestionnaire(state$)" mat-raised-button color="accent" class="mat-elevation-z6">
-				Questionnaire
-			</button>
-		</div>
-		<div *ngIf="state.state == 'failed'">
-			<button (click)="dialog.openMessage(state)" mat-raised-button color="accent" class="mat-elevation-z6">
-				Failure
-			</button>
-		</div>
-		<div *ngIf="state.state == 'rejected'">
-			<button (click)="dialog.openMessage(state)" mat-raised-button color="accent" class="mat-elevation-z6">
-				Rejected
+		<div *ngIf="buttonActive">
+			<button (click)="buttonAction(state)" matTooltip="{{ buttonTooltip }}" [color]="buttonColor" mat-raised-button class="mat-elevation-z6">
+				{{ buttonText }}
 			</button>
 		</div>
 		<div *ngIf="!state.is_pending && state.is_credential_pending">

src/app/state/state.component.ts

@@ -16,9 +16,16 @@ export class StateComponent implements OnInit {
 
   @Input() service: Service;
 
+  buttonStates: string[] = ['deployed', 'questionnaire', 'failed', 'rejected'];
+  public buttonActive = false;
+  public buttonColor = '';
+  public buttonText = '';
+  public buttonTooltip = '';
+
   public state$: Observable<DeploymentState>;
 
-  public stateTooltip: string;
+  public stateDescription = '';
+
 
   constructor(
     public userService: UserService,
@@ -28,27 +35,71 @@ export class StateComponent implements OnInit {
 
   ngOnInit() {
     this.state$ = this.userService.subscribeStateFor(this.service);
-    this.stateTooltip = 'foo';
+    this.state$.subscribe(
+      (state: DeploymentState) => {
+        switch (state.state) {
+          case 'not_deployed':
+            this.stateDescription = `The credentials are not deployed for the service ${ this.service.name }.`;
+            this.buttonActive = false;
+            break;
+          case 'deployment_pending':
+            this.stateDescription = `Waiting for the deployment of the credentials to the site ${ this.service.site.name }.`;
+            this.buttonActive = false;
+            break;
+          case 'removal_pending':
+            this.stateDescription = `Waiting for the removal of the credentials from the site ${ this.service.site.name }.`;
+            this.buttonActive = false;
+            break;
+
+          case 'deployed':
+            this.stateDescription = `The credentials are deployed for the service ${ this.service.name }. Click to see details.`;
+            this.buttonActive = true;
+            this.buttonColor = 'primary';
+            this.buttonText = 'View credentials';
+            this.buttonTooltip = this.buttonText;
+            break;
+
+          case 'questionnaire':
+            this.stateDescription = `Site ${ this.service.site.name } needs more data to deploy the keys. Please click to submit the data.`;
+            this.buttonActive = true;
+            this.buttonColor = 'warn';
+            this.buttonText = 'Submit Data';
+            this.buttonTooltip = this.buttonText;
+            break;
+          case 'failed':
+            this.stateDescription = `Site ${ this.service.site.name } failed to deploy the credentials.
+              The deployment will be retried. Click for details.`;
+            this.buttonActive = true;
+            this.buttonColor = 'warn';
+            this.buttonText = 'Submit Data';
+            this.buttonTooltip = this.buttonText;
+            break;
+          case 'rejected':
+            this.stateDescription = `Site ${ this.service.site.name } rejected the deployment of the credentials. Click for details.`;
+            this.buttonActive = true;
+            this.buttonColor = 'warn';
+            this.buttonText = 'Submit Data';
+            this.buttonTooltip = this.buttonText;
+            break;
+
+          default:
+            this.stateDescription = 'Access to this service was never requested.';
+            this.buttonActive = false;
+        }
+      }
+    );
   }
 
-  public tooltip(state: DeploymentState): string {
+  public buttonAction(state: DeploymentState): void {
     switch (state.state) {
-      case 'not_deployed':
-        return `The credentials are not deployed for the service ${ this.service.name }.`;
       case 'deployed':
-        return `The credentials are deployed for the service ${ this.service.name }. Click to see details.`;
-      case 'deployment_pending':
-        return `Waiting for the deployment of the credentials to the site ${ this.service.site.name }`;
-      case 'removal_pending':
-        return `Waiting for the removal of the credentials from the site ${ this.service.site.name }`;
+        return this.dialog.openCredentials(this.state$);
       case 'questionnaire':
-        return `Site ${ this.service.site.name } needs more data to deploy the keys. Please click to submit the data.`;
+        return this.dialog.openQuestionnaire(this.state$);
       case 'failed':
-        return `Site ${ this.service.site.name } failed to deploy the credentials. The deployment will be retried. Click for details.`;
+        return this.dialog.openMessage(state);
       case 'rejected':
-        return `Site ${ this.service.site.name } rejected the deployment of the credentials. Click for details.`;
-      default:
-        return 'Access to this service was never requested.';
+        return this.dialog.openMessage(state);
     }
   }
 

src/styles.css

@@ -26,6 +26,10 @@ table {
 	width: 100%;
 }
 
+thead > tr > td {
+	font-size: 110%;
+}
+
 tr > * {
 	padding-right: 15px;
 	padding-bottom: 15px;