Test result and pilot recommendation

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html

@@ -28,10 +28,23 @@
     </div>
 
     <div class="progress-card-info progress-card-info-status">
-      <p class="progress-card-info-title">{{ getTestStatusText(data) }}</p>
-      <p class="progress-card-info-text">
-        <span>{{ getTestStatus(data) }}</span>
-      </p>
+      <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>
 
     <div

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss

@@ -58,15 +58,25 @@
   box-sizing: border-box;
   gap: 16px;
   padding: 16px 0;
+  grid-template-columns: min-content 1fr;
 
   p {
     margin: 0;
   }
 
   .progress-bar {
     padding-bottom: 28px;
-    width: 460px;
-    border-radius: 45%;
+    width: 100%;
+    border-radius: variables.$corner-large;
+  }
+
+  .progress-bar {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: variables.$corner-large 12px;
+      border-bottom-right-radius: variables.$corner-large 12px;
+      border-top-left-radius: variables.$corner-large 12px;
+      border-bottom-left-radius: variables.$corner-large 12px;
+    }
   }
 
   @include mat.progress-bar-overrides(
@@ -75,6 +85,7 @@
       track-color: colors.$secondary-container,
       active-indicator-height: 12px,
       track-height: 12px,
+      track-shape: 16px,
     )
   );
 
@@ -102,6 +113,10 @@
   &.canceled .progress-card-info-status {
     background-color: colors.$on-surface;
   }
+
+  &.error .progress-card-info-status {
+    background-color: colors.$on-surface-variant;
+  }
 }
 
 .progress-card-info-tests {
@@ -112,7 +127,6 @@
     colors.$on-surface
   );
   justify-self: end;
-  width: 213px;
 }
 
 .progress-card-info-status {
@@ -122,19 +136,28 @@
     colors.$primary-container,
     colors.$on-primary
   );
+  flex-direction: row;
+  gap: 32px;
   justify-self: start;
 
   &-pilot {
     gap: 6px;
   }
 }
 
+.progress-card-pilot {
+  .progress-card-info-tests,
+  .progress-card-info-status {
+    padding: 32px;
+  }
+}
+
 .progress-card-status {
   overflow: hidden;
   grid-area: 2/1/2/3;
-  max-width: max-content;
   white-space: normal;
   justify-self: center;
+  width: 100%;
 }
 
 .progress-card-result-loading {

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts

@@ -54,6 +54,7 @@ describe('ProgressStatusCardComponent', () => {
         'completed-success': false,
         'completed-failed': false,
         canceled: false,
+        error: false,
       };
 
       const statusesForProgressClass = [
@@ -71,7 +72,6 @@ describe('ProgressStatusCardComponent', () => {
 
       const statusesForCompletedFailedClass = [
         StatusOfTestrun.Complete,
-        StatusOfTestrun.Error,
         StatusOfTestrun.DoNotProceed,
       ];
 
@@ -127,6 +127,17 @@ describe('ProgressStatusCardComponent', () => {
 
         expect(result).toEqual(expectedResult);
       });
+
+      it('should have class "error" if status "Error"', () => {
+        const expectedResult = {
+          ...availableClasses,
+          error: true,
+        };
+
+        const result = component.getClass(StatusOfTestrun.Error);
+
+        expect(result).toEqual(expectedResult);
+      });
     });
 
     describe('#getTestsResult', () => {
@@ -191,14 +202,6 @@ describe('ProgressStatusCardComponent', () => {
 
         expect(result).toEqual(expectedText);
       });
-
-      it('"Preliminary Pilot Recommendation" if finished and Pilot statuses', () => {
-        const expectedText = 'Preliminary Pilot Recommendation';
-
-        const result = component.getTestStatusText(MOCK_PROGRESS_DATA_PROCEED);
-
-        expect(result).toEqual(expectedText);
-      });
     });
 
     describe('#getTestStatus', () => {
@@ -448,5 +451,36 @@ describe('ProgressStatusCardComponent', () => {
         expect(progressCardStatusText?.textContent).toEqual('Monitoring');
       });
     });
+
+    describe('with available systemStatus$ data, as "Proceed"', () => {
+      beforeEach(() => {
+        component.systemStatus = MOCK_PROGRESS_DATA_PROCEED;
+        fixture.detectChanges();
+      });
+
+      it('should have status', () => {
+        const titleEl = compiled.querySelectorAll(
+          '.progress-card-info-status .progress-card-info-title'
+        )[0];
+        const textEl = compiled.querySelectorAll(
+          '.progress-card-info-status .progress-card-info-text'
+        )[0];
+
+        expect(titleEl.textContent).toEqual('Result');
+        expect(textEl.textContent).toEqual('Compliant');
+      });
+
+      it('should have Pilot recommendations', () => {
+        const titleEl = compiled.querySelectorAll(
+          '.progress-card-info-status .progress-card-info-title'
+        )[1];
+        const textEl = compiled.querySelectorAll(
+          '.progress-card-info-status .progress-card-info-text'
+        )[1];
+
+        expect(titleEl.textContent).toEqual('Preliminary Pilot Recommendation');
+        expect(textEl.textContent).toEqual('Proceed');
+      });
+    });
   });
 });

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts

@@ -66,6 +66,7 @@ export class TestrunStatusCardComponent {
     'completed-success': boolean;
     'completed-failed': boolean;
     canceled: boolean;
+    error: boolean;
   } {
     return {
       progress: this.isProgressStatus(status),
@@ -79,11 +80,11 @@ export class TestrunStatusCardComponent {
       'completed-failed':
         (result === ResultOfTestrun.NonCompliant &&
           status === StatusOfTestrun.Complete) ||
-        status === StatusOfTestrun.Error ||
         status === StatusOfTestrun.DoNotProceed,
       canceled:
         status === StatusOfTestrun.Cancelled ||
         status === StatusOfTestrun.Cancelling,
+      error: status === StatusOfTestrun.Error,
     };
   }
 
@@ -113,19 +114,17 @@ export class TestrunStatusCardComponent {
   public getTestStatusText(data: TestrunStatus): string {
     if (!data.finished) {
       return 'Status';
-    } else if (
-      data.finished &&
-      (data.status === StatusOfTestrun.Proceed ||
-        data.status === StatusOfTestrun.DoNotProceed)
-    ) {
-      return 'Preliminary Pilot Recommendation';
     } else {
       return 'Result';
     }
   }
 
   public getTestStatus(data: TestrunStatus): string {
-    if (data.status === StatusOfTestrun.Complete) {
+    if (
+      data.status === StatusOfTestrun.Complete ||
+      data.status === StatusOfTestrun.Proceed ||
+      data.status === StatusOfTestrun.DoNotProceed
+    ) {
       return data.result!;
     }
     return data.status;