From 4d4c4c5dae8798a606d5621a0e08304e818e0684 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Wed, 12 Jul 2023 10:54:05 +0400
Subject: [PATCH 01/29] DSM-/PEPPER-948-download-of-Onc-History-upload-template
 initial

---
 .../oncHistoryUpload/oncHistoryUpload.component.html  |  7 +++++++
 .../oncHistoryUpload/oncHistoryUpload.component.scss  | 11 +++++++++++
 .../oncHistoryUpload/oncHistoryUpload.component.ts    |  4 ++++
 3 files changed, 22 insertions(+)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
index 7b77f1f651..ed56be5652 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
@@ -1,8 +1,15 @@
+<h1> Onc History Upload </h1>
+
 <div class="message">
   <p class="message-fail" *ngIf="uploadStatus === 1">{{errorMessage}}</p>
   <p class="message-success" *ngIf="uploadStatus === 0">Upload successful</p>
+</div>
 
+<div class="download-button">
+  <button (click)="downloadTemplateAndDirectory()" mat-raised-button>Download</button>
+  <p>Click here to download the Onc History upload template and data dictionary</p>
 </div>
+
 <div class="upload">
   <app-filepicker [id]="'kitUploadFile'" [fileFormat]="'.txt'" (fileSelected)="fileSelected($event)"></app-filepicker>
   <button type="button" mat-raised-button color="primary"
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.scss
index ea8d65f524..29f5f964e1 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.scss
@@ -1,3 +1,5 @@
+@use 'commonStyles' as common;
+
 .message {
   height: 2em;
   width: 100%;
@@ -21,3 +23,12 @@
     margin-top: .5em;
   }
 }
+
+.download-button {
+  @include common.flexContainer(center, space-between);
+  width: 42em;
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
index 1ce7e81fe3..43a7d40d69 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
@@ -57,4 +57,8 @@ export class OncHistoryUploadComponent {
     }
     this.selectedTextFile = file;
   }
+
+  public downloadTemplateAndDirectory(): void {
+    console.log('Downloading...');
+  }
 }

