From 3f666cdfc602a8f9e980263b38ffc77cfebaf565 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 3 Jun 2024 20:58:28 +0300
Subject: [PATCH] feat: support curl paste in graphql resource url (#3479)

Looks like it would be useful to support curl in graphql resources as
well.

<img width="283" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5635476/e4666f8f-2668-4c65-89be-14e84c981bbf">
---
 .../settings-panel/resource-panel.tsx         | 31 +++++++++++++++++--
 .../settings-panel/variable-popover.tsx       |  5 ++-
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/apps/builder/app/builder/features/settings-panel/resource-panel.tsx b/apps/builder/app/builder/features/settings-panel/resource-panel.tsx
index 199ad8ab24..0636cce694 100644
--- a/apps/builder/app/builder/features/settings-panel/resource-panel.tsx
+++ b/apps/builder/app/builder/features/settings-panel/resource-panel.tsx
@@ -84,7 +84,7 @@ const UrlField = ({
   scope: Record<string, unknown>;
   value: string;
   onChange: (value: string) => void;
-  onCurlPaste?: (curl: CurlRequest) => void;
+  onCurlPaste: (curl: CurlRequest) => void;
 }) => {
   const urlId = useId();
   const ref = useRef<HTMLTextAreaElement>(null);
@@ -124,7 +124,7 @@ const UrlField = ({
             value={String(evaluateExpressionWithinScope(value, scope))}
             onChange={(value) => {
               const curl = parseCurl(value);
-              if (curl && onCurlPaste) {
+              if (curl) {
                 onCurlPaste(curl);
               } else {
                 // update text value as string literal
@@ -773,6 +773,11 @@ export const SystemResourceForm = forwardRef<
 });
 SystemResourceForm.displayName = "SystemResourceForm";
 
+const zGraphqlBody = z.object({
+  query: z.string(),
+  variables: z.optional(z.record(z.unknown())),
+});
+
 export const GraphqlResourceForm = forwardRef<
   undefined | PanelApi,
   { variable?: DataSource }
@@ -862,7 +867,27 @@ export const GraphqlResourceForm = forwardRef<
 
   return (
     <>
-      <UrlField scope={scope} aliases={aliases} value={url} onChange={setUrl} />
+      <UrlField
+        scope={scope}
+        aliases={aliases}
+        value={url}
+        onChange={setUrl}
+        onCurlPaste={(curl) => {
+          // update all feilds when curl is paste into url field
+          setUrl(JSON.stringify(curl.url));
+          setHeaders(
+            curl.headers.map((header) => ({
+              name: header.name,
+              value: JSON.stringify(header.value),
+            }))
+          );
+          const body = zGraphqlBody.safeParse(curl.body);
+          if (body.success) {
+            setQuery(body.data.query);
+            setVariables(JSON.stringify(body.data.variables, null, 2));
+          }
+        }}
+      />
 
       <Grid gap={1}>
         <Label htmlFor={queryId}>Query</Label>
diff --git a/apps/builder/app/builder/features/settings-panel/variable-popover.tsx b/apps/builder/app/builder/features/settings-panel/variable-popover.tsx
index 25852a9e23..e23f287ff9 100644
--- a/apps/builder/app/builder/features/settings-panel/variable-popover.tsx
+++ b/apps/builder/app/builder/features/settings-panel/variable-popover.tsx
@@ -712,9 +712,8 @@ export const VariablePopoverTrigger = forwardRef<
             actions={
               variable?.type === "resource" && (
                 <>
-                  {/* allow to copy curl only for default resource control */}
-                  {resources.get(variable.resourceId)?.control ===
-                    undefined && (
+                  {/* allow to copy curl only for default and graphql resource controls */}
+                  {resources.get(variable.resourceId)?.control !== "system" && (
                     <Tooltip
                       content="Copy resource as cURL command"
                       side="bottom"