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

@@ -62,56 +62,15 @@
           </mat-form-field>
         </div>
 
-        <mat-form-field appearance="outline" 
-                        class="full-width" 
-                        [class.json-valid]="validateJSON('body_template')"
-                        [class.json-invalid]="!validateJSON('body_template') && form.get('body_template')?.value">
-          <mat-label>Body Template</mat-label>
-          <textarea matInput 
-                    [formControl]="$any(form.get('body_template'))" 
-                    rows="8"
-                    placeholder='{"key": "value"}'
-                    (click)="saveCursorPosition('body_template', $event)"
-                    (keyup)="saveCursorPosition('body_template', $event)"
-                    (keydown)="handleTabKey($event, 'body_template')"
-                    class="code-editor"></textarea>
-          <mat-hint>JSON template with template variable support</mat-hint>
-          @if (!validateJSON('body_template')) {
-            <mat-error>Invalid JSON format</mat-error>
-          }
-        </mat-form-field>
-
-        <!-- JSON Validation Indicator -->
-        <div class="json-validation-status">
-          @if (validateJSON('body_template')) {
-            <mat-icon class="valid">check_circle</mat-icon>
-            <span class="valid">Valid JSON</span>
-          } @else {
-            <mat-icon class="invalid">error</mat-icon>
-            <span class="invalid">Invalid JSON</span>
-          }
-        </div>
-
-        <!-- Collapsible Variables Panel -->
-        <mat-expansion-panel class="variables-panel">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <mat-icon>code</mat-icon>
-              Available Variables
-            </mat-panel-title>
-            <mat-panel-description>
-              Click to insert template variables
-            </mat-panel-description>
-          </mat-expansion-panel-header>
-          
-          <mat-chip-set>
-            @for (variable of getTemplateVariables(false); track variable) {
-              <mat-chip (click)="insertTemplateVariable('body_template', variable)">
-                {{ variable }}
-              </mat-chip>
-            }
-          </mat-chip-set>
-        </mat-expansion-panel>
+        <app-json-editor
+          [formControl]="$any(form.get('body_template'))"
+          label="Body Template"
+          placeholder='{"key": "value"}'
+          hint="JSON template with template variable support"
+          [rows]="8"
+          [availableVariables]="getTemplateVariables(false)"
+          [variableReplacer]="replaceVariablesForValidation">
+        </app-json-editor>
 
         <mat-form-field appearance="outline">
           <mat-label>Proxy URL (Optional)</mat-label>
@@ -191,7 +150,9 @@
             </button>
           </div>
 
