Feature/risk in selected

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html

@@ -55,11 +55,17 @@
       [(value)]="selectedProfile"
       aria-label="Please choose a Risk Profile from the list">
       <mat-select-trigger>
-        {{ selectedProfile }}
+        {{ selectedProfile.name }}
+        <span
+          *ngIf="selectedProfile.risk"
+          class="profile-item-risk"
+          [ngClass]="getRiskClass(selectedProfile.risk)">
+          {{ selectedProfile.risk }} risk
+        </span>
       </mat-select-trigger>
       <mat-option
         *ngFor="let profile of profiles"
-        [value]="profile.name"
+        [value]="profile"
         class="profile-item-option">
         <div class="select-container">
           <span
@@ -82,7 +88,7 @@
 
   <mat-dialog-actions align="end" class="risk-profile-select-form-actions">
     <button
-      (click)="cancel()"
+      (click)="cancel(null)"
       class="cancel-button"
       color="primary"
       mat-button

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.scss

@@ -72,3 +72,15 @@
   display: inline-block;
   width: fit-content;
 }
+
+::ng-deep mat-select-trigger {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+::ng-deep mat-select-trigger .profile-item-risk {
+  vertical-align: middle;
+  align-self: center;
+  margin-right: 16px;
+}

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.spec.ts

@@ -60,11 +60,7 @@ describe('DownloadZipModalComponent', () => {
     });
 
     it('should preselect "no profile" option', async () => {
-      const select = fixture.nativeElement.querySelector(
-        'mat-select'
-      ) as HTMLElement;
-
-      expect(select.getAttribute('ng-reflect-value')).toEqual(
+      expect(component.selectedProfile.name).toEqual(
         'No Risk Profile selected'
       );
     });

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts

@@ -53,7 +53,7 @@ export class DownloadZipModalComponent extends EscapableDialogComponent {
   } as Profile;
   public readonly Routes = Routes;
   profiles: Profile[] = [];
-  selectedProfile: string = '';
+  selectedProfile: Profile;
   constructor(
     private readonly testRunService: TestRunService,
     public override dialogRef: MatDialogRef<DownloadZipModalComponent>,
@@ -69,14 +69,18 @@ export class DownloadZipModalComponent extends EscapableDialogComponent {
       );
     }
     this.profiles.unshift(this.NO_PROFILE);
-    this.selectedProfile = this.profiles[0].name;
+    this.selectedProfile = this.profiles[0];
   }
 
-  cancel(profile?: string | null) {
-    if (profile === this.NO_PROFILE.name) {
-      profile = '';
+  cancel(profile?: Profile | null) {
+    if (profile === null) {
+      this.dialogRef.close(null);
     }
-    this.dialogRef.close(profile);
+    let value = profile?.name;
+    if (profile && profile?.name === this.NO_PROFILE.name) {
+      value = '';
+    }
+    this.dialogRef.close(value);
   }
 
   public getRiskClass(riskResult: string): RiskResultClassName {