From 6ab74f5d700a8efd5f625724cf35dbe4347356e1 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Wed, 12 Jul 2023 14:11:58 +0400
Subject: [PATCH 02/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 backend integrated

---
 .../oncHistoryUpload.component.html           |  4 +-
 .../oncHistoryUpload.component.ts             | 51 ++++++++++++++-----
 .../src/app/services/dsm.service.ts           | 27 ++++++++++
 3 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
index ed56be5652..e5b2c72f7f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
@@ -1,8 +1,8 @@
 <h1> Onc History Upload </h1>
 
 <div class="message">
-  <p class="message-fail" *ngIf="uploadStatus === 1">{{errorMessage}}</p>
-  <p class="message-success" *ngIf="uploadStatus === 0">Upload successful</p>
+  <p class="message-fail" *ngIf="requestStatus === 1">{{errorMessage}}</p>
+  <p class="message-success" *ngIf="requestStatus === 0">Upload successful</p>
 </div>
 
 <div class="download-button">
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
index 43a7d40d69..b31a820e5e 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
@@ -1,12 +1,13 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 import { DSMService } from '../services/dsm.service';
 import {finalize} from 'rxjs/operators';
 import {SessionService} from '../services/session.service';
 import {MatDialog} from '@angular/material/dialog';
 import {LoadingModalComponent} from '../modals/loading-modal.component';
 import {HttpErrorResponse} from '@angular/common/http';
+import {Subject, takeUntil} from "rxjs";
 
-enum UploadStatus {
+enum RequestStatus {
   SUCCESS,
   FAIL,
   DEFAULT
@@ -17,18 +18,24 @@ enum UploadStatus {
   templateUrl: 'oncHistoryUpload.component.html',
   styleUrls: ['oncHistoryUpload.component.scss']
 })
-export class OncHistoryUploadComponent {
-  public uploadStatus: UploadStatus = UploadStatus.DEFAULT;
+export class OncHistoryUploadComponent implements OnDestroy {
+  public requestStatus: RequestStatus = RequestStatus.DEFAULT;
   public errorMessage: string;
   public selectedTextFile: File;
 
+  private subscriptionSubject = new Subject<void>();
+
   constructor(private readonly dsmService: DSMService,
               private readonly session: SessionService,
               private readonly dialog: MatDialog) {}
 
+  ngOnDestroy(): void {
+    this.subscriptionSubject.next();
+    this.subscriptionSubject.complete();
+  }
 
   upload(): void {
-    this.uploadStatus = UploadStatus.DEFAULT;
+    this.requestStatus = RequestStatus.DEFAULT;
 
     const tempDialog = this.dialog
       .open(LoadingModalComponent, {data: {message: 'Uploading, this may take a while'}, disableClose: true});
@@ -37,17 +44,12 @@ export class OncHistoryUploadComponent {
       this.session.selectedRealm,
       this.selectedTextFile
     ).pipe(
+      takeUntil(this.subscriptionSubject),
       finalize(() => tempDialog.close())
     )
       .subscribe({
-        next: () => this.uploadStatus = UploadStatus.SUCCESS,
-        error: (error: any) => {
-          if (error instanceof HttpErrorResponse) {
-            console.log(error);
-            this.uploadStatus = UploadStatus.FAIL;
-            this.errorMessage = error.error;
-          }
-        },
+        next: () => this.requestStatus = RequestStatus.SUCCESS,
+        error: (error: any) => this.handleError(error)
       });
   }
 
@@ -59,6 +61,27 @@ export class OncHistoryUploadComponent {
   }
 
   public downloadTemplateAndDirectory(): void {
-    console.log('Downloading...');
+    const tempDialog = this.dialog
+      .open(LoadingModalComponent, {data: {message: 'Downloading... this may take a while'}, disableClose: true});
+
+    this.dsmService.downloadOncHistoryTemplateAndDirectory(this.session.selectedRealm)
+      .pipe(takeUntil(this.subscriptionSubject), finalize(() => tempDialog.close()))
+      .subscribe({
+        next: (arrayBuffer: ArrayBuffer) => {
+          const blob = new Blob([arrayBuffer], {
+            type: 'application/zip'
+          });
+          const url = window.URL.createObjectURL(blob);
+          window.open(url);
+        },
+        error: (error: any) => this.handleError(error)
+      })
+  }
+
+  private handleError(error: any): void {
+    if (error instanceof HttpErrorResponse) {
+      this.requestStatus = RequestStatus.FAIL;
+      this.errorMessage = error.error;
+    }
   }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
index ea91534e6c..09c2570e26 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
@@ -595,6 +595,16 @@ export class DSMService {
     );
   }
 
+  public downloadOncHistoryTemplateAndDirectory(realm: string): Observable<any> {
+    const url = this.baseUrl + DSMService.UI + 'oncHistory/template';
+    const map: { name: string; value: any }[] = [];
+    map.push({name: DSMService.REALM, value: realm});
+
+    return this.http.get(url, this.buildZipDownloadHeader(map)).pipe(
+      catchError(this.handleError)
+    );
+  }
+
   public getKitTypes(realm: string): Observable<any> {
     const url = this.baseUrl + DSMService.UI + 'kitTypes/' + realm;
     const map: { name: string; value: any }[] = [];
@@ -1197,6 +1207,14 @@ export class DSMService {
     return {headers: this.uploadHeader(), withCredentials: true, params};
   }
 
+  private buildZipDownloadHeader(map: any[]): any {
+    let params: HttpParams = new HttpParams();
+    for (const param of map) {
+      params = params.append(param.name, param.value);
+    }
+    return {headers: this.zipDownloadHeaders(), withCredentials: true, params, responseType: 'arraybuffer'};
+  }
+
   private buildJsonAuthHeader(): HttpHeaders {
     if (this.checkCookieBeforeCall()) {
       return new HttpHeaders({
@@ -1216,6 +1234,15 @@ export class DSMService {
     }
   }
 
+  private zipDownloadHeaders(): HttpHeaders {
+    if (this.checkCookieBeforeCall()) {
+      return new HttpHeaders({
+        'Content-Type': 'application/zip',
+        Authorization: this.sessionService.getAuthBearerHeaderValue()
+      } );
+    }
+  }
+
   private uploadHeader(): HttpHeaders {
     if (this.checkCookieBeforeCall()) {
       return new HttpHeaders({

From 5d06badb01541b15db610921304d339e9dcf7fe3 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Wed, 12 Jul 2023 14:12:23 +0400
Subject: [PATCH 03/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 linter fix

---
 .../src/app/oncHistoryUpload/oncHistoryUpload.component.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
index b31a820e5e..60ac7be615 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
@@ -5,7 +5,7 @@ import {SessionService} from '../services/session.service';
 import {MatDialog} from '@angular/material/dialog';
 import {LoadingModalComponent} from '../modals/loading-modal.component';
 import {HttpErrorResponse} from '@angular/common/http';
-import {Subject, takeUntil} from "rxjs";
+import {Subject, takeUntil} from 'rxjs';
 
 enum RequestStatus {
   SUCCESS,
@@ -75,7 +75,7 @@ export class OncHistoryUploadComponent implements OnDestroy {
           window.open(url);
         },
         error: (error: any) => this.handleError(error)
-      })
+      });
   }
 
   private handleError(error: any): void {

From ab5ef911ac6aa7e1fb250187a882616711ba6144 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Wed, 12 Jul 2023 23:49:55 +0400
Subject: [PATCH 04/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 color adjusted

---
 .../src/app/oncHistoryUpload/oncHistoryUpload.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
index e5b2c72f7f..235347a07e 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html
@@ -6,7 +6,7 @@ <h1> Onc History Upload </h1>
 </div>
 
 <div class="download-button">
-  <button (click)="downloadTemplateAndDirectory()" mat-raised-button>Download</button>
+  <button (click)="downloadTemplateAndDirectory()" mat-raised-button color="primary">Download</button>
   <p>Click here to download the Onc History upload template and data dictionary</p>
 </div>
 

From 3601afc881b71ec9e423d2321c9d90423c419c21 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 13 Jul 2023 00:29:35 +0400
Subject: [PATCH 05/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 naming fixed

---
 .../oncHistoryUpload.component.ts             | 21 ++++++++++++++++---
 .../src/app/services/dsm.service.ts           |  7 ++++++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
index 60ac7be615..d2d02d07fd 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts
@@ -4,7 +4,7 @@ import {finalize} from 'rxjs/operators';
 import {SessionService} from '../services/session.service';
 import {MatDialog} from '@angular/material/dialog';
 import {LoadingModalComponent} from '../modals/loading-modal.component';
-import {HttpErrorResponse} from '@angular/common/http';
+import {HttpErrorResponse, HttpResponse} from '@angular/common/http';
 import {Subject, takeUntil} from 'rxjs';
 
 enum RequestStatus {
@@ -67,12 +67,27 @@ export class OncHistoryUploadComponent implements OnDestroy {
     this.dsmService.downloadOncHistoryTemplateAndDirectory(this.session.selectedRealm)
       .pipe(takeUntil(this.subscriptionSubject), finalize(() => tempDialog.close()))
       .subscribe({
-        next: (arrayBuffer: ArrayBuffer) => {
+        next: (response: HttpResponse<ArrayBuffer>) => {
+          const arrayBuffer = response.body;
+          const contentDisposition =  response.headers.get('Content-Disposition');
           const blob = new Blob([arrayBuffer], {
             type: 'application/zip'
           });
+
+          const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+          const matches = filenameRegex.exec(contentDisposition);
+          let filename = 'Onc_history.zip'; // Default filename in case extraction fails
+          if (matches != null && matches[1]) {
+            filename = matches[1].replace(/['"]/g, '');
+          }
+
           const url = window.URL.createObjectURL(blob);
-          window.open(url);
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = filename;
+
+          link.click();
+          window.URL.revokeObjectURL(url);
         },
         error: (error: any) => this.handleError(error)
       });
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
index 09c2570e26..36a2681116 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
@@ -1212,7 +1212,12 @@ export class DSMService {
     for (const param of map) {
       params = params.append(param.name, param.value);
     }
-    return {headers: this.zipDownloadHeaders(), withCredentials: true, params, responseType: 'arraybuffer'};
+    return {headers: this.zipDownloadHeaders(),
+      withCredentials: true,
+      params,
+      responseType: 'arraybuffer',
+      observe: 'response'
+    };
   }
 
   private buildJsonAuthHeader(): HttpHeaders {

From df994f8e998911c39c9db26032d48b9d114421d6 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Fri, 14 Jul 2023 20:43:18 +0400
Subject: [PATCH 06/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 first step

---
 .../src/app/ALL-STUDIES/all-studies.module.ts |   8 +-
 .../ALL-STUDIES/all-studies.routing.module.ts |  10 +
 .../app/guards/usersAndPermissions.guard.ts   |  37 ++++
 .../app/navigation/navigation.component.html  |   1 +
 .../administrationUser.component.html         | 107 ++++++++++
 .../administrationUser.component.scss         | 139 +++++++++++++
 .../administrationUser.component.ts           | 119 +++++++++++
 .../listAdministrationUsers.component.html    |   6 +
 .../listAdministrationUsers.component.scss    |   0
 .../listAdministrationUsers.component.ts      |  18 ++
 .../permissionCheckbox.component.html         |  16 ++
 .../permissionCheckbox.component.scss         | 134 +++++++++++++
 .../permissionCheckbox.component.ts           |  24 +++
 .../interfaces/AdministrationUserRole.ts      |   5 +
 .../addAdministrationUser-request.ts          |   6 +
 .../interfaces/administrationUser.ts          |   8 +
 .../administrationUserRoles-response.ts       |   5 +
 .../removeAdministrationUser-request.ts       |   3 +
 .../src/app/usersAndPermissions/testData.ts   | 185 ++++++++++++++++++
 .../usersAndPermissions.component.html        |   4 +
 .../usersAndPermissions.component.scss        |   4 +
 .../usersAndPermissions.component.ts          |   9 +
 .../usersAndPermissions.module.ts             |  43 ++++
 23 files changed, 890 insertions(+), 1 deletion(-)
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.scss
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/AdministrationUserRole.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser-request.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRoles-response.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser-request.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
index e33d8e6a1b..9de6083644 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
@@ -148,6 +148,10 @@ import {
 } from '../sharedLearningUpload/components/confirmationModal/confirmationModal.component';
 import {OncHistoryUploadComponent} from '../oncHistoryUpload/oncHistoryUpload.component';
 import {OncHistoryUploadGuard} from '../guards/oncHistoryUpload.guard';
+import {
+  UsersAndPermissionsCanActivateGuard,
+  UsersAndPermissionsCanLoadGuard
+} from "../guards/usersAndPermissions.guard";
 
 
 PlotlyModule.plotlyjs = PlotlyJS;
@@ -301,7 +305,9 @@ PlotlyModule.plotlyjs = PlotlyJS;
     Statics,
     Language,
     DashboardStatisticsService,
-    OncHistoryUploadGuard
+    OncHistoryUploadGuard,
+    UsersAndPermissionsCanLoadGuard,
+    UsersAndPermissionsCanActivateGuard
   ],
   exports: [RouterModule, MatFormFieldModule, MatInputModule]
 })
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.routing.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.routing.module.ts
index 7e301a99c6..4148125bc1 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.routing.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.routing.module.ts
@@ -38,6 +38,10 @@ import {DashboardStatisticsComponent} from '../dashboard-statistics/dashboard-st
 import {ScannerComponent} from '../scanner/scanner.component';
 import {OncHistoryUploadComponent} from '../oncHistoryUpload/oncHistoryUpload.component';
 import {OncHistoryUploadGuard} from '../guards/oncHistoryUpload.guard';
+import {
+  UsersAndPermissionsCanActivateGuard,
+  UsersAndPermissionsCanLoadGuard
+} from "../guards/usersAndPermissions.guard";
 
 
 
@@ -94,6 +98,12 @@ export const AppRoutes: Routes = [
       {path: 'oncHistoryUpload', component: OncHistoryUploadComponent, canActivate: [AuthGuard, OncHistoryUploadGuard]},
 
       {path: 'userSettings', component: UserSettingComponent, canActivate: [AuthGuard]},
+      {path: 'usersAndPermissions',
+        canActivate: [UsersAndPermissionsCanActivateGuard],
+        canLoad: [UsersAndPermissionsCanLoadGuard],
+        loadChildren: () =>
+          import('../usersAndPermissions/usersAndPermissions.module').then(m => m.UsersAndPermissionsModule)
+      },
 
       // Permalink
       {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
new file mode 100644
index 0000000000..29c0ee01f7
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
@@ -0,0 +1,37 @@
+import {Injectable} from "@angular/core";
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  CanLoad,
+  Route,
+  Router,
+  RouterStateSnapshot,
+  UrlSegment,
+  UrlTree
+} from "@angular/router";
+import {SessionService} from "../services/session.service";
+
+@Injectable()
+export class UsersAndPermissionsCanLoadGuard implements CanLoad {
+  constructor(
+    private readonly router: Router,
+    private readonly session: SessionService) {
+  }
+
+  canLoad(route: Route, segments: UrlSegment[]): boolean | UrlTree {
+    return this.session.selectedRealm === 'cmi-lms';
+  }
+}
+
+
+@Injectable()
+export class UsersAndPermissionsCanActivateGuard implements CanActivate {
+  constructor(
+    private readonly router: Router,
+    private readonly session: SessionService
+  ) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):  boolean | UrlTree {
+    return this.session.selectedRealm === 'cmi-lms';
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/navigation/navigation.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/navigation/navigation.component.html
index e10ea226ed..3396ba93aa 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/navigation/navigation.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/navigation/navigation.component.html
@@ -85,6 +85,7 @@
           <li *ngIf="hasRole().allowedToDownloadNDI()"><a href="#" [routerLink]="['ndi']"> NDI Download </a></li>
           <li *ngIf="showOncHistoryUploadPage(selectedStudy | async)"><a [routerLink]="['oncHistoryUpload']">Onc History Upload</a></li>
           <li ><a href="#" [routerLink]="['drugList']"> Drug List </a></li>
+          <li ><a href="#" [routerLink]="['usersAndPermissions']"> Users And Permissions </a></li>
         </ul>
       </li>
     </ul>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
new file mode 100644
index 0000000000..3cfb23eb74
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
@@ -0,0 +1,107 @@
+<mat-accordion multi>
+  <mat-expansion-panel hideToggle [disabled]="doNotAllowCollapse" >
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        {{user.email}}
+      </mat-panel-title>
+      <mat-panel-description>
+        <main class="header">
+          <section class="header-text">
+            <p>Name:
+              <span *ngIf="!isUserEditing" class="header-text-name">{{user.name}}</span>
+              <input *ngIf="isUserEditing"
+                     [(ngModel)]="user.name"
+                     class="header-text-editing-name"
+                     type="text"
+                     [value]="user.name"
+                     (click)="$event.stopPropagation()" />
+            </p>
+            <p>Phone:
+              <span *ngIf="!isUserEditing" class="header-text-phone">{{user.phone}}</span>
+              <input
+                *ngIf="isUserEditing"
+                [(ngModel)]="user.phone"
+                class="header-text-editing-phone"
+                type="text"
+                [value]="user.phone"
+                (click)="$event.stopPropagation()" />
+            </p>
+              <button
+                color="primary"
+                *ngIf="isUserEditing"
+                class="header-text-saveButton"
+                matTooltip="Update user"
+                mat-stroked-button
+                (click)="saveEditedUser($event)">
+                <ng-container *ngIf="!isEditUserLoading; else spinnerTemplate">
+                  Save
+                </ng-container>
+              </button>
+          </section>
+          <section class="header-buttons">
+            <button class="header-buttons-compare"
+                    matTooltip="Compare Permissions"
+                    mat-icon-button
+                    (click)="compareUser($event, user)">
+              <mat-icon>compare_arrows</mat-icon>
+            </button>
+            <button class="header-buttons-edit"
+                    matTooltip="Edit User"
+                    mat-icon-button
+                    (click)="editUser($event, user)">
+              <mat-icon>edit</mat-icon>
+            </button>
+            <ng-container *ngIf="!isDeleteUserLoading; else spinnerTemplate">
+              <button class="header-buttons-delete"
+                      matTooltip="Delete User"
+                      mat-icon-button
+                      (click)="deleteUser($event, user)">
+                <mat-icon>delete_forever</mat-icon>
+              </button>
+            </ng-container>
+          </section>
+        </main>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <section class="title">
+      <h3>Permissions</h3>
+    </section>
+
+    <mat-divider></mat-divider>
+
+    <section class="permissions">
+      <section class="permissions-selectSingle">
+        <ng-container *ngIf="user.roles.length">
+          <app-permission-checkbox
+            (checkboxChanged)="onCheckboxChanged($event)"
+            *ngFor="let role of user.roles" [role]="role">
+          </app-permission-checkbox>
+        </ng-container>
+      </section>
+    </section>
+
+    <mat-divider></mat-divider>
+
+    <section class="actionButtons">
+      <button [disabled]="areActionButtonsDisabled || isEditPermissionsLoading" mat-stroked-button color="primary" class="actionButtons-save"
+              (click)="saveChanges()">
+        <ng-container *ngIf="!isEditPermissionsLoading; else spinnerTemplate">
+          Save
+        </ng-container>
+      </button>
+      <button [disabled]="areActionButtonsDisabled || isEditPermissionsLoading" mat-stroked-button color="warn" class="actionButtons-discard"
+              (click)="discardChanges()">Discard changes
+      </button>
+    </section>
+
+  </mat-expansion-panel>
+</mat-accordion>
+
+
+<!--  Templates -->
+<ng-template #spinnerTemplate>
+  <div class="spinner-container">
+    <mat-spinner diameter="25"></mat-spinner>
+  </div>
+</ng-template>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss
new file mode 100644
index 0000000000..3f77dac623
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss
@@ -0,0 +1,139 @@
+@use "commonStyles" as common;
+
+.mat-accordion .mat-expansion-panel {
+  margin-bottom: 10px;
+}
+
+.mat-expansion-panel-spacing {
+  margin: 1em;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+mat-panel-title {
+  align-items: center;
+  font-family: Montserrat-SemiBold, sans-serif;
+  flex-grow: 0;
+  width: 20%;
+  overflow: auto;
+}
+
+mat-panel-description {
+  align-items: center;
+  flex-grow: 1;
+
+  .header {
+    @include common.flexContainer(normal, space-between);
+    width: 100%;
+    height: auto;
+
+    &-text {
+      @include common.flexContainer(center, space-between);
+      width: 55%;
+      font-size: small;
+
+      &-name, &-phone {
+        overflow: auto;
+        width: 2em;
+
+        span {
+          font-family: Montserrat-SemiBold, sans-serif;
+        }
+      }
+
+      &-editing-name, &-editing-phone {
+        border: none;
+        background-color: inherit;
+        border-bottom: 1px solid #003049;
+        outline: none;
+        text-align: center;
+
+        &:focus-within {
+          border-bottom: 1px solid rgba(0, 48, 73, 0.49);
+        }
+      }
+
+      &-saveButton {
+        @include common.flexContainer(center, center);
+      }
+    }
+
+    &-buttons {
+      @include common.flexContainer(normal, flex-end);
+      width: 45%;
+
+      &-compare {
+        mat-icon {
+          color: #003049;
+
+          &:hover {
+            color: rgba(0, 48, 73, 0.25);
+          }
+        }
+      }
+
+      &-edit {
+        mat-icon {
+          color: #fcbf49;
+
+          &:hover {
+            color: rgba(252, 191, 73, 0.25);
+          }
+        }
+      }
+
+      &-delete {
+        mat-icon {
+          color: #d62828;
+
+          &:hover {
+            color: rgba(214, 40, 40, 0.25);
+          }
+        }
+      }
+    }
+  }
+}
+
+.title {
+  text-align: center;
+  font-family: Montserrat-SemiBold, sans-serif;
+}
+
+.permissions {
+  width: 100%;
+
+  &-selectAll {
+    @include common.flexContainer(center, center);
+  }
+
+  &-selectSingle {
+    @include common.flexContainer;
+    flex-wrap: wrap;
+    padding: 1em;
+
+
+    app-permission-checkbox {
+      flex-basis: 20%;
+      max-width: 20%;
+    }
+  }
+}
+
+.actionButtons {
+  @include common.flexContainer(normal, center);
+  margin-top: .7em;
+
+  &-save {
+    @include common.flexContainer(center, center);
+    margin-right: .7em;
+  }
+}
+
+.spinner-container {
+  @include common.flexContainer(center, center);
+}
+
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
new file mode 100644
index 0000000000..43a405ad04
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
@@ -0,0 +1,119 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input
+} from "@angular/core";
+import {AdministrationUser} from "../../interfaces/administrationUser";
+import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
+import {cloneDeep} from 'lodash';
+
+@Component({
+  selector: 'app-administration-user',
+  templateUrl: 'administrationUser.component.html',
+  styleUrls: ['administrationUser.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AdministrationUserComponent {
+  public user: AdministrationUser;
+  private rolesBeforeChange: AdministrationUserRole[];
+
+  /* Switchers */
+  public areActionButtonsDisabled = true;
+  public isUserEditing = false;
+  public isEditUserLoading = false;
+  public isEditPermissionsLoading = false;
+  public isDeleteUserLoading = false;
+
+  @Input('user') set administrationUser(user: AdministrationUser) {
+    this.user = user;
+    this.rolesBeforeChange = cloneDeep(user.roles);
+  };
+
+  constructor(private readonly cdr: ChangeDetectorRef) {
+  }
+
+  public compareUser(event: Event, user: AdministrationUser): void {
+    event.stopPropagation();
+    console.log(user, 'COMPARE_USER')
+  }
+
+  public editUser(event: Event, user: AdministrationUser): void {
+    event.stopPropagation()
+    console.log(user, 'EDIT_USER')
+    this.isUserEditing = !this.isUserEditing;
+  }
+
+  public saveEditedUser(event: Event): void {
+    event.stopPropagation();
+    this.isEditUserLoading = true;
+
+    console.log(this.user, 'SAVED_EDITED')
+
+    // mocking
+    setTimeout(() => {
+      this.cdr.markForCheck()
+      this.isEditUserLoading = false
+    }, 3000)
+  }
+
+  public deleteUser(event: Event, user: AdministrationUser): void {
+    event.stopPropagation();
+    this.isDeleteUserLoading = true;
+
+    console.log(user, 'SAVED_EDITED')
+
+    // mocking
+    setTimeout(() => {
+      this.cdr.markForCheck()
+      this.isDeleteUserLoading = false
+    }, 3000)
+  }
+
+  public onCheckboxChanged(changedRole: AdministrationUserRole): void {
+    this.user.roles = this.user.roles.map((role) =>
+      changedRole.roleGuid === role.roleGuid ?
+        {...role, isSelected: changedRole.isSelected} :
+        role
+    )
+
+    this.changeActionButtonsState(!this.permissionsChanged);
+  }
+
+  public saveChanges(): void {
+    this.rolesBeforeChange = this.user.roles;
+    this.areActionButtonsDisabled = true;
+    this.isEditPermissionsLoading = true;
+
+    // mocking
+    setTimeout(() => {
+      this.cdr.markForCheck()
+      this.isEditPermissionsLoading = false
+    }, 3000)
+  }
+
+  public discardChanges(): void {
+    this.user.roles = this.rolesBeforeChange;
+    this.changeActionButtonsState(true);
+  }
+
+  /* Template methods */
+
+  public get doNotAllowCollapse(): boolean {
+    return this.permissionsChanged || this.isEditUserLoading ||
+      this.isEditPermissionsLoading || this.isDeleteUserLoading;
+  }
+
+
+  /* Helper functions */
+
+  private get permissionsChanged(): boolean {
+    return !this.rolesBeforeChange.every(({isSelected}, index) =>
+      isSelected === this.user.roles[index].isSelected)
+  }
+
+  private changeActionButtonsState(isDisabled: boolean): void {
+    this.areActionButtonsDisabled = isDisabled;
+  }
+
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
new file mode 100644
index 0000000000..568a922333
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
@@ -0,0 +1,6 @@
+<ng-container *ngFor="let user of usersList; trackBy: trackBy">
+  <app-administration-user
+    [user]="user"
+  ></app-administration-user>
+</ng-container>
+
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
new file mode 100644
index 0000000000..3c2dff5cf7
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
@@ -0,0 +1,18 @@
+import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
+import {testData} from "../../testData";
+import {AdministrationUser} from "../../interfaces/administrationUser";
+
+@Component({
+  selector: 'app-list-users',
+  templateUrl: 'listAdministrationUsers.component.html',
+  styleUrls: ['listAdministrationUsers.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListAdministrationUsersComponent {
+  @Input() usersList: AdministrationUser[] = testData;
+
+  public trackBy(index: number, {name, phone, email}: AdministrationUser): any {
+    return name || phone || email;
+  }
+
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
new file mode 100644
index 0000000000..c24a580f8d
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
@@ -0,0 +1,16 @@
+<div class="checkbox-container">
+  <input class="inp-cbx" [id]="idRandomizer" type="checkbox"
+         (change)="onChange($event, role)" [checked]="role.isSelected"/>
+  <label class="cbx" [for]="idRandomizer">
+    <span>
+      <svg width="12px" height="10px">
+        <use xlink:href="#check-4"></use>
+      </svg>
+    </span>
+    <span>{{role.name}}</span></label>
+  <svg class="inline-svg">
+    <symbol id="check-4" viewbox="0 0 12 10">
+      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
+    </symbol>
+  </svg>
+</div>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.scss
new file mode 100644
index 0000000000..427617419b
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.scss
@@ -0,0 +1,134 @@
+@use "commonStyles" as common;
+
+.checkbox-container {
+  * {
+    box-sizing: border-box;
+  }
+
+  .cbx {
+    @include common.flexContainer;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: 6px;
+    overflow: hidden;
+    transition: all 0.2s ease;
+
+    &:not(:last-child) {
+      margin-right: 6px;
+    }
+
+    &:hover {
+      background: rgba(0, 119, 255, 0.06);
+    }
+
+    span {
+      float: left;
+      vertical-align: middle;
+      transform: translate3d(0, 0, 0);
+    }
+
+    span:first-child {
+      position: relative;
+      min-width: 18px;
+      max-width: 20%;
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      transform: scale(1);
+      border: 1px solid #cccfdb;
+      transition: all 0.2s ease;
+      box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
+    }
+
+    span:first-child svg {
+      max-width: 100%;
+      max-height: 100%;
+      position: absolute;
+      top: 3px;
+      left: 2px;
+      fill: none;
+      stroke: #fff;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-dasharray: 16px;
+      stroke-dashoffset: 16px;
+      transition: all 0.3s ease;
+      transition-delay: 0.1s;
+      transform: translate3d(0, 0, 0);
+    }
+
+    span:last-child {
+      max-width: 90%;
+      display: inline-block;
+      padding-left: 8px;
+      line-height: 18px;
+    }
+
+    &:hover span:first-child {
+      border-color: #66bb6a;
+    }
+
+  }
+
+  .inp-cbx {
+    position: absolute;
+    visibility: hidden;
+
+    &:checked + .cbx span:first-child {
+      background: #66bb6a;
+      border-color: #66bb6a;
+      animation: wave-4 0.4s ease;
+    }
+
+    &:checked + .cbx span:first-child svg {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .inline-svg {
+    position: absolute;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  @media screen and (max-width: 640px) {
+    .checkbox-container .cbx {
+      width: 100%;
+      display: inline-block;
+    }
+  }
+
+  @-moz-keyframes wave-4 {
+    50% {
+      transform: scale(0.9);
+    }
+  }
+
+  @-webkit-keyframes wave-4 {
+    50% {
+      transform: scale(0.9);
+    }
+  }
+
+  @-o-keyframes wave-4 {
+    50% {
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes wave-4 {
+    50% {
+      transform: scale(0.9);
+    }
+  }
+
+}
+
+
+
+
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
new file mode 100644
index 0000000000..7795c46145
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
@@ -0,0 +1,24 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
+
+@Component({
+  selector: 'app-permission-checkbox',
+  templateUrl: 'permissionCheckbox.component.html',
+  styleUrls: ['permissionCheckbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PermissionCheckboxComponent implements OnInit {
+  @Input() role: AdministrationUserRole;
+  @Output() checkboxChanged = new EventEmitter<AdministrationUserRole>();
+
+  public idRandomizer: string;
+
+  ngOnInit(): void {
+    this.idRandomizer = this.role.roleGuid + Math.floor(Math.random() * 100000);
+  }
+
+  public onChange(changeEvent: Event, role: AdministrationUserRole): void {
+    const {checked} = changeEvent.target as HTMLInputElement;
+    this.checkboxChanged.next({...role, isSelected: checked});
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/AdministrationUserRole.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/AdministrationUserRole.ts
new file mode 100644
index 0000000000..7918b99f61
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/AdministrationUserRole.ts
@@ -0,0 +1,5 @@
+export interface AdministrationUserRole {
+  roleGuid: string;
+  name: string;
+  isSelected: boolean;
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser-request.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser-request.ts
new file mode 100644
index 0000000000..ac9d9c04e1
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser-request.ts
@@ -0,0 +1,6 @@
+export interface AddAdministrationUserRequest {
+  email: string;
+  name: string;
+  phone: string;
+  roles: string[];
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
new file mode 100644
index 0000000000..0374503f63
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
@@ -0,0 +1,8 @@
+import {AdministrationUserRole} from "./AdministrationUserRole";
+
+export interface AdministrationUser {
+  email: string;
+  name: string;
+  phone: string;
+  roles: AdministrationUserRole[];
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRoles-response.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRoles-response.ts
new file mode 100644
index 0000000000..e41bfa7e3b
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRoles-response.ts
@@ -0,0 +1,5 @@
+import {AdministrationUser} from "./administrationUser";
+
+export interface AdministrationUserRolesResponse {
+  userRoles: AdministrationUser[];
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser-request.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser-request.ts
new file mode 100644
index 0000000000..a15fa2ece2
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser-request.ts
@@ -0,0 +1,3 @@
+export interface RemoveAdministrationUserRequest {
+  users: string[];
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
new file mode 100644
index 0000000000..d2bd16c3c4
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
@@ -0,0 +1,185 @@
+import {AdministrationUser} from "./interfaces/administrationUser";
+
+export const testData: AdministrationUser[] = [
+  {
+    name: 'Abraham Lincoln',
+    email: 'abrahama@gmail.com',
+    phone: '12-2313-31231',
+    roles: [
+      {
+        roleGuid: 'upload_onc_history',
+        name: 'Upload return of results file',
+        isSelected: true
+      },
+      {
+        roleGuid: 'dsada231',
+        name: 'Let me in right now',
+        isSelected: true
+      },{
+        roleGuid: 'dsa3555',
+        name: 'Upload onc history',
+        isSelected: false
+      },
+      {
+        roleGuid: '1321dsada',
+        name: 'View shared learnings',
+        isSelected: false
+      },
+      {
+        roleGuid: 'allow-hgfh-now',
+        name: 'I am allowed to do anything in here',
+        isSelected: true
+      },
+      {
+        roleGuid: 'mercury_o22rder_sequencing',
+        name: 'Mercury order sequencing',
+        isSelected: true
+      },
+      {
+        roleGuid: '52342-me-now',
+        name: 'Allow me now',
+        isSelected: true
+      },
+      {
+        roleGuid: '512as',
+        name: 'Create surveys',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow-55121-now',
+        name: 'Allow me now',
+        isSelected: false
+      },
+      {
+        roleGuid: '765765-me-now',
+        name: 'Allow me now',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow-fbxbx-now',
+        name: 'Allow me now',
+        isSelected: false
+      },
+      {
+        roleGuid: 'allow-43242-now',
+        name: 'Allowed',
+        isSelected: true
+      },
+      {
+        roleGuid: '87686-me-now',
+        name: 'Allow me now',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow-vdsf342-now',
+        name: 'Allowed',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow-4131fsd-now',
+        name: 'Allow me now',
+        isSelected: false
+      },
+      {
+        roleGuid: '32131jjf-me-gf',
+        name: 'Allow me now',
+        isSelected: false
+      },
+      {
+        roleGuid: 'allow-fds-32131',
+        name: 'Allow me now',
+        isSelected: true
+      },
+      {
+        roleGuid: 'faf111-222-now',
+        name: 'Allow me now',
+        isSelected: true
+      }
+    ]
+  },
+  {
+    name: 'Giorgi Kenedy',
+    email: 'kenikeni@gmail.com',
+    phone: '12-2313-31231',
+    roles: [
+      {
+        roleGuid: 'allow-me-now',
+        name: 'Allow me now',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow-me-now-1',
+        name: 'Let me in right now',
+        isSelected: true
+      }
+    ]
+  },
+  {
+    name: 'Giorgi Kenedydsadadsadjahdjkadhasjkdhajkdhsa',
+    email: 'keniken221dsafasdsadas32131231dsadsadsa213312dsadada2313dsai@gmail.com',
+    phone: '12-2313-31231',
+    roles: [
+      {
+        roleGuid: 'allow-me-now31231',
+        name: 'Allow me now',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow-me-now-1444',
+        name: 'Let me in right now',
+        isSelected: true
+      }
+    ]
+  },
+  {
+    name: 'George Bush',
+    email: 'busha@gmail.com',
+    phone: '12-31321-31231',
+    roles: [
+      {
+        roleGuid: 'allow-m2e-23666',
+        name: 'Allow me now',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow2-me4-no4w',
+        name: 'Let me in right now',
+        isSelected: true
+      },{
+        roleGuid: 'allow-1211me-n333ow',
+        name: 'Allow me now',
+        isSelected: false
+      },
+      {
+        roleGuid: 'allow-555222-now',
+        name: 'I am allowed to do anything in here',
+        isSelected: false
+      },
+      {
+        roleGuid: 'allow-12131-gsgdgs',
+        name: 'I am allowed to do anything in here',
+        isSelected: true
+      },
+      {
+        roleGuid: '132131-11-76557',
+        name: 'I am allowed to do anything in here',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow-me-5234hfghf',
+        name: 'Allow me now',
+        isSelected: true
+      },
+      {
+        roleGuid: 'allow-pllll111-now',
+        name: 'Tell me what you want what you really really want',
+        isSelected: true
+      },
+      {
+        roleGuid: '66666-333-2131',
+        name: 'Allow me now',
+        isSelected: false
+      }
+    ]
+  }
+]
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
new file mode 100644
index 0000000000..a2e1911dd5
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
@@ -0,0 +1,4 @@
+<section class="title">
+  <h1>Users And Permissions</h1>
+</section>
+<app-list-users></app-list-users>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
new file mode 100644
index 0000000000..12e99a59f8
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
@@ -0,0 +1,4 @@
+.title {
+  text-align: center;
+  margin-bottom: 2em;
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
new file mode 100644
index 0000000000..e9a4d8c502
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -0,0 +1,9 @@
+import {ChangeDetectionStrategy, Component} from "@angular/core";
+
+@Component({
+  selector: 'app-users-and-permissions',
+  templateUrl: 'usersAndPermissions.component.html',
+  styleUrls: ['usersAndPermissions.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UsersAndPermissionsComponent {}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
new file mode 100644
index 0000000000..d86b6d7e35
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
@@ -0,0 +1,43 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RouterModule, Routes} from "@angular/router";
+import {UsersAndPermissionsComponent} from "./usersAndPermissions.component";
+import {ListAdministrationUsersComponent} from "./components/listAdministrationUsers/listAdministrationUsers.component";
+import {MatExpansionModule} from "@angular/material/expansion";
+import {MatIconModule} from "@angular/material/icon";
+import {MatButtonModule} from "@angular/material/button";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {PermissionCheckboxComponent} from "./components/permissionCheckbox/permissionCheckbox.component";
+import {MatDividerModule} from "@angular/material/divider";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {AdministrationUserComponent} from "./components/AdministrationUser/administrationUser.component";
+import {MatInputModule} from "@angular/material/input";
+import {FormsModule} from "@angular/forms";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+
+const routes: Routes = [
+  {path: '', component: UsersAndPermissionsComponent}
+]
+
+@NgModule({
+  declarations: [
+    UsersAndPermissionsComponent,
+    ListAdministrationUsersComponent,
+    PermissionCheckboxComponent,
+    AdministrationUserComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    MatExpansionModule,
+    MatIconModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDividerModule,
+    MatTooltipModule,
+    MatInputModule,
+    FormsModule,
+    MatProgressSpinnerModule
+  ],
+})
+export class UsersAndPermissionsModule {}

From c9562274888f57b0050a490163bf727980dd800e Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Mon, 17 Jul 2023 15:05:11 +0400
Subject: [PATCH 07/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 comparison on place

---
 .../src/app/services/dsm.service.ts           |   9 +
 .../administrationUser.component.html         |  73 ++++----
 .../administrationUser.component.scss         |  56 ++++--
 .../administrationUser.component.ts           |  24 ++-
 .../comparePermissions.component.html         |  50 ++++++
 .../comparePermissions.component.scss         |   6 +
 .../comparePermissions.component.ts           |  61 +++++++
 .../listAdministrationUsers.component.html    |   1 +
 .../listAdministrationUsers.component.ts      |  22 ++-
 .../permissionCheckbox.component.html         |   6 +-
 .../permissionCheckbox.component.ts           |   3 +
 .../usersAndPermissionsHttpService.service.ts |  21 +++
 .../src/app/usersAndPermissions/testData.ts   | 164 ++++--------------
 .../usersAndPermissions.component.ts          |   2 +
 .../usersAndPermissions.module.ts             |  12 +-
 15 files changed, 319 insertions(+), 191 deletions(-)
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.scss
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
index 36a2681116..37548800af 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
@@ -458,6 +458,15 @@ export class DSMService {
     );
   }
 
+  public getUsersAndPermissions(realm: string): Observable<any> {
+    const url = this.baseUrl + DSMService.UI + 'admin/userRole';
+    const map: { name: string; value: any }[] = [];
+    map.push({name: DSMService.REALM, value: realm});
+    return this.http.get(url, this.buildQueryHeader(map)).pipe(
+      catchError(this.handleError)
+    );
+  }
+
   public getMedicalRecord(participantId: string, institutionId: string): Observable<any> {
     const url = this.baseUrl + DSMService.UI + 'participant/' + participantId + '/institution/' + institutionId;
     return this.http.get(url, this.buildHeader()).pipe(
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
index 3cfb23eb74..3bb9ffbe76 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
@@ -1,5 +1,5 @@
 <mat-accordion multi>
-  <mat-expansion-panel hideToggle [disabled]="doNotAllowCollapse" >
+  <mat-expansion-panel hideToggle [disabled]="doNotAllowCollapse">
     <mat-expansion-panel-header>
       <mat-panel-title>
         {{user.email}}
@@ -7,47 +7,51 @@
       <mat-panel-description>
         <main class="header">
           <section class="header-text">
-            <p>Name:
-              <span *ngIf="!isUserEditing" class="header-text-name">{{user.name}}</span>
-              <input *ngIf="isUserEditing"
-                     [(ngModel)]="user.name"
-                     class="header-text-editing-name"
-                     type="text"
-                     [value]="user.name"
-                     (click)="$event.stopPropagation()" />
-            </p>
-            <p>Phone:
-              <span *ngIf="!isUserEditing" class="header-text-phone">{{user.phone}}</span>
-              <input
-                *ngIf="isUserEditing"
-                [(ngModel)]="user.phone"
-                class="header-text-editing-phone"
-                type="text"
-                [value]="user.phone"
-                (click)="$event.stopPropagation()" />
-            </p>
-              <button
-                color="primary"
-                *ngIf="isUserEditing"
-                class="header-text-saveButton"
-                matTooltip="Update user"
-                mat-stroked-button
-                (click)="saveEditedUser($event)">
-                <ng-container *ngIf="!isEditUserLoading; else spinnerTemplate">
-                  Save
-                </ng-container>
-              </button>
+            <div class="header-text-inputs">
+              <p>Name:
+                <span *ngIf="!isUserEditing" class="header-text-inputs-name">{{user.name}}</span>
+                <input *ngIf="isUserEditing"
+                       [(ngModel)]="user.name"
+                       class="header-text-inputs-editing-name"
+                       type="text"
+                       [value]="user.name"
+                       (click)="$event.stopPropagation()"/>
+              </p>
+              <p>Phone:
+                <span *ngIf="!isUserEditing" class="header-text-inputs-phone">{{user.phone}}</span>
+                <input
+                  *ngIf="isUserEditing"
+                  [(ngModel)]="user.phone"
+                  class="header-text-inputs-editing-phone"
+                  type="text"
+                  [value]="user.phone"
+                  (click)="$event.stopPropagation()"/>
+              </p>
+            </div>
+            <button
+              color="primary"
+              *ngIf="isUserEditing"
+              class="header-text-saveButton"
+              matTooltip="Update user"
+              mat-icon-button
+              (click)="saveEditedUser($event)">
+              <ng-container *ngIf="!isEditUserLoading; else spinnerTemplate">
+                <mat-icon>save</mat-icon>
+              </ng-container>
+            </button>
           </section>
           <section class="header-buttons">
             <button class="header-buttons-compare"
                     matTooltip="Compare Permissions"
                     mat-icon-button
+                    [disabled]="disableUserActionButtons"
                     (click)="compareUser($event, user)">
               <mat-icon>compare_arrows</mat-icon>
             </button>
             <button class="header-buttons-edit"
                     matTooltip="Edit User"
                     mat-icon-button
+                    [disabled]="disableUserActionButtons"
                     (click)="editUser($event, user)">
               <mat-icon>edit</mat-icon>
             </button>
@@ -55,6 +59,7 @@
               <button class="header-buttons-delete"
                       matTooltip="Delete User"
                       mat-icon-button
+                      [disabled]="disableUserActionButtons"
                       (click)="deleteUser($event, user)">
                 <mat-icon>delete_forever</mat-icon>
               </button>
@@ -84,13 +89,15 @@ <h3>Permissions</h3>
     <mat-divider></mat-divider>
 
     <section class="actionButtons">
-      <button [disabled]="areActionButtonsDisabled || isEditPermissionsLoading" mat-stroked-button color="primary" class="actionButtons-save"
+      <button [disabled]="arePermissionActionButtonsDisabled || isEditPermissionsLoading"
+              mat-stroked-button color="primary" class="actionButtons-save"
               (click)="saveChanges()">
         <ng-container *ngIf="!isEditPermissionsLoading; else spinnerTemplate">
           Save
         </ng-container>
       </button>
-      <button [disabled]="areActionButtonsDisabled || isEditPermissionsLoading" mat-stroked-button color="warn" class="actionButtons-discard"
+      <button [disabled]="arePermissionActionButtonsDisabled || isEditPermissionsLoading"
+              mat-stroked-button color="warn" class="actionButtons-discard"
               (click)="discardChanges()">Discard changes
       </button>
     </section>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss
index 3f77dac623..a1b4677195 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss
@@ -8,6 +8,10 @@
   margin: 1em;
 }
 
+mat-expansion-panel-header {
+  padding: 2em 18px;
+}
+
 p {
   margin: 0;
   padding: 0;
@@ -30,34 +34,50 @@ mat-panel-description {
     width: 100%;
     height: auto;
 
-    &-text {
-      @include common.flexContainer(center, space-between);
-      width: 55%;
-      font-size: small;
+    button:disabled {
+      mat-icon {
+        color: grey;
+      }
+    }
 
-      &-name, &-phone {
-        overflow: auto;
-        width: 2em;
+    &-text {
+      @include common.flexContainer(center);
 
-        span {
-          font-family: Montserrat-SemiBold, sans-serif;
+      width: 55%;
+      &-inputs {
+        &-name, &-phone {
+          overflow: auto;
+          width: 2em;
+          max-width: 100%;
+          font-weight: bold;
+
+          span {
+            font-family: Montserrat-SemiBold, sans-serif;
+          }
         }
-      }
 
-      &-editing-name, &-editing-phone {
-        border: none;
-        background-color: inherit;
-        border-bottom: 1px solid #003049;
-        outline: none;
-        text-align: center;
+        &-editing-name, &-editing-phone {
+          border: none;
+          background-color: inherit;
+          border-bottom: 1px solid #003049;
+          outline: none;
 
-        &:focus-within {
-          border-bottom: 1px solid rgba(0, 48, 73, 0.49);
+          &:focus-within {
+            border-bottom: 1px solid rgba(0, 48, 73, 0.49);
+          }
         }
       }
 
       &-saveButton {
         @include common.flexContainer(center, center);
+
+        mat-icon {
+          color: #386641;
+
+          &:hover {
+            color: rgba(56, 102, 65, 0.25);
+          }
+        }
       }
     }
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
index 43a405ad04..838979565b 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
@@ -1,12 +1,14 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component,
-  Input
+  Component, EventEmitter,
+  Input, OnInit, Output
 } from "@angular/core";
 import {AdministrationUser} from "../../interfaces/administrationUser";
 import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
 import {cloneDeep} from 'lodash';
+import {MatDialog} from "@angular/material/dialog";
+import {ComparePermissionsComponent} from "../comparePermissions/comparePermissions.component";
 
 @Component({
   selector: 'app-administration-user',
@@ -19,7 +21,7 @@ export class AdministrationUserComponent {
   private rolesBeforeChange: AdministrationUserRole[];
 
   /* Switchers */
-  public areActionButtonsDisabled = true;
+  public arePermissionActionButtonsDisabled = true;
   public isUserEditing = false;
   public isEditUserLoading = false;
   public isEditPermissionsLoading = false;
@@ -30,12 +32,17 @@ export class AdministrationUserComponent {
     this.rolesBeforeChange = cloneDeep(user.roles);
   };
 
+  @Output() comparingUser = new EventEmitter<AdministrationUser>();
+
   constructor(private readonly cdr: ChangeDetectorRef) {
   }
 
+  /* Event Handlers */
+
   public compareUser(event: Event, user: AdministrationUser): void {
     event.stopPropagation();
     console.log(user, 'COMPARE_USER')
+    this.comparingUser.emit(user);
   }
 
   public editUser(event: Event, user: AdministrationUser): void {
@@ -82,7 +89,7 @@ export class AdministrationUserComponent {
 
   public saveChanges(): void {
     this.rolesBeforeChange = this.user.roles;
-    this.areActionButtonsDisabled = true;
+    this.arePermissionActionButtonsDisabled = true;
     this.isEditPermissionsLoading = true;
 
     // mocking
@@ -100,8 +107,11 @@ export class AdministrationUserComponent {
   /* Template methods */
 
   public get doNotAllowCollapse(): boolean {
-    return this.permissionsChanged || this.isEditUserLoading ||
-      this.isEditPermissionsLoading || this.isDeleteUserLoading;
+    return this.permissionsChanged || this.disableUserActionButtons;
+  }
+
+  public get disableUserActionButtons(): boolean {
+    return this.isEditUserLoading || this.isDeleteUserLoading || this.isEditPermissionsLoading;
   }
 
 
@@ -113,7 +123,7 @@ export class AdministrationUserComponent {
   }
 
   private changeActionButtonsState(isDisabled: boolean): void {
-    this.areActionButtonsDisabled = isDisabled;
+    this.arePermissionActionButtonsDisabled = isDisabled;
   }
 
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
new file mode 100644
index 0000000000..a67d2e7987
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
@@ -0,0 +1,50 @@
+<main class="compare-container">
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <!-- Position Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Role</th>
+      <td mat-cell *matCellDef="let role"> {{role.name}} </td>
+    </ng-container>
+
+    <ng-container [matColumnDef]="firstUser.email">
+      <th mat-header-cell *matHeaderCellDef> {{firstUser.email}} </th>
+      <td mat-cell *matCellDef="let role">
+        <ng-container *ngIf="findRoleForFirstUser(role.roleGuid) as foundRole">
+          <app-permission-checkbox [onlyCheckbox]="true"
+                                   [isDisabled]="true"
+                                   [role]="foundRole">
+          </app-permission-checkbox>
+        </ng-container>
+      </td>
+    </ng-container>
+
+    <ng-container [matColumnDef]="displayedColumns[2] || 'selectUser'">
+      <th mat-header-cell *matHeaderCellDef>
+        <ng-container *ngTemplateOutlet="selectUserTemplate">
+        </ng-container>
+      </th>
+      <td mat-cell *matCellDef="let role">
+        <ng-container *ngIf="displayedColumns[2] !== 'selectUser' && findRoleForSecondUser(role.roleGuid) as foundRole">
+          <app-permission-checkbox [onlyCheckbox]="true"
+                                   [isDisabled]="true"
+                                   [role]="foundRole">
+          </app-permission-checkbox>
+        </ng-container>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+
+
+  <ng-template #selectUserTemplate>
+    <mat-form-field>
+      <mat-label>{{secondUser?.email || 'Select User Email'}}</mat-label>
+      <mat-select (selectionChange)="userSelected($event)">
+        <mat-option *ngFor="let userEmail of allUsers" [value]="userEmail">{{userEmail}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </ng-template>
+</main>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.scss
new file mode 100644
index 0000000000..b588ac55a2
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.scss
@@ -0,0 +1,6 @@
+.compare-container {
+  display: flex;
+  table {
+    width: 100%;
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
new file mode 100644
index 0000000000..2555100775
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
@@ -0,0 +1,61 @@
+import {Component, Inject, OnInit} from "@angular/core";
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
+import {AdministrationUser} from "../../interfaces/administrationUser";
+import {MatSelectChange} from "@angular/material/select";
+import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
+
+@Component({
+  selector: 'app-compare-permissions',
+  templateUrl: 'comparePermissions.component.html',
+  styleUrls: ['comparePermissions.component.scss']
+})
+export class ComparePermissionsComponent implements OnInit {
+  public displayedColumns = ['name', this.firstUser.email, 'selectUser'];
+  public dataSource = []
+  public secondUser: AdministrationUser;
+
+  constructor(@Inject(MAT_DIALOG_DATA)
+              private data: {firstUser: AdministrationUser, allUsers: AdministrationUser[]}) {}
+
+  ngOnInit() {
+    console.log(this.data, 'COMPARE_DATA')
+    this.dataSource = [...this.firstUser.roles];
+
+    console.log(this.dataSource, 'DATA_SOURCE')
+  }
+
+  public userSelected({value: selectedUserEmail}: MatSelectChange): void {
+    const foundUser = this.data.allUsers.find(({email}) => email === selectedUserEmail);
+    // this.dataSource.push(...foundUser.roles);
+    this.displayedColumns = ['name', this.firstUser.email];
+    this.displayedColumns.push(foundUser.email);
+
+    for(let role of foundUser.roles) {
+      if(this.dataSource.findIndex(r => r.roleGuid === role.roleGuid) === -1) {
+        this.dataSource.push(role)
+      }
+    }
+    // this.dataSource = [...this.dataSource, ...foundUser.roles];
+
+    this.secondUser = foundUser;
+    console.log(this.dataSource, 'AFTER_CHANGE')
+  }
+
+  public get firstUser(): AdministrationUser {
+    return this.data.firstUser;
+  }
+
+  public get allUsers(): string[] {
+    return this.data.allUsers.filter(user => user.email !== this.firstUser.email)
+      .map((user) => user.email);
+  }
+
+  public findRoleForFirstUser(roleGuid: string): AdministrationUserRole {
+    return this.firstUser.roles.find(role => role.roleGuid === roleGuid);
+  }
+
+  public findRoleForSecondUser(roleGuid: string): AdministrationUserRole {
+    return this.secondUser.roles.find(role => role.roleGuid === roleGuid);
+  }
+
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
index 568a922333..6aacb42567 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
@@ -1,6 +1,7 @@
 <ng-container *ngFor="let user of usersList; trackBy: trackBy">
   <app-administration-user
     [user]="user"
+    (comparingUser)="openPermissionsComparisonModal($event)"
   ></app-administration-user>
 </ng-container>
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
index 3c2dff5cf7..dd4dda0c9c 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
@@ -1,6 +1,9 @@
-import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
+import {ChangeDetectionStrategy, Component, Input, OnInit} from "@angular/core";
 import {testData} from "../../testData";
 import {AdministrationUser} from "../../interfaces/administrationUser";
+import {MatDialog} from "@angular/material/dialog";
+import {ComparePermissionsComponent} from "../comparePermissions/comparePermissions.component";
+import {UsersAndPermissionsHttpServiceService} from "../../services/usersAndPermissionsHttpService.service";
 
 @Component({
   selector: 'app-list-users',
@@ -8,11 +11,26 @@ import {AdministrationUser} from "../../interfaces/administrationUser";
   styleUrls: ['listAdministrationUsers.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ListAdministrationUsersComponent {
+export class ListAdministrationUsersComponent implements OnInit {
   @Input() usersList: AdministrationUser[] = testData;
 
+  constructor(private readonly matDialog: MatDialog,
+              private readonly httpService: UsersAndPermissionsHttpServiceService) {
+  }
+
+  ngOnInit() {
+    // this.httpService.usersAndPermissions.subscribe(data => console.log(data, 'HTTP-RESPONSE'))
+  }
+
   public trackBy(index: number, {name, phone, email}: AdministrationUser): any {
     return name || phone || email;
   }
 
+  public openPermissionsComparisonModal(firstUser: AdministrationUser) {
+    this.matDialog.open(ComparePermissionsComponent, {data: {
+      firstUser,
+      allUsers: this.usersList
+      }, maxHeight: '50em', width: '70%'})
+  }
+
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
index c24a580f8d..352f6b027b 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
@@ -1,13 +1,13 @@
 <div class="checkbox-container">
-  <input class="inp-cbx" [id]="idRandomizer" type="checkbox"
+  <input class="inp-cbx" [disabled]="isDisabled" [id]="idRandomizer" type="checkbox"
          (change)="onChange($event, role)" [checked]="role.isSelected"/>
-  <label class="cbx" [for]="idRandomizer">
+  <label [ngStyle]="{'justify-content': onlyCheckbox && 'center'}" class="cbx" [for]="idRandomizer">
     <span>
       <svg width="12px" height="10px">
         <use xlink:href="#check-4"></use>
       </svg>
     </span>
-    <span>{{role.name}}</span></label>
+    <span *ngIf="!onlyCheckbox">{{role.name}}</span></label>
   <svg class="inline-svg">
     <symbol id="check-4" viewbox="0 0 12 10">
       <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
index 7795c46145..b7c76fcb26 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
@@ -9,6 +9,9 @@ import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
 })
 export class PermissionCheckboxComponent implements OnInit {
   @Input() role: AdministrationUserRole;
+  @Input() onlyCheckbox: boolean = false;
+  @Input() isDisabled: boolean = false;
+
   @Output() checkboxChanged = new EventEmitter<AdministrationUserRole>();
 
   public idRandomizer: string;
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
new file mode 100644
index 0000000000..877ebfab85
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
@@ -0,0 +1,21 @@
+import {Injectable} from "@angular/core";
+import {Observable} from "rxjs";
+import {AdministrationUser} from "../interfaces/administrationUser";
+import {DSMService} from "../../services/dsm.service";
+import {SessionService} from "../../services/session.service";
+
+@Injectable()
+export class UsersAndPermissionsHttpServiceService {
+
+  constructor(private readonly dsmService: DSMService,
+              private readonly sessionService: SessionService) {
+  }
+
+  public get usersAndPermissions(): Observable<AdministrationUser[]> {
+    return this.dsmService.getUsersAndPermissions(this.realm);
+  }
+
+  private get realm(): string {
+    return this.sessionService.selectedRealm;
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
index d2bd16c3c4..77e9808ec4 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
@@ -2,183 +2,95 @@ import {AdministrationUser} from "./interfaces/administrationUser";
 
 export const testData: AdministrationUser[] = [
   {
-    name: 'Abraham Lincoln',
-    email: 'abrahama@gmail.com',
+    name: 'First User',
+    email: 'firstUser@gmail.com',
     phone: '12-2313-31231',
     roles: [
       {
         roleGuid: 'upload_onc_history',
-        name: 'Upload return of results file',
-        isSelected: true
-      },
-      {
-        roleGuid: 'dsada231',
-        name: 'Let me in right now',
-        isSelected: true
-      },{
-        roleGuid: 'dsa3555',
         name: 'Upload onc history',
-        isSelected: false
-      },
-      {
-        roleGuid: '1321dsada',
-        name: 'View shared learnings',
-        isSelected: false
-      },
-      {
-        roleGuid: 'allow-hgfh-now',
-        name: 'I am allowed to do anything in here',
-        isSelected: true
-      },
-      {
-        roleGuid: 'mercury_o22rder_sequencing',
-        name: 'Mercury order sequencing',
-        isSelected: true
-      },
-      {
-        roleGuid: '52342-me-now',
-        name: 'Allow me now',
-        isSelected: true
-      },
-      {
-        roleGuid: '512as',
-        name: 'Create surveys',
-        isSelected: true
-      },
-      {
-        roleGuid: 'allow-55121-now',
-        name: 'Allow me now',
-        isSelected: false
-      },
-      {
-        roleGuid: '765765-me-now',
-        name: 'Allow me now',
-        isSelected: true
-      },
-      {
-        roleGuid: 'allow-fbxbx-now',
-        name: 'Allow me now',
-        isSelected: false
-      },
-      {
-        roleGuid: 'allow-43242-now',
-        name: 'Allowed',
         isSelected: true
       },
       {
-        roleGuid: '87686-me-now',
-        name: 'Allow me now',
-        isSelected: true
-      },
-      {
-        roleGuid: 'allow-vdsf342-now',
-        name: 'Allowed',
+        roleGuid: 'upload_ror_file',
+        name: 'Upload return of results file',
         isSelected: true
       },
       {
-        roleGuid: 'allow-4131fsd-now',
-        name: 'Allow me now',
-        isSelected: false
-      },
-      {
-        roleGuid: '32131jjf-me-gf',
-        name: 'Allow me now',
+        roleGuid: 'view_shared_learnings',
+        name: 'View shared learnings',
         isSelected: false
-      },
-      {
-        roleGuid: 'allow-fds-32131',
-        name: 'Allow me now',
-        isSelected: true
-      },
-      {
-        roleGuid: 'faf111-222-now',
-        name: 'Allow me now',
-        isSelected: true
       }
     ]
   },
   {
-    name: 'Giorgi Kenedy',
-    email: 'kenikeni@gmail.com',
+    name: 'Second User',
+    email: 'secondUser@gmail.com',
     phone: '12-2313-31231',
     roles: [
       {
-        roleGuid: 'allow-me-now',
-        name: 'Allow me now',
-        isSelected: true
+        roleGuid: 'mercury_order_sequencing',
+        name: 'Mercury order sequencing',
+        isSelected: false
       },
       {
-        roleGuid: 'allow-me-now-1',
-        name: 'Let me in right now',
-        isSelected: true
+        roleGuid: 'survey_creation',
+        name: 'Create surveys',
+        isSelected: false
       }
     ]
   },
   {
-    name: 'Giorgi Kenedydsadadsadjahdjkadhasjkdhajkdhsa',
-    email: 'keniken221dsafasdsadas32131231dsadsadsa213312dsadada2313dsai@gmail.com',
+    name: 'Third User',
+    email: 'thirdUser@gmail.com',
     phone: '12-2313-31231',
     roles: [
       {
-        roleGuid: 'allow-me-now31231',
-        name: 'Allow me now',
+        roleGuid: 'upload_ror_file',
+        name: 'Upload return of results file',
         isSelected: true
       },
       {
-        roleGuid: 'allow-me-now-1444',
-        name: 'Let me in right now',
+        roleGuid: 'view_shared_learnings',
+        name: 'View shared learnings',
         isSelected: true
+      },
+      {
+        roleGuid: 'survey_creation',
+        name: 'Create surveys',
+        isSelected: false
       }
     ]
   },
   {
-    name: 'George Bush',
-    email: 'busha@gmail.com',
+    name: 'Fourth User',
+    email: 'fourthUser@gmail.com',
     phone: '12-31321-31231',
     roles: [
       {
-        roleGuid: 'allow-m2e-23666',
-        name: 'Allow me now',
-        isSelected: true
-      },
-      {
-        roleGuid: 'allow2-me4-no4w',
-        name: 'Let me in right now',
-        isSelected: true
-      },{
-        roleGuid: 'allow-1211me-n333ow',
-        name: 'Allow me now',
+        roleGuid: 'upload_onc_history',
+        name: 'Upload onc history',
         isSelected: false
       },
       {
-        roleGuid: 'allow-555222-now',
-        name: 'I am allowed to do anything in here',
+        roleGuid: 'upload_ror_file',
+        name: 'Upload return of results file',
         isSelected: false
       },
       {
-        roleGuid: 'allow-12131-gsgdgs',
-        name: 'I am allowed to do anything in here',
-        isSelected: true
-      },
-      {
-        roleGuid: '132131-11-76557',
-        name: 'I am allowed to do anything in here',
-        isSelected: true
+        roleGuid: 'view_shared_learnings',
+        name: 'View shared learnings',
+        isSelected: false
       },
       {
-        roleGuid: 'allow-me-5234hfghf',
-        name: 'Allow me now',
+        roleGuid: 'mercury_order_sequencing',
+        name: 'Mercury order sequencing',
         isSelected: true
       },
       {
-        roleGuid: 'allow-pllll111-now',
-        name: 'Tell me what you want what you really really want',
+        roleGuid: 'survey_creation',
+        name: 'Create surveys',
         isSelected: true
-      },
-      {
-        roleGuid: '66666-333-2131',
-        name: 'Allow me now',
-        isSelected: false
       }
     ]
   }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index e9a4d8c502..ab59f576ab 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -1,9 +1,11 @@
 import {ChangeDetectionStrategy, Component} from "@angular/core";
+import {UsersAndPermissionsHttpServiceService} from "./services/usersAndPermissionsHttpService.service";
 
 @Component({
   selector: 'app-users-and-permissions',
   templateUrl: 'usersAndPermissions.component.html',
   styleUrls: ['usersAndPermissions.component.scss'],
+  providers: [UsersAndPermissionsHttpServiceService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UsersAndPermissionsComponent {}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
index d86b6d7e35..4de25bd15f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
@@ -14,6 +14,10 @@ import {AdministrationUserComponent} from "./components/AdministrationUser/admin
 import {MatInputModule} from "@angular/material/input";
 import {FormsModule} from "@angular/forms";
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {ComparePermissionsComponent} from "./components/comparePermissions/comparePermissions.component";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatTableModule} from "@angular/material/table";
+import {MatSelectModule} from "@angular/material/select";
 
 const routes: Routes = [
   {path: '', component: UsersAndPermissionsComponent}
@@ -24,7 +28,8 @@ const routes: Routes = [
     UsersAndPermissionsComponent,
     ListAdministrationUsersComponent,
     PermissionCheckboxComponent,
-    AdministrationUserComponent
+    AdministrationUserComponent,
+    ComparePermissionsComponent
   ],
   imports: [
     CommonModule,
@@ -37,7 +42,10 @@ const routes: Routes = [
     MatTooltipModule,
     MatInputModule,
     FormsModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    MatDialogModule,
+    MatTableModule,
+    MatSelectModule
   ],
 })
 export class UsersAndPermissionsModule {}

From e29578778c3d1e92a0faeefcf1f3a63280f2a8a0 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Mon, 17 Jul 2023 15:08:38 +0400
Subject: [PATCH 08/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 only available roles in comparison

---
 .../comparePermissions/comparePermissions.component.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
index 2555100775..19765a52a5 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
@@ -29,13 +29,13 @@ export class ComparePermissionsComponent implements OnInit {
     // this.dataSource.push(...foundUser.roles);
     this.displayedColumns = ['name', this.firstUser.email];
     this.displayedColumns.push(foundUser.email);
+    this.dataSource = [...this.firstUser.roles];
 
     for(let role of foundUser.roles) {
       if(this.dataSource.findIndex(r => r.roleGuid === role.roleGuid) === -1) {
         this.dataSource.push(role)
       }
     }
-    // this.dataSource = [...this.dataSource, ...foundUser.roles];
 
     this.secondUser = foundUser;
     console.log(this.dataSource, 'AFTER_CHANGE')

From 2378a6b69268a7598272342d91f0683594be7665 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Mon, 17 Jul 2023 17:00:05 +0400
Subject: [PATCH 09/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 other color user

---
 .../AdministrationUser/administrationUser.component.html  | 3 ++-
 .../AdministrationUser/administrationUser.component.ts    | 8 +++++++-
 .../ddp-dsm-ui/src/app/usersAndPermissions/testData.ts    | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
index 3bb9ffbe76..a354fb9cc8 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
@@ -1,6 +1,7 @@
 <mat-accordion multi>
   <mat-expansion-panel hideToggle [disabled]="doNotAllowCollapse">
-    <mat-expansion-panel-header>
+    <mat-expansion-panel-header
+      [ngStyle]="user.email === activeUserEmail && {'backgroundColor': 'rgba(144, 224, 239, 0.42)'}">
       <mat-panel-title>
         {{user.email}}
       </mat-panel-title>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
index 838979565b..91ddbbce40 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
@@ -9,6 +9,7 @@ import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
 import {cloneDeep} from 'lodash';
 import {MatDialog} from "@angular/material/dialog";
 import {ComparePermissionsComponent} from "../comparePermissions/comparePermissions.component";
+import {RoleService} from "../../../services/role.service";
 
 @Component({
   selector: 'app-administration-user',
@@ -34,7 +35,8 @@ export class AdministrationUserComponent {
 
   @Output() comparingUser = new EventEmitter<AdministrationUser>();
 
-  constructor(private readonly cdr: ChangeDetectorRef) {
+  constructor(private readonly cdr: ChangeDetectorRef,
+              private readonly roleService: RoleService) {
   }
 
   /* Event Handlers */
@@ -114,6 +116,10 @@ export class AdministrationUserComponent {
     return this.isEditUserLoading || this.isDeleteUserLoading || this.isEditPermissionsLoading;
   }
 
+  public get activeUserEmail(): string {
+    return this.roleService.userMail();
+  }
+
 
   /* Helper functions */
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
index 77e9808ec4..a7ae239180 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
@@ -63,8 +63,8 @@ export const testData: AdministrationUser[] = [
     ]
   },
   {
-    name: 'Fourth User',
-    email: 'fourthUser@gmail.com',
+    name: 'Giorgi Charkviani',
+    email: 'gcharkvi@broadinstitute.org',
     phone: '12-31321-31231',
     roles: [
       {

From bd84436f2049fff08a707eb9bf0654543adf4ecc Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Tue, 18 Jul 2023 09:30:25 +0400
Subject: [PATCH 10/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 add user added

---
 .../src/app/services/dsm.service.ts           | 12 ++-
 .../addAdministrationUser.component.html      | 65 +++++++++++++++++
 .../addAdministrationUser.component.scss      | 45 ++++++++++++
 .../addAdministrationUser.component.ts        | 73 +++++++++++++++++++
 .../administrationUser.component.html         |  2 -
 .../administrationUser.component.scss         |  0
 .../administrationUser.component.ts           |  2 +-
 .../comparePermissions.component.ts           |  2 +-
 .../listAdministrationUsers.component.ts      |  3 +-
 .../permissionCheckbox.component.html         |  4 +-
 .../permissionCheckbox.component.ts           |  6 +-
 .../interfaces/AdministrationUserRole.ts      |  5 --
 .../addAdministrationUser-request.ts          |  6 --
 .../interfaces/addAdministrationUser.ts       | 14 ++++
 .../interfaces/administrationUser.ts          |  2 +-
 ...-response.ts => administrationUserRole.ts} |  6 ++
 ...request.ts => removeAdministrationUser.ts} |  0
 .../usersAndPermissionsHttpService.service.ts |  9 ++-
 .../src/app/usersAndPermissions/testData.ts   | 23 ++++++
 .../usersAndPermissions.component.html        |  3 +-
 .../usersAndPermissions.component.ts          | 36 ++++++++-
 .../usersAndPermissions.module.ts             | 16 +++-
 22 files changed, 302 insertions(+), 32 deletions(-)
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{AdministrationUser => administrationUser}/administrationUser.component.html (97%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{AdministrationUser => administrationUser}/administrationUser.component.scss (100%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{AdministrationUser => administrationUser}/administrationUser.component.ts (98%)
 delete mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/AdministrationUserRole.ts
 delete mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser-request.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/{administrationUserRoles-response.ts => administrationUserRole.ts} (58%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/{removeAdministrationUser-request.ts => removeAdministrationUser.ts} (100%)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
index 37548800af..6974aab337 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
@@ -21,6 +21,7 @@ import {IDateRange} from '../dashboard-statistics/interfaces/IDateRange';
 import {StatisticsEnum} from '../dashboard-statistics/enums/statistics.enum';
 import {SomaticResultSignedUrlRequest} from '../sharedLearningUpload/interfaces/somaticResultSignedUrlRequest';
 import {SendToParticipantRequest} from '../sharedLearningUpload/interfaces/sendToParticipant';
+import {AddAdministrationUserRequest} from "../usersAndPermissions/interfaces/addAdministrationUser";
 
 declare var DDP_ENV: any;
 
@@ -458,7 +459,7 @@ export class DSMService {
     );
   }
 
-  public getUsersAndPermissions(realm: string): Observable<any> {
+  public getUsers(realm: string): Observable<any> {
     const url = this.baseUrl + DSMService.UI + 'admin/userRole';
     const map: { name: string; value: any }[] = [];
     map.push({name: DSMService.REALM, value: realm});
@@ -467,6 +468,15 @@ export class DSMService {
     );
   }
 
+  public addUser(realm: string, body: AddAdministrationUserRequest): Observable<any> {
+    const url = this.baseUrl + DSMService.UI + 'admin/user';
+    const map: { name: string; value: any }[] = [];
+    map.push({name: DSMService.REALM, value: realm});
+    return this.http.post(url, {users: [body]}, this.buildQueryHeader(map)).pipe(
+      catchError(this.handleError)
+    );
+  }
+
   public getMedicalRecord(participantId: string, institutionId: string): Observable<any> {
     const url = this.baseUrl + DSMService.UI + 'participant/' + participantId + '/institution/' + institutionId;
     return this.http.get(url, this.buildHeader()).pipe(
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
new file mode 100644
index 0000000000..27dd3e6d10
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
@@ -0,0 +1,65 @@
+<form class="addUserForm" [formGroup]="addUserForm">
+  <section class="addUserForm-title">
+    <h3>Create User</h3>
+  </section>
+  <section class="addUserForm-inputs">
+    <mat-form-field class="addUserForm-inputs-name">
+      <mat-label>Email</mat-label>
+      <input matInput formControlName="email">
+    </mat-form-field>
+    <mat-form-field class="addUserForm-inputs-name">
+      <mat-label>Name & Surname</mat-label>
+      <input matInput formControlName="name">
+    </mat-form-field>
+    <mat-form-field class="addUserForm-inputs-phone">
+      <mat-label>Phone</mat-label>
+      <input matInput formControlName="phone">
+    </mat-form-field>
+  </section>
+  <mat-divider></mat-divider>
+  <section class="addUserForm-permissions">
+    <h4 class="addUserForm-permissions-title">Permissions</h4>
+    <app-permission-checkbox
+      *ngFor="let role of roles"
+      (checkboxChanged)="roleSelected($event)"
+      [role]="role">
+    </app-permission-checkbox>
+  </section>
+  <section class="addUserForm-buttons">
+    <button class="addUserForm-buttons-add"
+            color="accent"
+            [disabled]="addUserForm.invalid || !(!!onlySelectedRoles?.length)"
+            (click)="addUser()" mat-raised-button>Add User</button>
+  </section>
+
+  <section class="addUserForm-compare">
+    <mat-divider></mat-divider>
+    <div class="addUserForm-compare-input">
+      <p class="addUserForm-compare-input-text">Compare permissions to the selected user:</p>
+      <div class="addUserForm-compare-input-actions">
+        <mat-form-field>
+          <mat-label>Select User</mat-label>
+          <mat-select (selectionChange)="userSelected($event)">
+            <mat-option *ngFor="let email of existingUsersEmails" [value]="email">
+              {{email}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <button *ngIf="selectedUserRoles"
+                color="primary"
+                class="addUserForm-compare-input-actions-button"
+                matTooltip="The same roles will be applied to the new user"
+                (click)="applyRoles()" mat-stroked-button>Apply roles</button>
+      </div>
+    </div>
+    <mat-divider></mat-divider>
+    <div class="addUserForm-compare-roles" *ngIf="selectedUserRoles">
+      <app-permission-checkbox
+        *ngFor="let role of selectedUserRoles"
+        [isDisabled]="true"
+        [role]="role">
+      </app-permission-checkbox>
+    </div>
+  </section>
+
+</form>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss
new file mode 100644
index 0000000000..99ad0553b1
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss
@@ -0,0 +1,45 @@
+@use "commonStyles" as common;
+
+.addUserForm {
+
+  &-title {
+    font-family: Montserrat-SemiBold, sans-serif;
+    text-align: center;
+    margin-bottom: 1em;
+  }
+
+  &-permissions {
+    &-title {
+      text-align: center;
+    }
+  }
+
+  &-buttons {
+    @include common.flexContainer(center, center);
+    margin-top: 1em;
+  }
+
+  &-compare {
+    margin-top: .2em;
+    padding: 1em;
+    mat-divider {
+      margin: .5em;
+    }
+
+    &-input {
+      &-text {
+        font-family: Montserrat-SemiBold, sans-serif;
+      }
+      &-actions {
+        @include common.flexContainer(center, center);
+        &-button {
+          margin-left: 1em;
+        }
+      }
+    }
+
+    &-roles {
+      margin: 1em 0;
+    }
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
new file mode 100644
index 0000000000..91cb671a9a
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
@@ -0,0 +1,73 @@
+import {ChangeDetectionStrategy, Component, Inject} from "@angular/core";
+import {FormBuilder, Validators} from "@angular/forms";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
+import {AddAdministrationUserModal, AddAdministrationUserRequest} from "../../interfaces/addAdministrationUser";
+import {MatSelectChange} from "@angular/material/select";
+
+@Component({
+  selector: 'app-addAdministrationUser',
+  templateUrl: 'addAdministrationUser.component.html',
+  styleUrls: ['addAdministrationUser.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AddAdministrationUserComponent {
+  public selectedUserRoles: AdministrationUserRole[];
+  private chosenRoles: AdministrationUserRole[] = [];
+
+  public readonly addUserForm = this.formBuilder.group({
+    email: [null, Validators.required],
+    name: [null, Validators.required],
+    phone: [null, Validators.required],
+  })
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) private data: AddAdministrationUserModal,
+    private readonly matDialogRef: MatDialogRef<AddAdministrationUserComponent>,
+    private readonly formBuilder: FormBuilder
+  ) {}
+
+  public addUser(): void {
+    const userToAdd: AddAdministrationUserRequest = {
+      ...this.addUserForm.getRawValue(),
+      roles: this.chosenRoles.map(r => r.roleGuid)
+    }
+    this.matDialogRef.close(userToAdd);
+  }
+
+  public get roles(): AdministrationUserRole[] {
+    return this.data.availableRoles as AdministrationUserRole[];
+  }
+
+  public get onlySelectedRoles(): AdministrationUserRole[] {
+    return this.chosenRoles;
+  }
+
+  public roleSelected(role: AdministrationUserRole): void {
+    const foundRoleIndex = this.chosenRoles.findIndex(r => r.roleGuid === role.roleGuid);
+    if(foundRoleIndex > -1 && role.isSelected) {
+      this.chosenRoles[foundRoleIndex] = role;
+    } else if (foundRoleIndex == -1 && role.isSelected) {
+      this.chosenRoles.push(role);
+    } else if (foundRoleIndex > -1 && !role.isSelected) {
+      this.chosenRoles.splice(foundRoleIndex, 1);
+    }
+  }
+
+  public get existingUsersEmails(): string[] {
+    return this.data.existingUsers.map(user => user.email);
+  }
+
+  public userSelected({value}:MatSelectChange): void {
+    this.selectedUserRoles = this.data.existingUsers.find(({email}) => email === value).roles;
+  }
+
+  public applyRoles(): void {
+    this.data.availableRoles = this.roles.map((role) => ({
+      ...role,
+      isSelected: this.selectedUserRoles.find(r => r.roleGuid === role.roleGuid)?.isSelected || false
+    })) as any
+
+    this.chosenRoles = (this.data.availableRoles as AdministrationUserRole[]).filter(r => r.isSelected);
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
similarity index 97%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
index a354fb9cc8..22c5043b3a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
@@ -12,7 +12,6 @@
               <p>Name:
                 <span *ngIf="!isUserEditing" class="header-text-inputs-name">{{user.name}}</span>
                 <input *ngIf="isUserEditing"
-                       [(ngModel)]="user.name"
                        class="header-text-inputs-editing-name"
                        type="text"
                        [value]="user.name"
@@ -22,7 +21,6 @@
                 <span *ngIf="!isUserEditing" class="header-text-inputs-phone">{{user.phone}}</span>
                 <input
                   *ngIf="isUserEditing"
-                  [(ngModel)]="user.phone"
                   class="header-text-inputs-editing-phone"
                   type="text"
                   [value]="user.phone"
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.scss
similarity index 100%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.scss
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.scss
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
similarity index 98%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
index 91ddbbce40..17e7bfdc6f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/AdministrationUser/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
@@ -5,7 +5,7 @@ import {
   Input, OnInit, Output
 } from "@angular/core";
 import {AdministrationUser} from "../../interfaces/administrationUser";
-import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
+import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
 import {cloneDeep} from 'lodash';
 import {MatDialog} from "@angular/material/dialog";
 import {ComparePermissionsComponent} from "../comparePermissions/comparePermissions.component";
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
index 19765a52a5..ea6ebe238c 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
@@ -2,7 +2,7 @@ import {Component, Inject, OnInit} from "@angular/core";
 import {MAT_DIALOG_DATA} from "@angular/material/dialog";
 import {AdministrationUser} from "../../interfaces/administrationUser";
 import {MatSelectChange} from "@angular/material/select";
-import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
+import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
 
 @Component({
   selector: 'app-compare-permissions',
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
index dd4dda0c9c..c17f55857e 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
@@ -1,5 +1,4 @@
 import {ChangeDetectionStrategy, Component, Input, OnInit} from "@angular/core";
-import {testData} from "../../testData";
 import {AdministrationUser} from "../../interfaces/administrationUser";
 import {MatDialog} from "@angular/material/dialog";
 import {ComparePermissionsComponent} from "../comparePermissions/comparePermissions.component";
@@ -12,7 +11,7 @@ import {UsersAndPermissionsHttpServiceService} from "../../services/usersAndPerm
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ListAdministrationUsersComponent implements OnInit {
-  @Input() usersList: AdministrationUser[] = testData;
+  @Input() usersList: AdministrationUser[];
 
   constructor(private readonly matDialog: MatDialog,
               private readonly httpService: UsersAndPermissionsHttpServiceService) {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
index 352f6b027b..d953bb4176 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
@@ -1,13 +1,13 @@
 <div class="checkbox-container">
   <input class="inp-cbx" [disabled]="isDisabled" [id]="idRandomizer" type="checkbox"
-         (change)="onChange($event, role)" [checked]="role.isSelected"/>
+         (change)="onChange($event, role)" [checked]="role?.isSelected"/>
   <label [ngStyle]="{'justify-content': onlyCheckbox && 'center'}" class="cbx" [for]="idRandomizer">
     <span>
       <svg width="12px" height="10px">
         <use xlink:href="#check-4"></use>
       </svg>
     </span>
-    <span *ngIf="!onlyCheckbox">{{role.name}}</span></label>
+    <span *ngIf="!onlyCheckbox">{{role?.name}}</span></label>
   <svg class="inline-svg">
     <symbol id="check-4" viewbox="0 0 12 10">
       <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
index b7c76fcb26..2037abc03d 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
-import {AdministrationUserRole} from "../../interfaces/AdministrationUserRole";
+import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
 
 @Component({
   selector: 'app-permission-checkbox',
@@ -17,7 +17,9 @@ export class PermissionCheckboxComponent implements OnInit {
   public idRandomizer: string;
 
   ngOnInit(): void {
-    this.idRandomizer = this.role.roleGuid + Math.floor(Math.random() * 100000);
+    this.idRandomizer =
+      (this.role?.roleGuid || 'defaultGuid1994') +
+      Math.floor(Math.random() * 100000);
   }
 
   public onChange(changeEvent: Event, role: AdministrationUserRole): void {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/AdministrationUserRole.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/AdministrationUserRole.ts
deleted file mode 100644
index 7918b99f61..0000000000
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/AdministrationUserRole.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface AdministrationUserRole {
-  roleGuid: string;
-  name: string;
-  isSelected: boolean;
-}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser-request.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser-request.ts
deleted file mode 100644
index ac9d9c04e1..0000000000
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser-request.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface AddAdministrationUserRequest {
-  email: string;
-  name: string;
-  phone: string;
-  roles: string[];
-}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
new file mode 100644
index 0000000000..2771b66f20
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
@@ -0,0 +1,14 @@
+import {AdministrationUserRole} from "./administrationUserRole";
+import {AdministrationUser} from "./administrationUser";
+
+export interface AddAdministrationUserRequest {
+  email: string;
+  name: string;
+  phone: string;
+  roles: string[];
+}
+
+export interface AddAdministrationUserModal {
+  availableRoles: Partial<AdministrationUserRole>,
+  existingUsers: AdministrationUser[]
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
index 0374503f63..03f2bf54ec 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
@@ -1,4 +1,4 @@
-import {AdministrationUserRole} from "./AdministrationUserRole";
+import {AdministrationUserRole} from "./administrationUserRole";
 
 export interface AdministrationUser {
   email: string;
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRoles-response.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
similarity index 58%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRoles-response.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
index e41bfa7e3b..6f1b392b83 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRoles-response.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
@@ -1,5 +1,11 @@
 import {AdministrationUser} from "./administrationUser";
 
+export interface AdministrationUserRole {
+  roleGuid: string;
+  name: string;
+  isSelected: boolean;
+}
+
 export interface AdministrationUserRolesResponse {
   userRoles: AdministrationUser[];
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser-request.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser.ts
similarity index 100%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser-request.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser.ts
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
index 877ebfab85..c86b7f36e7 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
@@ -3,6 +3,7 @@ import {Observable} from "rxjs";
 import {AdministrationUser} from "../interfaces/administrationUser";
 import {DSMService} from "../../services/dsm.service";
 import {SessionService} from "../../services/session.service";
+import {AddAdministrationUserRequest} from "../interfaces/addAdministrationUser";
 
 @Injectable()
 export class UsersAndPermissionsHttpServiceService {
@@ -11,8 +12,12 @@ export class UsersAndPermissionsHttpServiceService {
               private readonly sessionService: SessionService) {
   }
 
-  public get usersAndPermissions(): Observable<AdministrationUser[]> {
-    return this.dsmService.getUsersAndPermissions(this.realm);
+  public get users(): Observable<AdministrationUser[]> {
+    return this.dsmService.getUsers(this.realm);
+  }
+
+  public addUser(user: AddAdministrationUserRequest): Observable<AdministrationUser[]> {
+    return this.dsmService.addUser(this.realm, user);
   }
 
   private get realm(): string {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
index a7ae239180..8b1bebfe90 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
@@ -95,3 +95,26 @@ export const testData: AdministrationUser[] = [
     ]
   }
 ]
+
+export const availableRoles = [
+  {
+    roleGuid: 'survey_creation',
+    name: 'Create surveys',
+  },
+  {
+    roleGuid: 'mercury_order_sequencing',
+    name: 'Mercury order sequencing',
+  },
+  {
+    roleGuid: 'view_shared_learnings',
+    name: 'View shared learnings',
+  },
+  {
+    roleGuid: 'upload_ror_file',
+    name: 'Upload return of results file',
+  },
+  {
+    roleGuid: 'upload_onc_history',
+    name: 'Upload onc history',
+  }
+]
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
index a2e1911dd5..b76633679f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
@@ -1,4 +1,5 @@
 <section class="title">
   <h1>Users And Permissions</h1>
 </section>
-<app-list-users></app-list-users>
+<button mat-raised-button color="primary" (click)="onAddUser()">+ Add User</button>
+<app-list-users [usersList]="usersList"></app-list-users>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index ab59f576ab..67ffe12a1f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -1,5 +1,10 @@
-import {ChangeDetectionStrategy, Component} from "@angular/core";
+import {ChangeDetectionStrategy, Component, OnDestroy} from "@angular/core";
 import {UsersAndPermissionsHttpServiceService} from "./services/usersAndPermissionsHttpService.service";
+import {availableRoles, testData} from "./testData";
+import {MatDialog} from "@angular/material/dialog";
+import {AddAdministrationUserComponent} from "./components/addAdministrationUser/addAdministrationUser.component";
+import {Subject, takeUntil} from "rxjs";
+import {take} from "rxjs/operators";
 
 @Component({
   selector: 'app-users-and-permissions',
@@ -8,4 +13,31 @@ import {UsersAndPermissionsHttpServiceService} from "./services/usersAndPermissi
   providers: [UsersAndPermissionsHttpServiceService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class UsersAndPermissionsComponent {}
+export class UsersAndPermissionsComponent implements OnDestroy {
+  public usersList = testData;
+  private readonly subscriptionSubject = new Subject<void>();
+
+  constructor(
+    private readonly httpService: UsersAndPermissionsHttpServiceService,
+    private readonly matDialog: MatDialog) {}
+
+  ngOnDestroy(): void {
+    this.subscriptionSubject.next();
+    this.subscriptionSubject.complete();
+  }
+
+  public onAddUser(): void {
+    const activeUserAddDialog = this.matDialog.open(AddAdministrationUserComponent, {data:{
+      availableRoles: availableRoles,
+      existingUsers: testData
+      }});
+
+    activeUserAddDialog.afterClosed()
+      .pipe(
+        take(1),
+        takeUntil(this.subscriptionSubject)
+      )
+      .subscribe(user => console.log(user, 'AFTER_CLOSE'))
+  }
+
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
index 4de25bd15f..a2e99c32d5 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
@@ -10,14 +10,17 @@ import {MatCheckboxModule} from "@angular/material/checkbox";
 import {PermissionCheckboxComponent} from "./components/permissionCheckbox/permissionCheckbox.component";
 import {MatDividerModule} from "@angular/material/divider";
 import {MatTooltipModule} from "@angular/material/tooltip";
-import {AdministrationUserComponent} from "./components/AdministrationUser/administrationUser.component";
+import {AdministrationUserComponent} from "./components/administrationUser/administrationUser.component";
 import {MatInputModule} from "@angular/material/input";
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 import {ComparePermissionsComponent} from "./components/comparePermissions/comparePermissions.component";
 import {MatDialogModule} from "@angular/material/dialog";
 import {MatTableModule} from "@angular/material/table";
 import {MatSelectModule} from "@angular/material/select";
+import {AddAdministrationUserComponent} from "./components/addAdministrationUser/addAdministrationUser.component";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatAutocompleteModule} from "@angular/material/autocomplete";
 
 const routes: Routes = [
   {path: '', component: UsersAndPermissionsComponent}
@@ -29,11 +32,14 @@ const routes: Routes = [
     ListAdministrationUsersComponent,
     PermissionCheckboxComponent,
     AdministrationUserComponent,
-    ComparePermissionsComponent
+    ComparePermissionsComponent,
+    AddAdministrationUserComponent
   ],
   imports: [
     CommonModule,
     RouterModule.forChild(routes),
+    ReactiveFormsModule,
+    MatFormFieldModule,
     MatExpansionModule,
     MatIconModule,
     MatButtonModule,
@@ -45,7 +51,9 @@ const routes: Routes = [
     MatProgressSpinnerModule,
     MatDialogModule,
     MatTableModule,
-    MatSelectModule
+    MatSelectModule,
+    ReactiveFormsModule,
+    MatAutocompleteModule
   ],
 })
 export class UsersAndPermissionsModule {}

From cd059694bbe13ddaefd7f64904d3d76dfbe7ee63 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Tue, 18 Jul 2023 10:37:44 +0400
Subject: [PATCH 11/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 user is adding

---
 .../usersAndPermissions.component.html        |  2 +-
 .../usersAndPermissions.component.scss        |  4 ++++
 .../usersAndPermissions.component.ts          | 21 ++++++++++++++++---
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
index b76633679f..16930ca745 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
@@ -1,5 +1,5 @@
 <section class="title">
   <h1>Users And Permissions</h1>
 </section>
-<button mat-raised-button color="primary" (click)="onAddUser()">+ Add User</button>
+<button color="accent" class="addUserButton" mat-raised-button color="primary" (click)="onAddUser()">+ Add User</button>
 <app-list-users [usersList]="usersList"></app-list-users>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
index 12e99a59f8..f95f3a8231 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
@@ -2,3 +2,7 @@
   text-align: center;
   margin-bottom: 2em;
 }
+
+.addUserButton {
+  margin-bottom: 1.5em;
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index 67ffe12a1f..eb8f219c80 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, OnDestroy} from "@angular/core";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy} from "@angular/core";
 import {UsersAndPermissionsHttpServiceService} from "./services/usersAndPermissionsHttpService.service";
 import {availableRoles, testData} from "./testData";
 import {MatDialog} from "@angular/material/dialog";
@@ -19,7 +19,8 @@ export class UsersAndPermissionsComponent implements OnDestroy {
 
   constructor(
     private readonly httpService: UsersAndPermissionsHttpServiceService,
-    private readonly matDialog: MatDialog) {}
+    private readonly matDialog: MatDialog,
+    private readonly cdr: ChangeDetectorRef) {}
 
   ngOnDestroy(): void {
     this.subscriptionSubject.next();
@@ -37,7 +38,21 @@ export class UsersAndPermissionsComponent implements OnDestroy {
         take(1),
         takeUntil(this.subscriptionSubject)
       )
-      .subscribe(user => console.log(user, 'AFTER_CLOSE'))
+      .subscribe(user => {
+        if (user) {
+          this.usersList = [...this.usersList,
+            {...user, roles: [...availableRoles.map(r => {
+                return {
+                  ...r,
+                  isSelected: !!user.roles.find(rr => rr === r.roleGuid)
+                }
+              })]}
+          ]
+        }
+        this.cdr.markForCheck();
+        console.log(this.usersList, 'UPDATED_USER_LIST')
+        console.log(user, 'AFTER_CLOSE')
+      })
   }
 
 }

From dccdb86e6a8132ad752615f182f6ece64592970f Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Tue, 18 Jul 2023 12:05:21 +0400
Subject: [PATCH 12/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 safety v1

---
 .../addAdministrationUser.component.html           |  2 +-
 .../addAdministrationUser.component.ts             | 14 ++++++++++----
 .../administrationUser.component.html              |  1 +
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
index 27dd3e6d10..482a3a2980 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
@@ -28,7 +28,7 @@ <h4 class="addUserForm-permissions-title">Permissions</h4>
   <section class="addUserForm-buttons">
     <button class="addUserForm-buttons-add"
             color="accent"
-            [disabled]="addUserForm.invalid || !(!!onlySelectedRoles?.length)"
+            [disabled]="!allowAddingUser"
             (click)="addUser()" mat-raised-button>Add User</button>
   </section>
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
index 91cb671a9a..59bbbe9d3a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
@@ -28,11 +28,13 @@ export class AddAdministrationUserComponent {
   ) {}
 
   public addUser(): void {
-    const userToAdd: AddAdministrationUserRequest = {
-      ...this.addUserForm.getRawValue(),
-      roles: this.chosenRoles.map(r => r.roleGuid)
+    if (this.allowAddingUser) {
+      const userToAdd: AddAdministrationUserRequest = {
+        ...this.addUserForm.getRawValue(),
+        roles: this.chosenRoles.map(r => r.roleGuid)
+      }
+      this.matDialogRef.close(userToAdd);
     }
-    this.matDialogRef.close(userToAdd);
   }
 
   public get roles(): AdministrationUserRole[] {
@@ -43,6 +45,10 @@ export class AddAdministrationUserComponent {
     return this.chosenRoles;
   }
 
+  public get allowAddingUser(): boolean {
+    return this.addUserForm.valid && !!this.onlySelectedRoles?.length;
+  }
+
   public roleSelected(role: AdministrationUserRole): void {
     const foundRoleIndex = this.chosenRoles.findIndex(r => r.roleGuid === role.roleGuid);
     if(foundRoleIndex > -1 && role.isSelected) {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
index 22c5043b3a..690b2408a8 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
@@ -79,6 +79,7 @@ <h3>Permissions</h3>
         <ng-container *ngIf="user.roles.length">
           <app-permission-checkbox
             (checkboxChanged)="onCheckboxChanged($event)"
+            [isDisabled]="isEditPermissionsLoading"
             *ngFor="let role of user.roles" [role]="role">
           </app-permission-checkbox>
         </ng-container>

From c3d773bd1671d954f0bdd5115056fcec3b440f4f Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Tue, 18 Jul 2023 12:27:15 +0400
Subject: [PATCH 13/29] DSM-PEPPER-948-download-of-Onc-History-upload-template
 more improvements

---
 .../administrationUser.component.html         |  7 +++--
 .../administrationUser.component.ts           | 26 +++++++++++++++----
 .../comparePermissions.component.html         |  3 +++
 .../comparePermissions.component.scss         | 15 ++++++++++-
 4 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
index 690b2408a8..bf2be67564 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
@@ -8,10 +8,11 @@
       <mat-panel-description>
         <main class="header">
           <section class="header-text">
-            <div class="header-text-inputs">
+            <form [formGroup]="editUserForm" class="header-text-inputs">
               <p>Name:
                 <span *ngIf="!isUserEditing" class="header-text-inputs-name">{{user.name}}</span>
                 <input *ngIf="isUserEditing"
+                       formControlName="name"
                        class="header-text-inputs-editing-name"
                        type="text"
                        [value]="user.name"
@@ -21,18 +22,20 @@
                 <span *ngIf="!isUserEditing" class="header-text-inputs-phone">{{user.phone}}</span>
                 <input
                   *ngIf="isUserEditing"
+                  formControlName="phone"
                   class="header-text-inputs-editing-phone"
                   type="text"
                   [value]="user.phone"
                   (click)="$event.stopPropagation()"/>
               </p>
-            </div>
+            </form>
             <button
               color="primary"
               *ngIf="isUserEditing"
               class="header-text-saveButton"
               matTooltip="Update user"
               mat-icon-button
+              [disabled]="editUserForm.invalid"
               (click)="saveEditedUser($event)">
               <ng-container *ngIf="!isEditUserLoading; else spinnerTemplate">
                 <mat-icon>save</mat-icon>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
index 17e7bfdc6f..7e366b9fa4 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
@@ -7,9 +7,8 @@ import {
 import {AdministrationUser} from "../../interfaces/administrationUser";
 import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
 import {cloneDeep} from 'lodash';
-import {MatDialog} from "@angular/material/dialog";
-import {ComparePermissionsComponent} from "../comparePermissions/comparePermissions.component";
 import {RoleService} from "../../../services/role.service";
+import {FormBuilder, FormGroup} from "@angular/forms";
 
 @Component({
   selector: 'app-administration-user',
@@ -17,7 +16,9 @@ import {RoleService} from "../../../services/role.service";
   styleUrls: ['administrationUser.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AdministrationUserComponent {
+export class AdministrationUserComponent implements OnInit {
+  public editUserForm: FormGroup;
+
   public user: AdministrationUser;
   private rolesBeforeChange: AdministrationUserRole[];
 
@@ -34,9 +35,19 @@ export class AdministrationUserComponent {
   };
 
   @Output() comparingUser = new EventEmitter<AdministrationUser>();
+  @Output() editingUser = new EventEmitter<AdministrationUser>();
+  @Output() deletingUser = new EventEmitter<AdministrationUser>();
 
   constructor(private readonly cdr: ChangeDetectorRef,
-              private readonly roleService: RoleService) {
+              private readonly roleService: RoleService,
+              private readonly formBuilder: FormBuilder) {
+  }
+
+  ngOnInit(): void {
+    this.editUserForm = this.formBuilder.group({
+      name: [this.user.name],
+      phone: [this.user.phone]
+    })
   }
 
   /* Event Handlers */
@@ -56,11 +67,16 @@ export class AdministrationUserComponent {
   public saveEditedUser(event: Event): void {
     event.stopPropagation();
     this.isEditUserLoading = true;
+    this.editUserForm.disable();
+
 
     console.log(this.user, 'SAVED_EDITED')
 
     // mocking
     setTimeout(() => {
+      this.editUserForm.enable();
+      this.user.name = this.editUserForm.get('name').value;
+      this.user.phone = this.editUserForm.get('phone').value;
       this.cdr.markForCheck()
       this.isEditUserLoading = false
     }, 3000)
@@ -74,7 +90,7 @@ export class AdministrationUserComponent {
 
     // mocking
     setTimeout(() => {
-      this.cdr.markForCheck()
+      this.cdr.markForCheck();
       this.isDeleteUserLoading = false
     }, 3000)
   }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
index a67d2e7987..a6d87614a4 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
@@ -1,4 +1,7 @@
 <main class="compare-container">
+  <section class="compare-container-title">
+    <h3>Compare 2 Users</h3>
+  </section>
   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
     <!-- Position Column -->
     <ng-container matColumnDef="name">
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.scss
index b588ac55a2..3339f6628c 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.scss
@@ -1,6 +1,19 @@
 .compare-container {
-  display: flex;
+
+  &-title {
+    font-family: Montserrat-SemiBold, sans-serif;
+    text-align: center;
+    margin: 1em 0;
+    h3 {
+      margin: 0;
+    }
+  }
+
   table {
     width: 100%;
   }
+
+  th.mat-header-cell {
+    text-align: center!important;
+  }
 }

From 3c94019d72d3366ff94662e0b4f9dd10be08c6eb Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Tue, 25 Jul 2023 15:30:37 +0400
Subject: [PATCH 14/29] DSM-PEPPER-963-user-administration-services disabled
 checkbox

---
 .../permissionCheckbox.component.html                  |  7 +++++--
 .../permissionCheckbox.component.scss                  | 10 ++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
index d953bb4176..c60d7f12fb 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
@@ -1,7 +1,10 @@
 <div class="checkbox-container">
-  <input class="inp-cbx" [disabled]="isDisabled" [id]="idRandomizer" type="checkbox"
+  <input class="inp-cbx"
+         [disabled]="isDisabled" [id]="idRandomizer" type="checkbox"
          (change)="onChange($event, role)" [checked]="role?.isSelected"/>
-  <label [ngStyle]="{'justify-content': onlyCheckbox && 'center'}" class="cbx" [for]="idRandomizer">
+  <label [ngClass]="{'labelDisabled': isDisabled}"
+         [ngStyle]="{'justify-content': onlyCheckbox && 'center'}"
+         class="cbx" [for]="idRandomizer">
     <span>
       <svg width="12px" height="10px">
         <use xlink:href="#check-4"></use>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.scss
index 427617419b..4082b5c0b6 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.scss
@@ -23,6 +23,11 @@
       background: rgba(0, 119, 255, 0.06);
     }
 
+    &.labelDisabled:hover {
+      background: none;
+      cursor: default;
+    }
+
     span {
       float: left;
       vertical-align: middle;
@@ -83,6 +88,11 @@
       animation: wave-4 0.4s ease;
     }
 
+    &:checked:disabled + .cbx span:first-child {
+      background: rgba(102, 187, 106, 0.57);
+      border-color: rgba(102, 187, 106, 0.53);
+    }
+
     &:checked + .cbx span:first-child svg {
       stroke-dashoffset: 0;
     }

From ca36b002f0f2bbe30e7b50645424b3c3366b7b6e Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 27 Jul 2023 12:28:37 +0400
Subject: [PATCH 15/29] DSM-PEPPER-963-user-administration-services backend
 integration v1

---
 .../src/app/services/dsm.service.ts           |   9 ++
 .../addAdministrationUser.component.html      |   2 +-
 .../addAdministrationUser.component.scss      |   2 +
 .../addAdministrationUser.component.ts        |  34 +++--
 .../administrationUser.component.ts           |  14 +-
 .../comparePermissions.component.html         |   8 +-
 .../comparePermissions.component.ts           |  22 ++--
 .../listAdministrationUsers.component.ts      |   9 +-
 .../permissionCheckbox.component.html         |   4 +-
 .../permissionCheckbox.component.ts           |   4 +-
 .../interfaces/addAdministrationUser.ts       |   2 +-
 .../interfaces/administrationUser.ts          |   4 +
 .../interfaces/administrationUserRole.ts      |  15 ++-
 .../usersAndPermissionsHttpService.service.ts |   9 +-
 .../src/app/usersAndPermissions/testData.ts   | 120 ------------------
 .../usersAndPermissions.component.html        |   2 +-
 .../usersAndPermissions.component.ts          |  77 +++++++----
 17 files changed, 129 insertions(+), 208 deletions(-)
 delete mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
index 6974aab337..3ba1a8fc1f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
@@ -477,6 +477,15 @@ export class DSMService {
     );
   }
 
+  public availableRoles(realm: string): Observable<any> {
+    const url = this.baseUrl + DSMService.UI + 'admin/studyRole';
+    const map: { name: string; value: any }[] = [];
+    map.push({name: DSMService.REALM, value: realm});
+    return this.http.get(url, this.buildQueryHeader(map)).pipe(
+      catchError(this.handleError)
+    );
+  }
+
   public getMedicalRecord(participantId: string, institutionId: string): Observable<any> {
     const url = this.baseUrl + DSMService.UI + 'participant/' + participantId + '/institution/' + institutionId;
     return this.http.get(url, this.buildHeader()).pipe(
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
index 482a3a2980..a4ae349f20 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
@@ -20,7 +20,7 @@ <h3>Create User</h3>
   <section class="addUserForm-permissions">
     <h4 class="addUserForm-permissions-title">Permissions</h4>
     <app-permission-checkbox
-      *ngFor="let role of roles"
+      *ngFor="let role of availableRoles"
       (checkboxChanged)="roleSelected($event)"
       [role]="role">
     </app-permission-checkbox>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss
index 99ad0553b1..8cf871b7f1 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss
@@ -9,6 +9,8 @@
   }
 
   &-permissions {
+    overflow: auto;
+    max-height: 500px;
     &-title {
       text-align: center;
     }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
index 59bbbe9d3a..ae942305d1 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
@@ -4,6 +4,7 @@ import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
 import {AddAdministrationUserModal, AddAdministrationUserRequest} from "../../interfaces/addAdministrationUser";
 import {MatSelectChange} from "@angular/material/select";
+import {cloneDeep} from 'lodash';
 
 @Component({
   selector: 'app-addAdministrationUser',
@@ -12,8 +13,8 @@ import {MatSelectChange} from "@angular/material/select";
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AddAdministrationUserComponent {
+  public availableRoles = cloneDeep(this.data.availableRoles).map(role => ({...role, hasRole: false}));
   public selectedUserRoles: AdministrationUserRole[];
-  private chosenRoles: AdministrationUserRole[] = [];
 
   public readonly addUserForm = this.formBuilder.group({
     email: [null, Validators.required],
@@ -21,6 +22,8 @@ export class AddAdministrationUserComponent {
     phone: [null, Validators.required],
   })
 
+  private onlySelectedRoles: AdministrationUserRole[] = [];
+
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: AddAdministrationUserModal,
     private readonly matDialogRef: MatDialogRef<AddAdministrationUserComponent>,
@@ -31,32 +34,25 @@ export class AddAdministrationUserComponent {
     if (this.allowAddingUser) {
       const userToAdd: AddAdministrationUserRequest = {
         ...this.addUserForm.getRawValue(),
-        roles: this.chosenRoles.map(r => r.roleGuid)
+        roles: this.onlySelectedRoles.map(r => r.name)
       }
       this.matDialogRef.close(userToAdd);
     }
   }
 
-  public get roles(): AdministrationUserRole[] {
-    return this.data.availableRoles as AdministrationUserRole[];
-  }
-
-  public get onlySelectedRoles(): AdministrationUserRole[] {
-    return this.chosenRoles;
-  }
 
   public get allowAddingUser(): boolean {
     return this.addUserForm.valid && !!this.onlySelectedRoles?.length;
   }
 
   public roleSelected(role: AdministrationUserRole): void {
-    const foundRoleIndex = this.chosenRoles.findIndex(r => r.roleGuid === role.roleGuid);
-    if(foundRoleIndex > -1 && role.isSelected) {
-      this.chosenRoles[foundRoleIndex] = role;
-    } else if (foundRoleIndex == -1 && role.isSelected) {
-      this.chosenRoles.push(role);
-    } else if (foundRoleIndex > -1 && !role.isSelected) {
-      this.chosenRoles.splice(foundRoleIndex, 1);
+    const foundRoleIndex = this.onlySelectedRoles.findIndex(r => r.name === role.name);
+    if(foundRoleIndex > -1 && role.hasRole) {
+      this.onlySelectedRoles[foundRoleIndex] = role;
+    } else if (foundRoleIndex == -1 && role.hasRole) {
+      this.onlySelectedRoles.push(role);
+    } else if (foundRoleIndex > -1 && !role.hasRole) {
+      this.onlySelectedRoles.splice(foundRoleIndex, 1);
     }
   }
 
@@ -69,11 +65,11 @@ export class AddAdministrationUserComponent {
   }
 
   public applyRoles(): void {
-    this.data.availableRoles = this.roles.map((role) => ({
+    this.availableRoles = this.availableRoles.map((role: AdministrationUserRole) => ({
       ...role,
-      isSelected: this.selectedUserRoles.find(r => r.roleGuid === role.roleGuid)?.isSelected || false
+      hasRole: this.selectedUserRoles.find(r => r.name === role.name)?.hasRole || false
     })) as any
 
-    this.chosenRoles = (this.data.availableRoles as AdministrationUserRole[]).filter(r => r.isSelected);
+    this.onlySelectedRoles = this.availableRoles.filter(r => r.hasRole);
   }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
index 7e366b9fa4..3e604976a2 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
@@ -97,12 +97,12 @@ export class AdministrationUserComponent implements OnInit {
 
   public onCheckboxChanged(changedRole: AdministrationUserRole): void {
     this.user.roles = this.user.roles.map((role) =>
-      changedRole.roleGuid === role.roleGuid ?
-        {...role, isSelected: changedRole.isSelected} :
+      changedRole.name === role.name ?
+        {...role, hasRole: changedRole.hasRole} :
         role
     )
 
-    this.changeActionButtonsState(!this.permissionsChanged);
+    this.changeActionButtonsState(!this.hasPermissionsChanged);
   }
 
   public saveChanges(): void {
@@ -125,7 +125,7 @@ export class AdministrationUserComponent implements OnInit {
   /* Template methods */
 
   public get doNotAllowCollapse(): boolean {
-    return this.permissionsChanged || this.disableUserActionButtons;
+    return this.hasPermissionsChanged || this.disableUserActionButtons;
   }
 
   public get disableUserActionButtons(): boolean {
@@ -139,9 +139,9 @@ export class AdministrationUserComponent implements OnInit {
 
   /* Helper functions */
 
-  private get permissionsChanged(): boolean {
-    return !this.rolesBeforeChange.every(({isSelected}, index) =>
-      isSelected === this.user.roles[index].isSelected)
+  private get hasPermissionsChanged(): boolean {
+    return !this.rolesBeforeChange.every(({hasRole}, index) =>
+      hasRole === this.user.roles[index].hasRole)
   }
 
   private changeActionButtonsState(isDisabled: boolean): void {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
index a6d87614a4..9cd1a3e217 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.html
@@ -2,17 +2,17 @@
   <section class="compare-container-title">
     <h3>Compare 2 Users</h3>
   </section>
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <table mat-table [dataSource]="roles" class="mat-elevation-z8">
     <!-- Position Column -->
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef> Role</th>
-      <td mat-cell *matCellDef="let role"> {{role.name}} </td>
+      <td mat-cell *matCellDef="let role"> {{role.displayText}} </td>
     </ng-container>
 
     <ng-container [matColumnDef]="firstUser.email">
       <th mat-header-cell *matHeaderCellDef> {{firstUser.email}} </th>
       <td mat-cell *matCellDef="let role">
-        <ng-container *ngIf="findRoleForFirstUser(role.roleGuid) as foundRole">
+        <ng-container *ngIf="findRoleForFirstUser(role.name) as foundRole">
           <app-permission-checkbox [onlyCheckbox]="true"
                                    [isDisabled]="true"
                                    [role]="foundRole">
@@ -27,7 +27,7 @@ <h3>Compare 2 Users</h3>
         </ng-container>
       </th>
       <td mat-cell *matCellDef="let role">
-        <ng-container *ngIf="displayedColumns[2] !== 'selectUser' && findRoleForSecondUser(role.roleGuid) as foundRole">
+        <ng-container *ngIf="displayedColumns[2] !== 'selectUser' && findRoleForSecondUser(role.name) as foundRole">
           <app-permission-checkbox [onlyCheckbox]="true"
                                    [isDisabled]="true"
                                    [role]="foundRole">
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
index ea6ebe238c..172fb4e1a4 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
@@ -11,7 +11,7 @@ import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
 })
 export class ComparePermissionsComponent implements OnInit {
   public displayedColumns = ['name', this.firstUser.email, 'selectUser'];
-  public dataSource = []
+  public roles = []
   public secondUser: AdministrationUser;
 
   constructor(@Inject(MAT_DIALOG_DATA)
@@ -19,9 +19,9 @@ export class ComparePermissionsComponent implements OnInit {
 
   ngOnInit() {
     console.log(this.data, 'COMPARE_DATA')
-    this.dataSource = [...this.firstUser.roles];
+    this.roles = [...this.firstUser.roles];
 
-    console.log(this.dataSource, 'DATA_SOURCE')
+    console.log(this.roles, 'DATA_SOURCE')
   }
 
   public userSelected({value: selectedUserEmail}: MatSelectChange): void {
@@ -29,16 +29,16 @@ export class ComparePermissionsComponent implements OnInit {
     // this.dataSource.push(...foundUser.roles);
     this.displayedColumns = ['name', this.firstUser.email];
     this.displayedColumns.push(foundUser.email);
-    this.dataSource = [...this.firstUser.roles];
+    this.roles = this.firstUser.roles;
 
     for(let role of foundUser.roles) {
-      if(this.dataSource.findIndex(r => r.roleGuid === role.roleGuid) === -1) {
-        this.dataSource.push(role)
+      if(this.roles.findIndex(role => role.name === role.name) === -1) {
+        this.roles.push(role)
       }
     }
 
     this.secondUser = foundUser;
-    console.log(this.dataSource, 'AFTER_CHANGE')
+    console.log(this.roles, 'AFTER_CHANGE')
   }
 
   public get firstUser(): AdministrationUser {
@@ -50,12 +50,12 @@ export class ComparePermissionsComponent implements OnInit {
       .map((user) => user.email);
   }
 
-  public findRoleForFirstUser(roleGuid: string): AdministrationUserRole {
-    return this.firstUser.roles.find(role => role.roleGuid === roleGuid);
+  public findRoleForFirstUser(roleName: string): AdministrationUserRole {
+    return this.firstUser.roles.find(role => role.name === roleName);
   }
 
-  public findRoleForSecondUser(roleGuid: string): AdministrationUserRole {
-    return this.secondUser.roles.find(role => role.roleGuid === roleGuid);
+  public findRoleForSecondUser(roleName: string): AdministrationUserRole {
+    return this.secondUser.roles.find(role => role.name === roleName);
   }
 
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
index c17f55857e..c42371283f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
@@ -10,15 +10,10 @@ import {UsersAndPermissionsHttpServiceService} from "../../services/usersAndPerm
   styleUrls: ['listAdministrationUsers.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ListAdministrationUsersComponent implements OnInit {
+export class ListAdministrationUsersComponent {
   @Input() usersList: AdministrationUser[];
 
-  constructor(private readonly matDialog: MatDialog,
-              private readonly httpService: UsersAndPermissionsHttpServiceService) {
-  }
-
-  ngOnInit() {
-    // this.httpService.usersAndPermissions.subscribe(data => console.log(data, 'HTTP-RESPONSE'))
+  constructor(private readonly matDialog: MatDialog) {
   }
 
   public trackBy(index: number, {name, phone, email}: AdministrationUser): any {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
index c60d7f12fb..2ca058c328 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.html
@@ -1,7 +1,7 @@
 <div class="checkbox-container">
   <input class="inp-cbx"
          [disabled]="isDisabled" [id]="idRandomizer" type="checkbox"
-         (change)="onChange($event, role)" [checked]="role?.isSelected"/>
+         (change)="onChange($event, role)" [checked]="role?.hasRole"/>
   <label [ngClass]="{'labelDisabled': isDisabled}"
          [ngStyle]="{'justify-content': onlyCheckbox && 'center'}"
          class="cbx" [for]="idRandomizer">
@@ -10,7 +10,7 @@
         <use xlink:href="#check-4"></use>
       </svg>
     </span>
-    <span *ngIf="!onlyCheckbox">{{role?.name}}</span></label>
+    <span *ngIf="!onlyCheckbox">{{role?.displayText}}</span></label>
   <svg class="inline-svg">
     <symbol id="check-4" viewbox="0 0 12 10">
       <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
index 2037abc03d..1e39833c18 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
@@ -18,12 +18,12 @@ export class PermissionCheckboxComponent implements OnInit {
 
   ngOnInit(): void {
     this.idRandomizer =
-      (this.role?.roleGuid || 'defaultGuid1994') +
+      (this.role?.name || 'defaultGuid1994') +
       Math.floor(Math.random() * 100000);
   }
 
   public onChange(changeEvent: Event, role: AdministrationUserRole): void {
     const {checked} = changeEvent.target as HTMLInputElement;
-    this.checkboxChanged.next({...role, isSelected: checked});
+    this.checkboxChanged.next({...role, hasRole: checked});
   }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
index 2771b66f20..f0eac91149 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
@@ -9,6 +9,6 @@ export interface AddAdministrationUserRequest {
 }
 
 export interface AddAdministrationUserModal {
-  availableRoles: Partial<AdministrationUserRole>,
+  availableRoles: Partial<AdministrationUserRole[]>,
   existingUsers: AdministrationUser[]
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
index 03f2bf54ec..92699117a1 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
@@ -6,3 +6,7 @@ export interface AdministrationUser {
   phone: string;
   roles: AdministrationUserRole[];
 }
+
+export interface AdministrationUsersResponse {
+  users: AdministrationUser[];
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
index 6f1b392b83..0c8e9038d9 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
@@ -1,11 +1,14 @@
-import {AdministrationUser} from "./administrationUser";
-
 export interface AdministrationUserRole {
-  roleGuid: string;
   name: string;
-  isSelected: boolean;
+  displayText: string;
+  hasRole: boolean;
+}
+
+export interface AvailableRole {
+  name: string;
+  displayText: string;
 }
 
-export interface AdministrationUserRolesResponse {
-  userRoles: AdministrationUser[];
+export interface AvailableStudyRolesResponse {
+  roles: AvailableRole[]
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
index c86b7f36e7..8eb2ad152a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
@@ -1,9 +1,10 @@
 import {Injectable} from "@angular/core";
 import {Observable} from "rxjs";
-import {AdministrationUser} from "../interfaces/administrationUser";
+import {AdministrationUser, AdministrationUsersResponse} from "../interfaces/administrationUser";
 import {DSMService} from "../../services/dsm.service";
 import {SessionService} from "../../services/session.service";
 import {AddAdministrationUserRequest} from "../interfaces/addAdministrationUser";
+import {AvailableStudyRolesResponse} from "../interfaces/administrationUserRole";
 
 @Injectable()
 export class UsersAndPermissionsHttpServiceService {
@@ -12,10 +13,14 @@ export class UsersAndPermissionsHttpServiceService {
               private readonly sessionService: SessionService) {
   }
 
-  public get users(): Observable<AdministrationUser[]> {
+  public get users(): Observable<AdministrationUsersResponse> {
     return this.dsmService.getUsers(this.realm);
   }
 
+  public get studyRoles(): Observable<AvailableStudyRolesResponse> {
+    return this.dsmService.availableRoles(this.realm);
+  }
+
   public addUser(user: AddAdministrationUserRequest): Observable<AdministrationUser[]> {
     return this.dsmService.addUser(this.realm, user);
   }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
deleted file mode 100644
index 8b1bebfe90..0000000000
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/testData.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import {AdministrationUser} from "./interfaces/administrationUser";
-
-export const testData: AdministrationUser[] = [
-  {
-    name: 'First User',
-    email: 'firstUser@gmail.com',
-    phone: '12-2313-31231',
-    roles: [
-      {
-        roleGuid: 'upload_onc_history',
-        name: 'Upload onc history',
-        isSelected: true
-      },
-      {
-        roleGuid: 'upload_ror_file',
-        name: 'Upload return of results file',
-        isSelected: true
-      },
-      {
-        roleGuid: 'view_shared_learnings',
-        name: 'View shared learnings',
-        isSelected: false
-      }
-    ]
-  },
-  {
-    name: 'Second User',
-    email: 'secondUser@gmail.com',
-    phone: '12-2313-31231',
-    roles: [
-      {
-        roleGuid: 'mercury_order_sequencing',
-        name: 'Mercury order sequencing',
-        isSelected: false
-      },
-      {
-        roleGuid: 'survey_creation',
-        name: 'Create surveys',
-        isSelected: false
-      }
-    ]
-  },
-  {
-    name: 'Third User',
-    email: 'thirdUser@gmail.com',
-    phone: '12-2313-31231',
-    roles: [
-      {
-        roleGuid: 'upload_ror_file',
-        name: 'Upload return of results file',
-        isSelected: true
-      },
-      {
-        roleGuid: 'view_shared_learnings',
-        name: 'View shared learnings',
-        isSelected: true
-      },
-      {
-        roleGuid: 'survey_creation',
-        name: 'Create surveys',
-        isSelected: false
-      }
-    ]
-  },
-  {
-    name: 'Giorgi Charkviani',
-    email: 'gcharkvi@broadinstitute.org',
-    phone: '12-31321-31231',
-    roles: [
-      {
-        roleGuid: 'upload_onc_history',
-        name: 'Upload onc history',
-        isSelected: false
-      },
-      {
-        roleGuid: 'upload_ror_file',
-        name: 'Upload return of results file',
-        isSelected: false
-      },
-      {
-        roleGuid: 'view_shared_learnings',
-        name: 'View shared learnings',
-        isSelected: false
-      },
-      {
-        roleGuid: 'mercury_order_sequencing',
-        name: 'Mercury order sequencing',
-        isSelected: true
-      },
-      {
-        roleGuid: 'survey_creation',
-        name: 'Create surveys',
-        isSelected: true
-      }
-    ]
-  }
-]
-
-export const availableRoles = [
-  {
-    roleGuid: 'survey_creation',
-    name: 'Create surveys',
-  },
-  {
-    roleGuid: 'mercury_order_sequencing',
-    name: 'Mercury order sequencing',
-  },
-  {
-    roleGuid: 'view_shared_learnings',
-    name: 'View shared learnings',
-  },
-  {
-    roleGuid: 'upload_ror_file',
-    name: 'Upload return of results file',
-  },
-  {
-    roleGuid: 'upload_onc_history',
-    name: 'Upload onc history',
-  }
-]
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
index 16930ca745..1adbf8a3f0 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
@@ -2,4 +2,4 @@
   <h1>Users And Permissions</h1>
 </section>
 <button color="accent" class="addUserButton" mat-raised-button color="primary" (click)="onAddUser()">+ Add User</button>
-<app-list-users [usersList]="usersList"></app-list-users>
+<app-list-users [usersList]="usersList$ | async"></app-list-users>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index eb8f219c80..79c2f0d262 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -1,10 +1,10 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy} from "@angular/core";
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from "@angular/core";
 import {UsersAndPermissionsHttpServiceService} from "./services/usersAndPermissionsHttpService.service";
-import {availableRoles, testData} from "./testData";
 import {MatDialog} from "@angular/material/dialog";
+import {BehaviorSubject, mergeMap, of, Subject, takeUntil, tap} from "rxjs";
+import {pluck, withLatestFrom} from "rxjs/operators";
 import {AddAdministrationUserComponent} from "./components/addAdministrationUser/addAdministrationUser.component";
-import {Subject, takeUntil} from "rxjs";
-import {take} from "rxjs/operators";
+import {AddAdministrationUserRequest} from "./interfaces/addAdministrationUser";
 
 @Component({
   selector: 'app-users-and-permissions',
@@ -13,14 +13,34 @@ import {take} from "rxjs/operators";
   providers: [UsersAndPermissionsHttpServiceService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class UsersAndPermissionsComponent implements OnDestroy {
-  public usersList = testData;
+export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
+  public usersList$ = new BehaviorSubject([]);
+  private availableRoles$ = new BehaviorSubject([]);
+
   private readonly subscriptionSubject = new Subject<void>();
 
+
   constructor(
     private readonly httpService: UsersAndPermissionsHttpServiceService,
-    private readonly matDialog: MatDialog,
-    private readonly cdr: ChangeDetectorRef) {}
+    private readonly matDialog: MatDialog) {
+  }
+
+  ngOnInit() {
+    this.httpService.users.pipe(
+      pluck('users'),
+      withLatestFrom(
+        this.httpService.studyRoles
+        .pipe(pluck('roles'), takeUntil(this.subscriptionSubject))
+      ),
+      takeUntil(this.subscriptionSubject),
+      tap(([users, availableRoles]) => {
+        this.usersList$.next(users);
+        this.availableRoles$.next(availableRoles);
+
+        console.log(users, availableRoles, 'USERS & AVAILABLE_ROLES')
+      })
+    ).subscribe();
+  }
 
   ngOnDestroy(): void {
     this.subscriptionSubject.next();
@@ -29,29 +49,36 @@ export class UsersAndPermissionsComponent implements OnDestroy {
 
   public onAddUser(): void {
     const activeUserAddDialog = this.matDialog.open(AddAdministrationUserComponent, {data:{
-      availableRoles: availableRoles,
-      existingUsers: testData
-      }});
+      availableRoles: this.availableRoles$.getValue(),
+      existingUsers: this.usersList$.getValue()
+      }, height: '95%'});
+
+    let newUser: AddAdministrationUserRequest;
 
     activeUserAddDialog.afterClosed()
       .pipe(
-        take(1),
+        tap((user: AddAdministrationUserRequest) => newUser = user),
+        mergeMap((user: AddAdministrationUserRequest) =>
+          user ? this.httpService.addUser(user) : of(user)
+        ),
         takeUntil(this.subscriptionSubject)
       )
-      .subscribe(user => {
-        if (user) {
-          this.usersList = [...this.usersList,
-            {...user, roles: [...availableRoles.map(r => {
-                return {
-                  ...r,
-                  isSelected: !!user.roles.find(rr => rr === r.roleGuid)
-                }
-              })]}
-          ]
+      .subscribe(_ => {
+        if (newUser) {
+          this.usersList$.next(
+            [...this.usersList$.getValue(),
+              {
+                ...newUser,
+                roles: [
+                  ...this.availableRoles$.getValue()
+                    .map(role => ({
+                      ...role,
+                      hasRole: !!newUser.roles.find(r => r === role.name)
+                    }))
+                ]
+              }]
+          );
         }
-        this.cdr.markForCheck();
-        console.log(this.usersList, 'UPDATED_USER_LIST')
-        console.log(user, 'AFTER_CLOSE')
       })
   }
 

From 8bd9c85f2641d11a8a0d25f0462f81dbd7f7d2b3 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 27 Jul 2023 13:03:34 +0400
Subject: [PATCH 16/29] DSM-PEPPER-963-user-administration-services backend
 integration v2

---
 .../listAdministrationUsers.component.html    | 17 ++--
 .../listAdministrationUsers.component.scss    | 13 +++
 .../usersAndPermissionsState.service.ts       | 77 ++++++++++++++++++
 .../usersAndPermissions.component.html        | 14 +++-
 .../usersAndPermissions.component.scss        |  6 ++
 .../usersAndPermissions.component.ts          | 80 ++++++-------------
 6 files changed, 145 insertions(+), 62 deletions(-)
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
index 6aacb42567..433688e198 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
@@ -1,7 +1,14 @@
-<ng-container *ngFor="let user of usersList; trackBy: trackBy">
-  <app-administration-user
-    [user]="user"
-    (comparingUser)="openPermissionsComparisonModal($event)"
-  ></app-administration-user>
+<ng-container *ngIf="usersList.length; else noUsersTemplate">
+  <ng-container *ngFor="let user of usersList; trackBy: trackBy">
+    <app-administration-user
+      [user]="user"
+      (comparingUser)="openPermissionsComparisonModal($event)"
+    ></app-administration-user>
+  </ng-container>
 </ng-container>
 
+<ng-template #noUsersTemplate>
+  <div class="no-users">
+    <p>No Available Users</p>
+  </div>
+</ng-template>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss
index e69de29bb2..fc1857b1a6 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss
@@ -0,0 +1,13 @@
+@use "commonStyles" as common;
+
+.no-users {
+  @include common.flexContainer(normal, center);
+  padding: 3em;
+  p {
+    font-family: Montserrat-SemiBold, sans-serif;
+    text-align: center;
+    background-color: rgba(104, 189, 213, 0.6);
+    border-radius: 1em;
+    padding: 3em;
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
new file mode 100644
index 0000000000..20ea78f359
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
@@ -0,0 +1,77 @@
+import {Injectable} from "@angular/core";
+import {UsersAndPermissionsHttpServiceService} from "./usersAndPermissionsHttpService.service";
+import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from "rxjs";
+import {pluck} from "rxjs/operators";
+import {AddAdministrationUserComponent} from "../components/addAdministrationUser/addAdministrationUser.component";
+import {AddAdministrationUserRequest} from "../interfaces/addAdministrationUser";
+import {MatDialog} from "@angular/material/dialog";
+
+@Injectable()
+export class UsersAndPermissionsStateService {
+  private usersListSubject$ = new BehaviorSubject([]);
+  private availableRolesSubject$ = new BehaviorSubject([]);
+  private readonly subscriptionSubject = new Subject<void>();
+
+  public usersList$ = this.usersListSubject$.asObservable();
+
+
+  constructor(private readonly httpService: UsersAndPermissionsHttpServiceService,
+              private readonly matDialog: MatDialog) {
+  }
+
+  /* Events */
+
+  public initData(): Observable<any> {
+    return this.httpService.users.pipe(
+      pluck('users'),
+      tap(users => this.usersListSubject$.next(users)),
+      mergeMap(() => this.httpService.studyRoles
+        .pipe(
+          pluck('roles'),
+          tap(roles => this.availableRolesSubject$.next(roles))
+        ))
+    )
+  }
+
+  public addUser(): Observable<any> {
+    let newUser: AddAdministrationUserRequest;
+
+    const activeUserAddDialog = this.matDialog.open(AddAdministrationUserComponent, {data:{
+        availableRoles: this.availableRolesSubject$.getValue(),
+        existingUsers: this.usersListSubject$.getValue()
+      }, height: '95%'});
+
+    return activeUserAddDialog.afterClosed()
+      .pipe(
+        tap((user: AddAdministrationUserRequest) => newUser = user),
+        mergeMap((user: AddAdministrationUserRequest) =>
+          user ? this.httpService.addUser(user) : of(user)
+        ),
+        tap(() => newUser && this.pushUser(newUser)),
+        takeUntil(this.subscriptionSubject)
+      )
+  }
+
+  public unsubscribe(): void {
+    this.subscriptionSubject.next();
+    this.subscriptionSubject.complete();
+  }
+
+  /* Helper functions */
+
+  private pushUser(newUser: AddAdministrationUserRequest): void {
+    this.usersListSubject$.next(
+      [...this.usersListSubject$.getValue(),
+        {
+          ...newUser,
+          roles: [
+            ...this.availableRolesSubject$.getValue()
+              .map(role => ({
+                ...role,
+                hasRole: !!newUser.roles.find(r => r === role.name)
+              }))
+          ]
+        }]
+    );
+  }
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
index 1adbf8a3f0..3238f6482e 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
@@ -1,5 +1,15 @@
 <section class="title">
   <h1>Users And Permissions</h1>
 </section>
-<button color="accent" class="addUserButton" mat-raised-button color="primary" (click)="onAddUser()">+ Add User</button>
-<app-list-users [usersList]="usersList$ | async"></app-list-users>
+<ng-container *ngIf="!isLoading; else loadingTemplate">
+  <button color="accent" class="addUserButton" mat-raised-button color="primary" (click)="onAddUser()">+ Add User
+  </button>
+  <app-list-users [usersList]="usersList$ | async"></app-list-users>
+</ng-container>
+
+
+<ng-template #loadingTemplate>
+  <div class="loading-spinner">
+    <mat-spinner></mat-spinner>
+  </div>
+</ng-template>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
index f95f3a8231..859633bf67 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
@@ -1,3 +1,5 @@
+@use "commonStyles" as common;
+
 .title {
   text-align: center;
   margin-bottom: 2em;
@@ -6,3 +8,7 @@
 .addUserButton {
   margin-bottom: 1.5em;
 }
+
+.loading-spinner {
+  @include common.flexContainer(normal, center);
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index 79c2f0d262..56aff15188 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -1,85 +1,55 @@
-import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from "@angular/core";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit} from "@angular/core";
 import {UsersAndPermissionsHttpServiceService} from "./services/usersAndPermissionsHttpService.service";
 import {MatDialog} from "@angular/material/dialog";
-import {BehaviorSubject, mergeMap, of, Subject, takeUntil, tap} from "rxjs";
-import {pluck, withLatestFrom} from "rxjs/operators";
+import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from "rxjs";
+import {finalize, pluck, withLatestFrom} from "rxjs/operators";
 import {AddAdministrationUserComponent} from "./components/addAdministrationUser/addAdministrationUser.component";
 import {AddAdministrationUserRequest} from "./interfaces/addAdministrationUser";
+import {UsersAndPermissionsStateService} from "./services/usersAndPermissionsState.service";
 
 @Component({
   selector: 'app-users-and-permissions',
   templateUrl: 'usersAndPermissions.component.html',
   styleUrls: ['usersAndPermissions.component.scss'],
-  providers: [UsersAndPermissionsHttpServiceService],
+  providers: [UsersAndPermissionsHttpServiceService, UsersAndPermissionsStateService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
-  public usersList$ = new BehaviorSubject([]);
-  private availableRoles$ = new BehaviorSubject([]);
+  public usersList$ = this.stateService.usersList$;
+  public isLoading = false;
 
   private readonly subscriptionSubject = new Subject<void>();
 
 
   constructor(
-    private readonly httpService: UsersAndPermissionsHttpServiceService,
-    private readonly matDialog: MatDialog) {
+    private readonly stateService: UsersAndPermissionsStateService,
+    private readonly cdr: ChangeDetectorRef) {
   }
 
-  ngOnInit() {
-    this.httpService.users.pipe(
-      pluck('users'),
-      withLatestFrom(
-        this.httpService.studyRoles
-        .pipe(pluck('roles'), takeUntil(this.subscriptionSubject))
-      ),
-      takeUntil(this.subscriptionSubject),
-      tap(([users, availableRoles]) => {
-        this.usersList$.next(users);
-        this.availableRoles$.next(availableRoles);
-
-        console.log(users, availableRoles, 'USERS & AVAILABLE_ROLES')
-      })
-    ).subscribe();
+  ngOnInit(): void {
+    this.isLoading = true;
+    this.stateService.initData()
+      .pipe(
+        takeUntil(this.subscriptionSubject),
+        finalize(() => {
+          this.isLoading = false;
+          this.cdr.markForCheck();
+        })
+      )
+      .subscribe();
   }
 
   ngOnDestroy(): void {
+    this.stateService.unsubscribe();
     this.subscriptionSubject.next();
     this.subscriptionSubject.complete();
   }
 
   public onAddUser(): void {
-    const activeUserAddDialog = this.matDialog.open(AddAdministrationUserComponent, {data:{
-      availableRoles: this.availableRoles$.getValue(),
-      existingUsers: this.usersList$.getValue()
-      }, height: '95%'});
-
-    let newUser: AddAdministrationUserRequest;
-
-    activeUserAddDialog.afterClosed()
-      .pipe(
-        tap((user: AddAdministrationUserRequest) => newUser = user),
-        mergeMap((user: AddAdministrationUserRequest) =>
-          user ? this.httpService.addUser(user) : of(user)
-        ),
-        takeUntil(this.subscriptionSubject)
-      )
-      .subscribe(_ => {
-        if (newUser) {
-          this.usersList$.next(
-            [...this.usersList$.getValue(),
-              {
-                ...newUser,
-                roles: [
-                  ...this.availableRoles$.getValue()
-                    .map(role => ({
-                      ...role,
-                      hasRole: !!newUser.roles.find(r => r === role.name)
-                    }))
-                ]
-              }]
-          );
-        }
-      })
+    this.stateService.addUser()
+      .pipe(takeUntil(this.subscriptionSubject))
+      .subscribe()
   }
 
+
 }

From db26b2299a153426b2d46966311a257b41ae7ded Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 27 Jul 2023 13:06:38 +0400
Subject: [PATCH 17/29] DSM-PEPPER-963-user-administration-services linter fix

---
 .../src/app/ALL-STUDIES/all-studies.module.ts |  2 +-
 .../ALL-STUDIES/all-studies.routing.module.ts |  2 +-
 .../app/guards/usersAndPermissions.guard.ts   |  6 +--
 .../src/app/services/dsm.service.ts           |  2 +-
 .../addAdministrationUser.component.ts        | 24 +++++-----
 .../administrationUser.component.ts           | 44 ++++++++---------
 .../comparePermissions.component.ts           | 28 +++++------
 .../listAdministrationUsers.component.ts      | 13 +++--
 .../permissionCheckbox.component.ts           |  8 ++--
 .../interfaces/addAdministrationUser.ts       |  8 ++--
 .../interfaces/administrationUser.ts          |  2 +-
 .../interfaces/administrationUserRole.ts      |  2 +-
 .../usersAndPermissionsHttpService.service.ts | 14 +++---
 .../usersAndPermissionsState.service.ts       | 18 +++----
 .../usersAndPermissions.component.ts          | 18 +++----
 .../usersAndPermissions.module.ts             | 48 +++++++++----------
 16 files changed, 119 insertions(+), 120 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
index 9de6083644..0c48fc4aad 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
@@ -151,7 +151,7 @@ import {OncHistoryUploadGuard} from '../guards/oncHistoryUpload.guard';
 import {
   UsersAndPermissionsCanActivateGuard,
   UsersAndPermissionsCanLoadGuard
-} from "../guards/usersAndPermissions.guard";
+} from '../guards/usersAndPermissions.guard';
 
 
 PlotlyModule.plotlyjs = PlotlyJS;
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.routing.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.routing.module.ts
index 4148125bc1..f80fd8df3b 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.routing.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.routing.module.ts
@@ -41,7 +41,7 @@ import {OncHistoryUploadGuard} from '../guards/oncHistoryUpload.guard';
 import {
   UsersAndPermissionsCanActivateGuard,
   UsersAndPermissionsCanLoadGuard
-} from "../guards/usersAndPermissions.guard";
+} from '../guards/usersAndPermissions.guard';
 
 
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
index 29c0ee01f7..0304021c50 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "@angular/core";
+import {Injectable} from '@angular/core';
 import {
   ActivatedRouteSnapshot,
   CanActivate,
@@ -8,8 +8,8 @@ import {
   RouterStateSnapshot,
   UrlSegment,
   UrlTree
-} from "@angular/router";
-import {SessionService} from "../services/session.service";
+} from '@angular/router';
+import {SessionService} from '../services/session.service';
 
 @Injectable()
 export class UsersAndPermissionsCanLoadGuard implements CanLoad {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
index 3ba1a8fc1f..60d429461d 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
@@ -21,7 +21,7 @@ import {IDateRange} from '../dashboard-statistics/interfaces/IDateRange';
 import {StatisticsEnum} from '../dashboard-statistics/enums/statistics.enum';
 import {SomaticResultSignedUrlRequest} from '../sharedLearningUpload/interfaces/somaticResultSignedUrlRequest';
 import {SendToParticipantRequest} from '../sharedLearningUpload/interfaces/sendToParticipant';
-import {AddAdministrationUserRequest} from "../usersAndPermissions/interfaces/addAdministrationUser";
+import {AddAdministrationUserRequest} from '../usersAndPermissions/interfaces/addAdministrationUser';
 
 declare var DDP_ENV: any;
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
index ae942305d1..7c4c204c6c 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
@@ -1,13 +1,13 @@
-import {ChangeDetectionStrategy, Component, Inject} from "@angular/core";
-import {FormBuilder, Validators} from "@angular/forms";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
-import {AddAdministrationUserModal, AddAdministrationUserRequest} from "../../interfaces/addAdministrationUser";
-import {MatSelectChange} from "@angular/material/select";
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {FormBuilder, Validators} from '@angular/forms';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
+import {AddAdministrationUserModal, AddAdministrationUserRequest} from '../../interfaces/addAdministrationUser';
+import {MatSelectChange} from '@angular/material/select';
 import {cloneDeep} from 'lodash';
 
 @Component({
-  selector: 'app-addAdministrationUser',
+  selector: 'app-add-administration-user',
   templateUrl: 'addAdministrationUser.component.html',
   styleUrls: ['addAdministrationUser.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -20,7 +20,7 @@ export class AddAdministrationUserComponent {
     email: [null, Validators.required],
     name: [null, Validators.required],
     phone: [null, Validators.required],
-  })
+  });
 
   private onlySelectedRoles: AdministrationUserRole[] = [];
 
@@ -35,7 +35,7 @@ export class AddAdministrationUserComponent {
       const userToAdd: AddAdministrationUserRequest = {
         ...this.addUserForm.getRawValue(),
         roles: this.onlySelectedRoles.map(r => r.name)
-      }
+      };
       this.matDialogRef.close(userToAdd);
     }
   }
@@ -49,7 +49,7 @@ export class AddAdministrationUserComponent {
     const foundRoleIndex = this.onlySelectedRoles.findIndex(r => r.name === role.name);
     if(foundRoleIndex > -1 && role.hasRole) {
       this.onlySelectedRoles[foundRoleIndex] = role;
-    } else if (foundRoleIndex == -1 && role.hasRole) {
+    } else if (foundRoleIndex === -1 && role.hasRole) {
       this.onlySelectedRoles.push(role);
     } else if (foundRoleIndex > -1 && !role.hasRole) {
       this.onlySelectedRoles.splice(foundRoleIndex, 1);
@@ -60,7 +60,7 @@ export class AddAdministrationUserComponent {
     return this.data.existingUsers.map(user => user.email);
   }
 
-  public userSelected({value}:MatSelectChange): void {
+  public userSelected({value}: MatSelectChange): void {
     this.selectedUserRoles = this.data.existingUsers.find(({email}) => email === value).roles;
   }
 
@@ -68,7 +68,7 @@ export class AddAdministrationUserComponent {
     this.availableRoles = this.availableRoles.map((role: AdministrationUserRole) => ({
       ...role,
       hasRole: this.selectedUserRoles.find(r => r.name === role.name)?.hasRole || false
-    })) as any
+    })) as any;
 
     this.onlySelectedRoles = this.availableRoles.filter(r => r.hasRole);
   }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
index 3e604976a2..e95f228f1a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
@@ -3,12 +3,12 @@ import {
   ChangeDetectorRef,
   Component, EventEmitter,
   Input, OnInit, Output
-} from "@angular/core";
-import {AdministrationUser} from "../../interfaces/administrationUser";
-import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
+} from '@angular/core';
+import {AdministrationUser} from '../../interfaces/administrationUser';
+import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
 import {cloneDeep} from 'lodash';
-import {RoleService} from "../../../services/role.service";
-import {FormBuilder, FormGroup} from "@angular/forms";
+import {RoleService} from '../../../services/role.service';
+import {FormBuilder, FormGroup} from '@angular/forms';
 
 @Component({
   selector: 'app-administration-user',
@@ -32,7 +32,7 @@ export class AdministrationUserComponent implements OnInit {
   @Input('user') set administrationUser(user: AdministrationUser) {
     this.user = user;
     this.rolesBeforeChange = cloneDeep(user.roles);
-  };
+  }
 
   @Output() comparingUser = new EventEmitter<AdministrationUser>();
   @Output() editingUser = new EventEmitter<AdministrationUser>();
@@ -47,20 +47,20 @@ export class AdministrationUserComponent implements OnInit {
     this.editUserForm = this.formBuilder.group({
       name: [this.user.name],
       phone: [this.user.phone]
-    })
+    });
   }
 
   /* Event Handlers */
 
   public compareUser(event: Event, user: AdministrationUser): void {
     event.stopPropagation();
-    console.log(user, 'COMPARE_USER')
+    console.log(user, 'COMPARE_USER');
     this.comparingUser.emit(user);
   }
 
   public editUser(event: Event, user: AdministrationUser): void {
-    event.stopPropagation()
-    console.log(user, 'EDIT_USER')
+    event.stopPropagation();
+    console.log(user, 'EDIT_USER');
     this.isUserEditing = !this.isUserEditing;
   }
 
@@ -70,29 +70,29 @@ export class AdministrationUserComponent implements OnInit {
     this.editUserForm.disable();
 
 
-    console.log(this.user, 'SAVED_EDITED')
+    console.log(this.user, 'SAVED_EDITED');
 
     // mocking
     setTimeout(() => {
       this.editUserForm.enable();
       this.user.name = this.editUserForm.get('name').value;
       this.user.phone = this.editUserForm.get('phone').value;
-      this.cdr.markForCheck()
-      this.isEditUserLoading = false
-    }, 3000)
+      this.cdr.markForCheck();
+      this.isEditUserLoading = false;
+    }, 3000);
   }
 
   public deleteUser(event: Event, user: AdministrationUser): void {
     event.stopPropagation();
     this.isDeleteUserLoading = true;
 
-    console.log(user, 'SAVED_EDITED')
+    console.log(user, 'SAVED_EDITED');
 
     // mocking
     setTimeout(() => {
       this.cdr.markForCheck();
-      this.isDeleteUserLoading = false
-    }, 3000)
+      this.isDeleteUserLoading = false;
+    }, 3000);
   }
 
   public onCheckboxChanged(changedRole: AdministrationUserRole): void {
@@ -100,7 +100,7 @@ export class AdministrationUserComponent implements OnInit {
       changedRole.name === role.name ?
         {...role, hasRole: changedRole.hasRole} :
         role
-    )
+    );
 
     this.changeActionButtonsState(!this.hasPermissionsChanged);
   }
@@ -112,9 +112,9 @@ export class AdministrationUserComponent implements OnInit {
 
     // mocking
     setTimeout(() => {
-      this.cdr.markForCheck()
-      this.isEditPermissionsLoading = false
-    }, 3000)
+      this.cdr.markForCheck();
+      this.isEditPermissionsLoading = false;
+    }, 3000);
   }
 
   public discardChanges(): void {
@@ -141,7 +141,7 @@ export class AdministrationUserComponent implements OnInit {
 
   private get hasPermissionsChanged(): boolean {
     return !this.rolesBeforeChange.every(({hasRole}, index) =>
-      hasRole === this.user.roles[index].hasRole)
+      hasRole === this.user.roles[index].hasRole);
   }
 
   private changeActionButtonsState(isDisabled: boolean): void {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
index 172fb4e1a4..30d5a88e9d 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
@@ -1,8 +1,8 @@
-import {Component, Inject, OnInit} from "@angular/core";
-import {MAT_DIALOG_DATA} from "@angular/material/dialog";
-import {AdministrationUser} from "../../interfaces/administrationUser";
-import {MatSelectChange} from "@angular/material/select";
-import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {AdministrationUser} from '../../interfaces/administrationUser';
+import {MatSelectChange} from '@angular/material/select';
+import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
 
 @Component({
   selector: 'app-compare-permissions',
@@ -11,17 +11,17 @@ import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
 })
 export class ComparePermissionsComponent implements OnInit {
   public displayedColumns = ['name', this.firstUser.email, 'selectUser'];
-  public roles = []
+  public roles = [];
   public secondUser: AdministrationUser;
 
   constructor(@Inject(MAT_DIALOG_DATA)
-              private data: {firstUser: AdministrationUser, allUsers: AdministrationUser[]}) {}
+              private data: {firstUser: AdministrationUser; allUsers: AdministrationUser[]}) {}
 
-  ngOnInit() {
-    console.log(this.data, 'COMPARE_DATA')
+  ngOnInit(): void {
+    console.log(this.data, 'COMPARE_DATA');
     this.roles = [...this.firstUser.roles];
 
-    console.log(this.roles, 'DATA_SOURCE')
+    console.log(this.roles, 'DATA_SOURCE');
   }
 
   public userSelected({value: selectedUserEmail}: MatSelectChange): void {
@@ -31,14 +31,14 @@ export class ComparePermissionsComponent implements OnInit {
     this.displayedColumns.push(foundUser.email);
     this.roles = this.firstUser.roles;
 
-    for(let role of foundUser.roles) {
-      if(this.roles.findIndex(role => role.name === role.name) === -1) {
-        this.roles.push(role)
+    for(const role of foundUser.roles) {
+      if(this.roles.findIndex(r => r.name === role.name) === -1) {
+        this.roles.push(role);
       }
     }
 
     this.secondUser = foundUser;
-    console.log(this.roles, 'AFTER_CHANGE')
+    console.log(this.roles, 'AFTER_CHANGE');
   }
 
   public get firstUser(): AdministrationUser {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
index c42371283f..ec92af7024 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
@@ -1,8 +1,7 @@
-import {ChangeDetectionStrategy, Component, Input, OnInit} from "@angular/core";
-import {AdministrationUser} from "../../interfaces/administrationUser";
-import {MatDialog} from "@angular/material/dialog";
-import {ComparePermissionsComponent} from "../comparePermissions/comparePermissions.component";
-import {UsersAndPermissionsHttpServiceService} from "../../services/usersAndPermissionsHttpService.service";
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {AdministrationUser} from '../../interfaces/administrationUser';
+import {MatDialog} from '@angular/material/dialog';
+import {ComparePermissionsComponent} from '../comparePermissions/comparePermissions.component';
 
 @Component({
   selector: 'app-list-users',
@@ -20,11 +19,11 @@ export class ListAdministrationUsersComponent {
     return name || phone || email;
   }
 
-  public openPermissionsComparisonModal(firstUser: AdministrationUser) {
+  public openPermissionsComparisonModal(firstUser: AdministrationUser): void {
     this.matDialog.open(ComparePermissionsComponent, {data: {
       firstUser,
       allUsers: this.usersList
-      }, maxHeight: '50em', width: '70%'})
+      }, maxHeight: '50em', width: '70%'});
   }
 
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
index 1e39833c18..558b26be26 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
@@ -1,5 +1,5 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
-import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
 
 @Component({
   selector: 'app-permission-checkbox',
@@ -9,8 +9,8 @@ import {AdministrationUserRole} from "../../interfaces/administrationUserRole";
 })
 export class PermissionCheckboxComponent implements OnInit {
   @Input() role: AdministrationUserRole;
-  @Input() onlyCheckbox: boolean = false;
-  @Input() isDisabled: boolean = false;
+  @Input() onlyCheckbox = false;
+  @Input() isDisabled = false;
 
   @Output() checkboxChanged = new EventEmitter<AdministrationUserRole>();
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
index f0eac91149..f963134357 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
@@ -1,5 +1,5 @@
-import {AdministrationUserRole} from "./administrationUserRole";
-import {AdministrationUser} from "./administrationUser";
+import {AdministrationUserRole} from './administrationUserRole';
+import {AdministrationUser} from './administrationUser';
 
 export interface AddAdministrationUserRequest {
   email: string;
@@ -9,6 +9,6 @@ export interface AddAdministrationUserRequest {
 }
 
 export interface AddAdministrationUserModal {
-  availableRoles: Partial<AdministrationUserRole[]>,
-  existingUsers: AdministrationUser[]
+  availableRoles: Partial<AdministrationUserRole[]>;
+  existingUsers: AdministrationUser[];
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
index 92699117a1..58593cd9e0 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
@@ -1,4 +1,4 @@
-import {AdministrationUserRole} from "./administrationUserRole";
+import {AdministrationUserRole} from './administrationUserRole';
 
 export interface AdministrationUser {
   email: string;
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
index 0c8e9038d9..b42bc30845 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
@@ -10,5 +10,5 @@ export interface AvailableRole {
 }
 
 export interface AvailableStudyRolesResponse {
-  roles: AvailableRole[]
+  roles: AvailableRole[];
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
index 8eb2ad152a..3694ab4ede 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
@@ -1,10 +1,10 @@
-import {Injectable} from "@angular/core";
-import {Observable} from "rxjs";
-import {AdministrationUser, AdministrationUsersResponse} from "../interfaces/administrationUser";
-import {DSMService} from "../../services/dsm.service";
-import {SessionService} from "../../services/session.service";
-import {AddAdministrationUserRequest} from "../interfaces/addAdministrationUser";
-import {AvailableStudyRolesResponse} from "../interfaces/administrationUserRole";
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {AdministrationUser, AdministrationUsersResponse} from '../interfaces/administrationUser';
+import {DSMService} from '../../services/dsm.service';
+import {SessionService} from '../../services/session.service';
+import {AddAdministrationUserRequest} from '../interfaces/addAdministrationUser';
+import {AvailableStudyRolesResponse} from '../interfaces/administrationUserRole';
 
 @Injectable()
 export class UsersAndPermissionsHttpServiceService {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
index 20ea78f359..4961eac59a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
@@ -1,10 +1,10 @@
-import {Injectable} from "@angular/core";
-import {UsersAndPermissionsHttpServiceService} from "./usersAndPermissionsHttpService.service";
-import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from "rxjs";
-import {pluck} from "rxjs/operators";
-import {AddAdministrationUserComponent} from "../components/addAdministrationUser/addAdministrationUser.component";
-import {AddAdministrationUserRequest} from "../interfaces/addAdministrationUser";
-import {MatDialog} from "@angular/material/dialog";
+import {Injectable} from '@angular/core';
+import {UsersAndPermissionsHttpServiceService} from './usersAndPermissionsHttpService.service';
+import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from 'rxjs';
+import {pluck} from 'rxjs/operators';
+import {AddAdministrationUserComponent} from '../components/addAdministrationUser/addAdministrationUser.component';
+import {AddAdministrationUserRequest} from '../interfaces/addAdministrationUser';
+import {MatDialog} from '@angular/material/dialog';
 
 @Injectable()
 export class UsersAndPermissionsStateService {
@@ -30,7 +30,7 @@ export class UsersAndPermissionsStateService {
           pluck('roles'),
           tap(roles => this.availableRolesSubject$.next(roles))
         ))
-    )
+    );
   }
 
   public addUser(): Observable<any> {
@@ -49,7 +49,7 @@ export class UsersAndPermissionsStateService {
         ),
         tap(() => newUser && this.pushUser(newUser)),
         takeUntil(this.subscriptionSubject)
-      )
+      );
   }
 
   public unsubscribe(): void {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index 56aff15188..a14c16d5eb 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -1,11 +1,11 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit} from "@angular/core";
-import {UsersAndPermissionsHttpServiceService} from "./services/usersAndPermissionsHttpService.service";
-import {MatDialog} from "@angular/material/dialog";
-import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from "rxjs";
-import {finalize, pluck, withLatestFrom} from "rxjs/operators";
-import {AddAdministrationUserComponent} from "./components/addAdministrationUser/addAdministrationUser.component";
-import {AddAdministrationUserRequest} from "./interfaces/addAdministrationUser";
-import {UsersAndPermissionsStateService} from "./services/usersAndPermissionsState.service";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {UsersAndPermissionsHttpServiceService} from './services/usersAndPermissionsHttpService.service';
+import {MatDialog} from '@angular/material/dialog';
+import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from 'rxjs';
+import {finalize, pluck, withLatestFrom} from 'rxjs/operators';
+import {AddAdministrationUserComponent} from './components/addAdministrationUser/addAdministrationUser.component';
+import {AddAdministrationUserRequest} from './interfaces/addAdministrationUser';
+import {UsersAndPermissionsStateService} from './services/usersAndPermissionsState.service';
 
 @Component({
   selector: 'app-users-and-permissions',
@@ -48,7 +48,7 @@ export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
   public onAddUser(): void {
     this.stateService.addUser()
       .pipe(takeUntil(this.subscriptionSubject))
-      .subscribe()
+      .subscribe();
   }
 
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
index a2e99c32d5..b413cd3350 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
@@ -1,30 +1,30 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {RouterModule, Routes} from "@angular/router";
-import {UsersAndPermissionsComponent} from "./usersAndPermissions.component";
-import {ListAdministrationUsersComponent} from "./components/listAdministrationUsers/listAdministrationUsers.component";
-import {MatExpansionModule} from "@angular/material/expansion";
-import {MatIconModule} from "@angular/material/icon";
-import {MatButtonModule} from "@angular/material/button";
-import {MatCheckboxModule} from "@angular/material/checkbox";
-import {PermissionCheckboxComponent} from "./components/permissionCheckbox/permissionCheckbox.component";
-import {MatDividerModule} from "@angular/material/divider";
-import {MatTooltipModule} from "@angular/material/tooltip";
-import {AdministrationUserComponent} from "./components/administrationUser/administrationUser.component";
-import {MatInputModule} from "@angular/material/input";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
-import {ComparePermissionsComponent} from "./components/comparePermissions/comparePermissions.component";
-import {MatDialogModule} from "@angular/material/dialog";
-import {MatTableModule} from "@angular/material/table";
-import {MatSelectModule} from "@angular/material/select";
-import {AddAdministrationUserComponent} from "./components/addAdministrationUser/addAdministrationUser.component";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatAutocompleteModule} from "@angular/material/autocomplete";
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule, Routes} from '@angular/router';
+import {UsersAndPermissionsComponent} from './usersAndPermissions.component';
+import {ListAdministrationUsersComponent} from './components/listAdministrationUsers/listAdministrationUsers.component';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {PermissionCheckboxComponent} from './components/permissionCheckbox/permissionCheckbox.component';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {AdministrationUserComponent} from './components/administrationUser/administrationUser.component';
+import {MatInputModule} from '@angular/material/input';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {ComparePermissionsComponent} from './components/comparePermissions/comparePermissions.component';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatTableModule} from '@angular/material/table';
+import {MatSelectModule} from '@angular/material/select';
+import {AddAdministrationUserComponent} from './components/addAdministrationUser/addAdministrationUser.component';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 
 const routes: Routes = [
   {path: '', component: UsersAndPermissionsComponent}
-]
+];
 
 @NgModule({
   declarations: [

From af2f78ad1f9f6953ac43f7b7c620f78efb9717ac Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 27 Jul 2023 16:19:41 +0400
Subject: [PATCH 18/29] DSM-PEPPER-963-user-administration-services panel title
 width expanded

---
 .../administrationUser/administrationUser.component.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.scss
index a1b4677195..434f812d00 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.scss
@@ -21,7 +21,7 @@ mat-panel-title {
   align-items: center;
   font-family: Montserrat-SemiBold, sans-serif;
   flex-grow: 0;
-  width: 20%;
+  width: 30%;
   overflow: auto;
 }
 

From dedf437d32f18f9ad0419152db8a4370b81b6ada Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Tue, 1 Aug 2023 11:32:08 +0400
Subject: [PATCH 19/29] DSM-PEPPER-963-user-administration-services integrated
 backend and made some adjustments

---
 .../src/app/services/dsm.service.ts           |  35 ++++-
 .../addUser.component.html}                   |  16 ++-
 .../addUser.component.scss}                   |   4 +
 .../addUser.component.ts}                     |  26 ++--
 .../comparePermissions.component.ts           |  14 +-
 .../listUsers.component.html}                 |   0
 .../listUsers.component.scss}                 |   0
 .../listUsers.component.ts}                   |  14 +-
 .../permissionCheckbox.component.ts           |   8 +-
 .../administrationUser.component.html         |   6 +-
 .../administrationUser.component.scss         |   0
 .../administrationUser.component.ts           | 121 +++++++++++-------
 .../interfaces/addAdministrationUser.ts       |  14 --
 .../interfaces/addRemoveUsers.ts              |  22 ++++
 .../interfaces/administrationUser.ts          |  12 --
 .../interfaces/editUsers.ts                   |   5 +
 .../interfaces/removeAdministrationUser.ts    |   3 -
 .../{administrationUserRole.ts => role.ts}    |   7 +-
 .../usersAndPermissions/interfaces/user.ts    |  12 ++
 .../usersAndPermissionsHttpService.service.ts |  23 +++-
 .../usersAndPermissionsState.service.ts       |  50 ++++++--
 .../usersAndPermissions.component.ts          |  14 +-
 .../usersAndPermissions.module.ts             |  10 +-
 23 files changed, 276 insertions(+), 140 deletions(-)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{addAdministrationUser/addAdministrationUser.component.html => addUser/addUser.component.html} (80%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{addAdministrationUser/addAdministrationUser.component.scss => addUser/addUser.component.scss} (93%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{addAdministrationUser/addAdministrationUser.component.ts => addUser/addUser.component.ts} (69%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{listAdministrationUsers/listAdministrationUsers.component.html => listUsers/listUsers.component.html} (100%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{listAdministrationUsers/listAdministrationUsers.component.scss => listUsers/listUsers.component.scss} (100%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{listAdministrationUsers/listAdministrationUsers.component.ts => listUsers/listUsers.component.ts} (56%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{administrationUser => user}/administrationUser.component.html (96%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{administrationUser => user}/administrationUser.component.scss (100%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/{administrationUser => user}/administrationUser.component.ts (50%)
 delete mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addRemoveUsers.ts
 delete mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/editUsers.ts
 delete mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser.ts
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/{administrationUserRole.ts => role.ts} (68%)
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/user.ts

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
index 60d429461d..9862d82ae4 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
@@ -21,7 +21,9 @@ import {IDateRange} from '../dashboard-statistics/interfaces/IDateRange';
 import {StatisticsEnum} from '../dashboard-statistics/enums/statistics.enum';
 import {SomaticResultSignedUrlRequest} from '../sharedLearningUpload/interfaces/somaticResultSignedUrlRequest';
 import {SendToParticipantRequest} from '../sharedLearningUpload/interfaces/sendToParticipant';
-import {AddAdministrationUserRequest} from '../usersAndPermissions/interfaces/addAdministrationUser';
+import {AddUsersRequest, RemoveUsersRequest} from '../usersAndPermissions/interfaces/addRemoveUsers';
+import {EditUsers} from "../usersAndPermissions/interfaces/editUsers";
+import {EditUserRoles} from "../usersAndPermissions/interfaces/role";
 
 declare var DDP_ENV: any;
 
@@ -468,11 +470,38 @@ export class DSMService {
     );
   }
 
-  public addUser(realm: string, body: AddAdministrationUserRequest): Observable<any> {
+  public addUser(realm: string, addUsers: AddUsersRequest): Observable<any> {
     const url = this.baseUrl + DSMService.UI + 'admin/user';
     const map: { name: string; value: any }[] = [];
     map.push({name: DSMService.REALM, value: realm});
-    return this.http.post(url, {users: [body]}, this.buildQueryHeader(map)).pipe(
+    return this.http.post(url, addUsers, this.buildQueryHeader(map)).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  public removeUser(realm: string, removeUsers: RemoveUsersRequest): Observable<any> {
+    const url = this.baseUrl + DSMService.UI + 'admin/user';
+    const map: { name: string; value: any }[] = [];
+    map.push({name: DSMService.REALM, value: realm});
+    return this.http.post(url, removeUsers, this.buildQueryHeader(map)).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  public editUsers(realm: string, editUser: EditUsers): Observable<any> {
+    const url = this.baseUrl + DSMService.UI + 'admin/user';
+    const map: { name: string; value: any }[] = [];
+    map.push({name: DSMService.REALM, value: realm});
+    return this.http.put(url, editUser, this.buildQueryHeader(map)).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  public editUsersRoles(realm: string, userRoles: EditUserRoles): Observable<any> {
+    const url = this.baseUrl + DSMService.UI + 'admin/userRole';
+    const map: { name: string; value: any }[] = [];
+    map.push({name: DSMService.REALM, value: realm});
+    return this.http.put(url, userRoles, this.buildQueryHeader(map)).pipe(
       catchError(this.handleError)
     );
   }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.html
similarity index 80%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.html
index a4ae349f20..aa8f8cee1b 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.html
@@ -6,17 +6,29 @@ <h3>Create User</h3>
     <mat-form-field class="addUserForm-inputs-name">
       <mat-label>Email</mat-label>
       <input matInput formControlName="email">
+      <mat-error *ngIf="addUserForm.get('email').hasError('email')">
+        Wrong email
+      </mat-error>
+      <mat-error *ngIf="addUserForm.get('email').hasError('required')">
+        Required field
+      </mat-error>
     </mat-form-field>
     <mat-form-field class="addUserForm-inputs-name">
-      <mat-label>Name & Surname</mat-label>
+      <mat-label>First Name & Last Name</mat-label>
       <input matInput formControlName="name">
+      <mat-error *ngIf="addUserForm.get('name').hasError('required')">
+        Required field
+      </mat-error>
     </mat-form-field>
     <mat-form-field class="addUserForm-inputs-phone">
       <mat-label>Phone</mat-label>
       <input matInput formControlName="phone">
+      <mat-error *ngIf="addUserForm.get('phone').hasError('required')">
+        Required field
+      </mat-error>
     </mat-form-field>
   </section>
-  <mat-divider></mat-divider>
+  <mat-divider class="userData-divider"></mat-divider>
   <section class="addUserForm-permissions">
     <h4 class="addUserForm-permissions-title">Permissions</h4>
     <app-permission-checkbox
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.scss
similarity index 93%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.scss
index 8cf871b7f1..f4e2d54caf 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.scss
@@ -21,6 +21,10 @@
     margin-top: 1em;
   }
 
+  .userData-divider {
+    margin-top: .7em;
+  }
+
   &-compare {
     margin-top: .2em;
     padding: 1em;
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
similarity index 69%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
index 7c4c204c6c..1784831bb0 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addAdministrationUser/addAdministrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
@@ -1,38 +1,38 @@
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
 import {FormBuilder, Validators} from '@angular/forms';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
-import {AddAdministrationUserModal, AddAdministrationUserRequest} from '../../interfaces/addAdministrationUser';
+import {Role} from '../../interfaces/role';
+import {AddUser, AddUserModal, AddUsersRequest} from '../../interfaces/addRemoveUsers';
 import {MatSelectChange} from '@angular/material/select';
 import {cloneDeep} from 'lodash';
 
 @Component({
   selector: 'app-add-administration-user',
-  templateUrl: 'addAdministrationUser.component.html',
-  styleUrls: ['addAdministrationUser.component.scss'],
+  templateUrl: 'addUser.component.html',
+  styleUrls: ['addUser.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AddAdministrationUserComponent {
+export class AddUserComponent {
   public availableRoles = cloneDeep(this.data.availableRoles).map(role => ({...role, hasRole: false}));
-  public selectedUserRoles: AdministrationUserRole[];
+  public selectedUserRoles: Role[];
 
   public readonly addUserForm = this.formBuilder.group({
-    email: [null, Validators.required],
+    email: [null, [Validators.required, Validators.email]],
     name: [null, Validators.required],
     phone: [null, Validators.required],
   });
 
-  private onlySelectedRoles: AdministrationUserRole[] = [];
+  private onlySelectedRoles: Role[] = [];
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) private data: AddAdministrationUserModal,
-    private readonly matDialogRef: MatDialogRef<AddAdministrationUserComponent>,
+    @Inject(MAT_DIALOG_DATA) private data: AddUserModal,
+    private readonly matDialogRef: MatDialogRef<AddUserComponent>,
     private readonly formBuilder: FormBuilder
   ) {}
 
   public addUser(): void {
     if (this.allowAddingUser) {
-      const userToAdd: AddAdministrationUserRequest = {
+      const userToAdd: AddUser = {
         ...this.addUserForm.getRawValue(),
         roles: this.onlySelectedRoles.map(r => r.name)
       };
@@ -45,7 +45,7 @@ export class AddAdministrationUserComponent {
     return this.addUserForm.valid && !!this.onlySelectedRoles?.length;
   }
 
-  public roleSelected(role: AdministrationUserRole): void {
+  public roleSelected(role: Role): void {
     const foundRoleIndex = this.onlySelectedRoles.findIndex(r => r.name === role.name);
     if(foundRoleIndex > -1 && role.hasRole) {
       this.onlySelectedRoles[foundRoleIndex] = role;
@@ -65,7 +65,7 @@ export class AddAdministrationUserComponent {
   }
 
   public applyRoles(): void {
-    this.availableRoles = this.availableRoles.map((role: AdministrationUserRole) => ({
+    this.availableRoles = this.availableRoles.map((role: Role) => ({
       ...role,
       hasRole: this.selectedUserRoles.find(r => r.name === role.name)?.hasRole || false
     })) as any;
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
index 30d5a88e9d..5e257c7d1a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
@@ -1,8 +1,8 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
-import {AdministrationUser} from '../../interfaces/administrationUser';
+import {User} from '../../interfaces/user';
 import {MatSelectChange} from '@angular/material/select';
-import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
+import {Role} from '../../interfaces/role';
 
 @Component({
   selector: 'app-compare-permissions',
@@ -12,10 +12,10 @@ import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
 export class ComparePermissionsComponent implements OnInit {
   public displayedColumns = ['name', this.firstUser.email, 'selectUser'];
   public roles = [];
-  public secondUser: AdministrationUser;
+  public secondUser: User;
 
   constructor(@Inject(MAT_DIALOG_DATA)
-              private data: {firstUser: AdministrationUser; allUsers: AdministrationUser[]}) {}
+              private data: {firstUser: User; allUsers: User[]}) {}
 
   ngOnInit(): void {
     console.log(this.data, 'COMPARE_DATA');
@@ -41,7 +41,7 @@ export class ComparePermissionsComponent implements OnInit {
     console.log(this.roles, 'AFTER_CHANGE');
   }
 
-  public get firstUser(): AdministrationUser {
+  public get firstUser(): User {
     return this.data.firstUser;
   }
 
@@ -50,11 +50,11 @@ export class ComparePermissionsComponent implements OnInit {
       .map((user) => user.email);
   }
 
-  public findRoleForFirstUser(roleName: string): AdministrationUserRole {
+  public findRoleForFirstUser(roleName: string): Role {
     return this.firstUser.roles.find(role => role.name === roleName);
   }
 
-  public findRoleForSecondUser(roleName: string): AdministrationUserRole {
+  public findRoleForSecondUser(roleName: string): Role {
     return this.secondUser.roles.find(role => role.name === roleName);
   }
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.html
similarity index 100%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.html
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.html
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.scss
similarity index 100%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.scss
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.scss
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
similarity index 56%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
index ec92af7024..93e6ce1050 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listAdministrationUsers/listAdministrationUsers.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
@@ -1,25 +1,25 @@
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-import {AdministrationUser} from '../../interfaces/administrationUser';
+import {User} from '../../interfaces/user';
 import {MatDialog} from '@angular/material/dialog';
 import {ComparePermissionsComponent} from '../comparePermissions/comparePermissions.component';
 
 @Component({
   selector: 'app-list-users',
-  templateUrl: 'listAdministrationUsers.component.html',
-  styleUrls: ['listAdministrationUsers.component.scss'],
+  templateUrl: 'listUsers.component.html',
+  styleUrls: ['listUsers.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ListAdministrationUsersComponent {
-  @Input() usersList: AdministrationUser[];
+export class ListUsersComponent {
+  @Input() usersList: User[];
 
   constructor(private readonly matDialog: MatDialog) {
   }
 
-  public trackBy(index: number, {name, phone, email}: AdministrationUser): any {
+  public trackBy(index: number, {name, phone, email}: User): any {
     return name || phone || email;
   }
 
-  public openPermissionsComparisonModal(firstUser: AdministrationUser): void {
+  public openPermissionsComparisonModal(firstUser: User): void {
     this.matDialog.open(ComparePermissionsComponent, {data: {
       firstUser,
       allUsers: this.usersList
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
index 558b26be26..2b1b2de746 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/permissionCheckbox/permissionCheckbox.component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
+import {Role} from '../../interfaces/role';
 
 @Component({
   selector: 'app-permission-checkbox',
@@ -8,11 +8,11 @@ import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PermissionCheckboxComponent implements OnInit {
-  @Input() role: AdministrationUserRole;
+  @Input() role: Role;
   @Input() onlyCheckbox = false;
   @Input() isDisabled = false;
 
-  @Output() checkboxChanged = new EventEmitter<AdministrationUserRole>();
+  @Output() checkboxChanged = new EventEmitter<Role>();
 
   public idRandomizer: string;
 
@@ -22,7 +22,7 @@ export class PermissionCheckboxComponent implements OnInit {
       Math.floor(Math.random() * 100000);
   }
 
-  public onChange(changeEvent: Event, role: AdministrationUserRole): void {
+  public onChange(changeEvent: Event, role: Role): void {
     const {checked} = changeEvent.target as HTMLInputElement;
     this.checkboxChanged.next({...role, hasRole: checked});
   }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.html
similarity index 96%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.html
index bf2be67564..c10581fe48 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.html
@@ -47,14 +47,14 @@
                     matTooltip="Compare Permissions"
                     mat-icon-button
                     [disabled]="disableUserActionButtons"
-                    (click)="compareUser($event, user)">
+                    (click)="compareUser($event)">
               <mat-icon>compare_arrows</mat-icon>
             </button>
             <button class="header-buttons-edit"
                     matTooltip="Edit User"
                     mat-icon-button
                     [disabled]="disableUserActionButtons"
-                    (click)="editUser($event, user)">
+                    (click)="editUser($event)">
               <mat-icon>edit</mat-icon>
             </button>
             <ng-container *ngIf="!isDeleteUserLoading; else spinnerTemplate">
@@ -62,7 +62,7 @@
                       matTooltip="Delete User"
                       mat-icon-button
                       [disabled]="disableUserActionButtons"
-                      (click)="deleteUser($event, user)">
+                      (click)="removeUser($event)">
                 <mat-icon>delete_forever</mat-icon>
               </button>
             </ng-container>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.scss
similarity index 100%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.scss
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.scss
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
similarity index 50%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
index e95f228f1a..85b430fcf9 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/administrationUser/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
@@ -2,13 +2,18 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component, EventEmitter,
-  Input, OnInit, Output
+  Input, OnDestroy, OnInit, Output
 } from '@angular/core';
-import {AdministrationUser} from '../../interfaces/administrationUser';
-import {AdministrationUserRole} from '../../interfaces/administrationUserRole';
+import {User} from '../../interfaces/user';
+import {Role} from '../../interfaces/role';
 import {cloneDeep} from 'lodash';
 import {RoleService} from '../../../services/role.service';
 import {FormBuilder, FormGroup} from '@angular/forms';
+import {UsersAndPermissionsStateService} from "../../services/usersAndPermissionsState.service";
+import {RemoveUsersRequest} from "../../interfaces/addRemoveUsers";
+import {Subject, takeUntil} from "rxjs";
+import {finalize} from "rxjs/operators";
+import {EditUsers} from "../../interfaces/editUsers";
 
 @Component({
   selector: 'app-administration-user',
@@ -16,11 +21,12 @@ import {FormBuilder, FormGroup} from '@angular/forms';
   styleUrls: ['administrationUser.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AdministrationUserComponent implements OnInit {
+export class AdministrationUserComponent implements OnInit, OnDestroy {
   public editUserForm: FormGroup;
 
-  public user: AdministrationUser;
-  private rolesBeforeChange: AdministrationUserRole[];
+  public user: User;
+  private rolesBeforeChange: Role[];
+  private subscriptionSubject$ = new Subject<void>();
 
   /* Switchers */
   public arePermissionActionButtonsDisabled = true;
@@ -29,18 +35,17 @@ export class AdministrationUserComponent implements OnInit {
   public isEditPermissionsLoading = false;
   public isDeleteUserLoading = false;
 
-  @Input('user') set administrationUser(user: AdministrationUser) {
+  @Input('user') set administrationUser(user: User) {
     this.user = user;
     this.rolesBeforeChange = cloneDeep(user.roles);
   }
 
-  @Output() comparingUser = new EventEmitter<AdministrationUser>();
-  @Output() editingUser = new EventEmitter<AdministrationUser>();
-  @Output() deletingUser = new EventEmitter<AdministrationUser>();
+  @Output() comparingUser = new EventEmitter<User>();
 
   constructor(private readonly cdr: ChangeDetectorRef,
               private readonly roleService: RoleService,
-              private readonly formBuilder: FormBuilder) {
+              private readonly formBuilder: FormBuilder,
+              private readonly stateService: UsersAndPermissionsStateService) {
   }
 
   ngOnInit(): void {
@@ -50,17 +55,20 @@ export class AdministrationUserComponent implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    this.subscriptionSubject$.next();
+    this.subscriptionSubject$.complete();
+  }
+
   /* Event Handlers */
 
-  public compareUser(event: Event, user: AdministrationUser): void {
+  public compareUser(event: Event): void {
     event.stopPropagation();
-    console.log(user, 'COMPARE_USER');
-    this.comparingUser.emit(user);
+    this.comparingUser.emit(this.user);
   }
 
-  public editUser(event: Event, user: AdministrationUser): void {
+  public editUser(event: Event): void {
     event.stopPropagation();
-    console.log(user, 'EDIT_USER');
     this.isUserEditing = !this.isUserEditing;
   }
 
@@ -68,34 +76,44 @@ export class AdministrationUserComponent implements OnInit {
     event.stopPropagation();
     this.isEditUserLoading = true;
     this.editUserForm.disable();
-
-
-    console.log(this.user, 'SAVED_EDITED');
-
-    // mocking
-    setTimeout(() => {
-      this.editUserForm.enable();
-      this.user.name = this.editUserForm.get('name').value;
-      this.user.phone = this.editUserForm.get('phone').value;
-      this.cdr.markForCheck();
-      this.isEditUserLoading = false;
-    }, 3000);
+    const userToEdit: EditUsers = {
+      users: [
+        {email: this.user.email, ...this.editUserForm.getRawValue()}
+      ]
+    }
+
+    this.stateService.editUsers(userToEdit)
+      .pipe(
+        takeUntil(this.subscriptionSubject$),
+        finalize(() => {
+          this.cdr.markForCheck();
+          this.isEditUserLoading = false;
+          this.editUserForm.enable();
+        })
+      )
+      .subscribe();
   }
 
-  public deleteUser(event: Event, user: AdministrationUser): void {
+  public removeUser(event: Event): void {
     event.stopPropagation();
     this.isDeleteUserLoading = true;
 
-    console.log(user, 'SAVED_EDITED');
-
-    // mocking
-    setTimeout(() => {
-      this.cdr.markForCheck();
-      this.isDeleteUserLoading = false;
-    }, 3000);
+    const usersToRemove: RemoveUsersRequest = {
+      removeUsers: [this.user.email]
+    }
+
+    this.stateService.removeUsers(usersToRemove)
+      .pipe(
+        takeUntil(this.subscriptionSubject$),
+        finalize(() => {
+          this.cdr.markForCheck();
+          this.isDeleteUserLoading = false;
+        })
+      )
+      .subscribe();
   }
 
-  public onCheckboxChanged(changedRole: AdministrationUserRole): void {
+  public onCheckboxChanged(changedRole: Role): void {
     this.user.roles = this.user.roles.map((role) =>
       changedRole.name === role.name ?
         {...role, hasRole: changedRole.hasRole} :
@@ -106,15 +124,30 @@ export class AdministrationUserComponent implements OnInit {
   }
 
   public saveChanges(): void {
-    this.rolesBeforeChange = this.user.roles;
-    this.arePermissionActionButtonsDisabled = true;
     this.isEditPermissionsLoading = true;
 
-    // mocking
-    setTimeout(() => {
-      this.cdr.markForCheck();
-      this.isEditPermissionsLoading = false;
-    }, 3000);
+    const userRolesToEdit = {
+      users: [this.user.email],
+      roles: this.user.roles.filter(role => role.hasRole).map(role => role.name)
+    }
+
+    this.stateService.editUserRoles(userRolesToEdit)
+      .pipe(
+        takeUntil(this.subscriptionSubject$),
+        finalize(() => {
+          this.cdr.markForCheck();
+          this.isEditPermissionsLoading = false;
+        })
+      )
+      .subscribe({
+        next: () => {
+          this.rolesBeforeChange = this.user.roles;
+          this.arePermissionActionButtonsDisabled = true;
+        },
+        error: () => {
+          // @TODO handle error
+        }
+      })
   }
 
   public discardChanges(): void {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
deleted file mode 100644
index f963134357..0000000000
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addAdministrationUser.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {AdministrationUserRole} from './administrationUserRole';
-import {AdministrationUser} from './administrationUser';
-
-export interface AddAdministrationUserRequest {
-  email: string;
-  name: string;
-  phone: string;
-  roles: string[];
-}
-
-export interface AddAdministrationUserModal {
-  availableRoles: Partial<AdministrationUserRole[]>;
-  existingUsers: AdministrationUser[];
-}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addRemoveUsers.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addRemoveUsers.ts
new file mode 100644
index 0000000000..b4c645b2f1
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addRemoveUsers.ts
@@ -0,0 +1,22 @@
+import {Role} from './role';
+import {User} from './user';
+
+export interface AddUser {
+  email: string;
+  name: string;
+  phone: string;
+  roles: string[];
+}
+
+export interface AddUsersRequest {
+  addUsers: AddUser[]
+}
+
+export interface RemoveUsersRequest {
+  removeUsers: string[]; // users emails
+}
+
+export interface AddUserModal {
+  availableRoles: Partial<Role[]>;
+  existingUsers: User[];
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
deleted file mode 100644
index 58593cd9e0..0000000000
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUser.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {AdministrationUserRole} from './administrationUserRole';
-
-export interface AdministrationUser {
-  email: string;
-  name: string;
-  phone: string;
-  roles: AdministrationUserRole[];
-}
-
-export interface AdministrationUsersResponse {
-  users: AdministrationUser[];
-}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/editUsers.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/editUsers.ts
new file mode 100644
index 0000000000..32c194ff09
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/editUsers.ts
@@ -0,0 +1,5 @@
+import {User} from "./user";
+
+export interface EditUsers {
+  users: Partial<User>[];
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser.ts
deleted file mode 100644
index a15fa2ece2..0000000000
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/removeAdministrationUser.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface RemoveAdministrationUserRequest {
-  users: string[];
-}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/role.ts
similarity index 68%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/role.ts
index b42bc30845..a18ef15bbe 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/administrationUserRole.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/role.ts
@@ -1,9 +1,14 @@
-export interface AdministrationUserRole {
+export interface Role {
   name: string;
   displayText: string;
   hasRole: boolean;
 }
 
+export interface EditUserRoles {
+  users: string[],
+  roles: string[]
+}
+
 export interface AvailableRole {
   name: string;
   displayText: string;
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/user.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/user.ts
new file mode 100644
index 0000000000..fda071db21
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/user.ts
@@ -0,0 +1,12 @@
+import {Role} from './role';
+
+export interface User {
+  email: string;
+  name: string;
+  phone: string;
+  roles: Role[];
+}
+
+export interface AdministrationUsersResponse {
+  users: User[];
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
index 3694ab4ede..582721cdc4 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
@@ -1,10 +1,11 @@
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
-import {AdministrationUser, AdministrationUsersResponse} from '../interfaces/administrationUser';
+import {User, AdministrationUsersResponse} from '../interfaces/user';
 import {DSMService} from '../../services/dsm.service';
 import {SessionService} from '../../services/session.service';
-import {AddAdministrationUserRequest} from '../interfaces/addAdministrationUser';
-import {AvailableStudyRolesResponse} from '../interfaces/administrationUserRole';
+import {AddUsersRequest, RemoveUsersRequest} from '../interfaces/addRemoveUsers';
+import {AvailableStudyRolesResponse, EditUserRoles} from '../interfaces/role';
+import {EditUsers} from "../interfaces/editUsers";
 
 @Injectable()
 export class UsersAndPermissionsHttpServiceService {
@@ -21,8 +22,20 @@ export class UsersAndPermissionsHttpServiceService {
     return this.dsmService.availableRoles(this.realm);
   }
 
-  public addUser(user: AddAdministrationUserRequest): Observable<AdministrationUser[]> {
-    return this.dsmService.addUser(this.realm, user);
+  public addUsers(addUsers: AddUsersRequest): Observable<User[]> {
+    return this.dsmService.addUser(this.realm, addUsers);
+  }
+
+  public editUserRoles(userRoles: EditUserRoles): Observable<User[]> {
+    return this.dsmService.editUsersRoles(this.realm, userRoles);
+  }
+
+  public editUsers(editUsers: EditUsers): Observable<User[]> {
+    return this.dsmService.editUsers(this.realm, editUsers);
+  }
+
+  public removeUsers(removeUsers: RemoveUsersRequest): Observable<User[]> {
+    return this.dsmService.removeUser(this.realm, removeUsers);
   }
 
   private get realm(): string {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
index 4961eac59a..3507e7b5f6 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
@@ -2,14 +2,17 @@ import {Injectable} from '@angular/core';
 import {UsersAndPermissionsHttpServiceService} from './usersAndPermissionsHttpService.service';
 import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from 'rxjs';
 import {pluck} from 'rxjs/operators';
-import {AddAdministrationUserComponent} from '../components/addAdministrationUser/addAdministrationUser.component';
-import {AddAdministrationUserRequest} from '../interfaces/addAdministrationUser';
+import {AddUserComponent} from '../components/addUser/addUser.component';
+import {AddUser, AddUsersRequest, RemoveUsersRequest} from '../interfaces/addRemoveUsers';
 import {MatDialog} from '@angular/material/dialog';
+import {User} from "../interfaces/user";
+import {AvailableRole, EditUserRoles} from "../interfaces/role";
+import {EditUsers} from "../interfaces/editUsers";
 
 @Injectable()
 export class UsersAndPermissionsStateService {
-  private usersListSubject$ = new BehaviorSubject([]);
-  private availableRolesSubject$ = new BehaviorSubject([]);
+  private usersListSubject$ = new BehaviorSubject<User[]>([]);
+  private availableRolesSubject$ = new BehaviorSubject<AvailableRole[]>([]);
   private readonly subscriptionSubject = new Subject<void>();
 
   public usersList$ = this.usersListSubject$.asObservable();
@@ -34,24 +37,42 @@ export class UsersAndPermissionsStateService {
   }
 
   public addUser(): Observable<any> {
-    let newUser: AddAdministrationUserRequest;
+    let newUser: AddUser;
 
-    const activeUserAddDialog = this.matDialog.open(AddAdministrationUserComponent, {data:{
+    const activeUserAddDialog = this.matDialog.open(AddUserComponent, {data:{
         availableRoles: this.availableRolesSubject$.getValue(),
         existingUsers: this.usersListSubject$.getValue()
       }, height: '95%'});
 
     return activeUserAddDialog.afterClosed()
       .pipe(
-        tap((user: AddAdministrationUserRequest) => newUser = user),
-        mergeMap((user: AddAdministrationUserRequest) =>
-          user ? this.httpService.addUser(user) : of(user)
+        tap((user: AddUser) => newUser = user),
+        mergeMap((addUser: AddUser) =>
+          addUser ? this.httpService.addUsers({addUsers: [addUser]}) : of(addUser)
         ),
         tap(() => newUser && this.pushUser(newUser)),
         takeUntil(this.subscriptionSubject)
       );
   }
 
+  public editUserRoles(userRoles: EditUserRoles): Observable<User[]> {
+    return this.httpService.editUserRoles(userRoles);
+  }
+
+  public removeUsers(removeUsers: RemoveUsersRequest): Observable<any> {
+    return this.httpService.removeUsers(removeUsers)
+      .pipe(
+        tap(() => this.removeUser(removeUsers.removeUsers))
+      );
+  }
+
+  public editUsers(editUsers: EditUsers): Observable<any> {
+    return this.httpService.editUsers(editUsers)
+      .pipe(
+        tap(() => this.editUser(editUsers))
+      );
+  }
+
   public unsubscribe(): void {
     this.subscriptionSubject.next();
     this.subscriptionSubject.complete();
@@ -59,7 +80,7 @@ export class UsersAndPermissionsStateService {
 
   /* Helper functions */
 
-  private pushUser(newUser: AddAdministrationUserRequest): void {
+  private pushUser(newUser: AddUser): void {
     this.usersListSubject$.next(
       [...this.usersListSubject$.getValue(),
         {
@@ -74,4 +95,13 @@ export class UsersAndPermissionsStateService {
         }]
     );
   }
+
+  private editUser({users: [userToEdit]}: EditUsers): void {
+    this.usersListSubject$.next([...this.usersListSubject$.getValue(), {...userToEdit} as User])
+  }
+
+  private removeUser(removedUsersEmails: string[]): void {
+    this.usersListSubject$
+      .next(this.usersListSubject$.getValue().filter(user => !removedUsersEmails.includes(user.email)))
+  }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index a14c16d5eb..04d9a71c08 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -3,8 +3,8 @@ import {UsersAndPermissionsHttpServiceService} from './services/usersAndPermissi
 import {MatDialog} from '@angular/material/dialog';
 import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from 'rxjs';
 import {finalize, pluck, withLatestFrom} from 'rxjs/operators';
-import {AddAdministrationUserComponent} from './components/addAdministrationUser/addAdministrationUser.component';
-import {AddAdministrationUserRequest} from './interfaces/addAdministrationUser';
+import {AddUserComponent} from './components/addUser/addUser.component';
+import {AddUsersRequest} from './interfaces/addRemoveUsers';
 import {UsersAndPermissionsStateService} from './services/usersAndPermissionsState.service';
 
 @Component({
@@ -18,7 +18,7 @@ export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
   public usersList$ = this.stateService.usersList$;
   public isLoading = false;
 
-  private readonly subscriptionSubject = new Subject<void>();
+  private readonly subscriptionSubject$ = new Subject<void>();
 
 
   constructor(
@@ -30,7 +30,7 @@ export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
     this.isLoading = true;
     this.stateService.initData()
       .pipe(
-        takeUntil(this.subscriptionSubject),
+        takeUntil(this.subscriptionSubject$),
         finalize(() => {
           this.isLoading = false;
           this.cdr.markForCheck();
@@ -41,13 +41,13 @@ export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
 
   ngOnDestroy(): void {
     this.stateService.unsubscribe();
-    this.subscriptionSubject.next();
-    this.subscriptionSubject.complete();
+    this.subscriptionSubject$.next();
+    this.subscriptionSubject$.complete();
   }
 
   public onAddUser(): void {
     this.stateService.addUser()
-      .pipe(takeUntil(this.subscriptionSubject))
+      .pipe(takeUntil(this.subscriptionSubject$))
       .subscribe();
   }
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
index b413cd3350..7b8399fd99 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule, Routes} from '@angular/router';
 import {UsersAndPermissionsComponent} from './usersAndPermissions.component';
-import {ListAdministrationUsersComponent} from './components/listAdministrationUsers/listAdministrationUsers.component';
+import {ListUsersComponent} from './components/listUsers/listUsers.component';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
@@ -10,7 +10,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {PermissionCheckboxComponent} from './components/permissionCheckbox/permissionCheckbox.component';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatTooltipModule} from '@angular/material/tooltip';
-import {AdministrationUserComponent} from './components/administrationUser/administrationUser.component';
+import {AdministrationUserComponent} from './components/user/administrationUser.component';
 import {MatInputModule} from '@angular/material/input';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
@@ -18,7 +18,7 @@ import {ComparePermissionsComponent} from './components/comparePermissions/compa
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatTableModule} from '@angular/material/table';
 import {MatSelectModule} from '@angular/material/select';
-import {AddAdministrationUserComponent} from './components/addAdministrationUser/addAdministrationUser.component';
+import {AddUserComponent} from './components/addUser/addUser.component';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 
@@ -29,11 +29,11 @@ const routes: Routes = [
 @NgModule({
   declarations: [
     UsersAndPermissionsComponent,
-    ListAdministrationUsersComponent,
+    ListUsersComponent,
     PermissionCheckboxComponent,
     AdministrationUserComponent,
     ComparePermissionsComponent,
-    AddAdministrationUserComponent
+    AddUserComponent
   ],
   imports: [
     CommonModule,

From 8c7d6d6bdde660d0a8b24ed287734cdbd6172513 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Wed, 2 Aug 2023 12:07:14 +0400
Subject: [PATCH 20/29] DSM-PEPPER-963-user-administration-services backend
 integration and error handling finished

---
 .../components/addUser/addUser.component.html | 18 +++++-
 .../components/addUser/addUser.component.scss | 13 ++++
 .../components/addUser/addUser.component.ts   | 36 +++++++++--
 .../error-message/error-message.component.ts  | 43 +++++++++++++
 .../listUsers/listUsers.component.html        | 13 ++--
 .../listUsers/listUsers.component.scss        | 15 ++---
 .../listUsers/listUsers.component.ts          | 12 +++-
 .../user/administrationUser.component.html    |  2 +-
 .../user/administrationUser.component.ts      | 34 +++++++++--
 .../interfaces/error-ui.ts                    |  5 ++
 ....ts => usersAndPermissionsHttp.service.ts} |  2 +-
 .../usersAndPermissionsState.service.ts       | 54 ++++-------------
 .../usersAndPermissions.component.html        | 15 +++--
 .../usersAndPermissions.component.scss        |  5 ++
 .../usersAndPermissions.component.ts          | 60 ++++++++++++-------
 .../usersAndPermissions.module.ts             | 13 +++-
 16 files changed, 239 insertions(+), 101 deletions(-)
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts
 create mode 100644 ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/error-ui.ts
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/{usersAndPermissionsHttpService.service.ts => usersAndPermissionsHttp.service.ts} (96%)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.html
index aa8f8cee1b..8134bd0727 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.html
@@ -2,6 +2,9 @@
   <section class="addUserForm-title">
     <h3>Create User</h3>
   </section>
+  <ng-container *ngIf="errorMessage">
+    <app-error-message errorText="Couldn't create user" [errorMessage]="errorMessage"></app-error-message>
+  </ng-container>
   <section class="addUserForm-inputs">
     <mat-form-field class="addUserForm-inputs-name">
       <mat-label>Email</mat-label>
@@ -40,8 +43,12 @@ <h4 class="addUserForm-permissions-title">Permissions</h4>
   <section class="addUserForm-buttons">
     <button class="addUserForm-buttons-add"
             color="accent"
-            [disabled]="!allowAddingUser"
-            (click)="addUser()" mat-raised-button>Add User</button>
+            [disabled]="!allowAddingUser || isLoading"
+            (click)="addUser()" mat-raised-button>
+      <ng-container *ngIf="!isLoading; else loadingTemplate">
+        Add User
+      </ng-container>
+    </button>
   </section>
 
   <section class="addUserForm-compare">
@@ -75,3 +82,10 @@ <h4 class="addUserForm-permissions-title">Permissions</h4>
   </section>
 
 </form>
+
+
+<ng-template #loadingTemplate>
+  <div class="loading-spinner">
+    <mat-spinner diameter="25"></mat-spinner>
+  </div>
+</ng-template>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.scss
index f4e2d54caf..8bf50c202b 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.scss
@@ -19,6 +19,9 @@
   &-buttons {
     @include common.flexContainer(center, center);
     margin-top: 1em;
+    &-add {
+      @include common.flexContainer(center, center);
+    }
   }
 
   .userData-divider {
@@ -49,3 +52,13 @@
     }
   }
 }
+
+.loading-spinner {
+  @include common.flexContainer(center, center);
+  padding: 0.5em 0;
+}
+
+app-error-message {
+  @include common.flexContainer(center, center);
+  margin-bottom: .7em;
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
index 1784831bb0..08aa04233f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
@@ -1,10 +1,14 @@
-import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject} from '@angular/core';
 import {FormBuilder, Validators} from '@angular/forms';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {Role} from '../../interfaces/role';
-import {AddUser, AddUserModal, AddUsersRequest} from '../../interfaces/addRemoveUsers';
+import {AddUser, AddUserModal} from '../../interfaces/addRemoveUsers';
 import {MatSelectChange} from '@angular/material/select';
 import {cloneDeep} from 'lodash';
+import {UsersAndPermissionsStateService} from "../../services/usersAndPermissionsState.service";
+import {Subject, takeUntil} from "rxjs";
+import {HttpErrorResponse} from "@angular/common/http";
+import {finalize} from "rxjs/operators";
 
 @Component({
   selector: 'app-add-administration-user',
@@ -15,6 +19,8 @@ import {cloneDeep} from 'lodash';
 export class AddUserComponent {
   public availableRoles = cloneDeep(this.data.availableRoles).map(role => ({...role, hasRole: false}));
   public selectedUserRoles: Role[];
+  public errorMessage: string | null = null;
+  public isLoading: boolean = false;
 
   public readonly addUserForm = this.formBuilder.group({
     email: [null, [Validators.required, Validators.email]],
@@ -23,20 +29,36 @@ export class AddUserComponent {
   });
 
   private onlySelectedRoles: Role[] = [];
+  private subscriptionSubject$ = new Subject<void>();
 
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: AddUserModal,
     private readonly matDialogRef: MatDialogRef<AddUserComponent>,
-    private readonly formBuilder: FormBuilder
+    private readonly formBuilder: FormBuilder,
+    private readonly stateService: UsersAndPermissionsStateService,
+    private readonly cdr: ChangeDetectorRef
   ) {}
 
   public addUser(): void {
     if (this.allowAddingUser) {
+      this.isLoading = true;
+      this.errorMessage = null;
       const userToAdd: AddUser = {
         ...this.addUserForm.getRawValue(),
         roles: this.onlySelectedRoles.map(r => r.name)
       };
-      this.matDialogRef.close(userToAdd);
+      this.stateService.addUser(userToAdd)
+        .pipe(
+          takeUntil(this.subscriptionSubject$),
+          finalize(() => {
+            this.cdr.markForCheck();
+            this.isLoading = false
+          })
+          )
+        .subscribe({
+          next: () => this.matDialogRef.close(userToAdd),
+          error: (error) => this.handleError(error)
+        })
     }
   }
 
@@ -72,4 +94,10 @@ export class AddUserComponent {
 
     this.onlySelectedRoles = this.availableRoles.filter(r => r.hasRole);
   }
+
+  private handleError(error: any): void {
+    if (error instanceof HttpErrorResponse) {
+      this.errorMessage = error.error;
+    }
+  }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts
new file mode 100644
index 0000000000..59dc4ca71b
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts
@@ -0,0 +1,43 @@
+import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
+
+@Component({
+  selector: 'app-error-message',
+  template: `
+        <div class="error" *ngIf="errorText">
+          <p class="error-text">{{errorText}}</p>
+          <ng-container *ngIf="errorMessage">
+            <mat-divider></mat-divider>
+            <p class="error-message">Error message: <br/><span class="error-message-text">{{errorMessage}}</span></p>
+          </ng-container>
+        </div>
+  `,
+  styles: [`
+    p {
+      margin: 0;
+      padding: 0;
+    }
+    mat-divider {
+      margin: .5em 0;
+    }
+    .error {
+      width: 50%;
+      margin: .5em;
+      background-color: rgba(230, 57, 70, 0.49);
+      border-radius: 1em;
+      padding: 1em;
+      text-align: center;
+      font-family:  Montserrat-SemiBold, sans-serif;
+    }
+    .error-message {
+      font-family:  Montserrat-Regular, sans-serif;
+    }
+    .error-message-text {
+      font-family:  Montserrat-SemiBold, sans-serif;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ErrorMessageComponent {
+  @Input() errorText: string;
+  @Input() errorMessage: string;
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.html
index 433688e198..6558ac899a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.html
@@ -1,14 +1,13 @@
-<ng-container *ngIf="usersList.length; else noUsersTemplate">
+<ng-container *ngIf="displayError">
+  <app-error-message [errorText]="errorText" [errorMessage]="errorMessage"></app-error-message>
+</ng-container>
+
+<ng-container>
   <ng-container *ngFor="let user of usersList; trackBy: trackBy">
     <app-administration-user
       [user]="user"
       (comparingUser)="openPermissionsComparisonModal($event)"
+      (reportError)="onError($event)"
     ></app-administration-user>
   </ng-container>
 </ng-container>
-
-<ng-template #noUsersTemplate>
-  <div class="no-users">
-    <p>No Available Users</p>
-  </div>
-</ng-template>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.scss
index fc1857b1a6..ce1997ad3d 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.scss
@@ -1,13 +1,8 @@
 @use "commonStyles" as common;
 
-.no-users {
-  @include common.flexContainer(normal, center);
-  padding: 3em;
-  p {
-    font-family: Montserrat-SemiBold, sans-serif;
-    text-align: center;
-    background-color: rgba(104, 189, 213, 0.6);
-    border-radius: 1em;
-    padding: 3em;
-  }
+
+
+app-error-message {
+  @include common.flexContainer(center, center);
+  margin-bottom: .7em;
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
index 93e6ce1050..14ae7500c0 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
@@ -2,6 +2,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {User} from '../../interfaces/user';
 import {MatDialog} from '@angular/material/dialog';
 import {ComparePermissionsComponent} from '../comparePermissions/comparePermissions.component';
+import {ErrorUi} from "../../interfaces/error-ui";
 
 @Component({
   selector: 'app-list-users',
@@ -11,12 +12,15 @@ import {ComparePermissionsComponent} from '../comparePermissions/comparePermissi
 })
 export class ListUsersComponent {
   @Input() usersList: User[];
+  public displayError: boolean = false;
+  public errorMessage: string | null = null;
+  public errorText: string | null  = null;
 
   constructor(private readonly matDialog: MatDialog) {
   }
 
   public trackBy(index: number, {name, phone, email}: User): any {
-    return name || phone || email;
+    return `${name}_${phone}_${email}\``;
   }
 
   public openPermissionsComparisonModal(firstUser: User): void {
@@ -26,4 +30,10 @@ export class ListUsersComponent {
       }, maxHeight: '50em', width: '70%'});
   }
 
+  public onError({displayError, errorText, errorMessage}: ErrorUi): void {
+    this.displayError = displayError;
+    this.errorText = errorText;
+    this.errorMessage = errorMessage;
+  }
+
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.html
index c10581fe48..d3bde7b0c9 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.html
@@ -79,7 +79,7 @@ <h3>Permissions</h3>
 
     <section class="permissions">
       <section class="permissions-selectSingle">
-        <ng-container *ngIf="user.roles.length">
+        <ng-container *ngIf="user.roles?.length">
           <app-permission-checkbox
             (checkboxChanged)="onCheckboxChanged($event)"
             [isDisabled]="isEditPermissionsLoading"
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
index 85b430fcf9..661eeb7c04 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
@@ -14,6 +14,8 @@ import {RemoveUsersRequest} from "../../interfaces/addRemoveUsers";
 import {Subject, takeUntil} from "rxjs";
 import {finalize} from "rxjs/operators";
 import {EditUsers} from "../../interfaces/editUsers";
+import {HttpErrorResponse} from "@angular/common/http";
+import {ErrorUi} from "../../interfaces/error-ui";
 
 @Component({
   selector: 'app-administration-user',
@@ -41,6 +43,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
   }
 
   @Output() comparingUser = new EventEmitter<User>();
+  @Output() reportError = new EventEmitter<Partial<ErrorUi>>();
 
   constructor(private readonly cdr: ChangeDetectorRef,
               private readonly roleService: RoleService,
@@ -75,6 +78,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
   public saveEditedUser(event: Event): void {
     event.stopPropagation();
     this.isEditUserLoading = true;
+    this.reportError.emit({displayError: false});
     this.editUserForm.disable();
     const userToEdit: EditUsers = {
       users: [
@@ -91,12 +95,19 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
           this.editUserForm.enable();
         })
       )
-      .subscribe();
+      .subscribe({
+        next: () => {
+          this.user.name = this.editUserForm.get('name').value;
+          this.user.phone = this.editUserForm.get('phone').value;
+        },
+        error: (error) => this.handleError(error, `Couldn't edit the user - ${this.user.email}`)
+      });
   }
 
   public removeUser(event: Event): void {
     event.stopPropagation();
     this.isDeleteUserLoading = true;
+    this.reportError.emit({displayError: false});
 
     const usersToRemove: RemoveUsersRequest = {
       removeUsers: [this.user.email]
@@ -110,7 +121,9 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
           this.isDeleteUserLoading = false;
         })
       )
-      .subscribe();
+      .subscribe({
+        error: (error) => this.handleError(error, `Couldn't remove the user - ${this.user.email}`)
+      });
   }
 
   public onCheckboxChanged(changedRole: Role): void {
@@ -125,6 +138,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
 
   public saveChanges(): void {
     this.isEditPermissionsLoading = true;
+    this.reportError.emit({displayError: false});
 
     const userRolesToEdit = {
       users: [this.user.email],
@@ -144,9 +158,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
           this.rolesBeforeChange = this.user.roles;
           this.arePermissionActionButtonsDisabled = true;
         },
-        error: () => {
-          // @TODO handle error
-        }
+        error: (error) => this.handleError(error, `Couldn't update roles for the user - ${this.user.email}`)
       })
   }
 
@@ -173,7 +185,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
   /* Helper functions */
 
   private get hasPermissionsChanged(): boolean {
-    return !this.rolesBeforeChange.every(({hasRole}, index) =>
+    return !this.rolesBeforeChange?.every(({hasRole}, index) =>
       hasRole === this.user.roles[index].hasRole);
   }
 
@@ -181,4 +193,14 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
     this.arePermissionActionButtonsDisabled = isDisabled;
   }
 
+  private handleError(error: any, text: string): void {
+    if(error instanceof HttpErrorResponse) {
+      this.reportError.emit({
+        displayError: true,
+        errorText: text,
+        errorMessage: error.error
+      });
+    }
+  }
+
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/error-ui.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/error-ui.ts
new file mode 100644
index 0000000000..e2e171c757
--- /dev/null
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/error-ui.ts
@@ -0,0 +1,5 @@
+export interface ErrorUi {
+  displayError: boolean;
+  errorText: string;
+  errorMessage: string;
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttp.service.ts
similarity index 96%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttp.service.ts
index 582721cdc4..1bd816e568 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttpService.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttp.service.ts
@@ -8,7 +8,7 @@ import {AvailableStudyRolesResponse, EditUserRoles} from '../interfaces/role';
 import {EditUsers} from "../interfaces/editUsers";
 
 @Injectable()
-export class UsersAndPermissionsHttpServiceService {
+export class UsersAndPermissionsHttpService {
 
   constructor(private readonly dsmService: DSMService,
               private readonly sessionService: SessionService) {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
index 3507e7b5f6..4e7eb0eb03 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
@@ -1,27 +1,24 @@
 import {Injectable} from '@angular/core';
-import {UsersAndPermissionsHttpServiceService} from './usersAndPermissionsHttpService.service';
-import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from 'rxjs';
+import {UsersAndPermissionsHttpService} from './usersAndPermissionsHttp.service';
+import {BehaviorSubject, mergeMap, Observable, tap} from 'rxjs';
 import {pluck} from 'rxjs/operators';
-import {AddUserComponent} from '../components/addUser/addUser.component';
-import {AddUser, AddUsersRequest, RemoveUsersRequest} from '../interfaces/addRemoveUsers';
-import {MatDialog} from '@angular/material/dialog';
+import {AddUser, RemoveUsersRequest} from '../interfaces/addRemoveUsers';
 import {User} from "../interfaces/user";
 import {AvailableRole, EditUserRoles} from "../interfaces/role";
 import {EditUsers} from "../interfaces/editUsers";
 
 @Injectable()
 export class UsersAndPermissionsStateService {
-  private usersListSubject$ = new BehaviorSubject<User[]>([]);
-  private availableRolesSubject$ = new BehaviorSubject<AvailableRole[]>([]);
-  private readonly subscriptionSubject = new Subject<void>();
+  private readonly usersListSubject$ = new BehaviorSubject<User[]>([]);
+  private readonly availableRolesSubject$ = new BehaviorSubject<AvailableRole[]>([]);
 
-  public usersList$ = this.usersListSubject$.asObservable();
+  public readonly usersList$ = this.usersListSubject$.asObservable();
+  public readonly availableRoles$ = this.availableRolesSubject$.asObservable();
 
-
-  constructor(private readonly httpService: UsersAndPermissionsHttpServiceService,
-              private readonly matDialog: MatDialog) {
+  constructor(private readonly httpService: UsersAndPermissionsHttpService) {
   }
 
+
   /* Events */
 
   public initData(): Observable<any> {
@@ -36,23 +33,9 @@ export class UsersAndPermissionsStateService {
     );
   }
 
-  public addUser(): Observable<any> {
-    let newUser: AddUser;
-
-    const activeUserAddDialog = this.matDialog.open(AddUserComponent, {data:{
-        availableRoles: this.availableRolesSubject$.getValue(),
-        existingUsers: this.usersListSubject$.getValue()
-      }, height: '95%'});
-
-    return activeUserAddDialog.afterClosed()
-      .pipe(
-        tap((user: AddUser) => newUser = user),
-        mergeMap((addUser: AddUser) =>
-          addUser ? this.httpService.addUsers({addUsers: [addUser]}) : of(addUser)
-        ),
-        tap(() => newUser && this.pushUser(newUser)),
-        takeUntil(this.subscriptionSubject)
-      );
+  public addUser(user: AddUser): Observable<any> {
+    return this.httpService.addUsers({addUsers: [user]})
+      .pipe(tap(() => this.pushUser(user)));
   }
 
   public editUserRoles(userRoles: EditUserRoles): Observable<User[]> {
@@ -67,15 +50,7 @@ export class UsersAndPermissionsStateService {
   }
 
   public editUsers(editUsers: EditUsers): Observable<any> {
-    return this.httpService.editUsers(editUsers)
-      .pipe(
-        tap(() => this.editUser(editUsers))
-      );
-  }
-
-  public unsubscribe(): void {
-    this.subscriptionSubject.next();
-    this.subscriptionSubject.complete();
+    return this.httpService.editUsers(editUsers);
   }
 
   /* Helper functions */
@@ -96,9 +71,6 @@ export class UsersAndPermissionsStateService {
     );
   }
 
-  private editUser({users: [userToEdit]}: EditUsers): void {
-    this.usersListSubject$.next([...this.usersListSubject$.getValue(), {...userToEdit} as User])
-  }
 
   private removeUser(removedUsersEmails: string[]): void {
     this.usersListSubject$
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
index 3238f6482e..265543b11c 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
@@ -1,10 +1,17 @@
 <section class="title">
   <h1>Users And Permissions</h1>
 </section>
-<ng-container *ngIf="!isLoading; else loadingTemplate">
-  <button color="accent" class="addUserButton" mat-raised-button color="primary" (click)="onAddUser()">+ Add User
-  </button>
-  <app-list-users [usersList]="usersList$ | async"></app-list-users>
+<ng-container *ngIf="errorMessage">
+  <app-error-message errorText="Couldn't load users" [errorMessage]="errorMessage"></app-error-message>
+</ng-container>
+<ng-container *ngIf="(usersList$ | async) as usersList">
+  <ng-container *ngIf="(availableRoles$ | async) as availableRoles">
+    <ng-container *ngIf="!isLoading; else loadingTemplate">
+      <button color="accent" class="addUserButton" mat-raised-button color="primary" (click)="onAddUser(usersList, availableRoles)">+ Add User
+      </button>
+      <app-list-users [usersList]="usersList"></app-list-users>
+    </ng-container>
+  </ng-container>
 </ng-container>
 
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
index 859633bf67..ab6315ee9a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.scss
@@ -12,3 +12,8 @@
 .loading-spinner {
   @include common.flexContainer(normal, center);
 }
+
+app-error-message {
+  @include common.flexContainer(center, center);
+  margin-bottom: .7em;
+}
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index 04d9a71c08..a9f8e0b47c 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -1,54 +1,70 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
-import {UsersAndPermissionsHttpServiceService} from './services/usersAndPermissionsHttpService.service';
-import {MatDialog} from '@angular/material/dialog';
-import {BehaviorSubject, mergeMap, Observable, of, Subject, takeUntil, tap} from 'rxjs';
-import {finalize, pluck, withLatestFrom} from 'rxjs/operators';
-import {AddUserComponent} from './components/addUser/addUser.component';
-import {AddUsersRequest} from './interfaces/addRemoveUsers';
+import {Observable, Subject, takeUntil} from 'rxjs';
+import {finalize} from 'rxjs/operators';
 import {UsersAndPermissionsStateService} from './services/usersAndPermissionsState.service';
+import {HttpErrorResponse} from "@angular/common/http";
+import {AddUserComponent} from "./components/addUser/addUser.component";
+import {MatDialog} from "@angular/material/dialog";
+import {User} from "./interfaces/user";
+import {Role} from "./interfaces/role";
 
 @Component({
   selector: 'app-users-and-permissions',
   templateUrl: 'usersAndPermissions.component.html',
   styleUrls: ['usersAndPermissions.component.scss'],
-  providers: [UsersAndPermissionsHttpServiceService, UsersAndPermissionsStateService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
   public usersList$ = this.stateService.usersList$;
+  public availableRoles$ = this.stateService.availableRoles$;
+
   public isLoading = false;
+  public errorMessage: string | null = null;
 
   private readonly subscriptionSubject$ = new Subject<void>();
 
-
   constructor(
     private readonly stateService: UsersAndPermissionsStateService,
-    private readonly cdr: ChangeDetectorRef) {
+    private readonly cdr: ChangeDetectorRef,
+    private readonly matDialog: MatDialog) {
   }
 
   ngOnInit(): void {
+    this.initData()
+      .pipe(takeUntil(this.subscriptionSubject$))
+      .subscribe({
+        error: (error) => this.handleError(error)
+      })
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptionSubject$.next();
+    this.subscriptionSubject$.complete();
+  }
+
+  public onAddUser(usersList: User[], availableRoles: Role[]): void {
+    this.matDialog.open(AddUserComponent, {data:{
+        existingUsers: usersList,
+        availableRoles: availableRoles,
+      }, height: '95%'});
+  }
+
+  private initData(): Observable<any> {
     this.isLoading = true;
-    this.stateService.initData()
+    this.errorMessage = null;
+    return this.stateService.initData()
       .pipe(
-        takeUntil(this.subscriptionSubject$),
         finalize(() => {
           this.isLoading = false;
           this.cdr.markForCheck();
         })
       )
-      .subscribe();
   }
 
-  ngOnDestroy(): void {
-    this.stateService.unsubscribe();
-    this.subscriptionSubject$.next();
-    this.subscriptionSubject$.complete();
-  }
-
-  public onAddUser(): void {
-    this.stateService.addUser()
-      .pipe(takeUntil(this.subscriptionSubject$))
-      .subscribe();
+  private handleError(error: any): void {
+    if(error instanceof HttpErrorResponse) {
+      this.errorMessage = error.error;
+    }
   }
 
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
index 7b8399fd99..544df0a1cc 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
@@ -21,6 +21,9 @@ import {MatSelectModule} from '@angular/material/select';
 import {AddUserComponent} from './components/addUser/addUser.component';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {ErrorMessageComponent} from "./components/error-message/error-message.component";
+import {UsersAndPermissionsHttpService} from "./services/usersAndPermissionsHttp.service";
+import {UsersAndPermissionsStateService} from "./services/usersAndPermissionsState.service";
 
 const routes: Routes = [
   {path: '', component: UsersAndPermissionsComponent}
@@ -33,7 +36,8 @@ const routes: Routes = [
     PermissionCheckboxComponent,
     AdministrationUserComponent,
     ComparePermissionsComponent,
-    AddUserComponent
+    AddUserComponent,
+    ErrorMessageComponent
   ],
   imports: [
     CommonModule,
@@ -55,5 +59,10 @@ const routes: Routes = [
     ReactiveFormsModule,
     MatAutocompleteModule
   ],
+  providers: [
+    UsersAndPermissionsHttpService,
+    UsersAndPermissionsStateService
+  ]
 })
-export class UsersAndPermissionsModule {}
+export class UsersAndPermissionsModule {
+}

From b3a7f492f1fd041a790690e7d3221f4a6842754a Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Wed, 2 Aug 2023 12:09:49 +0400
Subject: [PATCH 21/29] DSM-PEPPER-963-user-administration-services removed
 consoles

---
 .../comparePermissions/comparePermissions.component.ts        | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
index 5e257c7d1a..bc788d6529 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
@@ -18,10 +18,7 @@ export class ComparePermissionsComponent implements OnInit {
               private data: {firstUser: User; allUsers: User[]}) {}
 
   ngOnInit(): void {
-    console.log(this.data, 'COMPARE_DATA');
     this.roles = [...this.firstUser.roles];
-
-    console.log(this.roles, 'DATA_SOURCE');
   }
 
   public userSelected({value: selectedUserEmail}: MatSelectChange): void {
@@ -38,7 +35,6 @@ export class ComparePermissionsComponent implements OnInit {
     }
 
     this.secondUser = foundUser;
-    console.log(this.roles, 'AFTER_CHANGE');
   }
 
   public get firstUser(): User {

From 01358e3cb4593f837fe0999cc394c0f70f935e91 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Wed, 2 Aug 2023 17:05:45 +0400
Subject: [PATCH 22/29] DSM-PEPPER-963-user-administration-services sorted and
 logout

---
 .../interceptors/Http-interceptor.service.ts  | 15 ++++++++---
 .../user/administrationUser.component.ts      |  6 ++---
 .../usersAndPermissionsState.service.ts       | 27 ++++++++++++++++---
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/interceptors/Http-interceptor.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/interceptors/Http-interceptor.service.ts
index 89f78989ed..3363bf2186 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/interceptors/Http-interceptor.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/interceptors/Http-interceptor.service.ts
@@ -9,19 +9,26 @@ import {Observable, throwError} from 'rxjs';
 import {catchError} from 'rxjs/operators';
 import {Injectable} from '@angular/core';
 import {ErrorsService} from '../services/errors.service';
+import {Auth} from "../services/auth.service";
 
 @Injectable()
 export class HttpInterceptorService implements HttpInterceptor {
   private readonly ignoreStatuses: number[] = [401];
 
-  constructor(private errorsService: ErrorsService) {}
+  constructor(private readonly errorsService: ErrorsService,
+              private readonly authService: Auth) {}
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     return next.handle(req).pipe(
       catchError((error: any) => {
-        error instanceof HttpErrorResponse &&
-        !this.ignoreStatuses.includes(error?.status) &&
-        this.errorsService.openSnackbar(error);
+
+
+        if(error instanceof HttpErrorResponse) {
+          !this.ignoreStatuses.includes(error?.status) &&
+          this.errorsService.openSnackbar(error);
+
+          error?.status === 401 && this.authService.doLogout();
+        }
 
         return throwError(() => error);
       })
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
index 661eeb7c04..6cf4ba8cc2 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
@@ -185,8 +185,8 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
   /* Helper functions */
 
   private get hasPermissionsChanged(): boolean {
-    return !this.rolesBeforeChange?.every(({hasRole}, index) =>
-      hasRole === this.user.roles[index].hasRole);
+    return !this.rolesBeforeChange?.every(({hasRole, name}) =>
+      hasRole === this.user.roles.find(({name: name2}) => name === name2).hasRole);
   }
 
   private changeActionButtonsState(isDisabled: boolean): void {
@@ -194,7 +194,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
   }
 
   private handleError(error: any, text: string): void {
-    if(error instanceof HttpErrorResponse) {
+    if (error instanceof HttpErrorResponse) {
       this.reportError.emit({
         displayError: true,
         errorText: text,
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
index 4e7eb0eb03..8eb9624867 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
@@ -1,10 +1,10 @@
 import {Injectable} from '@angular/core';
 import {UsersAndPermissionsHttpService} from './usersAndPermissionsHttp.service';
 import {BehaviorSubject, mergeMap, Observable, tap} from 'rxjs';
-import {pluck} from 'rxjs/operators';
+import {map, pluck} from 'rxjs/operators';
 import {AddUser, RemoveUsersRequest} from '../interfaces/addRemoveUsers';
 import {User} from "../interfaces/user";
-import {AvailableRole, EditUserRoles} from "../interfaces/role";
+import {AvailableRole, EditUserRoles, Role} from "../interfaces/role";
 import {EditUsers} from "../interfaces/editUsers";
 
 @Injectable()
@@ -12,8 +12,23 @@ export class UsersAndPermissionsStateService {
   private readonly usersListSubject$ = new BehaviorSubject<User[]>([]);
   private readonly availableRolesSubject$ = new BehaviorSubject<AvailableRole[]>([]);
 
-  public readonly usersList$ = this.usersListSubject$.asObservable();
-  public readonly availableRoles$ = this.availableRolesSubject$.asObservable();
+  public readonly usersList$ = this.usersListSubject$.asObservable()
+    .pipe(
+      map((users: User[]) =>
+        users.map((user: User) =>
+          ({
+            ...user,
+            roles: this.sortRoles(user.roles.slice())
+          })
+        )
+      )
+    );
+
+  public readonly availableRoles$ = this.availableRolesSubject$.asObservable()
+    .pipe(
+      map((roles: Role[]) => this.sortRoles(roles))
+    );
+
 
   constructor(private readonly httpService: UsersAndPermissionsHttpService) {
   }
@@ -76,4 +91,8 @@ export class UsersAndPermissionsStateService {
     this.usersListSubject$
       .next(this.usersListSubject$.getValue().filter(user => !removedUsersEmails.includes(user.email)))
   }
+
+  private sortRoles(roles: Role[]): Role[] {
+    return roles.sort(({displayText: role1}, {displayText: role2}) => role1.localeCompare(role2))
+  }
 }

From 3e5d98728bf0be821229d2889bea9877476ebf92 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Wed, 2 Aug 2023 17:59:33 +0400
Subject: [PATCH 23/29] DSM-PEPPER-963-user-administration-services if error
 don't display

---
 .../src/app/guards/usersAndPermissions.guard.ts    |  4 ++--
 .../usersAndPermissions.component.html             | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
index 0304021c50..e34cbea6dc 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
@@ -19,7 +19,7 @@ export class UsersAndPermissionsCanLoadGuard implements CanLoad {
   }
 
   canLoad(route: Route, segments: UrlSegment[]): boolean | UrlTree {
-    return this.session.selectedRealm === 'cmi-lms';
+    return true;
   }
 }
 
@@ -32,6 +32,6 @@ export class UsersAndPermissionsCanActivateGuard implements CanActivate {
   ) {}
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):  boolean | UrlTree {
-    return this.session.selectedRealm === 'cmi-lms';
+    return true;
   }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
index 265543b11c..0de2ec5e8c 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.html
@@ -4,12 +4,14 @@ <h1>Users And Permissions</h1>
 <ng-container *ngIf="errorMessage">
   <app-error-message errorText="Couldn't load users" [errorMessage]="errorMessage"></app-error-message>
 </ng-container>
-<ng-container *ngIf="(usersList$ | async) as usersList">
-  <ng-container *ngIf="(availableRoles$ | async) as availableRoles">
-    <ng-container *ngIf="!isLoading; else loadingTemplate">
-      <button color="accent" class="addUserButton" mat-raised-button color="primary" (click)="onAddUser(usersList, availableRoles)">+ Add User
-      </button>
-      <app-list-users [usersList]="usersList"></app-list-users>
+<ng-container *ngIf="!errorMessage">
+  <ng-container *ngIf="(usersList$ | async) as usersList">
+    <ng-container *ngIf="(availableRoles$ | async) as availableRoles">
+      <ng-container *ngIf="!isLoading; else loadingTemplate">
+        <button color="accent" class="addUserButton" mat-raised-button color="primary" (click)="onAddUser(usersList, availableRoles)">+ Add User
+        </button>
+        <app-list-users [usersList]="usersList"></app-list-users>
+      </ng-container>
     </ng-container>
   </ng-container>
 </ng-container>

From 423b8ad144d21342f6d7c3f28cd9375d1bf4af1d Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 3 Aug 2023 11:08:00 +0400
Subject: [PATCH 24/29] DSM-PEPPER-963-user-administration-services guards and
 edit user updated

---
 .../app/guards/usersAndPermissions.guard.ts   | 17 +++++----------
 .../app/navigation/navigation.component.html  |  2 +-
 .../src/app/services/role.service.ts          | 21 +++++++++++++++++--
 .../listUsers/listUsers.component.ts          |  2 +-
 .../user/administrationUser.component.ts      |  4 ----
 .../usersAndPermissionsState.service.ts       | 18 +++++++++++++---
 6 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
index e34cbea6dc..9d49d48bea 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
@@ -4,34 +4,27 @@ import {
   CanActivate,
   CanLoad,
   Route,
-  Router,
   RouterStateSnapshot,
   UrlSegment,
   UrlTree
 } from '@angular/router';
-import {SessionService} from '../services/session.service';
+import {RoleService} from "../services/role.service";
 
 @Injectable()
 export class UsersAndPermissionsCanLoadGuard implements CanLoad {
-  constructor(
-    private readonly router: Router,
-    private readonly session: SessionService) {
-  }
+  constructor(private readonly roleService: RoleService) {}
 
   canLoad(route: Route, segments: UrlSegment[]): boolean | UrlTree {
-    return true;
+    return this.roleService.isStudyUserAdmin || this.roleService.isPepperAdmin;
   }
 }
 
 
 @Injectable()
 export class UsersAndPermissionsCanActivateGuard implements CanActivate {
-  constructor(
-    private readonly router: Router,
-    private readonly session: SessionService
-  ) {}
+  constructor(private readonly roleService: RoleService) {}
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):  boolean | UrlTree {
-    return true;
+    return this.roleService.isStudyUserAdmin || this.roleService.isPepperAdmin;
   }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/navigation/navigation.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/navigation/navigation.component.html
index 3396ba93aa..550bf5d677 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/navigation/navigation.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/navigation/navigation.component.html
@@ -85,7 +85,7 @@
           <li *ngIf="hasRole().allowedToDownloadNDI()"><a href="#" [routerLink]="['ndi']"> NDI Download </a></li>
           <li *ngIf="showOncHistoryUploadPage(selectedStudy | async)"><a [routerLink]="['oncHistoryUpload']">Onc History Upload</a></li>
           <li ><a href="#" [routerLink]="['drugList']"> Drug List </a></li>
-          <li ><a href="#" [routerLink]="['usersAndPermissions']"> Users And Permissions </a></li>
+          <li *ngIf="hasRole().isPepperAdmin || hasRole().isStudyUserAdmin"><a href="#" [routerLink]="['usersAndPermissions']"> Users And Permissions </a></li>
         </ul>
       </li>
     </ul>
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/role.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/role.service.ts
index d2b5e4af98..764ad13621 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/role.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/role.service.ts
@@ -41,7 +41,8 @@ export class RoleService {
   private _user: string;
   private _userEmail: string;
   private _userSetting: UserSetting;
-
+  private _studyUserAdmin = false;
+  private _pepperAdmin = false;
 
   constructor( private sessionService: SessionService,
                @Inject( 'ddp.config' ) private config: ConfigurationService ) {
@@ -82,6 +83,8 @@ export class RoleService {
     this._viewSeqOrderStatus = false;
     this._uploadRorFile = false;
     this._viewSharedLearnings = false;
+    this._studyUserAdmin = false;
+    this._pepperAdmin = false;
   }
 
   public setRoles( token: string ): void {
@@ -188,6 +191,12 @@ export class RoleService {
           else if (entry === 'view_shared_learnings') {
             this._viewSharedLearnings = true;
           }
+          else if (entry === 'study_user_admin') {
+            this._studyUserAdmin = true;
+          }
+          else if (entry === 'pepper_admin') {
+            this._pepperAdmin = true;
+          }
         }
       }
       const userSettings: any = this.getClaimByKeyName( token, 'USER_SETTINGS' );
@@ -311,7 +320,7 @@ export class RoleService {
     return this._isParticipantEdit;
   }
 
-  private getClaimByKeyName( token: any, key: string ): any {
+  public getClaimByKeyName( token: any, key: string ): any {
     return this.sessionService.getDSMClaims( token )[ this.config.auth0ClaimNameSpace + key ];
   }
 
@@ -350,4 +359,12 @@ export class RoleService {
   public get allowViewSharedLearnings(): boolean {
     return this._viewSharedLearnings;
   }
+
+  public get isStudyUserAdmin(): boolean {
+    return this._studyUserAdmin;
+  }
+
+  public get isPepperAdmin(): boolean {
+    return this._pepperAdmin;
+  }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
index 14ae7500c0..c2227f789b 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
@@ -20,7 +20,7 @@ export class ListUsersComponent {
   }
 
   public trackBy(index: number, {name, phone, email}: User): any {
-    return `${name}_${phone}_${email}\``;
+    return `${name}_${phone}_${email}`;
   }
 
   public openPermissionsComparisonModal(firstUser: User): void {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
index 6cf4ba8cc2..e9491741bc 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
@@ -96,10 +96,6 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
         })
       )
       .subscribe({
-        next: () => {
-          this.user.name = this.editUserForm.get('name').value;
-          this.user.phone = this.editUserForm.get('phone').value;
-        },
         error: (error) => this.handleError(error, `Couldn't edit the user - ${this.user.email}`)
       });
   }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
index 8eb9624867..2fc86a3f48 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
@@ -65,7 +65,8 @@ export class UsersAndPermissionsStateService {
   }
 
   public editUsers(editUsers: EditUsers): Observable<any> {
-    return this.httpService.editUsers(editUsers);
+    return this.httpService.editUsers(editUsers)
+      .pipe(tap(() => this.editUser(editUsers.users[0])));
   }
 
   /* Helper functions */
@@ -86,13 +87,24 @@ export class UsersAndPermissionsStateService {
     );
   }
 
+  private editUser(editedUser: Partial<User>): void {
+    this.usersListSubject$.next(this.usersListSubject$.getValue().map((user) => {
+      if (editedUser.email === user.email) {
+        user.name = editedUser.name;
+        user.phone = editedUser.phone;
+      }
+      return user
+    }))
+  }
+
 
   private removeUser(removedUsersEmails: string[]): void {
     this.usersListSubject$
       .next(this.usersListSubject$.getValue().filter(user => !removedUsersEmails.includes(user.email)))
   }
 
-  private sortRoles(roles: Role[]): Role[] {
-    return roles.sort(({displayText: role1}, {displayText: role2}) => role1.localeCompare(role2))
+  private sortRoles(roles: Role[] | AvailableRole[]): Role[] | AvailableRole[] {
+    return roles.sort(({displayText: role1}, {displayText: role2}) =>
+      role1.localeCompare(role2));
   }
 }

From 095ad4dfbbdf5a5d195a239ace5aeaca51e184aa Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 3 Aug 2023 11:08:53 +0400
Subject: [PATCH 25/29] DSM-PEPPER-963-user-administration-services linter fix

---
 .../app/guards/usersAndPermissions.guard.ts   |  2 +-
 .../interceptors/Http-interceptor.service.ts  |  2 +-
 .../src/app/services/dsm.service.ts           |  4 ++--
 .../components/addUser/addUser.component.ts   | 14 ++++++------
 .../error-message/error-message.component.ts  |  2 +-
 .../listUsers/listUsers.component.ts          |  4 ++--
 .../user/administrationUser.component.ts      | 22 +++++++++----------
 .../interfaces/addRemoveUsers.ts              |  2 +-
 .../interfaces/editUsers.ts                   |  2 +-
 .../usersAndPermissions/interfaces/role.ts    |  4 ++--
 .../usersAndPermissionsHttp.service.ts        |  2 +-
 .../usersAndPermissionsState.service.ts       | 12 +++++-----
 .../usersAndPermissions.component.ts          | 14 ++++++------
 .../usersAndPermissions.module.ts             |  6 ++---
 14 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
index 9d49d48bea..029503e77b 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/guards/usersAndPermissions.guard.ts
@@ -8,7 +8,7 @@ import {
   UrlSegment,
   UrlTree
 } from '@angular/router';
-import {RoleService} from "../services/role.service";
+import {RoleService} from '../services/role.service';
 
 @Injectable()
 export class UsersAndPermissionsCanLoadGuard implements CanLoad {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/interceptors/Http-interceptor.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/interceptors/Http-interceptor.service.ts
index 3363bf2186..a310996256 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/interceptors/Http-interceptor.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/interceptors/Http-interceptor.service.ts
@@ -9,7 +9,7 @@ import {Observable, throwError} from 'rxjs';
 import {catchError} from 'rxjs/operators';
 import {Injectable} from '@angular/core';
 import {ErrorsService} from '../services/errors.service';
-import {Auth} from "../services/auth.service";
+import {Auth} from '../services/auth.service';
 
 @Injectable()
 export class HttpInterceptorService implements HttpInterceptor {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
index 9862d82ae4..ab309c5a50 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts
@@ -22,8 +22,8 @@ import {StatisticsEnum} from '../dashboard-statistics/enums/statistics.enum';
 import {SomaticResultSignedUrlRequest} from '../sharedLearningUpload/interfaces/somaticResultSignedUrlRequest';
 import {SendToParticipantRequest} from '../sharedLearningUpload/interfaces/sendToParticipant';
 import {AddUsersRequest, RemoveUsersRequest} from '../usersAndPermissions/interfaces/addRemoveUsers';
-import {EditUsers} from "../usersAndPermissions/interfaces/editUsers";
-import {EditUserRoles} from "../usersAndPermissions/interfaces/role";
+import {EditUsers} from '../usersAndPermissions/interfaces/editUsers';
+import {EditUserRoles} from '../usersAndPermissions/interfaces/role';
 
 declare var DDP_ENV: any;
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
index 08aa04233f..1df4bf446c 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts
@@ -5,10 +5,10 @@ import {Role} from '../../interfaces/role';
 import {AddUser, AddUserModal} from '../../interfaces/addRemoveUsers';
 import {MatSelectChange} from '@angular/material/select';
 import {cloneDeep} from 'lodash';
-import {UsersAndPermissionsStateService} from "../../services/usersAndPermissionsState.service";
-import {Subject, takeUntil} from "rxjs";
-import {HttpErrorResponse} from "@angular/common/http";
-import {finalize} from "rxjs/operators";
+import {UsersAndPermissionsStateService} from '../../services/usersAndPermissionsState.service';
+import {Subject, takeUntil} from 'rxjs';
+import {HttpErrorResponse} from '@angular/common/http';
+import {finalize} from 'rxjs/operators';
 
 @Component({
   selector: 'app-add-administration-user',
@@ -20,7 +20,7 @@ export class AddUserComponent {
   public availableRoles = cloneDeep(this.data.availableRoles).map(role => ({...role, hasRole: false}));
   public selectedUserRoles: Role[];
   public errorMessage: string | null = null;
-  public isLoading: boolean = false;
+  public isLoading = false;
 
   public readonly addUserForm = this.formBuilder.group({
     email: [null, [Validators.required, Validators.email]],
@@ -52,13 +52,13 @@ export class AddUserComponent {
           takeUntil(this.subscriptionSubject$),
           finalize(() => {
             this.cdr.markForCheck();
-            this.isLoading = false
+            this.isLoading = false;
           })
           )
         .subscribe({
           next: () => this.matDialogRef.close(userToAdd),
           error: (error) => this.handleError(error)
-        })
+        });
     }
   }
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts
index 59dc4ca71b..f2f728a424 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 
 @Component({
   selector: 'app-error-message',
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
index c2227f789b..17bfd1197f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/listUsers/listUsers.component.ts
@@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {User} from '../../interfaces/user';
 import {MatDialog} from '@angular/material/dialog';
 import {ComparePermissionsComponent} from '../comparePermissions/comparePermissions.component';
-import {ErrorUi} from "../../interfaces/error-ui";
+import {ErrorUi} from '../../interfaces/error-ui';
 
 @Component({
   selector: 'app-list-users',
@@ -12,7 +12,7 @@ import {ErrorUi} from "../../interfaces/error-ui";
 })
 export class ListUsersComponent {
   @Input() usersList: User[];
-  public displayError: boolean = false;
+  public displayError = false;
   public errorMessage: string | null = null;
   public errorText: string | null  = null;
 
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
index e9491741bc..3fc9fbaf0f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
@@ -9,13 +9,13 @@ import {Role} from '../../interfaces/role';
 import {cloneDeep} from 'lodash';
 import {RoleService} from '../../../services/role.service';
 import {FormBuilder, FormGroup} from '@angular/forms';
-import {UsersAndPermissionsStateService} from "../../services/usersAndPermissionsState.service";
-import {RemoveUsersRequest} from "../../interfaces/addRemoveUsers";
-import {Subject, takeUntil} from "rxjs";
-import {finalize} from "rxjs/operators";
-import {EditUsers} from "../../interfaces/editUsers";
-import {HttpErrorResponse} from "@angular/common/http";
-import {ErrorUi} from "../../interfaces/error-ui";
+import {UsersAndPermissionsStateService} from '../../services/usersAndPermissionsState.service';
+import {RemoveUsersRequest} from '../../interfaces/addRemoveUsers';
+import {Subject, takeUntil} from 'rxjs';
+import {finalize} from 'rxjs/operators';
+import {EditUsers} from '../../interfaces/editUsers';
+import {HttpErrorResponse} from '@angular/common/http';
+import {ErrorUi} from '../../interfaces/error-ui';
 
 @Component({
   selector: 'app-administration-user',
@@ -84,7 +84,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
       users: [
         {email: this.user.email, ...this.editUserForm.getRawValue()}
       ]
-    }
+    };
 
     this.stateService.editUsers(userToEdit)
       .pipe(
@@ -107,7 +107,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
 
     const usersToRemove: RemoveUsersRequest = {
       removeUsers: [this.user.email]
-    }
+    };
 
     this.stateService.removeUsers(usersToRemove)
       .pipe(
@@ -139,7 +139,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
     const userRolesToEdit = {
       users: [this.user.email],
       roles: this.user.roles.filter(role => role.hasRole).map(role => role.name)
-    }
+    };
 
     this.stateService.editUserRoles(userRolesToEdit)
       .pipe(
@@ -155,7 +155,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
           this.arePermissionActionButtonsDisabled = true;
         },
         error: (error) => this.handleError(error, `Couldn't update roles for the user - ${this.user.email}`)
-      })
+      });
   }
 
   public discardChanges(): void {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addRemoveUsers.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addRemoveUsers.ts
index b4c645b2f1..66e0a8b929 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addRemoveUsers.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/addRemoveUsers.ts
@@ -9,7 +9,7 @@ export interface AddUser {
 }
 
 export interface AddUsersRequest {
-  addUsers: AddUser[]
+  addUsers: AddUser[];
 }
 
 export interface RemoveUsersRequest {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/editUsers.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/editUsers.ts
index 32c194ff09..0eb0eb4ae0 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/editUsers.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/editUsers.ts
@@ -1,4 +1,4 @@
-import {User} from "./user";
+import {User} from './user';
 
 export interface EditUsers {
   users: Partial<User>[];
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/role.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/role.ts
index a18ef15bbe..9fe812b89a 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/role.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/interfaces/role.ts
@@ -5,8 +5,8 @@ export interface Role {
 }
 
 export interface EditUserRoles {
-  users: string[],
-  roles: string[]
+  users: string[];
+  roles: string[];
 }
 
 export interface AvailableRole {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttp.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttp.service.ts
index 1bd816e568..39f5236fe8 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttp.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsHttp.service.ts
@@ -5,7 +5,7 @@ import {DSMService} from '../../services/dsm.service';
 import {SessionService} from '../../services/session.service';
 import {AddUsersRequest, RemoveUsersRequest} from '../interfaces/addRemoveUsers';
 import {AvailableStudyRolesResponse, EditUserRoles} from '../interfaces/role';
-import {EditUsers} from "../interfaces/editUsers";
+import {EditUsers} from '../interfaces/editUsers';
 
 @Injectable()
 export class UsersAndPermissionsHttpService {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
index 2fc86a3f48..634d035a27 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/services/usersAndPermissionsState.service.ts
@@ -3,9 +3,9 @@ import {UsersAndPermissionsHttpService} from './usersAndPermissionsHttp.service'
 import {BehaviorSubject, mergeMap, Observable, tap} from 'rxjs';
 import {map, pluck} from 'rxjs/operators';
 import {AddUser, RemoveUsersRequest} from '../interfaces/addRemoveUsers';
-import {User} from "../interfaces/user";
-import {AvailableRole, EditUserRoles, Role} from "../interfaces/role";
-import {EditUsers} from "../interfaces/editUsers";
+import {User} from '../interfaces/user';
+import {AvailableRole, EditUserRoles, Role} from '../interfaces/role';
+import {EditUsers} from '../interfaces/editUsers';
 
 @Injectable()
 export class UsersAndPermissionsStateService {
@@ -93,14 +93,14 @@ export class UsersAndPermissionsStateService {
         user.name = editedUser.name;
         user.phone = editedUser.phone;
       }
-      return user
-    }))
+      return user;
+    }));
   }
 
 
   private removeUser(removedUsersEmails: string[]): void {
     this.usersListSubject$
-      .next(this.usersListSubject$.getValue().filter(user => !removedUsersEmails.includes(user.email)))
+      .next(this.usersListSubject$.getValue().filter(user => !removedUsersEmails.includes(user.email)));
   }
 
   private sortRoles(roles: Role[] | AvailableRole[]): Role[] | AvailableRole[] {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
index a9f8e0b47c..12242aa9c0 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.component.ts
@@ -2,11 +2,11 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit
 import {Observable, Subject, takeUntil} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 import {UsersAndPermissionsStateService} from './services/usersAndPermissionsState.service';
-import {HttpErrorResponse} from "@angular/common/http";
-import {AddUserComponent} from "./components/addUser/addUser.component";
-import {MatDialog} from "@angular/material/dialog";
-import {User} from "./interfaces/user";
-import {Role} from "./interfaces/role";
+import {HttpErrorResponse} from '@angular/common/http';
+import {AddUserComponent} from './components/addUser/addUser.component';
+import {MatDialog} from '@angular/material/dialog';
+import {User} from './interfaces/user';
+import {Role} from './interfaces/role';
 
 @Component({
   selector: 'app-users-and-permissions',
@@ -34,7 +34,7 @@ export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.subscriptionSubject$))
       .subscribe({
         error: (error) => this.handleError(error)
-      })
+      });
   }
 
   ngOnDestroy(): void {
@@ -58,7 +58,7 @@ export class UsersAndPermissionsComponent implements OnDestroy, OnInit {
           this.isLoading = false;
           this.cdr.markForCheck();
         })
-      )
+      );
   }
 
   private handleError(error: any): void {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
index 544df0a1cc..3406c72385 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/usersAndPermissions.module.ts
@@ -21,9 +21,9 @@ import {MatSelectModule} from '@angular/material/select';
 import {AddUserComponent} from './components/addUser/addUser.component';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
-import {ErrorMessageComponent} from "./components/error-message/error-message.component";
-import {UsersAndPermissionsHttpService} from "./services/usersAndPermissionsHttp.service";
-import {UsersAndPermissionsStateService} from "./services/usersAndPermissionsState.service";
+import {ErrorMessageComponent} from './components/error-message/error-message.component';
+import {UsersAndPermissionsHttpService} from './services/usersAndPermissionsHttp.service';
+import {UsersAndPermissionsStateService} from './services/usersAndPermissionsState.service';
 
 const routes: Routes = [
   {path: '', component: UsersAndPermissionsComponent}

From 02bb09e1155cb282739eaea89d84cae1a465195f Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 3 Aug 2023 11:28:17 +0400
Subject: [PATCH 26/29] DSM-PEPPER-963-user-administration-services
 confirmation modal generalized

---
 .../src/app/ALL-STUDIES/all-studies.module.ts |  2 +-
 .../confirmationModal.component.html          |  2 +-
 .../confirmationModal.component.scss          |  2 +-
 .../confirmationModal.component.ts            |  6 +--
 .../confirmationModal.spec.ts                 |  0
 .../sharedLearningsUpload.component.ts        |  4 +-
 .../user/administrationUser.component.ts      | 39 ++++++++++++-------
 7 files changed, 34 insertions(+), 21 deletions(-)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/{sharedLearningUpload => Shared}/components/confirmationModal/confirmationModal.component.html (88%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/{sharedLearningUpload => Shared}/components/confirmationModal/confirmationModal.component.scss (93%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/{sharedLearningUpload => Shared}/components/confirmationModal/confirmationModal.component.ts (80%)
 rename ddp-workspace/projects/ddp-dsm-ui/src/app/{sharedLearningUpload => Shared}/components/confirmationModal/confirmationModal.spec.ts (100%)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
index 0c48fc4aad..21b572e194 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/ALL-STUDIES/all-studies.module.ts
@@ -145,7 +145,7 @@ import {UploadFileComponent} from '../sharedLearningUpload/components/uploadFile
 import {FilesTableComponent} from '../sharedLearningUpload/components/filesTable/filesTable.component';
 import {
   ConfirmationModalComponent
-} from '../sharedLearningUpload/components/confirmationModal/confirmationModal.component';
+} from '../Shared/components/confirmationModal/confirmationModal.component';
 import {OncHistoryUploadComponent} from '../oncHistoryUpload/oncHistoryUpload.component';
 import {OncHistoryUploadGuard} from '../guards/oncHistoryUpload.guard';
 import {
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.html b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.html
similarity index 88%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.html
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.html
index fc1112af0a..36e394d112 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.html
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.html
@@ -1,6 +1,6 @@
 <main id="confirmationModal" class="confirmationModal">
   <section class="confirmationModal-content">
-    <p>Are you sure you want to delete {{fileName}}?</p>
+    <p>Are you sure you want to delete {{name}}?</p>
     <i><span>Warning:</span> this action can't be undone</i>
   </section>
   <section class="confirmationModal-buttons">
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.scss b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.scss
similarity index 93%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.scss
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.scss
index 3421de1967..3dddce060f 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.scss
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.scss
@@ -1,4 +1,4 @@
-@use 'commonStyles' as common;
+@use 'projects/ddp-dsm-ui/src/styles/commonStyles' as common;
 
 $yes-color: #FF595E;
 $no-color: #5FA8D3;
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.ts
similarity index 80%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.ts
index 544e570524..473cf4b293 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.component.ts
@@ -9,14 +9,14 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 export class ConfirmationModalComponent {
   constructor(
     private readonly dialogRef: MatDialogRef<ConfirmationModalComponent>,
-    @Inject(MAT_DIALOG_DATA) private data: {fileName: string},
+    @Inject(MAT_DIALOG_DATA) private data: {name: string},
   ) {}
 
   public confirmationAnswerIs(doIt: boolean): void {
     this.dialogRef.close(doIt);
   }
 
-  public get fileName(): string {
-    return this.data.fileName;
+  public get name(): string {
+    return this.data.name;
   }
 }
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.spec.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.spec.ts
similarity index 100%
rename from ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/components/confirmationModal/confirmationModal.spec.ts
rename to ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.spec.ts
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/sharedLearningsUpload.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/sharedLearningsUpload.component.ts
index 824b53ee49..eaae8008f2 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/sharedLearningsUpload.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/sharedLearningUpload/sharedLearningsUpload.component.ts
@@ -15,7 +15,7 @@ import {catchError, filter, finalize, first, take} from 'rxjs/operators';
 import {SharedLearningsStateService} from './services/sharedLearningsState.service';
 import {MatDialog} from '@angular/material/dialog';
 import {RoleService} from '../services/role.service';
-import {ConfirmationModalComponent} from './components/confirmationModal/confirmationModal.component';
+import {ConfirmationModalComponent} from '../Shared/components/confirmationModal/confirmationModal.component';
 import {HttpErrorResponse} from '@angular/common/http';
 
 @Component({
@@ -83,7 +83,7 @@ export class SharedLearningsUploadComponent implements OnInit, OnDestroy {
 
   public onDeleteFile({somaticDocumentId, fileName}: SomaticResultsFileWithStatus): void {
     const activeConfirmationDialog = this.matDialog
-      .open(ConfirmationModalComponent, {data: {fileName}, width: '500px'});
+      .open(ConfirmationModalComponent, {data: {name: fileName}, width: '500px'});
 
     activeConfirmationDialog.afterClosed()
       .pipe(
diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
index 3fc9fbaf0f..a41f209fc0 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
@@ -11,11 +11,13 @@ import {RoleService} from '../../../services/role.service';
 import {FormBuilder, FormGroup} from '@angular/forms';
 import {UsersAndPermissionsStateService} from '../../services/usersAndPermissionsState.service';
 import {RemoveUsersRequest} from '../../interfaces/addRemoveUsers';
-import {Subject, takeUntil} from 'rxjs';
-import {finalize} from 'rxjs/operators';
+import {mergeMap, Subject, takeUntil, tap} from 'rxjs';
+import {filter, finalize, take} from 'rxjs/operators';
 import {EditUsers} from '../../interfaces/editUsers';
 import {HttpErrorResponse} from '@angular/common/http';
 import {ErrorUi} from '../../interfaces/error-ui';
+import {ConfirmationModalComponent} from "../../../Shared/components/confirmationModal/confirmationModal.component";
+import {MatDialog} from "@angular/material/dialog";
 
 @Component({
   selector: 'app-administration-user',
@@ -48,7 +50,8 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
   constructor(private readonly cdr: ChangeDetectorRef,
               private readonly roleService: RoleService,
               private readonly formBuilder: FormBuilder,
-              private readonly stateService: UsersAndPermissionsStateService) {
+              private readonly stateService: UsersAndPermissionsStateService,
+              private readonly matDialog: MatDialog) {
   }
 
   ngOnInit(): void {
@@ -102,24 +105,34 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
 
   public removeUser(event: Event): void {
     event.stopPropagation();
-    this.isDeleteUserLoading = true;
     this.reportError.emit({displayError: false});
 
     const usersToRemove: RemoveUsersRequest = {
       removeUsers: [this.user.email]
     };
 
-    this.stateService.removeUsers(usersToRemove)
+    const activeConfirmationDialog = this.matDialog
+      .open(ConfirmationModalComponent, {data: {name: this.user.email}, width: '500px'});
+
+    activeConfirmationDialog.afterClosed()
       .pipe(
-        takeUntil(this.subscriptionSubject$),
-        finalize(() => {
+        filter((answer: boolean) => answer),
+        tap(() => {
           this.cdr.markForCheck();
-          this.isDeleteUserLoading = false;
-        })
-      )
-      .subscribe({
-        error: (error) => this.handleError(error, `Couldn't remove the user - ${this.user.email}`)
-      });
+          this.isDeleteUserLoading = true;
+        }),
+        mergeMap(() => this.stateService.removeUsers(usersToRemove)
+          .pipe(
+            finalize(() => {
+              this.cdr.markForCheck();
+              this.isDeleteUserLoading = false;
+            })
+          )),
+        take(1),
+        takeUntil(this.subscriptionSubject$)
+      ).subscribe({
+      error: (error) => this.handleError(error, `Couldn't remove the user - ${this.user.email}`)
+    })
   }
 
   public onCheckboxChanged(changedRole: Role): void {

From e933778b67d128638eb7078d0a79fd570b868897 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 3 Aug 2023 11:28:38 +0400
Subject: [PATCH 27/29] DSM-PEPPER-963-user-administration-services linter fix

---
 .../components/user/administrationUser.component.ts         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
index a41f209fc0..8925d66b67 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts
@@ -16,8 +16,8 @@ import {filter, finalize, take} from 'rxjs/operators';
 import {EditUsers} from '../../interfaces/editUsers';
 import {HttpErrorResponse} from '@angular/common/http';
 import {ErrorUi} from '../../interfaces/error-ui';
-import {ConfirmationModalComponent} from "../../../Shared/components/confirmationModal/confirmationModal.component";
-import {MatDialog} from "@angular/material/dialog";
+import {ConfirmationModalComponent} from '../../../Shared/components/confirmationModal/confirmationModal.component';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-administration-user',
@@ -132,7 +132,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
         takeUntil(this.subscriptionSubject$)
       ).subscribe({
       error: (error) => this.handleError(error, `Couldn't remove the user - ${this.user.email}`)
-    })
+    });
   }
 
   public onCheckboxChanged(changedRole: Role): void {

From 37e7458ba604b5e925d2e838ea68d747fee4970d Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 3 Aug 2023 12:05:16 +0400
Subject: [PATCH 28/29] DSM-PEPPER-963-user-administration-services unit test
 adjusted

---
 .../components/confirmationModal/confirmationModal.spec.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.spec.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.spec.ts
index 46e554617f..d929b886b7 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.spec.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/Shared/components/confirmationModal/confirmationModal.spec.ts
@@ -19,7 +19,7 @@ describe('ConfirmationModalComponent', () => {
           },
           {
             provide: MAT_DIALOG_DATA,
-            useValue: {fileName: 'testFile.pdf'}
+            useValue: {name: 'testFile.pdf'}
           }
         ]
       }).compileComponents();
@@ -38,12 +38,12 @@ describe('ConfirmationModalComponent', () => {
     expect(component).toBeTruthy('Component has not been instantiated');
   });
 
-  it('should display file name',  () => {
+  it('should display name',  () => {
     const fileName = componentHTML
       .query(By.css('section.confirmationModal-content p'))
       .nativeElement.textContent;
 
-    expect(fileName).toContain('testFile.pdf', 'File name is not displayed');
+    expect(fileName).toContain('testFile.pdf', 'Name is not displayed');
   });
 
 });

From 079e10531888dd939d43305d950e409946a226a6 Mon Sep 17 00:00:00 2001
From: GiCharkviani <gcharkvi@broadinstitute.org>
Date: Thu, 3 Aug 2023 17:49:26 +0400
Subject: [PATCH 29/29] DSM-PEPPER-963-user-administration-services removed
 commented code

---
 .../comparePermissions/comparePermissions.component.ts           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
index bc788d6529..27c24d822b 100644
--- a/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
+++ b/ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/comparePermissions/comparePermissions.component.ts
@@ -23,7 +23,6 @@ export class ComparePermissionsComponent implements OnInit {
 
   public userSelected({value: selectedUserEmail}: MatSelectChange): void {
     const foundUser = this.data.allUsers.find(({email}) => email === selectedUserEmail);
-    // this.dataSource.push(...foundUser.roles);
     this.displayedColumns = ['name', this.firstUser.email];
     this.displayedColumns.push(foundUser.email);
     this.roles = this.firstUser.roles;