From 88aa0b721bf5030b87d8152ffb818c0b8204b3b5 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 28 Jan 2025 11:51:11 +0000
Subject: [PATCH] Adds column order in testing table; adds missing icons for
 statuses

---
 .../testrun-table.component.html              |  6 ++--
 .../testrun-table.component.scss              | 36 ++++++++++++++++---
 modules/ui/src/index.html                     |  4 +--
 resources/report/test_report_styles.css       | 24 +++++++++----
 resources/report/test_report_template.html    | 10 ++++++
 5 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
index 5cc7e479f..52105603e 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
+++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
@@ -16,9 +16,9 @@
 <ng-container *ngIf="dataSource">
   <mat-accordion displayMode="flat" multi class="tests-container" tabindex="0">
     <section class="tests-header-row">
-      <span class="tests-header-cell">Result</span>
       <span class="tests-header-cell">Name</span>
       <span class="tests-header-cell">Description</span>
+      <span class="tests-header-cell">Result</span>
       <span class="tests-header-cell">Required result</span>
       <span class="tests-header-cell expander-button-cell">
         <button
@@ -71,13 +71,13 @@
 </ng-container>
 
 <ng-template #ItemData let-item="item">
+  <span class="tests-item-cell">{{ item.name }}</span>
+  <span class="tests-item-cell">{{ item.description }}</span>
   <span class="tests-item-cell tests-item-cell-result">
     <span class="cell-result-text" [ngClass]="getResultClass(item.result)">
       <span>{{ item.result }}</span>
     </span>
   </span>
-  <span class="tests-item-cell">{{ item.name }}</span>
-  <span class="tests-item-cell">{{ item.description }}</span>
   <span
     class="tests-item-cell tests-item-cell-required-result"
     [ngClass]="getRequiredResultClass(item.required_result)">
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss
index 62d7e9611..593eb06f0 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss
+++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss
@@ -88,17 +88,17 @@ $expander-button-size: 28px;
 .tests-item-row {
   min-height: $row-height;
   height: auto;
-  grid-template-columns: 150px 1fr 2.2fr 222px 20px;
+  grid-template-columns: 1fr 2.2fr 150px 226px 20px;
   border-bottom: 1px solid $lighter-grey;
 }
 
 .tests-header-row {
-  grid-template-columns: 150px 1fr 2.2fr 216px $expander-button-size;
+  grid-template-columns: 1fr 2.2fr 150px 220px $expander-button-size;
 }
 
 .expansion-panel-header ::ng-deep.mat-content {
   display: grid;
-  grid-template-columns: 150px 1fr 2.2fr 216px;
+  grid-template-columns: 1fr 2.2fr 150px 220px;
 }
 
 .expansion-panel-header ::ng-deep .mat-expansion-indicator {
@@ -129,8 +129,8 @@ $expander-button-size: 28px;
 
 .expansion-panel-row ::ng-deep.mat-expansion-panel-body {
   display: grid;
-  grid-template-columns: 150px 1fr 2.2fr 216px 20px;
-  grid-template-areas: '. . description . .';
+  grid-template-columns: 1fr 2.2fr 150px 220px 20px;
+  grid-template-areas: '. description . . .';
 }
 
 .cel-description {
@@ -207,6 +207,32 @@ $expander-button-size: 28px;
       line-height: 14px;
     }
   }
