416241072: (feat) provide further context in test results (#1309)

Author: OlgaMardvilko

modules/ui/src/app/model/testrun-status.ts

@@ -53,6 +53,7 @@ export interface IResult {
   description: string;
   result: string;
   recommendations?: string[];
+  details?: string;
   required_result: RequiredResult;
 }
 

modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.html

@@ -31,6 +31,11 @@
     <ul class="info-steps-list">
       <li *ngFor="let point of data.testResult.recommendations">{{ point }}</li>
     </ul>
+    <div *ngIf="data.testResult.details" class="details-info">
+      <p class="info-label">Details</p>
+      <p class="info-details">{{ data.testResult.details }}</p>
+      <p></p>
+    </div>
   </section>
 </mat-dialog-content>
 <mat-dialog-actions align="end" class="actions-container">

modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.scss

@@ -86,14 +86,19 @@ mat-dialog-content.content-container {
   padding: 32px 48px;
 }
 
-.info-steps-list {
+.info-steps-list,
+.info-details {
   margin: 0;
   padding-left: 24px;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0;
 }
 
+.details-info {
+  margin-top: 16px;
+}
+
 mat-dialog-actions.actions-container {
   padding: 18px 36px 26px;
 }

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

@@ -28,8 +28,11 @@
       <mat-header-cell mat-header-cell *matHeaderCellDef>
         Description
       </mat-header-cell>
-      <mat-cell mat-cell *matCellDef="let element">
-        {{ element.description }}
+      <mat-cell mat-cell *matCellDef="let element" class="cell-addition-info">
+        <p class="description-info">{{ element.description }}</p>
+        <p *ngIf="element.details" class="details-info">
+          {{ element.details }}
+        </p>
       </mat-cell>
     </ng-container>
 

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

@@ -57,6 +57,24 @@ mat-header-cell {
   font-weight: 700;
 }
 
+.cell-addition-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  p {
+    margin: 0;
+  }
+
+  .description-info {
+    font-weight: bold;
+  }
+
+  .details-info {
+    margin-top: 6px;
+  }
+}
+
 .clickable-icon {
   display: flex;
   flex-shrink: 0;