Feature/org rollup 2 (#566)

* use display name in add to collection

* dialog for removing member

cypress/integration/group3/organizations.ts

@@ -254,6 +254,7 @@ describe('Dockstore Organizations', () => {
 
     it('be able to Delete organization user', () => {
       cy.get('#remove-user-0').should('not.be.disabled').click();
+      cy.get('#remove-user-dialog').should('not.be.disabled').click();
       cy.contains('mat-card-title', 'potato').should('not.be.visible');
     });
   });

src/app/organizations/collection/add-entry/add-entry.component.html

@@ -26,7 +26,7 @@ <h1 mat-dialog-title>Add to collection</h1>
         <mat-form-field *ngIf="memberships && memberships.length > 0; else noMemberships">
           <mat-select id="selectOrganization" placeholder="Organization" [(value)]="selectedOrganizationId" (selectionChange)="onOrganizationChange($event)">
             <mat-option *ngFor="let membership of memberships" [value]="membership.organization.id">
-              {{membership.organization.name}}
+              {{membership.organization.displayName}}
             </mat-option>
           </mat-select>
         </mat-form-field>
@@ -40,7 +40,7 @@ <h1 mat-dialog-title>Add to collection</h1>
         <mat-form-field id="selectCollection" *ngIf="selectedOrganizationId && collections && collections.length > 0; else noCollections">
           <mat-select placeholder="Collection" [(value)]="selectedCollectionId" [disabled]="!selectedOrganizationId">
             <mat-option *ngFor="let collection of collections" [value]="collection.id">
-              {{collection.name}}
+              {{collection.displayName}}
             </mat-option>
           </mat-select>
         </mat-form-field>

src/app/organizations/organization-members/delete-username-confirm-dialog.html

@@ -0,0 +1,9 @@
+<h1 mat-dialog-title>Remove user from organization</h1>
+
+<div mat-dialog-content>
+  <p>Are you sure you want to <strong>remove</strong> the user <strong>{{data.role.user.username}}</strong> from the organization <strong>{{data.role.organization.displayName}}</strong>?</p>
+</div>
+<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
+  <button mat-button mat-dialog-close>No Thanks</button>
+  <button mat-flat-button color="primary" id="remove-user-dialog" [mat-dialog-close]="{ 'role': data.role }">Remove</button>
+</div>

src/app/organizations/organization-members/organization-members.component.html

@@ -31,7 +31,7 @@
               <button color="basic" mat-icon-button matTooltip="Edit user's role in organization" [id]="'edit-user-role-' + index" [disabled]="organizationUser.user.id === (userId$ | async)"
                 (click)="editUser(organizationUser)"><mat-icon>edit</mat-icon></button>
               <button color="basic" mat-icon-button matTooltip="Remove user from organization" [id]="'remove-user-' + index" [disabled]="organizationUser.user.id === (userId$ | async)"
-                (click)="removeUser(organizationUser)"><mat-icon>delete</mat-icon></button>
+                (click)="removeUserDialog(organizationUser)"><mat-icon>delete</mat-icon></button>
             </mat-card-content>
           </div>
         </div>

src/app/organizations/organization-members/organization-members.component.ts

@@ -13,8 +13,8 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
 import { ID } from '@datorama/akita';
 import { Observable } from 'rxjs';
 
@@ -27,6 +27,19 @@ import { OrganizationMembersService } from '../state/organization-members.servic
 import { OrganizationQuery } from '../state/organization.query';
 import { UpsertOrganizationMemberComponent } from '../upsert-organization-member/upsert-organization-member.component';
 
+@Component({
+  selector: 'organization-member-remove-dialog',
+  templateUrl: 'delete-username-confirm-dialog.html',
+})
+export class OrganizationMemberRemoveConfirmDialogComponent {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+}
+
+export interface DialogData {
+  role: OrganizationUser;
+}
+
 @Component({
   selector: 'organization-members',
   templateUrl: './organization-members.component.html',
@@ -76,23 +89,30 @@ export class OrganizationMembersComponent implements OnInit {
   }
 
   /**
-   * Handles removing a user from an organization
+   * Opens the dialog for adding a user to an organization
    *
-   * @param {OrganizationUser} organizationUser
    * @memberof OrganizationMembersComponent
    */
-  removeUser(organizationUser: OrganizationUser) {
-    this.organizationMembersService.removeUser(organizationUser);
+  addUser() {
+    this.alertService.clearEverything();
+    this.matDialog.open(UpsertOrganizationMemberComponent,
+      { data: { mode: TagEditorMode.Add, username: null, role: null }, width: '600px' });
   }
 
   /**
-   * Opens the dialog for adding a user to an organization
+   * Handles removing a user from an organization
    *
+   * @param {OrganizationUser} organizationUser
    * @memberof OrganizationMembersComponent
    */
-  addUser() {
-    this.alertService.clearEverything();
-    this.matDialog.open(UpsertOrganizationMemberComponent,
-      { data: { mode: TagEditorMode.Add, username: null, role: null }, width: '600px' });
+  removeUserDialog(organizationUser: OrganizationUser) {
+    const dialogRef = this.matDialog.open(OrganizationMemberRemoveConfirmDialogComponent,
+      { data: { role: organizationUser }, width: '600px' });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.organizationMembersService.removeUser(result.role);
+      }
+    });
   }
 }

src/app/organizations/organization.module.ts

@@ -12,6 +12,7 @@ import { UpdateOrganizationDescriptionModule } from './organization/update-organ
 import { EventsModule } from './events.module';
 import { RouterModule } from '@angular/router';
 import { RefreshAlertModule } from '../shared/alert/alert.module';
+import { OrganizationMemberRemoveConfirmDialogComponent } from './organization-members/organization-members.component';
 
 @NgModule({
   imports: [
@@ -27,7 +28,8 @@ import { RefreshAlertModule } from '../shared/alert/alert.module';
     RouterModule,
     RefreshAlertModule
   ],
-  declarations: [ OrganizationComponent ],
-  exports: [ OrganizationComponent ]
+  declarations: [ OrganizationComponent, OrganizationMemberRemoveConfirmDialogComponent ],
+  exports: [ OrganizationComponent, OrganizationMemberRemoveConfirmDialogComponent ],
+  entryComponents: [ OrganizationMemberRemoveConfirmDialogComponent ]
 })
 export class OrganizationModule { }