From 71fe6b2d2c47040b2dac72f593f4e6fb007479bc Mon Sep 17 00:00:00 2001
From: Charles Overbeck <charles.overbeck@gmail.com>
Date: Thu, 26 Jul 2018 15:43:56 -0700
Subject: [PATCH] Eliminate console error when adding user (#365)

* Eliminate console error when adding user

ga4gh/dockstore#1627

Toggling disabled on the input was causing the containing mat-form-field
to generate the exception.

I believe this is an Angular Material bug and the only fix I could
figure out changes the UX a bit.

Before you had to wait for the adding/removing a user operation to
complete before you could start typing in a new value. Now you don't
have to wait for the adding/removing a user to complete
before you start typing in a new one.

Although being "forced" into it, I think this behavior is OK; if you
want to add a bunch of users, there's no reason to force you to wait
for each one to complete. On top of that, in my tests, the operation
is fairly fast anyway, so depending on network connection, you
typically won't even be able to start typing in a new value before
the previous operation has already completed.

Also simplified controller by just having one add() method.

Use enum instead of string from HTML.
---
 .../permissions/permissions.component.html    | 19 ++++++-------
 .../permissions/permissions.component.ts      | 27 ++++++-------------
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/app/workflow/permissions/permissions.component.html b/src/app/workflow/permissions/permissions.component.html
index 230cbd3656..9cd1d47f02 100644
--- a/src/app/workflow/permissions/permissions.component.html
+++ b/src/app/workflow/permissions/permissions.component.html
@@ -18,48 +18,45 @@
     <li>
       <mat-form-field style="width: 100%;">
         <mat-chip-list #ownerlist>
-          <mat-chip *ngFor="let owner of owners" (removed)="remove(owner, 'OWNER')" [removable]="owners.length > 1">
+          <mat-chip *ngFor="let owner of owners" (removed)="remove(owner, Role.OWNER)" [removable]="owners.length > 1">
             {{owner}}
             <mat-icon matChipRemove *ngIf="owners.length > 1">cancel</mat-icon>
           </mat-chip>
           <input placeholder="Owners"
-                 [disabled]="updating"
                  [matChipInputFor]="ownerlist"
                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                  [matChipInputAddOnBlur]="addOnBlur"
-                 (matChipInputTokenEnd)="addOwner($event)"/>
+                 (matChipInputTokenEnd)="add($event, Role.OWNER)"/>
         </mat-chip-list>
       </mat-form-field>
     </li>
     <li>
-      <mat-form-field style="width: 100%;">
+      <mat-form-field style="width: 100%;" >
         <mat-chip-list #writerlist>
-          <mat-chip *ngFor="let writer of writers" (removed)="remove(writer, 'WRITER')" [removable]="true">
+          <mat-chip *ngFor="let writer of writers" (removed)="remove(writer, Role.WRITER)" [removable]="true">
             {{writer}}
             <mat-icon matChipRemove>cancel</mat-icon>
           </mat-chip>
           <input placeholder="Writers"
-                 [disabled]="updating"
                  [matChipInputFor]="writerlist"
                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                  [matChipInputAddOnBlur]="addOnBlur"
-                 (matChipInputTokenEnd)="addWriter($event)"/>
+                 (matChipInputTokenEnd)="add($event, Role.WRITER)"/>
         </mat-chip-list>
       </mat-form-field>
     </li>
     <li>
-      <mat-form-field style="width: 100%;">
+      <mat-form-field style="width: 100%;" >
         <mat-chip-list #readerlist>
-          <mat-chip *ngFor="let reader of readers" (removed)="remove(reader, 'READER')" [removable]="true">
+          <mat-chip *ngFor="let reader of readers" (removed)="remove(reader, Role.READER)" [removable]="true">
             {{reader}}
             <mat-icon matChipRemove>cancel</mat-icon>
           </mat-chip>
           <input placeholder="Readers"
-                 [disabled]="updating"
                  [matChipInputFor]="readerlist"
                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                  [matChipInputAddOnBlur]="addOnBlur"
-                 (matChipInputTokenEnd)="addReader($event)"/>
+                 (matChipInputTokenEnd)="add($event, Role.READER)"/>
         </mat-chip-list>
       </mat-form-field>
     </li>
diff --git a/src/app/workflow/permissions/permissions.component.ts b/src/app/workflow/permissions/permissions.component.ts
index bbbd117cf5..6ba4c2ddbd 100644
--- a/src/app/workflow/permissions/permissions.component.ts
+++ b/src/app/workflow/permissions/permissions.component.ts
@@ -16,12 +16,13 @@ import { Subject } from 'rxjs';
 })
 export class PermissionsComponent implements OnInit {
 
+  public Role = RoleEnum;
   public canViewPermissions = false;
   public owners: string[] = [];
   public writers: string[] = [];
   public readers: string[] = [];
   public hosted = false;
-  public updating = false;
+  public updating = 0;
   public hasGoogleAccount = false;
   public firecloudUrl = Dockstore.FIRECLOUD_IMPORT_URL.substr(0, Dockstore.FIRECLOUD_IMPORT_URL.indexOf('/#'));
   private _workflow: Workflow;
@@ -48,26 +49,14 @@ export class PermissionsComponent implements OnInit {
     });
   }
 
-  addOwner(event: MatChipInputEvent): void {
-    this.add(event, RoleEnum.OWNER);
-  }
-
-  addWriter(event: MatChipInputEvent): void {
-    this.add(event, RoleEnum.WRITER);
-  }
-
-  addReader(event: MatChipInputEvent): void {
-    this.add(event, RoleEnum.READER);
-  }
-
   remove(entity: string, permission: RoleEnum) {
-    this.updating = true;
+    this.updating++;
     this.workflowsService.removeWorkflowRole(this.workflow.full_workflow_path, entity, permission).subscribe(
       (userPermissions: Permission[]) => {
-        this.updating = false;
+        this.updating--;
         this.processResponse(userPermissions);
       },
-      () => this.updating = false
+      () => this.updating--
     );
   }
 
@@ -76,14 +65,14 @@ export class PermissionsComponent implements OnInit {
     const value = event.value;
 
     if ((value || '').trim()) {
-      this.updating = true;
+      this.updating++;
       this.workflowsService.addWorkflowPermission(this.workflow.full_workflow_path, {email: value, role: permission}).subscribe(
         (userPermissions: Permission[]) => {
-          this.updating = false;
+          this.updating--;
           this.processResponse(userPermissions);
         },
         (e) => {
-          this.updating = false;
+          this.updating--;
           this.snackBar.open(`Error adding user ${value}. Please make sure ${value} is registered with FireCloud`,
             'Dismiss', {duration: 5000});
         }