Update flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.html

flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.html

@@ -358,29 +358,91 @@
                   <span>Failed: {{ testResult.error }}</span>
                 </div>
               }
-
+          
               @if (testResult.response_time) {
                 <p><strong>Response Time:</strong> {{ testResult.response_time }}ms</p>
               }
-
+          
+              @if (testResult.response_headers) {
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>Response Headers</mat-panel-title>
+                  </mat-expansion-panel-header>
+                  <mat-form-field appearance="outline" class="full-width">
+                    <mat-label>Headers</mat-label>
+                    <textarea matInput 
+                              [value]="testResult.response_headers | json" 
+                              rows="6"
+                              readonly></textarea>
+                  </mat-form-field>
+                </mat-expansion-panel>
+              }
+          
               @if (testResult.response_body) {
-                <mat-form-field appearance="outline" class="full-width">
-                  <mat-label>Response Body</mat-label>
-                  <textarea matInput 
-                            [value]="testResult.response_body | json" 
-                            rows="10"
-                            readonly></textarea>
-                </mat-form-field>
+                <mat-expansion-panel [expanded]="true">
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>Response Body</mat-panel-title>
+                  </mat-expansion-panel-header>
+                  <mat-form-field appearance="outline" class="full-width">
+                    <mat-label>Response</mat-label>
+                    <textarea matInput 
+                              [value]="testResult.response_body | json" 
+                              rows="12"
+                              readonly></textarea>
+                  </mat-form-field>
+                </mat-expansion-panel>
               }
-
+          
               @if (testResult.request_body) {
-                <mat-form-field appearance="outline" class="full-width">
-                  <mat-label>Actual Request Sent</mat-label>
-                  <textarea matInput 
-                            [value]="testResult.request_body | json" 
-                            rows="8"
-                            readonly></textarea>
-                </mat-form-field>
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>Request Details</mat-panel-title>
+                  </mat-expansion-panel-header>
+                  <mat-form-field appearance="outline" class="full-width">
+                    <mat-label>Actual Request Sent</mat-label>
+                    <textarea matInput 
+                              [value]="testResult.request_body | json" 
+                              rows="8"
+                              readonly></textarea>
+                  </mat-form-field>
+                  
+                  @if (testResult.request_headers) {
+                    <mat-form-field appearance="outline" class="full-width">
+                      <mat-label>Request Headers</mat-label>
+                      <textarea matInput 
+                                [value]="testResult.request_headers | json" 
+                                rows="6"
+                                readonly></textarea>
+                    </mat-form-field>
+                  }
+                </mat-expansion-panel>
+              }
+          
+              @if (testResult.extracted_values && testResult.extracted_values.length > 0) {
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>Extracted Values</mat-panel-title>
+                  </mat-expansion-panel-header>
+                  <table mat-table [dataSource]="testResult.extracted_values" class="full-width">
+                    <ng-container matColumnDef="variable">
+                      <th mat-header-cell *matHeaderCellDef>Variable</th>
+                      <td mat-cell *matCellDef="let element">{{ element.variable_name }}</td>
+                    </ng-container>
+                    
+                    <ng-container matColumnDef="value">
+                      <th mat-header-cell *matHeaderCellDef>Value</th>
+                      <td mat-cell *matCellDef="let element">{{ element.value }}</td>
+                    </ng-container>
+                    
+                    <ng-container matColumnDef="type">
+                      <th mat-header-cell *matHeaderCellDef>Type</th>
+                      <td mat-cell *matCellDef="let element">{{ element.type }}</td>
+                    </ng-container>
+                    
+                    <tr mat-header-row *matHeaderRowDef="['variable', 'value', 'type']"></tr>
+                    <tr mat-row *matRowDef="let row; columns: ['variable', 'value', 'type'];"></tr>
+                  </table>
+                </mat-expansion-panel>
               }
             </div>
           }