feat: enhance api request management system

Improve the API request management system by adding support for
collections, environment variables, and enhanced request handling.

- Introduced `Collection` and `ApiRequest` interfaces to manage
grouped API requests.
- Added methods to load, save, and update collections and
environment variables.
- Enhanced `handleApiRequest` to support query parameters and
form data.
- Updated the UI to allow for dynamic addition of query
parameters, headers, and form data.
- Improved the HTTP client to handle `FormData` and manage
content-type headers automatically.

These changes significantly enhance the user experience by
allowing better organization and management of API requests.

Author: sauravpanda

extensions/vscode/src/apiRequest/apiRequestProvider.ts

@@ -2,41 +2,79 @@ import * as vscode from 'vscode';
 import { ApiRequestView } from './apiRequestView';
 import { HttpClient } from '../utils/httpClient';
 
+interface Collection {
+    name: string;
+    requests: ApiRequest[];
+}
+
+interface ApiRequest {
+    name: string;
+    method: string;
+    url: string;
+    headers: Record<string, string>;
+    body: string;
+}
+
 export class ApiRequestProvider {
     private context: vscode.ExtensionContext;
     private view: ApiRequestView | undefined;
     private httpClient: HttpClient;
+    private collections: Collection[] = [];
+    private environment: Record<string, string> = {};
 
     constructor(context: vscode.ExtensionContext) {
         this.context = context;
         this.httpClient = new HttpClient();
         this.handleApiRequest = this.handleApiRequest.bind(this);
+        this.loadCollections();
+        this.loadEnvironment();
     }
 
     public openApiRequestView() {
-        // Implementation to open the API Management view
         if (!this.view) {
             this.view = new ApiRequestView(this.context, this.handleApiRequest);
         }
         this.view.show();
-      }
+        this.updateCollectionsView();
+    }
 
-      private async handleApiRequest(method: string, url: string, headers: string, body: string) {
+    private async handleApiRequest(
+        method: string, 
+        url: string, 
+        headers: Record<string, string>, 
+        queryParams: Record<string, string>, 
+        formData: Record<string, string>, 
+        body: string
+    ): Promise<void> {
         try {
-            console.log(url, method, headers, body);
-            const parsedHeaders = JSON.parse(headers);
+            // Append query params to URL
+            const urlObj = new URL(url);
+            Object.entries(queryParams).forEach(([key, value]) => {
+                urlObj.searchParams.append(key, value);
+            });
+
+            // Prepare body
+            let requestBody: string | FormData | undefined;
+            if (Object.keys(formData).length > 0) {
+                requestBody = new FormData();
+                Object.entries(formData).forEach(([key, value]) => {
+                    (requestBody as FormData).append(key, value);
+                });
+            } else if (body) {
+                requestBody = body;
+            }
+
             const startTime = Date.now();
             const response = await this.httpClient.sendRequest(
-                url, 
+                urlObj.toString(), 
                 method, 
-                parsedHeaders, 
-                ['GET', 'HEAD'].includes(method.toUpperCase()) ? undefined : body
+                headers, 
+                requestBody
             );
-            console.log("Working!");
             const endTime = Date.now();
             const responseTime = endTime - startTime;
             const responseSize = JSON.stringify(response).length;
-    
+
             this.view?.postMessage({
                 command: 'receiveResponse',
                 response: response,
@@ -47,4 +85,51 @@ export class ApiRequestProvider {
             vscode.window.showErrorMessage(`Error sending request: ${error}`);
         }
     }
+
+    private replaceEnvironmentVariables(str: string): string {
+        return str.replace(/\{\{(\w+)\}\}/g, (_, key) => this.environment[key] || '');
+    }
+
+    public addCollection(name: string) {
+        this.collections.push({ name, requests: [] });
+        this.saveCollections();
+        this.updateCollectionsView();
+    }
+
+    public addRequestToCollection(collectionName: string, request: ApiRequest) {
+        const collection = this.collections.find(c => c.name === collectionName);
+        if (collection) {
+            collection.requests.push(request);
+            this.saveCollections();
+            this.updateCollectionsView();
+        }
+    }
+
+    private loadCollections() {
+        this.collections = this.context.globalState.get('apiCollections', []);
+    }
+
+    private saveCollections() {
+        this.context.globalState.update('apiCollections', this.collections);
+    }
+
+    private updateCollectionsView() {
+        this.view?.postMessage({
+            command: 'updateCollections',
+            collections: this.collections
+        });
+    }
+
+    public setEnvironmentVariable(key: string, value: string) {
+        this.environment[key] = value;
+        this.saveEnvironment();
+    }
+
+    private loadEnvironment() {
+        this.environment = this.context.globalState.get('apiEnvironment', {});
+    }
+
+    private saveEnvironment() {
+        this.context.globalState.update('apiEnvironment', this.environment);
+    }
 }