Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0ae6c23

Browse files
iamfaraniamfaran
committed
console log curl to json
1 parent d4ac9e3 commit 0ae6c23

File tree

4 files changed

+126
-1
lines changed

4 files changed

+126
-1
lines changed

‎client/packages/lowcoder/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"types": "src/index.sdk.ts",
88
"dependencies": {
99
"@ant-design/icons": "^5.3.0",
10+
"@bany/curl-to-json": "^1.2.8",
1011
"@codemirror/autocomplete": "^6.11.1",
1112
"@codemirror/commands": "^6.3.2",
1213
"@codemirror/lang-css": "^6.2.1",

‎client/packages/lowcoder/src/components/CurlImport.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, { useState } from "react";
2+
import { Modal, Input, Button, message } from "antd";
3+
import { trans } from "i18n";
4+
import parseCurl from "@bany/curl-to-json";
5+
const { TextArea } = Input;
6+
interface CurlImportModalProps {
7+
open: boolean;
8+
onCancel: () => void;
9+
onSuccess: (parsedData: any) => void;
10+
}
11+
12+
export function CurlImportModal(props: CurlImportModalProps) {
13+
const { open, onCancel, onSuccess } = props;
14+
const [curlCommand, setCurlCommand] = useState("");
15+
const [loading, setLoading] = useState(false);
16+
17+
const handleImport = async () => {
18+
if (!curlCommand.trim()) {
19+
message.error("Please enter a cURL command");
20+
return;
21+
}
22+
23+
setLoading(true);
24+
try {
25+
// Parse the cURL command using the correct import
26+
const parsedData = parseCurl(curlCommand);
27+
console.log("CURL JSON", parsedData)
28+
29+
30+
31+
// Log the result for now as requested
32+
// console.log("Parsed cURL data:", parsedData);
33+
34+
// Call success callback with parsed data
35+
onSuccess(parsedData);
36+
37+
// Reset form and close modal
38+
setCurlCommand("");
39+
onCancel();
40+
41+
message.success("cURL command imported successfully!");
42+
} catch (error: any) {
43+
console.error("Error parsing cURL command:", error);
44+
message.error(`Failed to parse cURL command: ${error.message}`);
45+
} finally {
46+
setLoading(false);
47+
}
48+
};
49+
50+
const handleCancel = () => {
51+
setCurlCommand("");
52+
onCancel();
53+
};
54+
55+
return (
56+
<Modal
57+
title="Import from cURL"
58+
open={open}
59+
onCancel={handleCancel}
60+
footer={[
61+
<Button key="cancel" onClick={handleCancel}>
62+
Cancel
63+
</Button>,
64+
<Button key="import" type="primary" loading={loading} onClick={handleImport}>
65+
Import
66+
</Button>,
67+
]}
68+
width={600}
69+
>
70+
<div style={{ marginBottom: 16 }}>
71+
<div style={{ marginBottom: 8, fontWeight: 500 }}>
72+
Paste cURL Command Here
73+
</div>
74+
<div style={{ marginBottom: 12, color: "#666", fontSize: "12px" }}>
75+
Hint: Try typing in the following curl command and then click on the 'Import' button:
76+
curl -X GET https://mock-api.appsmith.com/users
77+
</div>
78+
<TextArea
79+
value={curlCommand}
80+
onChange={(e) => setCurlCommand(e.target.value)}
81+
placeholder="curl -X POST \
82+
-H 'Content-Type: application/json' \
83+
'https://generativelanguage.googleapis.com/v1beta/models/{MODEL_ID}:{GENERATE_CONTENT_API}?key={GEMINI_API_KEY}' -d '@request.json'"
84+
rows={8}
85+
style={{ fontFamily: "monospace" }}
86+
/>
87+
</div>
88+
</Modal>
89+
);
90+
}

‎client/packages/lowcoder/src/components/ResCreatePanel.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { getUser } from "../redux/selectors/usersSelectors";
2626
import DataSourceIcon from "./DataSourceIcon";
2727
import { genRandomKey } from "comps/utils/idGenerator";
2828
import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
29+
import { CurlImportModal } from "./CurlImport";
2930

3031
const Wrapper = styled.div<{ $placement: PageType }>`
3132
width: 100%;
@@ -230,6 +231,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
230231
const { onSelect, onClose, recentlyUsed, datasource, placement = "editor" } = props;
231232
const [isScrolling, setScrolling] = useState(false);
232233
const [visible, setVisible] = useState(false);
234+
const [curlModalVisible, setCurlModalVisible] = useState(false);
233235

234236
const isPublicApp = useSelector(isPublicApplication);
235237
const user = useSelector(getUser);
@@ -244,6 +246,19 @@ export function ResCreatePanel(props: ResCreateModalProps) {
244246
setScrolling(top > 0);
245247
}, 100);
246248

249+
const handleCurlImportSuccess = (parsedData: any) => {
250+
// For now just log the result as requested
251+
console.log("cURL import successful:", parsedData);
252+
253+
// Create a new REST API query with the parsed data
254+
// We'll pass the parsed data as extra info to be used when creating the query
255+
onSelect(BottomResTypeEnum.Query, {
256+
compType: "restApi",
257+
dataSourceId: QUICK_REST_API_ID,
258+
curlData: parsedData
259+
});
260+
};
261+
247262
return (
248263
<Wrapper $placement={placement}>
249264
<Title $shadow={isScrolling} $placement={placement}>
@@ -331,6 +346,10 @@ export function ResCreatePanel(props: ResCreateModalProps) {
331346
<ResButton size={buttonSize} identifier={"streamApi"} onSelect={onSelect} />
332347
<ResButton size={buttonSize} identifier={"alasql"} onSelect={onSelect} />
333348
<ResButton size={buttonSize} identifier={"graphql"} onSelect={onSelect} />
349+
<DataSourceButton size={buttonSize} onClick={() => setCurlModalVisible(true)}>
350+
<DataSourceIcon size="large" dataSourceType="restApi" />
351+
Import from cURL
352+
</DataSourceButton>
334353
</DataSourceListWrapper>
335354
</div>
336355

@@ -374,6 +393,11 @@ export function ResCreatePanel(props: ResCreateModalProps) {
374393
onCancel={() => setVisible(false)}
375394
onCreated={() => setVisible(false)}
376395
/>
396+
<CurlImportModal
397+
open={curlModalVisible}
398+
onCancel={() => setCurlModalVisible(false)}
399+
onSuccess={handleCurlImportSuccess}
400+
/>
377401
</Wrapper>
378402
);
379403
}

‎client/yarn.lock

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1682,6 +1682,15 @@ __metadata:
16821682
languageName: node
16831683
linkType: hard
16841684

1685+
"@bany/curl-to-json@npm:^1.2.8":
1686+
version: 1.2.8
1687+
resolution: "@bany/curl-to-json@npm:1.2.8"
1688+
dependencies:
1689+
minimist: ^1.2.8
1690+
checksum: 4f2c095c3e3194e9e3e717cf766a66c8ca320c2f10b118d52a8d8d2b842b6760af656a966ec3ce9e9cf774909b2507a2d1417c7f3d98b6773f5ae935be9191b6
1691+
languageName: node
1692+
linkType: hard
1693+
16851694
"@bcoe/v8-coverage@npm:^0.2.3":
16861695
version: 0.2.3
16871696
resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -14095,6 +14104,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
1409514104
resolution: "lowcoder@workspace:packages/lowcoder"
1409614105
dependencies:
1409714106
"@ant-design/icons": ^5.3.0
14107+
"@bany/curl-to-json": ^1.2.8
1409814108
"@codemirror/autocomplete": ^6.11.1
1409914109
"@codemirror/commands": ^6.3.2
1410014110
"@codemirror/lang-css": ^6.2.1
@@ -15476,7 +15486,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
1547615486
languageName: node
1547715487
linkType: hard
1547815488

15479-
"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
15489+
"minimist@npm:^1.2.0, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
1548015490
version: 1.2.8
1548115491
resolution: "minimist@npm:1.2.8"
1548215492
checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0

0 commit comments

Comments
 (0)