Eliminate console error when adding user (#365)

* Eliminate console error when adding user

dockstore/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.

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>

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});
         }