-          <mat-hint>Extract values from API response and save them as variables for use in subsequent intents</mat-hint>
+          <p class="info-text">
+            Extract values from API response and save them as variables for use in subsequent intents.
+          </p>
 
           @if (responseMappings.length === 0) {
             <p class="empty-message">No response mappings configured.</p>
@@ -311,16 +272,13 @@
             </button>
           </div>
 
-          <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Test Request Body</mat-label>
-            <textarea matInput 
-                      [(ngModel)]="testRequestJson" 
-                      rows="10"
-                      (keydown)="handleTabKey($event, 'testRequestJson')"
-                      class="code-editor"
-                      placeholder="Enter test request JSON here"></textarea>
-            <mat-hint>Variables will be replaced with test values</mat-hint>
-          </mat-form-field>
+          <app-json-editor
+            [(ngModel)]="testRequestJson"
+            label="Test Request Body"
+            placeholder="Enter test request JSON here"
+            hint="Variables will be replaced with test values"
+            [rows]="10">
+          </app-json-editor>
 
           @if (testResult) {
             <mat-divider></mat-divider>
@@ -400,56 +358,15 @@
               }
             </mat-form-field>
 
-            <mat-form-field appearance="outline" 
-                            class="full-width"
-                            [class.json-valid]="validateJSON('auth.token_request_body')"
-                            [class.json-invalid]="!validateJSON('auth.token_request_body') && form.get('auth.token_request_body')?.value">
-              <mat-label>Token Request Body</mat-label>
-              <textarea matInput 
-                        formControlName="token_request_body" 
-                        rows="6"
-                        (click)="saveCursorPosition('auth.token_request_body', $event)"
-                        (keyup)="saveCursorPosition('auth.token_request_body', $event)"
-                        (keydown)="handleTabKey($event, 'auth.token_request_body')"
-                        class="code-editor"
-                        placeholder='{"username": "api_user", "password": "api_pass"}'></textarea>
-              <mat-hint>JSON body for token request</mat-hint>
-              @if (!validateJSON('auth.token_request_body')) {
-                <mat-error>Invalid JSON format</mat-error>
-              }
-            </mat-form-field>
-
-            <!-- JSON Validation Indicator -->
-            <div class="json-validation-status">
-              @if (validateJSON('auth.token_request_body')) {
-                <mat-icon class="valid">check_circle</mat-icon>
-                <span class="valid">Valid JSON</span>
-              } @else {
-                <mat-icon class="invalid">error</mat-icon>
-                <span class="invalid">Invalid JSON</span>
-              }
-            </div>
-
-            <!-- Collapsible Variables Panel -->
-            <mat-expansion-panel class="variables-panel">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  <mat-icon>code</mat-icon>
-                  Available Variables
-                </mat-panel-title>
-                <mat-panel-description>
-                  Click to insert template variables
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              
-              <mat-chip-set>
-                @for (variable of getTemplateVariables(); track variable) {
-                  <mat-chip (click)="insertTemplateVariable('auth.token_request_body', variable)">
-                    {{ variable }}
-                  </mat-chip>
-                }
-              </mat-chip-set>
-            </mat-expansion-panel>
+            <app-json-editor
+              formControlName="token_request_body"
+              label="Token Request Body"
+              placeholder='{"username": "api_user", "password": "api_pass"}'
+              hint="JSON body for token request"
+              [rows]="6"
+              [availableVariables]="getTemplateVariables()"
+              [variableReplacer]="replaceVariablesForValidation">
+            </app-json-editor>
 
             <mat-divider></mat-divider>
 
@@ -461,56 +378,15 @@
               <mat-hint>URL to refresh expired token</mat-hint>
             </mat-form-field>
 
-            <mat-form-field appearance="outline" 
-                            class="full-width"
-                            [class.json-valid]="validateJSON('auth.token_refresh_body')"
-                            [class.json-invalid]="!validateJSON('auth.token_refresh_body') && form.get('auth.token_refresh_body')?.value">
-              <mat-label>Refresh Request Body</mat-label>
-              <textarea matInput 
-                        formControlName="token_refresh_body" 
-                        rows="4"
-                        (click)="saveCursorPosition('auth.token_refresh_body', $event)"
-                        (keyup)="saveCursorPosition('auth.token_refresh_body', $event)"
-                        (keydown)="handleTabKey($event, 'auth.token_refresh_body')"
-                        class="code-editor"
-                        placeholder='{"refresh_token": "your_refresh_token"}'></textarea>
-              <mat-hint>JSON body for refresh request</mat-hint>
-              @if (!validateJSON('auth.token_refresh_body')) {
-                <mat-error>Invalid JSON format</mat-error>
-              }
-            </mat-form-field>
-
-            <!-- JSON Validation Indicator -->
-            <div class="json-validation-status">
-              @if (validateJSON('auth.token_refresh_body')) {
-                <mat-icon class="valid">check_circle</mat-icon>
-                <span class="valid">Valid JSON</span>
-              } @else {
-                <mat-icon class="invalid">error</mat-icon>
-                <span class="invalid">Invalid JSON</span>
-              }
-            </div>
-
-            <!-- Collapsible Variables Panel -->
-            <mat-expansion-panel class="variables-panel">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  <mat-icon>code</mat-icon>
-                  Available Variables
-                </mat-panel-title>
-                <mat-panel-description>
-                  Click to insert template variables
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              
-              <mat-chip-set>
-                @for (variable of getTemplateVariables(); track variable) {
-                  <mat-chip (click)="insertTemplateVariable('auth.token_refresh_body', variable)">
-                    {{ variable }}
-                  </mat-chip>
-                }
-              </mat-chip-set>
-            </mat-expansion-panel>
+            <app-json-editor
+              formControlName="token_refresh_body"
+              label="Refresh Request Body"
+              placeholder='{"refresh_token": "your_refresh_token"}'
+              hint="JSON body for refresh request"
+              [rows]="4"
+              [availableVariables]="getTemplateVariables()"
+              [variableReplacer]="replaceVariablesForValidation">
+            </app-json-editor>
           </div>
         }
       </div>