feat(assessment form and report): dynamic tester association to asssment

Added a ManyToMany relation between the User and Assessment models.  Added a muliple select option
to the assessment.component.  Added APIs to get users.  Patched the create and update assessment
APIs.  Updated the report to retrieve testers.

BREAKING CHANGE: ManyToMany relationship has been created between the User and Assessment models.
API's have been updated for this change.  New API's created to retrieve users.

feat #52

frontend/package.json

@@ -26,6 +26,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@ng-select/ng-select": "^4.0.0",
     "core-js": "^2.5.4",
     "ngx-markdown": "^8.2.1",
     "rxjs": "~6.5.4",

frontend/src/app/app-routing.module.ts

@@ -26,6 +26,8 @@ import { InviteUserComponent } from './invite-user/invite-user.component';
 import { RegisterComponent } from './register/register.component';
 import { UserProfileComponent } from './user-profile/user-profile.component';
 import { UserService } from './user.service';
+import { forkJoin } from 'rxjs';
+import { map } from 'rxjs/internal/operators/map';
 @Injectable()
 export class AssetsResolver implements Resolve<any> {
   constructor(private apiService: AppService) {}
@@ -43,12 +45,29 @@ export class AssetResolver implements Resolve<any> {
 }
 @Injectable()
 export class AssessmentResolver implements Resolve<any> {
-  constructor(private apiService: AppService) {}
+  constructor(
+    private apiService: AppService,
+    private userService: UserService
+  ) {}
   resolve(route: ActivatedRouteSnapshot) {
-    return this.apiService.getAssessment(
-      route.params.assetId,
-      route.params.assessmentId
-    );
+    if (route.params.assetId && route.params.assessmentId) {
+      return forkJoin([
+        this.apiService.getAssessment(
+          route.params.assetId,
+          route.params.assessmentId
+        ),
+        this.userService.getUsers(),
+      ]).pipe(
+        map((result) => {
+          return {
+            assessment: result[0],
+            testers: result[1],
+          };
+        })
+      );
+    } else {
+      return this.userService.getUsers();
+    }
   }
 }
 @Injectable()
@@ -194,12 +213,13 @@ const routes: Routes = [
   {
     path: 'organization/:orgId/asset/:assetId/assessment',
     component: AssessmentFormComponent,
+    resolve: { result: AssessmentResolver },
     canActivate: [AuthGuard],
   },
   {
     path: 'organization/:orgId/asset/:assetId/assessment/:assessmentId',
     component: AssessmentFormComponent,
-    resolve: { assessment: AssessmentResolver },
+    resolve: { result: AssessmentResolver },
     canActivate: [AuthGuard],
   },
   {

frontend/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { AppComponent } from './app.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { AlertModule } from './alert/alert.module';
-
+import { NgSelectModule } from '@ng-select/ng-select';
 import { AppService } from './app.service';
 import { LoaderService } from './loader.service';
 import { AuthGuard } from './auth.guard';
@@ -53,7 +53,7 @@ import { UserProfileComponent } from './user-profile/user-profile.component';
     PasswordResetComponent,
     InviteUserComponent,
     RegisterComponent,
-    UserProfileComponent
+    UserProfileComponent,
   ],
   imports: [
     BrowserModule,
@@ -62,15 +62,16 @@ import { UserProfileComponent } from './user-profile/user-profile.component';
     ReactiveFormsModule,
     FontAwesomeModule,
     MarkdownModule.forRoot(),
-    AlertModule
+    AlertModule,
+    NgSelectModule,
   ],
   providers: [
     AppService,
     DatePipe,
     LoaderService,
     { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true },
-    AuthGuard
+    AuthGuard,
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

frontend/src/app/assessment-form/Assessment.ts

@@ -1,4 +1,5 @@
 import { Url } from 'url';
+import { User } from '../classes/User';
 
 export class Assessment {
   constructor(
@@ -12,6 +13,7 @@ export class Assessment {
     public scope: string,
     public tag: number,
     public startDate: Date,
-    public endDate: Date
+    public endDate: Date,
+    public testers: User[]
   ) {}
 }

frontend/src/app/assessment-form/assessment-form.component.html

@@ -2,85 +2,42 @@
   <form [formGroup]="assessmentForm" (ngSubmit)="onSubmit(assessmentForm)">
     <div class="form-group col-6 mx-auto">
       <label for="assessmentName">Assessment Name</label>
-      <input
-        formControlName="name"
-        type="text"
-        class="form-control"
-        id="assessmentName"
-      />
+      <input formControlName="name" type="text" class="form-control" id="assessmentName" />
       <label for="executiveSummary">Executive Summary</label>
-      <textarea
-        formControlName="executiveSummary"
-        type="text"
-        class="form-control"
-        id="executiveSummary"
-        maxlength="4000"
-        rows="6"
-      ></textarea>
+      <textarea formControlName="executiveSummary" type="text" class="form-control" id="executiveSummary"
+        maxlength="4000" rows="6"></textarea>
       <label for="jiraId">JIRA URL</label>
-      <input
-        formControlName="jiraId"
-        type="text"
-        class="form-control"
-        id="jiraId"
-      />
+      <input formControlName="jiraId" type="text" class="form-control" id="jiraId" />
       <label for="testUrl">Test URL</label>
-      <input
-        formControlName="testUrl"
-        type="text"
-        class="form-control"
-        id="testUrl"
-      />
+      <input formControlName="testUrl" type="text" class="form-control" id="testUrl" />
       <label for="prodUrl">Production URL</label>
-      <input
-        formControlName="prodUrl"
-        type="text"
-        class="form-control"
-        id="prodUrl"
-      />
+      <input formControlName="prodUrl" type="text" class="form-control" id="prodUrl" />
       <label for="scope">Scope of the Assessment</label>
-      <textarea
-        formControlName="scope"
-        type="text"
-        class="form-control"
-        id="scope"
-      ></textarea>
+      <textarea formControlName="scope" type="text" class="form-control" id="scope"></textarea>
       <label for="tag">Source Code Tag</label>
       <input formControlName="tag" type="text" class="form-control" id="tag" />
+      <label for="testers">Testers</label>
+      <ng-select [items]="testers" bindLabel="firstName" labelForId="testerList" [multiple]="true" clearAllText="Clear"
+        formControlName="testers">
+        <ng-template ng-label-tmp let-item="item" let-clear="clear">
+          <span class="ng-value-icon right" (click)="clear(item)">×</span>
+          {{item.firstName}} {{item.lastName}}
+        </ng-template>
+        <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
+          {{item.firstName}} {{item.lastName}}
+        </ng-template>
+      </ng-select>
       <label for="startDate" class="col-form-label">Start Date</label>
-      <input
-        formControlName="startDate"
-        class="form-control"
-        type="date"
-        id="startDate"
-      />
+      <input formControlName="startDate" class="form-control" type="date" id="startDate" />
       <label for="endDate" class="col-form-label">End Date</label>
-      <input
-        formControlName="endDate"
-        class="form-control"
-        type="date"
-        id="endDate"
-      />
+      <input formControlName="endDate" class="form-control" type="date" id="endDate" />
       <br />
-      <button
-        [disabled]="!assessmentForm.valid"
-        class="btn btn-primary float-right"
-        type="submit"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        title="Submit"
-      >
+      <button [disabled]="!assessmentForm.valid" class="btn btn-primary float-right" type="submit" data-toggle="tooltip"
+        data-placement="bottom" title="Submit">
         Submit
       </button>
-      <button
-        style="margin-right: 5px;"
-        (click)="navigateToAssessments()"
-        class="btn btn-secondary float-right"
-        type="button"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        title="Back to Assessments"
-      >
+      <button style="margin-right: 5px;" (click)="navigateToAssessments()" class="btn btn-secondary float-right"
+        type="button" data-toggle="tooltip" data-placement="bottom" title="Back to Assessments">
         Back to Assessments
       </button>
     </div>

frontend/src/app/assessment-form/assessment-form.component.ts

@@ -4,18 +4,20 @@ import { AppService } from '../app.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Assessment } from './Assessment';
 import { AlertService } from '../alert/alert.service';
+import { User } from '../classes/User';
 
 @Component({
   selector: 'app-assessment-form',
   templateUrl: './assessment-form.component.html',
-  styleUrls: ['./assessment-form.component.sass']
+  styleUrls: ['./assessment-form.component.sass'],
 })
 export class AssessmentFormComponent implements OnInit, OnChanges {
   public assessmentModel: Assessment;
   public assessmentForm: FormGroup;
   public assetId: number;
   public assessmentId: number;
   public orgId: number;
+  public testers: User[] = [];
   constructor(
     public appService: AppService,
     private fb: FormBuilder,
@@ -27,11 +29,18 @@ export class AssessmentFormComponent implements OnInit, OnChanges {
   }
 
   ngOnInit() {
-    this.activatedRoute.data.subscribe(({ assessment }) => {
-      if (assessment) {
-        assessment.startDate = this.transformDate(assessment.startDate);
-        assessment.endDate = this.transformDate(assessment.endDate);
-        this.assessmentForm.patchValue(assessment);
+    this.activatedRoute.data.subscribe(({ result }) => {
+      if (result.assessment) {
+        result.assessment.startDate = this.transformDate(
+          result.assessment.startDate
+        );
+        result.assessment.endDate = this.transformDate(
+          result.assessment.endDate
+        );
+        this.testers = result.testers;
+        this.assessmentForm.patchValue(result.assessment);
+      } else {
+        this.testers = result;
       }
     });
     this.activatedRoute.params.subscribe((params) => {
@@ -71,7 +80,8 @@ export class AssessmentFormComponent implements OnInit, OnChanges {
       scope: this.assessmentModel.scope,
       tag: this.assessmentModel.tag,
       startDate: this.assessmentModel.startDate,
-      endDate: this.assessmentModel.endDate
+      endDate: this.assessmentModel.endDate,
+      testers: this.assessmentModel.testers,
     });
   }
 
@@ -88,7 +98,8 @@ export class AssessmentFormComponent implements OnInit, OnChanges {
       scope: ['', [Validators.required]],
       tag: ['', []],
       startDate: ['', [Validators.required]],
-      endDate: ['', [Validators.required]]
+      endDate: ['', [Validators.required]],
+      testers: ['', [Validators.required]],
     });
   }
 
@@ -108,16 +119,20 @@ export class AssessmentFormComponent implements OnInit, OnChanges {
    */
   createOrUpdateAssessment(assessment: Assessment) {
     if (this.assessmentId) {
-      this.appService.updateAssessment(assessment, this.assessmentId, this.assetId).subscribe((res: string) => {
-        this.navigateToAssessments();
-        this.alertService.success(res);
-      });
+      this.appService
+        .updateAssessment(assessment, this.assessmentId, this.assetId)
+        .subscribe((res: string) => {
+          this.navigateToAssessments();
+          this.alertService.success(res);
+        });
     } else {
       this.assessmentModel.asset = this.assetId;
-      this.appService.createAssessment(this.assessmentModel).subscribe((res: string) => {
-        this.navigateToAssessments();
-        this.alertService.success(res);
-      });
+      this.appService
+        .createAssessment(this.assessmentModel)
+        .subscribe((res: string) => {
+          this.navigateToAssessments();
+          this.alertService.success(res);
+        });
     }
   }
 

frontend/src/app/classes/User.ts

@@ -0,0 +1,13 @@
+export class User {
+  id: number;
+  firstName: string;
+  lastName: string;
+  title: string;
+
+  constructor(id: number, firstName: string, lastName: string, title: string) {
+    this.id = id;
+    this.firstName = firstName;
+    this.lastName = lastName;
+    this.title = title;
+  }
+}

frontend/src/app/report/report.component.html

@@ -42,25 +42,25 @@ <h4>Executive Summary</h4>
     </div>
     <br />
     <div class="row">
-      <div class="col-4">
+      <div class="col-5">
         <h4>Application Security Team</h4>
         <!--TODO:  Dynamically fill these out-->
         <table class="table">
-          <tr>
-            <th>Name</th>
-            <th>Position</th>
-          </tr>
-          <tr>
-            <td>John 117</td>
-            <td>Master Chief</td>
-          </tr>
-          <tr>
-            <td>Cortana</td>
-            <td>Pr. Artificial Intelligence</td>
-          </tr>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Position</th>
+            </tr>
+          </thead>
+          <tbody *ngFor="let tester of report.assessment.testers">
+            <tr>
+              <td>{{ tester?.firstName }} {{tester?.lastName}}</td>
+              <td>{{ tester?.title }}</td>
+            </tr>
+          </tbody>
         </table>
       </div>
-      <div class="col-4">
+      <div class="col-3">
         <h4>Tools and Methodology</h4>
         <ul>
           <li>