fix: copy paste search params in resources

apps/builder/app/shared/copy-paste.test.tsx

@@ -578,6 +578,7 @@ describe("resources", () => {
     const resourceVariable = new ResourceValue("Box Resource", {
       url: expression`${boxVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${boxVariable}` }],
       headers: [{ name: "auth", value: expression`${boxVariable}` }],
       body: expression`${boxVariable}`,
     });
@@ -594,6 +595,7 @@ describe("resources", () => {
     expect(fragment.resources).toEqual([
       expect.objectContaining({
         url: "$ws$dataSource$1",
+        searchParams: [{ name: "filter", value: "$ws$dataSource$1" }],
         headers: [{ name: "auth", value: "$ws$dataSource$1" }],
         body: "$ws$dataSource$1",
       }),
@@ -605,6 +607,7 @@ describe("resources", () => {
     const resourceVariable = new ResourceValue("Box Resource", {
       url: expression`${bodyVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${bodyVariable}` }],
       headers: [{ name: "auth", value: expression`${bodyVariable}` }],
       body: expression`${bodyVariable}`,
     });
@@ -620,6 +623,7 @@ describe("resources", () => {
     expect(fragment.resources).toEqual([
       expect.objectContaining({
         url: "Body$32$Variable",
+        searchParams: [{ name: "filter", value: "Body$32$Variable" }],
         headers: [{ name: "auth", value: "Body$32$Variable" }],
         body: "Body$32$Variable",
       }),
@@ -631,6 +635,7 @@ describe("resources", () => {
     const resourceVariable = new ResourceValue("Box Resource", {
       url: expression`${bodyVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${bodyVariable}` }],
       headers: [{ name: "auth", value: expression`${bodyVariable}` }],
       body: expression`${bodyVariable}`,
     });
@@ -654,11 +659,13 @@ describe("resources", () => {
     expect(Array.from(data.resources.values())).toEqual([
       expect.objectContaining({
         url: "$ws$dataSource$0",
+        searchParams: [{ name: "filter", value: "$ws$dataSource$0" }],
         headers: [{ name: "auth", value: "$ws$dataSource$0" }],
         body: "$ws$dataSource$0",
       }),
       expect.objectContaining({
         url: "$ws$dataSource$0",
+        searchParams: [{ name: "filter", value: "$ws$dataSource$0" }],
         headers: [{ name: "auth", value: "$ws$dataSource$0" }],
         body: "$ws$dataSource$0",
       }),
@@ -670,6 +677,7 @@ describe("resources", () => {
     const resourceProp = new ResourceValue("Box Resource", {
       url: expression`${boxVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${boxVariable}` }],
       headers: [{ name: "auth", value: expression`${boxVariable}` }],
       body: expression`${boxVariable}`,
     });
@@ -685,6 +693,7 @@ describe("resources", () => {
     expect(fragment.resources).toEqual([
       expect.objectContaining({
         url: "$ws$dataSource$1",
+        searchParams: [{ name: "filter", value: "$ws$dataSource$1" }],
         headers: [{ name: "auth", value: "$ws$dataSource$1" }],
         body: "$ws$dataSource$1",
       }),
@@ -696,6 +705,7 @@ describe("resources", () => {
     const resourceProp = new ResourceValue("Box Resource", {
       url: expression`${bodyVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${bodyVariable}` }],
       headers: [{ name: "auth", value: expression`${bodyVariable}` }],
       body: expression`${bodyVariable}`,
     });
@@ -709,6 +719,7 @@ describe("resources", () => {
     expect(fragment.resources).toEqual([
       expect.objectContaining({
         url: "Body$32$Variable",
+        searchParams: [{ name: "filter", value: "Body$32$Variable" }],
         headers: [{ name: "auth", value: "Body$32$Variable" }],
         body: "Body$32$Variable",
       }),
@@ -720,6 +731,7 @@ describe("resources", () => {
     const resourceProp = new ResourceValue("Box Resource", {
       url: expression`${bodyVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${bodyVariable}` }],
       headers: [{ name: "auth", value: expression`${bodyVariable}` }],
       body: expression`${bodyVariable}`,
     });
@@ -743,11 +755,13 @@ describe("resources", () => {
     expect(Array.from(data.resources.values())).toEqual([
       expect.objectContaining({
         url: "$ws$dataSource$0",
+        searchParams: [{ name: "filter", value: "$ws$dataSource$0" }],
         headers: [{ name: "auth", value: "$ws$dataSource$0" }],
         body: "$ws$dataSource$0",
       }),
       expect.objectContaining({
         url: "$ws$dataSource$0",
+        searchParams: [{ name: "filter", value: "$ws$dataSource$0" }],
         headers: [{ name: "auth", value: "$ws$dataSource$0" }],
         body: "$ws$dataSource$0",
       }),
@@ -759,12 +773,14 @@ describe("resources", () => {
     const resourceProp = new ResourceValue("Box Resource", {
       url: expression`${boxVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${boxVariable}` }],
       headers: [{ name: "auth", value: expression`${boxVariable}` }],
       body: expression`${boxVariable}`,
     });
     const resourceVariable = new ResourceValue("Box Resource", {
       url: expression`${boxVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${boxVariable}` }],
       headers: [{ name: "auth", value: expression`${boxVariable}` }],
       body: expression`${boxVariable}`,
     });
@@ -798,12 +814,14 @@ describe("resources", () => {
       expect.objectContaining({
         id: expect.toSatisfy((value) => value !== fragment.resources[0].id),
         url: newVariableIdentifier,
+        searchParams: [{ name: "filter", value: newVariableIdentifier }],
         headers: [{ name: "auth", value: newVariableIdentifier }],
         body: newVariableIdentifier,
       }),
       expect.objectContaining({
         id: expect.toSatisfy((value) => value !== fragment.resources[1].id),
         url: newVariableIdentifier,
+        searchParams: [{ name: "filter", value: newVariableIdentifier }],
         headers: [{ name: "auth", value: newVariableIdentifier }],
         body: newVariableIdentifier,
       }),
@@ -822,12 +840,14 @@ describe("resources", () => {
     const resourceProp = new ResourceValue("Box Resource", {
       url: expression`${boxVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${boxVariable}` }],
       headers: [{ name: "auth", value: expression`${boxVariable}` }],
       body: expression`${boxVariable}`,
     });
     const resourceVariable = new ResourceValue("Box Resource", {
       url: expression`${boxVariable}`,
       method: "get",
+      searchParams: [{ name: "filter", value: expression`${boxVariable}` }],
       headers: [{ name: "auth", value: expression`${boxVariable}` }],
       body: expression`${boxVariable}`,
     });
@@ -865,12 +885,14 @@ describe("resources", () => {
       expect.objectContaining({
         id: fragment.resources[0].id,
         url: oldVariableIdentifier,
+        searchParams: [{ name: "filter", value: oldVariableIdentifier }],
         headers: [{ name: "auth", value: oldVariableIdentifier }],
         body: oldVariableIdentifier,
       }),
       expect.objectContaining({
         id: fragment.resources[1].id,
         url: oldVariableIdentifier,
+        searchParams: [{ name: "filter", value: oldVariableIdentifier }],
         headers: [{ name: "auth", value: oldVariableIdentifier }],
         body: oldVariableIdentifier,
       }),

apps/builder/app/shared/data-variables.test.tsx

@@ -216,14 +216,16 @@ test("find unset variable names", () => {
   const resourceVariable = new ResourceValue("resourceVariable", {
     url: expression`six`,
     method: "post",
-    headers: [{ name: "auth", value: expression`seven` }],
-    body: expression`eight`,
+    searchParams: [{ name: "filter", value: expression`seven` }],
+    headers: [{ name: "auth", value: expression`eight` }],
+    body: expression`nine`,
   });
   const resourceProp = new ResourceValue("resourceProp", {
-    url: expression`nine`,
+    url: expression`ten`,
     method: "post",
-    headers: [{ name: "auth", value: expression`ten` }],
-    body: expression`eleven`,
+    searchParams: [{ name: "filter", value: expression`eleven` }],
+    headers: [{ name: "auth", value: expression`twelve` }],
+    body: expression`thirteen`,
   });
   const data = renderData(
     <$.Body ws:id="body" data-prop={expression`two`}>
@@ -245,11 +247,13 @@ test("find unset variable names", () => {
     "three",
     "four",
     "six",
-    "seven",
     "eight",
+    "seven",
     "nine",
     "ten",
+    "twelve",
     "eleven",
+    "thirteen",
   ]);
 });
 
@@ -403,12 +407,14 @@ test("restore tree variables in resources", () => {
   const resourceVariable = new ResourceValue("resourceVariable", {
     url: expression`one + 1`,
     method: "post",
+    searchParams: [{ name: "filter", value: expression`one + 1` }],
     headers: [{ name: "auth", value: expression`one + 1` }],
     body: expression`one + 1`,
   });
   const resourceProp = new ResourceValue("resourceProp", {
     url: expression`one + 2`,
     method: "post",
+    searchParams: [{ name: "filter", value: expression`one + 2` }],
     headers: [{ name: "auth", value: expression`one + 2` }],
     body: expression`one + 2`,
   });
@@ -439,12 +445,14 @@ test("restore tree variables in resources", () => {
     expect.objectContaining({
       url: `${boxIdentifier} + 1`,
       method: "post",
+      searchParams: [{ name: "filter", value: `${boxIdentifier} + 1` }],
       headers: [{ name: "auth", value: `${boxIdentifier} + 1` }],
       body: `${boxIdentifier} + 1`,
     }),
     expect.objectContaining({
       url: `${boxIdentifier} + 2`,
       method: "post",
+      searchParams: [{ name: "filter", value: `${boxIdentifier} + 2` }],
       headers: [{ name: "auth", value: `${boxIdentifier} + 2` }],
       body: `${boxIdentifier} + 2`,
     }),
@@ -457,12 +465,14 @@ test("rebind tree variables in resources", () => {
   const resourceVariable = new ResourceValue("resourceVariable", {
     url: expression`${bodyVariable}`,
     method: "post",
+    searchParams: [{ name: "filter", value: expression`${bodyVariable}` }],
     headers: [{ name: "auth", value: expression`${bodyVariable}` }],
     body: expression`${bodyVariable}`,
   });
   const resourceProp = new ResourceValue("resourceProp", {
     url: expression`${bodyVariable}`,
     method: "post",
+    searchParams: [{ name: "filter", value: expression`${bodyVariable}` }],
     headers: [{ name: "auth", value: expression`${bodyVariable}` }],
     body: expression`${bodyVariable}`,
   });
@@ -493,12 +503,14 @@ test("rebind tree variables in resources", () => {
     expect.objectContaining({
       url: boxIdentifier,
       method: "post",
+      searchParams: [{ name: "filter", value: boxIdentifier }],
       headers: [{ name: "auth", value: boxIdentifier }],
       body: boxIdentifier,
     }),
     expect.objectContaining({
       url: boxIdentifier,
       method: "post",
+      searchParams: [{ name: "filter", value: boxIdentifier }],
       headers: [{ name: "auth", value: boxIdentifier }],
       body: boxIdentifier,
     }),
@@ -663,12 +675,14 @@ test("delete variable and unset it in resources", () => {
   const resourceVariable = new ResourceValue("resourceVariable", {
     url: expression`${bodyVariable}`,
     method: "post",
+    searchParams: [{ name: "filter", value: expression`${bodyVariable}` }],
     headers: [{ name: "auth", value: expression`${bodyVariable}` }],
     body: expression`${bodyVariable}`,
   });
   const resourceProp = new ResourceValue("resourceProp", {
     url: expression`${bodyVariable}`,
     method: "post",
+    searchParams: [{ name: "filter", value: expression`${bodyVariable}` }],
     headers: [{ name: "auth", value: expression`${bodyVariable}` }],
     body: expression`${bodyVariable}`,
   });
@@ -691,12 +705,14 @@ test("delete variable and unset it in resources", () => {
     expect.objectContaining({
       url: "bodyVariable",
       method: "post",
+      searchParams: [{ name: "filter", value: "bodyVariable" }],
       headers: [{ name: "auth", value: "bodyVariable" }],
       body: "bodyVariable",
     }),
     expect.objectContaining({
       url: "bodyVariable",
       method: "post",
+      searchParams: [{ name: "filter", value: "bodyVariable" }],
       headers: [{ name: "auth", value: "bodyVariable" }],
       body: "bodyVariable",
     }),

apps/builder/app/shared/data-variables.ts

@@ -406,6 +406,12 @@ const traverseExpressions = ({
     for (const header of resource.headers) {
       header.value = update(header.value, instanceId) ?? header.value;
     }
+    if (resource.searchParams) {
+      for (const searchParam of resource.searchParams) {
+        searchParam.value =
+          update(searchParam.value, instanceId) ?? searchParam.value;
+      }
+    }
     if (resource.body) {
       resource.body = update(resource.body, instanceId) ?? resource.body;
     }

apps/builder/app/shared/instance-utils.test.tsx

@@ -932,6 +932,7 @@ describe("delete instance", () => {
     const myResource = new ResourceValue("My Resource", {
       url: expression`""`,
       method: "get",
+      searchParams: [],
       headers: [],
     });
     const data = renderData(
@@ -953,6 +954,7 @@ describe("delete instance", () => {
     const myResource = new ResourceValue("My Resource", {
       url: expression`""`,
       method: "get",
+      searchParams: [],
       headers: [],
     });
     const data = renderData(

apps/builder/app/shared/instance-utils.ts

@@ -826,6 +826,14 @@ export const extractWebstudioFragment = (
         unsetNameById,
       });
     }
+    if (newResource.searchParams) {
+      for (const searchParam of newResource.searchParams) {
+        searchParam.value = unsetExpressionVariables({
+          expression: searchParam.value,
+          unsetNameById,
+        });
+      }
+    }
     if (newResource.body) {
       newResource.body = unsetExpressionVariables({
         expression: newResource.body,
@@ -1174,6 +1182,18 @@ export const insertWebstudioFragmentCopy = ({
       });
       header.value = replaceDataSources(header.value, newDataSourceIds);
     }
+    if (resource.searchParams) {
+      for (const searchParam of resource.searchParams) {
+        searchParam.value = restoreExpressionVariables({
+          expression: searchParam.value,
+          maskedIdByName,
+        });
+        searchParam.value = replaceDataSources(
+          searchParam.value,
+          newDataSourceIds
+        );
+      }
+    }
     if (resource.body) {
       resource.body = restoreExpressionVariables({
         expression: resource.body,

apps/builder/app/shared/nano-states/props.test.tsx

@@ -797,6 +797,7 @@ test("compute resource variable values", () => {
   const resourceVariable = new ResourceValue("resourceVariable", {
     url: expression`""`,
     method: "get",
+    searchParams: [],
     headers: [],
   });
   const data = renderData(
@@ -868,6 +869,7 @@ test("compute parameter and resource variables without values to make it availab
   const resourceVariable = new ResourceValue("resourceVariable", {
     url: expression`""`,
     method: "get",
+    searchParams: [],
     headers: [],
   });
   const parameterVariable = new Parameter("parameterVariable");