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

@@ -51,9 +51,10 @@
                     </mat-panel-title>
                   </mat-expansion-panel-header>
                   <div class="template-list">
-                    <mat-chip *ngFor="let templateVar of templateVariables" 
-                              (click)="insertTemplateVariable('body_template', templateVar.key)">
-                      {{ templateVar.key }}
+                    <mat-chip *ngFor="let templateVar of getTemplateVariables()" 
+                              (click)="insertTemplateVariable('body_template', templateVar)"
+                              class="template-chip">
+                      {{ templateVar }}
                     </mat-chip>
                   </div>
                 </mat-expansion-panel>
@@ -106,6 +107,52 @@
             <mat-hint>Use {{'{{api_response}}'}} to reference the API response</mat-hint>
           </mat-form-field>
 
+          <div class="form-section">
+            <div class="section-header">
+              <h4>Response Mappings</h4>
+              <button mat-raised-button color="primary" type="button" (click)="addResponseMapping()">
+                <mat-icon>add</mat-icon>
+                Add Mapping
+              </button>
+            </div>
+
+            <div formArrayName="response_mappings" class="response-mappings-list">
+              <div *ngFor="let mapping of responseMappings.controls; let i = index" 
+                   [formGroupName]="i" 
+                   class="mapping-row">
+                <mat-form-field appearance="outline">
+                  <mat-label>Variable Name</mat-label>
+                  <input matInput formControlName="variable_name" placeholder="departure_time">
+                  <mat-hint>snake_case only</mat-hint>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline">
+                  <mat-label>Type</mat-label>
+                  <mat-select formControlName="type">
+                    <mat-option *ngFor="let type of variableTypes" [value]="type">
+                      {{ type }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" class="json-path-field">
+                  <mat-label>JSON Path</mat-label>
+                  <input matInput formControlName="json_path" placeholder="FlightInfo.Details.DepartureTime">
+                  <mat-hint>Use dot notation for nested values</mat-hint>
+                </mat-form-field>
+
+                <button mat-icon-button color="warn" type="button" (click)="removeResponseMapping(i)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+            </div>
+
+            <div *ngIf="responseMappings.length === 0" class="empty-state-small">
+              <mat-icon>info</mat-icon>
+              <p>No response mappings defined. Use this to extract values from API responses into session variables.</p>
+            </div>
+          </div>
+
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>Proxy URL (Optional)</mat-label>
             <input matInput formControlName="proxy" 
@@ -156,14 +203,22 @@
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <mat-icon>help_outline</mat-icon>
-                    Common Headers
+                    Template Variables for Headers
                   </mat-panel-title>
                 </mat-expansion-panel-header>
-                <div class="common-headers">
-                  <p><strong>Content-Type:</strong> application/json</p>
-                  <p><strong>Authorization:</strong> Bearer {{'{{auth_tokens.api_name.token}}'}}</p>
-                  <p><strong>Accept:</strong> application/json</p>
+                <div class="template-list">
+                  <mat-chip *ngFor="let templateVar of getTemplateVariables()" 
+                            class="template-chip">
+                    <span (click)="headers.length > 0 ? insertHeaderValue(headers.length - 1, templateVar) : null">
+                      {{ templateVar }}
+                    </span>
+                  </mat-chip>
                 </div>
+                <p class="hint-text">
+                  Common headers:<br>
+                  <strong>Authorization:</strong> Bearer {{'{{auth_tokens.api_name.token}}'}}<br>
+                  <strong>Content-Type:</strong> application/json
+                </p>
               </mat-expansion-panel>
             </div>
           </div>
@@ -205,6 +260,23 @@
                             placeholder='{"grant_type": "client_credentials"}'
                             rows="4"
                             class="json-textarea"></textarea>
+                  <div class="template-helpers">
+                    <mat-expansion-panel>
+                      <mat-expansion-panel-header>
+                        <mat-panel-title>
+                          <mat-icon>help_outline</mat-icon>
+                          Template Variables
+                        </mat-panel-title>
+                      </mat-expansion-panel-header>
+                      <div class="template-list">
+                        <mat-chip *ngFor="let templateVar of getTemplateVariables(false)" 
+                                  (click)="insertTemplateVariable('auth.token_request_body', templateVar)"
+                                  class="template-chip">
+                          {{ templateVar }}
+                        </mat-chip>
+                      </div>
+                    </mat-expansion-panel>
+                  </div>
                   <button mat-button type="button" 
                           (click)="validateJSON('auth.token_request_body')"
                           [color]="validateJSON('auth.token_request_body') ? 'primary' : 'warn'">
@@ -258,6 +330,25 @@
               </mat-chip-listbox>
             </div>
 
+            <div class="form-section">
+              <label class="section-label">Test Request JSON:</label>
+              <div class="json-editor">
+                <textarea [(ngModel)]="testRequestJson" 
+                          [ngModelOptions]="{standalone: true}"
+                          rows="8"
+                          class="json-textarea"
+                          placeholder='{"key": "value"}'></textarea>
+                <button mat-button type="button" 
+                        (click)="updateTestRequestJson()">
+                  <mat-icon>refresh</mat-icon>
+                  Reset to Template
+                </button>
+              </div>
+              <p class="hint-text">
+                Edit the JSON above to customize test values. Template variables are replaced with placeholder values.
+              </p>
+            </div>
+
             <button mat-raised-button color="accent" 
                     (click)="testAPI()" 
                     [disabled]="testing || !form.get('url')?.valid">
@@ -297,7 +388,7 @@
 
             <div class="test-note">
               <mat-icon>info</mat-icon>
-              <p>Note: Test requests use placeholder values for template variables.</p>
+              <p>Note: Test requests use the JSON content from the text area above.</p>
             </div>
           </div>
         </div>