+  &.roadmap {
+    color: #00639b;
+    .cell-result-required-icon {
+      background: #00639b;
+      color: #e1e3e1;
+      &::before {
+        content: 'road';
+      }
+    }
+  }
+  &.recommended {
+    color: #146c2e;
+    .cell-result-required-icon {
+      background: #146c2e;
+      color: #ffffff;
+      &::before {
+        font-variation-settings:
+          'FILL' 1,
+          'wght' 400,
+          'GRAD' 0,
+          'opsz' 24;
+        content: 'thumb_up';
+        font-size: 9px;
+      }
+    }
+  }
   &.informational {
     color: #146c2e;
     .cell-result-required-icon {
diff --git a/modules/ui/src/index.html b/modules/ui/src/index.html
index 1c79ceb31..7d747928d 100644
--- a/modules/ui/src/index.html
+++ b/modules/ui/src/index.html
@@ -75,8 +75,8 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
-      rel="stylesheet" />
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
   </head>
   <body class="mat-typography">
     <!-- Google Tag Manager (noscript) -->
diff --git a/resources/report/test_report_styles.css b/resources/report/test_report_styles.css
index f0f8d45e1..05d79c3b3 100644
--- a/resources/report/test_report_styles.css
+++ b/resources/report/test_report_styles.css
@@ -27,8 +27,8 @@
     @font-face {
       font-family: 'Material Symbols Outlined';
       font-style: normal;
-      font-weight: 400;
-      src: url(https://fonts.gstatic.com/icon/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejHdIa31RJq7xr9O779sC3DdMx&skey=b8dc2088854b122f&v=v222) format('woff2');
+      font-weight: 100 700;
+      src: url(https://fonts.gstatic.com/icon/font?kit=kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsKTDIwram_2pN8sass6hd4ObOPvrgWc3Hc02BrFizbd_1DP&skey=b8dc2088854b122f&v=v225) format('woff2');
     }
 
     /* Define some common body formatting*/
@@ -529,15 +529,25 @@
       padding-left: 8px;
     }
 
-    .result-test-required-result-informational{
+    .result-test-required-result-informational, .result-test-required-result-recommended {
       color: #0D652D;
     }
 
-    .result-test-required-result-informational .material-symbols-outlined {
+    .result-test-required-result-informational .material-symbols-outlined,
+    .result-test-required-result-recommended .material-symbols-outlined {
       background: #0D652D;
       color: #ffffff;
     }
 
+    .result-test-required-result-recommended .material-symbols-outlined {
+      font-variation-settings:
+          'FILL' 1,
+          'wght' 400,
+          'GRAD' 0,
+          'opsz' 24;
+      font-size: 9px;
+    }
+
     .result-test-required-result-required {
       color: #000000;
     }
@@ -547,11 +557,13 @@
       color: #ffffff;
     }
 
-    .result-test-required-result-required-if-applicable {
+    .result-test-required-result-required-if-applicable,
+    .result-test-required-result-roadmap {
       color: #174EA6;
     }
 
-    .result-test-required-result-required-if-applicable .material-symbols-outlined {
+    .result-test-required-result-required-if-applicable .material-symbols-outlined,
+    .result-test-required-result-roadmap .material-symbols-outlined {
       background: #174EA6;
       color: #ffffff;
     }
diff --git a/resources/report/test_report_template.html b/resources/report/test_report_template.html
index 795f51260..58a116808 100644
--- a/resources/report/test_report_template.html
+++ b/resources/report/test_report_template.html
@@ -128,6 +128,16 @@ <h4 class="result-list-title">Results List <small>({{ successful_tests }}/{{ tot
               <span class="material-symbols-outlined">info_i</span>
               <span class="result-test-required-result-text">{{ test_results[i]['required_result'] }}</span>
             </div>
+          {% elif test_results[i]['required_result'] == "Roadmap" %}
+            <div class="result-test-label result-test-required-result result-test-required-result-roadmap" style="left: 7in;">
+              <span class="material-symbols-outlined">road</span>
+              <span class="result-test-required-result-text">{{ test_results[i]['required_result'] }}</span>
+            </div>
+          {% elif test_results[i]['required_result'] == "Recommended" %}
+            <div class="result-test-label result-test-required-result result-test-required-result-recommended" style="left: 7in;">
+              <span class="material-symbols-outlined">thumb_up</span>
+              <span class="result-test-required-result-text">{{ test_results[i]['required_result'] }}</span>
+            </div>
           {% else %}
             <div class="result-test-label result-test-required-result" style="left: 7in;">
               <span class="result-test-required-result-text">{{ test_results[i]['required_result'] }}</span>