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

@@ -17,7 +17,7 @@
       <div class="tab-content">
         <mat-form-field appearance="outline">
           <mat-label>Name</mat-label>
-          <input matInput [formControl]="form.get('name')" placeholder="e.g., get_flights">
+          <input matInput [formControl]="$any(form.get('name'))" placeholder="e.g., get_flights">
           <mat-hint>Unique identifier for this API</mat-hint>
           @if (form.get('name')?.hasError('required') && form.get('name')?.touched) {
             <mat-error>Name is required</mat-error>
@@ -29,7 +29,7 @@
 
         <mat-form-field appearance="outline">
           <mat-label>URL</mat-label>
-          <input matInput [formControl]="form.get('url')" placeholder="https://api.example.com/endpoint">
+          <input matInput [formControl]="$any(form.get('url'))" placeholder="https://api.example.com/endpoint">
           <mat-hint>Full URL including protocol</mat-hint>
           @if (form.get('url')?.hasError('required') && form.get('url')?.touched) {
             <mat-error>URL is required</mat-error>
@@ -42,7 +42,7 @@
         <div class="row">
           <mat-form-field appearance="outline" class="method-field">
             <mat-label>Method</mat-label>
-            <mat-select [formControl]="form.get('method')">
+            <mat-select [formControl]="$any(form.get('method'))">
               @for (method of httpMethods; track method) {
                 <mat-option [value]="method">{{ method }}</mat-option>
               }
@@ -51,7 +51,7 @@
 
           <mat-form-field appearance="outline" class="timeout-field">
             <mat-label>Timeout (seconds)</mat-label>
-            <input matInput type="number" [formControl]="form.get('timeout_seconds')">
+            <input matInput type="number" [formControl]="$any(form.get('timeout_seconds'))">
             <mat-hint>Request timeout in seconds</mat-hint>
             @if (form.get('timeout_seconds')?.hasError('min')) {
               <mat-error>Minimum 1 second</mat-error>
@@ -65,12 +65,12 @@
         <mat-form-field appearance="outline" class="full-width">
           <mat-label>Body Template</mat-label>
           <textarea matInput 
-                    [formControl]="form.get('body_template')" 
+                    [formControl]="$any(form.get('body_template'))" 
                     rows="8"
-                    placeholder='{"key": "{{variables.value}}"}'
+                    placeholder='{"key": "value"}'
                     (click)="saveCursorPosition('body_template', $event)"
                     (keyup)="saveCursorPosition('body_template', $event)"></textarea>
-          <mat-hint>JSON template with {{variables}} support</mat-hint>
+          <mat-hint>JSON template with template variable support</mat-hint>
           @if (!validateJSON('body_template')) {
             <mat-error>Invalid JSON format</mat-error>
           }
@@ -89,7 +89,7 @@
 
         <mat-form-field appearance="outline">
           <mat-label>Proxy URL (Optional)</mat-label>
-          <input matInput [formControl]="form.get('proxy')" placeholder="http://proxy.example.com:8080">
+          <input matInput [formControl]="$any(form.get('proxy'))" placeholder="http://proxy.example.com:8080">
           <mat-hint>HTTP proxy for this API call</mat-hint>
         </mat-form-field>
       </div>
@@ -112,7 +112,7 @@
           }
 
           @for (header of headers.controls; track header; let i = $index) {
-            <div class="array-item" [formGroup]="header">
+            <div class="array-item" [formGroup]="$any(header)">
               <mat-form-field appearance="outline" class="key-field">
                 <mat-label>Header Name</mat-label>
                 <input matInput formControlName="key" placeholder="Content-Type">
@@ -148,7 +148,7 @@
         <mat-form-field appearance="outline" class="full-width">
           <mat-label>Response Prompt</mat-label>
           <textarea matInput 
-                    [formControl]="form.get('response_prompt')" 
+                    [formControl]="$any(form.get('response_prompt'))" 
                     rows="4"
                     placeholder="Optional instructions for processing the response"></textarea>
           <mat-hint>Instructions for AI to process the response (optional)</mat-hint>
@@ -174,7 +174,7 @@
           }
 
           @for (mapping of responseMappings.controls; track mapping; let i = $index) {
-            <mat-expansion-panel [formGroup]="mapping">
+            <mat-expansion-panel [formGroup]="$any(mapping)">
               <mat-expansion-panel-header>
                 <mat-panel-title>
                   {{ mapping.get('variable_name')?.value || 'New Mapping' }}
@@ -229,7 +229,7 @@
         <!-- Retry Settings -->
         <mat-divider></mat-divider>
 
-        <div class="retry-section" [formGroup]="form.get('retry')">
+        <div class="retry-section" [formGroup]="$any(form.get('retry'))">
           <h3>Retry Settings</h3>
           
           <div class="row">
@@ -269,11 +269,15 @@
                     (click)="testAPI()" 
                     [disabled]="testing || !form.get('url')?.valid || !form.get('method')?.valid">
               @if (testing) {
-                <mat-icon class="spin">sync</mat-icon>
-                Testing...
+                <ng-container>
+                  <mat-icon class="spin">sync</mat-icon>
+                  Testing...
+                </ng-container>
               } @else {
-                <mat-icon>play_arrow</mat-icon>
-                Test API
+                <ng-container>
+                  <mat-icon>play_arrow</mat-icon>
+                  Test API
+                </ng-container>
               }
             </button>
 
@@ -341,7 +345,7 @@
 
     <!-- Auth Tab -->
     <mat-tab label="Authentication">
-      <div class="tab-content" [formGroup]="form.get('auth')">
+      <div class="tab-content" [formGroup]="$any(form.get('auth'))">
         <mat-checkbox formControlName="enabled">
           Enable Authentication
         </mat-checkbox>
@@ -377,7 +381,7 @@
                         rows="6"
                         (click)="saveCursorPosition('auth.token_request_body', $event)"
                         (keyup)="saveCursorPosition('auth.token_request_body', $event)"
-                        placeholder='{"username": "{{config.api_username}}", "password": "{{config.api_password}}"}'></textarea>
+                        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>
@@ -412,7 +416,7 @@
                         rows="4"
                         (click)="saveCursorPosition('auth.token_refresh_body', $event)"
                         (keyup)="saveCursorPosition('auth.token_refresh_body', $event)"
-                        placeholder='{"refresh_token": "{{auth_tokens.api_name.refresh_token}}"}'></textarea>
+                        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>
@@ -449,8 +453,10 @@
             (click)="save()" 
             [disabled]="saving || form.invalid">
       @if (saving) {
-        <mat-icon class="spin">sync</mat-icon>
-        Saving...
+        <ng-container>
+          <mat-icon class="spin">sync</mat-icon>
+          Saving...
+        </ng-container>
       } @else {
         @if (data.mode === 'create' || data.mode === 'duplicate') {
           Create