"@bany/curl-to-json": "^1.2.8",

import React, { useState } from "react";

import { Modal, Input, Button, message } from "antd";

import { trans } from "i18n";

import parseCurl from "@bany/curl-to-json";

const { TextArea } = Input;

interface CurlImportModalProps {

open: boolean;

onCancel: () => void;

onSuccess: (parsedData: any) => void;

export function CurlImportModal(props: CurlImportModalProps) {

const { open, onCancel, onSuccess } = props;

const [curlCommand, setCurlCommand] = useState("");

const [loading, setLoading] = useState(false);

const handleImport = async () => {

if (!curlCommand.trim()) {

message.error("Please enter a cURL command");

return;

}

setLoading(true);

try {

// Parse the cURL command using the correct import

const parsedData = parseCurl(curlCommand);

// Log the result for now as requested

// console.log("Parsed cURL data:", parsedData);

// Call success callback with parsed data

onSuccess(parsedData);

// Reset form and close modal

setCurlCommand("");

onCancel();

message.success("cURL command imported successfully!");

} catch (error: any) {

console.error("Error parsing cURL command:", error);

message.error(`Failed to parse cURL command: ${error.message}`);

} finally {

setLoading(false);

}

};

const handleCancel = () => {

setCurlCommand("");

onCancel();

};

return (

<Modal

title="Import from cURL"

open={open}

onCancel={handleCancel}

footer={[

<Button key="cancel" onClick={handleCancel}>

Cancel

</Button>,

<Button key="import" type="primary" loading={loading} onClick={handleImport}>

Import

</Button>,

]}

width={600}

>

<div style={{ marginBottom: 16 }}>

<div style={{ marginBottom: 8, fontWeight: 500 }}>

Paste cURL Command Here

</div>

<div style={{ marginBottom: 12, color: "#666", fontSize: "12px" }}>

<div style={{ marginBottom: 4 }}>

<strong>Examples:</strong>

</div>

<div style={{ marginBottom: 2 }}>

GET: <code>curl -X GET https://jsonplaceholder.typicode.com/posts/1</code>

</div>

<div style={{ marginBottom: 2 }}>

POST: <code>curl -X POST https://jsonplaceholder.typicode.com/posts -H "Content-Type: application/json" -d '&#123;"title":"foo","body":"bar","userId":1&#125;'</code>

</div>

<div>

Users: <code>curl -X GET https://jsonplaceholder.typicode.com/users</code>

</div>

</div>

<TextArea

value={curlCommand}

onChange={(e) => setCurlCommand(e.target.value)}

placeholder="curl -X GET https://jsonplaceholder.typicode.com/posts/1"

rows={8}

style={{ fontFamily: "monospace" }}

/>

</div>

</Modal>

);

}

import { CurlImportModal } from "./CurlImport";

const [curlModalVisible, setCurlModalVisible] = useState(false);

const handleCurlImportSuccess = (parsedData: any) => {

onSelect(BottomResTypeEnum.Query, {

compType: "restApi",

dataSourceId: QUICK_REST_API_ID,

curlData: parsedData

});

};

<DataSourceButton size={buttonSize} onClick={() => setCurlModalVisible(true)}>

<DataSourceIcon size="large" dataSourceType="restApi" />

Import from cURL

</DataSourceButton>

<CurlImportModal

open={curlModalVisible}

onCancel={() => setCurlModalVisible(false)}

onSuccess={handleCurlImportSuccess}

/>

import { processCurlData } from "../../util/curlUtils";

const curlData = extraInfo?.curlData;

console.log("CURL DATA", curlData);

// Build the basic payload

let payload: any = {

id: id,

name: name,

datasourceId: dataSourceId,

compType,

triggerType: manualTriggerResource.includes(compType) ? "manual" : "automatic",

isNewCreate: true,

order: Date.now(),

};

// If this is a REST API created from cURL, pre-populate the HTTP query fields

if (compType === "restApi" && curlData) {

const curlConfig = processCurlData(curlData);

if (curlConfig) {

payload = {

...payload,

comp: {

httpMethod: curlConfig.method,

path: curlConfig.url,

headers: curlConfig.headers,

params: curlConfig.params,

bodyType: curlConfig.bodyType,

body: curlConfig.body,

bodyFormData: curlConfig.bodyFormData,

},

};

}

}

this.pushAction(payload),

import { processCurlData } from "../../util/curlUtils";

// Build basic query DSL

let queryDSL: any = {

triggerType: "manual",

datasourceId: extraInfo?.dataSourceId,

compType: extraInfo?.compType,

};

// If it is a REST API created from cURL, pre-populate the HTTP query fields

if (extraInfo?.compType === "restApi" && extraInfo?.curlData) {

const curlConfig = processCurlData(extraInfo.curlData);

if (curlConfig) {

queryDSL = {

...queryDSL,

comp: {

httpMethod: curlConfig.method,

path: curlConfig.url,

headers: curlConfig.headers,

params: curlConfig.params,

bodyType: curlConfig.bodyType,

body: curlConfig.body,

bodyFormData: curlConfig.bodyFormData,

},

};

}

}

query: queryDSL,

const CONTENT_TYPE_TO_BODY_TYPE: Record<string, string> = {

"application/json": "application/json",

"text/plain": "text/plain",

"text/html": "text/plain",

"text/xml": "text/plain",

"application/xml": "text/plain",

"application/x-www-form-urlencoded": "application/x-www-form-urlencoded",

"multipart/form-data": "multipart/form-data",

function parseUrlEncodedData(data: string | object): Array<{ key: string; value: string; type: string }> {

if (!data) {

return [{ key: "", value: "", type: "text" }];

}

try {

let result: Array<{ key: string; value: string; type: string }> = [];

if (typeof data === 'object') {

// @bany/curl-to-json already parsed it into an object

Object.entries(data).forEach(([key, value]) => {

result.push({

key: key,

value: decodeURIComponent(String(value).replace(/\+/g, ' ')), // Handle URL encoding

type: "text"

});

});

} else if (typeof data === 'string') {

// Raw URL-encoded string - use URLSearchParams

const params = new URLSearchParams(data);

params.forEach((value, key) => {

result.push({

key: key,

value: value,

type: "text"

});

});

}

return result.length > 0 ? result : [{ key: "", value: "", type: "text" }];

} catch (error) {

console.warn('Failed to parse URL-encoded data:', error);

return [{ key: "", value: "", type: "text" }];

}

export function processCurlData(curlData: any) {

if (!curlData) return null;

// Convert headers object to key-value array format expected by UI

const headers = curlData.header

? Object.entries(curlData.header).map(([key, value]) => ({ key, value }))

: [{ key: "", value: "" }];

// Convert query params object to key-value array format expected by UI

const params = curlData.params

? Object.entries(curlData.params).map(([key, value]) => ({ key, value }))

: [{ key: "", value: "" }];

// Get request body - @bany/curl-to-json may use 'body' or 'data'

const bodyContent = curlData.body !== undefined ? curlData.body : curlData.data;

// Determine body type based on Content-Type header or content structure

let bodyType = "none";

let bodyFormData = [{ key: "", value: "", type: "text" }];

let processedBody = "";

if (bodyContent !== undefined && bodyContent !== "") {

const contentTypeHeader = curlData.header?.["Content-Type"] || curlData.header?.["content-type"];

if (contentTypeHeader) {

// Extract base content type (remove charset, boundary, etc.)

const baseContentType = contentTypeHeader.split(';')[0].trim().toLowerCase();

bodyType = CONTENT_TYPE_TO_BODY_TYPE[baseContentType] || "text/plain";

} else {

// Fallback: infer from content structure

if (typeof bodyContent === "object") {

bodyType = "application/json";

} else {

bodyType = "text/plain";

}

}

// Handle different body types

if (bodyType === "application/x-www-form-urlencoded") {

bodyFormData = parseUrlEncodedData(bodyContent);

processedBody = ""; // Form data goes in bodyFormData, not body

} else if (typeof bodyContent === "object") {

processedBody = JSON.stringify(bodyContent, null, 2);

} else {

processedBody = bodyContent;

}

}

return {

method: curlData.method || "GET",

url: curlData.url || "",

headers,

params,

bodyType,

body: processedBody,

bodyFormData,

};

}