feat: add search params list to resource UI (#5384)

Ref #3691

Editing search params separately from url can improve experience working
with external CMS or databases like baserow.

Also made headers list more compact and aligned with search params.
Validation is simplified, empty pairs will be just ignored without
blocking user with validation errors.


https://github.com/user-attachments/assets/3102d2c8-a902-4e86-8011-d71346fb5491

Author: TrySound

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

@@ -4,6 +4,7 @@ import { generateCurl, parseCurl, type CurlRequest } from "./curl";
 test("support url", () => {
   const result = {
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "get",
     headers: [],
   };
@@ -19,6 +20,7 @@ test("support multiline command with backslashes", () => {
   `)
   ).toEqual({
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "get",
     headers: [],
   });
@@ -27,6 +29,7 @@ test("support multiline command with backslashes", () => {
 test("forgive missing closed quotes", () => {
   expect(parseCurl(`curl "https://my-url/hello-world`)).toEqual({
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "get",
     headers: [],
   });
@@ -43,6 +46,7 @@ test("skip when invalid", () => {
 test("support method with --request and -X flags", () => {
   const result = {
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "post",
     headers: [],
   };
@@ -62,19 +66,41 @@ test("support --get and -G flags", () => {
   expect(
     parseCurl(`curl --get https://my-url --data limit=3 --data first=0`)
   ).toEqual({
-    url: "https://my-url?limit=3&first=0",
+    url: "https://my-url/",
+    searchParams: [
+      { name: "limit", value: "3" },
+      { name: "first", value: "0" },
+    ],
     method: "get",
     headers: [],
   });
   expect(parseCurl(`curl -G https://my-url -d limit=3 -d first=0`)).toEqual({
-    url: "https://my-url?limit=3&first=0",
+    url: "https://my-url/",
+    searchParams: [
+      { name: "limit", value: "3" },
+      { name: "first", value: "0" },
+    ],
     method: "get",
     headers: [],
   });
   expect(
     parseCurl(`curl -G https://my-url?filter=1 -d limit=3 -d first=0`)
   ).toEqual({
-    url: "https://my-url?filter=1&limit=3&first=0",
+    url: "https://my-url/",
+    searchParams: [
+      { name: "filter", value: "1" },
+      { name: "limit", value: "3" },
+      { name: "first", value: "0" },
+    ],
+    method: "get",
+    headers: [],
+  });
+  expect(parseCurl(`curl -G https://my-url?filter -d limit`)).toEqual({
+    url: "https://my-url/",
+    searchParams: [
+      { name: "filter", value: "" },
+      { name: "limit", value: "" },
+    ],
     method: "get",
     headers: [],
   });
@@ -85,12 +111,14 @@ test("support headers with --header and -H flags", () => {
     parseCurl(`curl https://my-url/hello-world --header "name: value"`)
   ).toEqual({
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "get",
     headers: [{ name: "name", value: "value" }],
   });
   expect(parseCurl(`curl https://my-url/hello-world -H "name: value"`)).toEqual(
     {
       url: "https://my-url/hello-world",
+      searchParams: [],
       method: "get",
       headers: [{ name: "name", value: "value" }],
     }
@@ -101,6 +129,7 @@ test("support headers with --header and -H flags", () => {
     )
   ).toEqual({
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "get",
     headers: [
       { name: "name", value: "value1" },
@@ -119,7 +148,8 @@ test("default to post method and urlencoded header when data is specified", () =
         --data-raw param=4
     `)
   ).toEqual({
-    url: "https://my-url",
+    url: "https://my-url/",
+    searchParams: [],
     method: "post",
     headers: [
       { name: "content-type", value: "application/x-www-form-urlencoded" },
@@ -132,7 +162,8 @@ test("encode data for get request", () => {
   expect(
     parseCurl(`curl -G https://my-url --data-urlencode param=привет`)
   ).toEqual({
-    url: "https://my-url?param=%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82",
+    url: "https://my-url/",
+    searchParams: [{ name: "param", value: "привет" }],
     method: "get",
     headers: [],
   });
@@ -142,7 +173,8 @@ test("encode data for post request", () => {
   expect(
     parseCurl(`curl https://my-url --data-urlencode param=привет`)
   ).toEqual({
-    url: "https://my-url",
+    url: "https://my-url/",
+    searchParams: [],
     method: "post",
     headers: [
       { name: "content-type", value: "application/x-www-form-urlencoded" },
@@ -160,6 +192,7 @@ test("support text body", () => {
     `)
   ).toEqual({
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "post",
     headers: [{ name: "content-type", value: "plain/text" }],
     body: `{"param":"value"}`,
@@ -170,6 +203,7 @@ test("support text body", () => {
     )
   ).toEqual({
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "post",
     headers: [{ name: "content-type", value: "plain/text" }],
     body: `{"param":"value"}`,
@@ -186,6 +220,7 @@ test("support text body with explicit method", () => {
     `)
   ).toEqual({
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "put",
     headers: [{ name: "content-type", value: "plain/text" }],
     body: `{"param":"value"}`,
@@ -199,6 +234,7 @@ test("support json body", () => {
     )
   ).toEqual({
     url: "https://my-url/hello-world",
+    searchParams: [],
     method: "post",
     headers: [{ name: "content-type", value: "application/json" }],
     body: { param: "value" },
@@ -213,12 +249,13 @@ test("generate curl with json body", () => {
   expect(
     generateCurl({
       url: "https://my-url.com",
+      searchParams: [],
       method: "post",
       headers: [{ name: "content-type", value: "application/json" }],
       body: { param: "value" },
     })
   ).toMatchInlineSnapshot(`
-"curl "https://my-url.com" \\
+"curl "https://my-url.com/" \\
   --request post \\
   --header "content-type: application/json" \\
   --data "{\\"param\\":\\"value\\"}""
@@ -229,12 +266,13 @@ test("generate curl with text body", () => {
   expect(
     generateCurl({
       url: "https://my-url.com",
+      searchParams: [],
       method: "post",
       headers: [],
       body: "my data",
     })
   ).toMatchInlineSnapshot(`
-"curl "https://my-url.com" \\
+"curl "https://my-url.com/" \\
   --request post \\
   --data "my data""
 `);
@@ -244,18 +282,38 @@ test("generate curl without body", () => {
   expect(
     generateCurl({
       url: "https://my-url.com",
+      searchParams: [],
       method: "post",
       headers: [],
     })
   ).toMatchInlineSnapshot(`
-"curl "https://my-url.com" \\
+"curl "https://my-url.com/" \\
   --request post"
 `);
 });
 
+test("generate curl with search params", () => {
+  expect(
+    generateCurl({
+      url: "https://my-url.com",
+      searchParams: [
+        { name: "search", value: "term1" },
+        { name: "search", value: "term2" },
+        { name: "filter", value: "привет" },
+      ],
+      method: "get",
+      headers: [],
+    })
+  ).toMatchInlineSnapshot(`
+"curl "https://my-url.com/?search=term1&search=term2&filter=%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82" \\
+  --request get"
+`);
+});
+
 test("multiline graphql is idempotent", () => {
   const request: CurlRequest = {
     url: "https://eu-central-1-shared-euc1-02.cdn.hygraph.com/content/clorhpxi8qx7r01t6hfp1b5f6/master",
+    searchParams: [],
     method: "post",
     headers: [{ name: "Content-Type", value: "application/json" }],
     body: {
@@ -276,7 +334,8 @@ test("multiline graphql is idempotent", () => {
 
 test("support basic http authentication", () => {
   expect(parseCurl(`curl https://my-url.com -u "user:password"`)).toEqual({
-    url: "https://my-url.com",
+    url: "https://my-url.com/",
+    searchParams: [],
     method: "get",
     headers: [
       {

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

@@ -26,7 +26,7 @@ const getMethod = (value: string): ResourceRequest["method"] => {
 
 export type CurlRequest = Pick<
   ResourceRequest,
-  "url" | "method" | "headers" | "body"
+  "url" | "searchParams" | "method" | "headers" | "body"
 >;
 
 const encodeSearchParams = (data: string[]) => {
@@ -84,12 +84,18 @@ export const parseCurl = (curl: string): undefined | CurlRequest => {
     return;
   }
   // curl url
-  let url = args._[1].toString();
+  const url = new URL(args._[1].toString());
   const defaultMethod = args.data ? "post" : "get";
   const method: CurlRequest["method"] = args.get
     ? "get"
     : getMethod(args.request ?? defaultMethod);
   let contentType: undefined | string;
+  const searchParams: NonNullable<ResourceRequest["searchParams"]> = [];
+  for (const [name, value] of url.searchParams) {
+    searchParams.push({ name, value });
+  }
+  // remove all search params from url
+  url.search = "";
   const headers: ResourceRequest["headers"] = (
     (args.header as string[]) ?? []
   ).map((header) => {
@@ -105,9 +111,10 @@ export const parseCurl = (curl: string): undefined | CurlRequest => {
   }
   let body: undefined | unknown;
   if (args.get && args.data) {
-    const separator = url.includes("?") ? "&" : "?";
-    const search = encodeSearchParams(args.data);
-    url = `${url}${separator}${search}`;
+    for (const pair of args.data) {
+      const [name, value = ""] = pair.split("=");
+      searchParams.push({ name, value });
+    }
   } else if (args.data) {
     body = args.data[0];
     if (contentType === "application/json") {
@@ -126,18 +133,20 @@ export const parseCurl = (curl: string): undefined | CurlRequest => {
     }
   }
   return {
-    url: url as string,
+    url: url.toString(),
+    searchParams,
     method,
     headers,
     body,
   };
 };
 
 export const generateCurl = (request: CurlRequest) => {
-  const args = [
-    `curl ${JSON.stringify(request.url)}`,
-    `--request ${request.method}`,
-  ];
+  const url = new URL(request.url);
+  for (const { name, value } of request.searchParams) {
+    url.searchParams.append(name, value);
+  }
+  const args = [`curl ${JSON.stringify(url)}`, `--request ${request.method}`];
   for (const header of request.headers) {
     args.push(`--header "${header.name}: ${header.value}"`);
   }