From c6d6b9b1db2954615645ec431874e16c4c7c7225 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Thu, 1 Aug 2024 12:54:25 +0000
Subject: [PATCH 1/2] Adds risk to selected value

---
 .../download-zip-modal.component.html               | 12 +++++++++---
 .../download-zip-modal.component.scss               | 12 ++++++++++++
 .../download-zip-modal.component.ts                 | 13 +++++++------
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html
index 072ab9c19..2e9446cfa 100644
--- a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html
+++ b/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
diff --git a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.scss b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.scss
index e8ee08afb..0a92617c1 100644
--- a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.scss
+++ b/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;
+}
diff --git a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts
index f54bdfdd0..ef42be70f 100644
--- a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts
+++ b/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,15 @@ 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) {
+    let value = '';
+    if (profile && profile?.name !== this.NO_PROFILE.name) {
+      value = profile.name;
     }
-    this.dialogRef.close(profile);
+    this.dialogRef.close(value);
   }
 
   public getRiskClass(riskResult: string): RiskResultClassName {

From d75ec36f7ee363a3373102f91bc2bda4e69fa785 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Thu, 1 Aug 2024 12:54:25 +0000
Subject: [PATCH 2/2] Adds risk to selected value

---
 .../download-zip-modal.component.spec.ts              |  6 +-----
 .../download-zip-modal.component.ts                   | 11 +++++++----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.spec.ts b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.spec.ts
index 028847d0d..728590ef8 100644
--- a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.spec.ts
+++ b/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'
       );
     });
diff --git a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts
index ef42be70f..b042bdabf 100644
--- a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts
+++ b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts
@@ -72,10 +72,13 @@ export class DownloadZipModalComponent extends EscapableDialogComponent {
     this.selectedProfile = this.profiles[0];
   }
 
-  cancel(profile: Profile | null) {
-    let value = '';
-    if (profile && profile?.name !== this.NO_PROFILE.name) {
-      value = profile.name;
+  cancel(profile?: Profile | null) {
+    if (profile === null) {
+      this.dialogRef.close(null);
+    }
+    let value = profile?.name;
+    if (profile && profile?.name === this.NO_PROFILE.name) {
+      value = '';
     }
     this.dialogRef.close(value);
   }