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

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

@@ -0,0 +1,368 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatChipsModule } from '@angular/material/chips';
+import { ApiService } from '../../services/api.service';
+
+@Component({
+  selector: 'app-api-edit-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatTabsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatChipsModule
+  ],
+  templateUrl: './api-edit-dialog.component.html',
+  styleUrls: ['./api-edit-dialog.component.scss']
+})
+export default class ApiEditDialogComponent implements OnInit {
+  form!: FormGroup;
+  saving = false;
+  testing = false;
+  testResult: any = null;
+
+  httpMethods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
+  retryStrategies = ['static', 'exponential'];
+
+  // Template variable helpers
+  templateVariables = [
+    { key: 'variables.origin', desc: 'Origin city from session' },
+    { key: 'variables.destination', desc: 'Destination city from session' },
+    { key: 'variables.flight_date', desc: 'Flight date from session' },
+    { key: 'auth_tokens.api_name.token', desc: 'Auth token for this API' },
+    { key: 'config.work_mode', desc: 'Current work mode' }
+  ];
+
+  constructor(
+    private fb: FormBuilder,
+    private apiService: ApiService,
+    private snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<ApiEditDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
+
+  ngOnInit() {
+    this.initializeForm();
+
+    if (this.data.mode === 'edit' && this.data.api) {
+      this.populateForm(this.data.api);
+    } else if (this.data.mode === 'duplicate' && this.data.api) {
+      const duplicateData = { ...this.data.api };
+      duplicateData.name = duplicateData.name + '_copy';
+      delete duplicateData.last_update_date;
+      this.populateForm(duplicateData);
+    }
+  }
+
+  initializeForm() {
+    this.form = this.fb.group({
+      // General Tab
+      name: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9_]+$/)]],
+      url: ['', [Validators.required, Validators.pattern(/^https?:\/\/.+/)]],
+      method: ['POST', Validators.required],
+      body_template: ['{}'],
+      timeout_seconds: [10, [Validators.required, Validators.min(1), Validators.max(300)]],
+      response_prompt: [''],
+
+      // Headers Tab
+      headers: this.fb.array([]),
+
+      // Retry Settings
+      retry: this.fb.group({
+        retry_count: [3, [Validators.required, Validators.min(0), Validators.max(10)]],
+        backoff_seconds: [2, [Validators.required, Validators.min(1), Validators.max(60)]],
+        strategy: ['static', Validators.required]
+      }),
+
+      // Auth Tab
+      auth: this.fb.group({
+        enabled: [false],
+        token_endpoint: [''],
+        response_token_path: ['token'],
+        token_request_body: ['{}'],
+        token_refresh_endpoint: [''],
+        token_refresh_body: ['{}']
+      }),
+
+      // Proxy (optional)
+      proxy: [''],
+
+      // For race condition handling
+      last_update_date: ['']
+    });
+
+    // Watch for auth enabled changes
+    this.form.get('auth.enabled')?.valueChanges.subscribe(enabled => {
+      const authGroup = this.form.get('auth');
+      if (enabled) {
+        authGroup?.get('token_endpoint')?.setValidators([Validators.required]);
+        authGroup?.get('response_token_path')?.setValidators([Validators.required]);
+      } else {
+        authGroup?.get('token_endpoint')?.clearValidators();
+        authGroup?.get('response_token_path')?.clearValidators();
+      }
+      authGroup?.get('token_endpoint')?.updateValueAndValidity();
+      authGroup?.get('response_token_path')?.updateValueAndValidity();
+    });
+  }
+
+  populateForm(api: any) {
+    // Convert headers object to FormArray
+    const headersArray = this.form.get('headers') as FormArray;
+    headersArray.clear();
+
+    if (api.headers && typeof api.headers === 'object') {
+      Object.entries(api.headers).forEach(([key, value]) => {
+        headersArray.push(this.createHeaderFormGroup(key, value as string));
+      });
+    }
+
+    // Convert body_template to JSON string if it's an object
+    if (api.body_template && typeof api.body_template === 'object') {
+      api.body_template = JSON.stringify(api.body_template, null, 2);
+    }
+
+    // Convert auth bodies to JSON strings
+    if (api.auth) {
+      if (api.auth.token_request_body && typeof api.auth.token_request_body === 'object') {
+        api.auth.token_request_body = JSON.stringify(api.auth.token_request_body, null, 2);
+      }
+      if (api.auth.token_refresh_body && typeof api.auth.token_refresh_body === 'object') {
+        api.auth.token_refresh_body = JSON.stringify(api.auth.token_refresh_body, null, 2);
+      }
+    }
+
+    // Patch form values
+    this.form.patchValue(api);
+
+    // Disable name field if editing
+    if (this.data.mode === 'edit') {
+      this.form.get('name')?.disable();
+    }
+  }
+
+  get headers() {
+    return this.form.get('headers') as FormArray;
+  }
+
+  createHeaderFormGroup(key = '', value = ''): FormGroup {
+    return this.fb.group({
+      key: [key, Validators.required],
+      value: [value, Validators.required]
+    });
+  }
+
+  addHeader() {
+    this.headers.push(this.createHeaderFormGroup());
+  }
+
+  removeHeader(index: number) {
+    this.headers.removeAt(index);
+  }
+
+  insertTemplateVariable(field: string, variable: string) {
+    const control = field.includes('.') 
+      ? this.form.get(field)
+      : this.form.get(field);
+    
+    if (control) {
+      const currentValue = control.value || '';
+      const newValue = currentValue + `{{${variable}}}`;
+      control.setValue(newValue);
+    }
+  }
+
+  validateJSON(field: string): boolean {
+    const control = this.form.get(field);
+    if (!control || !control.value) return true;
+
+    try {
+      JSON.parse(control.value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async testAPI() {
+    // Validate form first
+    const generalValid = this.form.get('url')?.valid && this.form.get('method')?.valid;
+    if (!generalValid) {
+      this.snackBar.open('Please fill in required fields first', 'Close', { duration: 3000 });
+      return;
+    }
+
+    this.testing = true;
+    this.testResult = null;
+
+    try {
+      const testData = this.prepareAPIData();
+      
+      // For test, we'll use a sample request
+      const result = await this.apiService.testAPI(testData).toPromise();
+      this.testResult = result;
+
+      if (result.success) {
+        this.snackBar.open('API test successful!', 'Close', { duration: 3000 });
+      } else {
+        this.snackBar.open(`API test failed: ${result.error}`, 'Close', { 
+          duration: 5000,
+          panelClass: 'error-snackbar' 
+        });
+      }
+    } catch (error: any) {
+      this.testResult = {
+        success: false,
+        error: error.message || 'Test failed'
+      };
+      this.snackBar.open('API test failed', 'Close', { 
+        duration: 3000,
+        panelClass: 'error-snackbar' 
+      });
+    } finally {
+      this.testing = false;
+    }
+  }
+
+  prepareAPIData(): any {
+    const formValue = this.form.getRawValue();
+
+    // Convert headers array back to object
+    const headers: any = {};
+    formValue.headers.forEach((h: any) => {
+      if (h.key && h.value) {
+        headers[h.key] = h.value;
+      }
+    });
+
+    // Parse JSON fields
+    let body_template = {};
+    let auth_token_request_body = {};
+    let auth_token_refresh_body = {};
+
+    try {
+      body_template = formValue.body_template ? JSON.parse(formValue.body_template) : {};
+    } catch {}
+
+    try {
+      auth_token_request_body = formValue.auth.token_request_body ? JSON.parse(formValue.auth.token_request_body) : {};
+    } catch {}
+
+    try {
+      auth_token_refresh_body = formValue.auth.token_refresh_body ? JSON.parse(formValue.auth.token_refresh_body) : {};
+    } catch {}
+
+    // Prepare final data
+    const apiData: any = {
+      name: formValue.name,
+      url: formValue.url,
+      method: formValue.method,
+      headers,
+      body_template,
+      timeout_seconds: formValue.timeout_seconds,
+      retry: formValue.retry,
+      response_prompt: formValue.response_prompt
+    };
+
+    // Add proxy if specified
+    if (formValue.proxy) {
+      apiData.proxy = formValue.proxy;
+    }
+
+    // Add auth if enabled
+    if (formValue.auth.enabled) {
+      apiData.auth = {
+        enabled: true,
+        token_endpoint: formValue.auth.token_endpoint,
+        response_token_path: formValue.auth.response_token_path,
+        token_request_body: auth_token_request_body
+      };
+
+      if (formValue.auth.token_refresh_endpoint) {
+        apiData.auth.token_refresh_endpoint = formValue.auth.token_refresh_endpoint;
+        apiData.auth.token_refresh_body = auth_token_refresh_body;
+      }
+    }
+
+    // Add last_update_date for edit mode
+    if (this.data.mode === 'edit' && formValue.last_update_date) {
+      apiData.last_update_date = formValue.last_update_date;
+    }
+
+    return apiData;
+  }
+
+  async save() {
+    if (this.form.invalid) {
+      // Mark all fields as touched to show validation errors
+      Object.keys(this.form.controls).forEach(key => {
+        this.form.get(key)?.markAsTouched();
+      });
+      
+      // Check specific JSON fields
+      const jsonFields = ['body_template', 'auth.token_request_body', 'auth.token_refresh_body'];
+      for (const field of jsonFields) {
+        if (!this.validateJSON(field)) {
+          this.snackBar.open(`Invalid JSON in ${field}`, 'Close', { 
+            duration: 3000,
+            panelClass: 'error-snackbar' 
+          });
+          return;
+        }
+      }
+
+      this.snackBar.open('Please fix validation errors', 'Close', { duration: 3000 });
+      return;
+    }
+
+    this.saving = true;
+    try {
+      const apiData = this.prepareAPIData();
+
+      if (this.data.mode === 'create' || this.data.mode === 'duplicate') {
+        await this.apiService.createAPI(apiData).toPromise();
+        this.snackBar.open('API created successfully', 'Close', { duration: 3000 });
+      } else {
+        await this.apiService.updateAPI(this.data.api.name, apiData).toPromise();
+        this.snackBar.open('API updated successfully', 'Close', { duration: 3000 });
+      }
+
+      this.dialogRef.close(true);
+    } catch (error: any) {
+      const message = error.error?.detail || 
+        (this.data.mode === 'create' ? 'Failed to create API' : 'Failed to update API');
+      this.snackBar.open(message, 'Close', { 
+        duration: 5000, 
+        panelClass: 'error-snackbar' 
+      });
+    } finally {
+      this.saving = false;
+    }
+  }
+
+  cancel() {
+    this.dialogRef.close(false);
+  }
+}