From c938f0c2b8ee3848debad33d5fe543b3bcecd942 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 17 Sep 2024 11:12:30 +0000
Subject: [PATCH 1/2] Add tags on test run page

---
 modules/ui/src/app/mocks/testrun.mock.ts      |  1 +
 modules/ui/src/app/model/testrun-status.ts    |  2 ++
 .../app/pages/testrun/testrun.component.html  | 14 ++++++++++
 .../app/pages/testrun/testrun.component.scss  | 26 +++++++++++++++++++
 .../pages/testrun/testrun.component.spec.ts   |  8 ++++++
 .../src/app/pages/testrun/testrun.module.ts   |  2 ++
 modules/ui/src/styles.scss                    |  4 +++
 7 files changed, 57 insertions(+)

diff --git a/modules/ui/src/app/mocks/testrun.mock.ts b/modules/ui/src/app/mocks/testrun.mock.ts
index cdab57abb..c2ba09868 100644
--- a/modules/ui/src/app/mocks/testrun.mock.ts
+++ b/modules/ui/src/app/mocks/testrun.mock.ts
@@ -87,6 +87,7 @@ const PROGRESS_DATA_RESPONSE = (
     finished,
     tests,
     report,
+    tags: ['VSA', 'Other tag', 'And one more'],
   };
 };
 
diff --git a/modules/ui/src/app/model/testrun-status.ts b/modules/ui/src/app/model/testrun-status.ts
index 776e486d6..8b2235689 100644
--- a/modules/ui/src/app/model/testrun-status.ts
+++ b/modules/ui/src/app/model/testrun-status.ts
@@ -24,6 +24,7 @@ export interface TestrunStatus {
   finished: string | null;
   tests?: TestsResponse;
   report: string;
+  tags: string[];
 }
 
 export interface HistoryTestrun extends TestrunStatus {
@@ -100,6 +101,7 @@ export const IDLE_STATUS = {
     total: 0,
     results: [],
   },
+  tags: [],
 } as TestrunStatus;
 
 export type TestrunStatusKey = keyof typeof StatusOfTestrun;
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.html b/modules/ui/src/app/pages/testrun/testrun.component.html
index 5455f6d54..fce743023 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.html
+++ b/modules/ui/src/app/pages/testrun/testrun.component.html
@@ -41,6 +41,20 @@ <h2 class="title progress-title" tabindex="-1">
                 data.device.firmware
               }}
             </h2>
+            <span *ngIf="data.tags.length" class="toolbar-tag-container">
+              <span
+                tabindex="0"
+                class="toolbar-tag"
+                *ngFor="let tag of data.tags"
+                [attr.aria-label]="tag"
+                [matTooltip]="
+                  tag === 'VSA'
+                    ? 'Device qualification requires Vendor Security Assessment'
+                    : tag
+                "
+                >{{ tag }}</span
+              >
+            </span>
             <button
               *ngIf="isTestrunInProgress(data.status)"
               (click)="openStopTestrunDialog(vm.systemStatus)"
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.scss b/modules/ui/src/app/pages/testrun/testrun.component.scss
index c53edfb04..b2d105bf2 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.scss
+++ b/modules/ui/src/app/pages/testrun/testrun.component.scss
@@ -15,6 +15,7 @@
  */
 @use 'node_modules/@angular/material/index' as mat;
 @import 'src/theming/colors';
+@import 'src/theming/variables';
 
 :host {
   display: flex;
@@ -88,6 +89,31 @@
   text-overflow: ellipsis;
 }
 
