From 55cb7607db56f5bb497a67f6cff3352b1b52380f Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Mon, 14 Apr 2025 10:54:49 +0000
Subject: [PATCH] Change layout for status card; fix progress bar

---
 .../testrun-status-card.component.html        | 48 +++++++++----------
 .../testrun-status-card.component.scss        | 24 ++++++----
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
index b4cce1cf9..a459e1744 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
@@ -20,34 +20,30 @@
     [class.progress-card-pilot]="data.device.test_pack === TestingType.Pilot"
     aria-live="assertive"
     role="alert">
-    <div class="progress-card-header">
-      <div class="progress-card-info progress-card-info-tests">
-        <p class="progress-card-info-title">Tests executed</p>
+    <div class="progress-card-info progress-card-info-tests">
+      <p class="progress-card-info-title">Tests executed</p>
+      <p class="progress-card-info-text">
+        <span>{{ getTestsResult(data) }}</span>
+      </p>
+    </div>
+
+    <div class="progress-card-info progress-card-info-status">
+      <div>
+        <p class="progress-card-info-title">{{ getTestStatusText(data) }}</p>
         <p class="progress-card-info-text">
-          <span>{{ getTestsResult(data) }}</span>
+          <span>{{ getTestStatus(data) }}</span>
         </p>
       </div>
-
-      <div class="progress-card-info progress-card-info-status">
-        <div>
-          <p class="progress-card-info-title">{{ getTestStatusText(data) }}</p>
-          <p class="progress-card-info-text">
-            <span>{{ getTestStatus(data) }}</span>
-          </p>
-        </div>
-        <div
-          *ngIf="
-            data.finished &&
-            (data.status === StatusOfTestrun.Proceed ||
-              data.status === StatusOfTestrun.DoNotProceed)
-          ">
-          <p class="progress-card-info-title">
-            Preliminary Pilot Recommendation
-          </p>
-          <p class="progress-card-info-text">
-            <span>{{ data.status }}</span>
-          </p>
-        </div>
+      <div
+        *ngIf="
+          data.finished &&
+          (data.status === StatusOfTestrun.Proceed ||
+            data.status === StatusOfTestrun.DoNotProceed)
+        ">
+        <p class="progress-card-info-title">Preliminary Pilot Recommendation</p>
+        <p class="progress-card-info-text">
+          <span>{{ data.status }}</span>
+        </p>
       </div>
     </div>
     <div
@@ -143,7 +139,7 @@
 <ng-template #WithProgressBar let-data="data">
   <div class="progress-card-status progress-card-status-bar">
     <mat-progress-bar
-      class="progress-bar"
+      class="progress-bar progress-value-{{ getProgressValue(data) }}"
       mode="determinate"
       [value]="getProgressValue(data)"
       [attr.aria-label]="data.status + ' ' + getProgressValue(data) + '%'">
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss
index c8ce53859..9105cdba8 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss
@@ -51,23 +51,19 @@
 
 .progress-card {
   display: grid;
+  grid-template-areas:
+    'tests status'
+    'bar bar';
   width: fit-content;
   box-sizing: border-box;
   gap: 16px;
   padding: 16px 0;
-  justify-items: center;
+  grid-template-columns: min-content 1fr;
 
   p {
     margin: 0;
   }
 
-  .progress-card-header {
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
-    column-gap: 16px;
-  }
-
   .progress-bar {
     padding-bottom: 28px;
     width: 100%;
@@ -124,14 +120,17 @@
 }
 
 .progress-card-info-tests {
+  grid-area: tests;
   @include progress-card-info(
     colors.$surface-variant,
     colors.$on-surface-variant,
     colors.$on-surface
   );
+  justify-self: end;
 }
 
 .progress-card-info-status {
+  grid-area: status;
   @include progress-card-info(
     colors.$primary,
     colors.$primary-container,
@@ -139,6 +138,7 @@
   );
   flex-direction: row;
   gap: 32px;
+  justify-self: stretch;
 
   &-pilot {
     gap: 6px;
@@ -154,6 +154,7 @@
 
 .progress-card-status {
   overflow: hidden;
+  grid-area: bar;
   white-space: normal;
   &-bar {
     width: 100%;
@@ -175,3 +176,10 @@
     margin-left: 32px;
   }
 }
+
+@for $i from 1 through 100 {
+  .progress-value-#{$i} ::ng-deep .mdc-linear-progress__primary-bar {
+    transform: scaleX(1) !important;
+    width: #{$i * 1%};
+  }
+}