fix: support multiline graphql in curl (#3342)

Here fixed the issue with parsing curl by switching argv parser.

@types/arrgv.d.ts

@@ -0,0 +1,3 @@
+declare module "arrgv" {
+  export default function arrgv(input: string): string[];
+}

apps/builder/app/builder/features/settings-panel/curl.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "@jest/globals";
-import { generateCurl, parseCurl } from "./curl";
+import { generateCurl, parseCurl, type CurlRequest } from "./curl";
 
 test("support url", () => {
   const result = {
@@ -126,6 +126,10 @@ test("support json body", () => {
   });
 });
 
+test("avoid failing on syntax error", () => {
+  expect(parseCurl("curl \\")).toEqual(undefined);
+});
+
 test("generate curl with json body", () => {
   expect(
     generateCurl({
@@ -169,3 +173,24 @@ test("generate curl without body", () => {
   --request post"
 `);
 });
+
+test("multiline graphql is idempotent", () => {
+  const request: CurlRequest = {
+    url: "https://eu-central-1-shared-euc1-02.cdn.hygraph.com/content/clorhpxi8qx7r01t6hfp1b5f6/master",
+    method: "post",
+    headers: [{ name: "Content-Type", value: "application/json" }],
+    body: {
+      query: `
+        query Posts {
+          posts {
+            slug
+            title
+            updatedAt
+            excerpt
+          }
+        }
+      `,
+    },
+  };
+  expect(parseCurl(generateCurl(request))).toEqual(request);
+});

apps/builder/app/builder/features/settings-panel/curl.ts

@@ -1,5 +1,5 @@
 import type { ResourceRequest } from "@webstudio-is/sdk";
-import { parseArgsStringToArgv } from "string-argv";
+import arrgv from "arrgv";
 import { parse as parseArgs } from "ultraflag";
 
 /*
@@ -24,10 +24,18 @@ const getMethod = (value: string): ResourceRequest["method"] => {
   }
 };
 
-type CurlRequest = Pick<ResourceRequest, "url" | "method" | "headers" | "body">;
+export type CurlRequest = Pick<
+  ResourceRequest,
+  "url" | "method" | "headers" | "body"
+>;
 
 export const parseCurl = (curl: string): undefined | CurlRequest => {
-  const argv = parseArgsStringToArgv(curl);
+  let argv;
+  try {
+    argv = arrgv(curl);
+  } catch {
+    return;
+  }
   if (argv.length === 0) {
     return;
   }

apps/builder/package.json

@@ -78,6 +78,7 @@
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
     "@webstudio-is/sdk-components-react-remix": "workspace:*",
     "@webstudio-is/trpc-interface": "workspace:*",
+    "arrgv": "^1.0.2",
     "bcp-47": "^2.1.0",
     "change-case": "^5.0.2",
     "colord": "^2.9.3",
@@ -114,7 +115,6 @@
     "remix-island": "^0.2.0",
     "shallow-equal": "^3.1.0",
     "slugify": "^1.6.6",
-    "string-argv": "^0.3.2",
     "strip-indent": "^4.0.0",
     "title-case": "^4.1.0",
     "ultraflag": "^0.1.0",