+.toolbar-tag-container {
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: -10px;
+}
+
+.toolbar-tag {
+  background-color: mat.m2-get-color-from-palette($color-primary, 800);
+  color: $white;
+  font-family: $font-primary;
+  font-size: 8px;
+  font-weight: 500;
+  height: 16px;
+  line-height: 16px;
+  letter-spacing: 0.6px;
+  text-align: center;
+  padding: 0 4px 0 4px;
+  border-radius: 2px;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 .report-button,
 .stop-button,
 .start-button {
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
index ef93da216..7b3fb14ee 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
@@ -281,6 +281,14 @@ describe('TestrunComponent', () => {
       component = fixture.componentInstance;
     });
 
+    it('should have tags', () => {
+      const tags = fixture.nativeElement.querySelector(
+        '.toolbar-tag-container'
+      );
+
+      expect(tags).toBeTruthy();
+    });
+
     describe('with not devices$ data', () => {
       beforeEach(() => {
         store.overrideSelector(selectSystemStatus, null);
diff --git a/modules/ui/src/app/pages/testrun/testrun.module.ts b/modules/ui/src/app/pages/testrun/testrun.module.ts
index d940c34bc..993ca8fff 100644
--- a/modules/ui/src/app/pages/testrun/testrun.module.ts
+++ b/modules/ui/src/app/pages/testrun/testrun.module.ts
@@ -35,6 +35,7 @@ import { DownloadReportComponent } from '../../components/download-report/downlo
 import { SpinnerComponent } from '../../components/spinner/spinner.component';
 import { CalloutComponent } from '../../components/callout/callout.component';
 import { DownloadOptionsComponent } from './components/download-options/download-options.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -60,6 +61,7 @@ import { DownloadOptionsComponent } from './components/download-options/download
     SpinnerComponent,
     CalloutComponent,
     DownloadOptionsComponent,
+    MatTooltipModule,
   ],
 })
 export class TestrunModule {}
diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss
index e2a252391..52e7ce128 100644
--- a/modules/ui/src/styles.scss
+++ b/modules/ui/src/styles.scss
@@ -311,3 +311,7 @@ body:has(app-risk-assessment .profiles-drawer) #main app-callout {
 .certificate-notification .mat-mdc-snack-bar-label {
   white-space: pre-line;
 }
+
+.mdc-tooltip--multiline .mat-mdc-tooltip-surface {
+  text-align: center !important;
+}

From 4fbce46e970554b341a59bab816ba54a6f54e09d Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 17 Sep 2024 11:31:27 +0000
Subject: [PATCH 2/2] Fix tests

---
 modules/ui/src/app/mocks/reports.mock.ts      |  8 ++++++++
 .../pages/testrun/testrun.component.spec.ts   | 19 +++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/modules/ui/src/app/mocks/reports.mock.ts b/modules/ui/src/app/mocks/reports.mock.ts
index 803994640..2889b0571 100644
--- a/modules/ui/src/app/mocks/reports.mock.ts
+++ b/modules/ui/src/app/mocks/reports.mock.ts
@@ -14,6 +14,7 @@ export const HISTORY = [
       firmware: '1.2.2',
       test_pack: TestingType.Qualification,
     },
+    tags: [],
     report: 'https://api.testrun.io/report.pdf',
     started: '2023-06-23T10:11:00.123Z',
     finished: '2023-06-23T10:17:10.123Z',
@@ -29,6 +30,7 @@ export const HISTORY = [
       firmware: '1.2.3',
       test_pack: TestingType.Qualification,
     },
+    tags: [],
     report: 'https://api.testrun.io/report.pdf',
     started: '2023-07-23T10:11:00.123Z',
     finished: '2023-07-23T10:17:10.123Z',
@@ -44,6 +46,7 @@ export const HISTORY = [
       firmware: '1.2.2',
       test_pack: TestingType.Qualification,
     },
+    tags: [],
     report: 'https://api.testrun.io/report.pdf',
     started: '2023-06-23T10:11:00.123Z',
     finished: '2023-06-23T10:17:10.123Z',
@@ -62,6 +65,7 @@ export const HISTORY_AFTER_REMOVE = [
       firmware: '1.2.2',
       test_pack: TestingType.Qualification,
     },
+    tags: [],
     report: 'https://api.testrun.io/report.pdf',
     started: '2023-06-23T10:11:00.123Z',
     finished: '2023-06-23T10:17:10.123Z',
@@ -77,6 +81,7 @@ export const HISTORY_AFTER_REMOVE = [
       firmware: '1.2.2',
       test_pack: TestingType.Qualification,
     },
+    tags: [],
     report: 'https://api.testrun.io/report.pdf',
     started: '2023-06-23T10:11:00.123Z',
     finished: '2023-06-23T10:17:10.123Z',
@@ -95,6 +100,7 @@ export const FORMATTED_HISTORY = [
       firmware: '1.2.2',
       test_pack: TestingType.Qualification,
     },
+    tags: [],
     report: 'https://api.testrun.io/report.pdf',
     started: '2023-06-23T10:11:00.123Z',
     finished: '2023-06-23T10:17:10.123Z',
@@ -114,6 +120,7 @@ export const FORMATTED_HISTORY = [
       firmware: '1.2.3',
       test_pack: TestingType.Qualification,
     },
+    tags: [],
     report: 'https://api.testrun.io/report.pdf',
     started: '2023-07-23T10:11:00.123Z',
     finished: '2023-07-23T10:17:10.123Z',
@@ -133,6 +140,7 @@ export const FORMATTED_HISTORY = [
       firmware: '1.2.2',
       test_pack: TestingType.Qualification,
     },
+    tags: [],
     report: 'https://api.testrun.io/report.pdf',
     started: '2023-06-23T10:11:00.123Z',
     finished: '2023-06-23T10:17:10.123Z',
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
index 7b3fb14ee..16894e803 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
@@ -64,6 +64,7 @@ import {
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NotificationService } from '../../services/notification.service';
 import { Profile } from '../../model/profile';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 describe('TestrunComponent', () => {
   let component: TestrunComponent;
@@ -141,6 +142,7 @@ describe('TestrunComponent', () => {
           MatDialogModule,
           SpinnerComponent,
           BrowserAnimationsModule,
+          MatTooltipModule,
         ],
       })
         .overrideComponent(TestrunComponent, {
@@ -260,6 +262,7 @@ describe('TestrunComponent', () => {
           MatDialogModule,
           SpinnerComponent,
           BrowserAnimationsModule,
+          MatTooltipModule,
         ],
       })
         .overrideComponent(TestrunComponent, {
@@ -281,14 +284,6 @@ describe('TestrunComponent', () => {
       component = fixture.componentInstance;
     });
 
-    it('should have tags', () => {
-      const tags = fixture.nativeElement.querySelector(
-        '.toolbar-tag-container'
-      );
-
-      expect(tags).toBeTruthy();
-    });
-
     describe('with not devices$ data', () => {
       beforeEach(() => {
         store.overrideSelector(selectSystemStatus, null);
@@ -437,6 +432,14 @@ describe('TestrunComponent', () => {
 
         expect(downloadComp).toBeNull();
       });
+
+      it('should have tags', () => {
+        const tags = fixture.nativeElement.querySelector(
+          '.toolbar-tag-container'
+        );
+
+        expect(tags).toBeTruthy();
+      });
     });
 
     describe('with available systemStatus$ data, as Completed', () => {