refactor: store webhook form action as resource (#4983)

Ref #4093

Here's refactoring to unlock resource UI in webhook form

Need to test in builder and on published site

1. Create webhook form in main and try to update it on this branch. So
legacy text prop should automatically migrate to resource.

2. New webhook form should create resource when type anything in action
prop

Author: TrySound

apps/builder/app/builder/features/settings-panel/controls/combined.tsx

@@ -10,6 +10,7 @@ import { UrlControl } from "./url";
 import type { ControlProps } from "../shared";
 import { JsonControl } from "./json";
 import { TextContent } from "./text-content";
+import { ResourceControl } from "./resource-control";
 
 export const renderControl = ({
   meta,
@@ -45,6 +46,10 @@ export const renderControl = ({
     return <TextControl key={key} meta={meta} prop={prop} {...rest} />;
   }
 
+  if (meta.control === "resource") {
+    return <ResourceControl key={key} meta={meta} prop={prop} {...rest} />;
+  }
+
   if (meta.control === "code") {
     return <CodeControl key={key} meta={meta} prop={prop} {...rest} />;
   }

apps/builder/app/builder/features/settings-panel/controls/resource-control.tsx

@@ -0,0 +1,161 @@
+import { useId } from "react";
+import { useStore } from "@nanostores/react";
+import { InputField } from "@webstudio-is/design-system";
+import { isLiteralExpression, Resource, type Prop } from "@webstudio-is/sdk";
+import {
+  BindingControl,
+  BindingPopover,
+  type BindingVariant,
+} from "~/builder/shared/binding-popover";
+import {
+  type ControlProps,
+  useLocalValue,
+  ResponsiveLayout,
+  Label,
+  humanizeAttribute,
+} from "../shared";
+import { $resources } from "~/shared/nano-states";
+import { $selectedInstanceResourceScope } from "../resource-panel";
+import { computeExpression } from "~/shared/data-variables";
+import { updateWebstudioData } from "~/shared/instance-utils";
+import { nanoid } from "nanoid";
+
+export const ResourceControl = ({
+  meta,
+  prop,
+  propName,
+  instanceId,
+  deletable,
+}: ControlProps<"resource">) => {
+  const resources = useStore($resources);
+  const { variableValues, scope, aliases } = useStore(
+    $selectedInstanceResourceScope
+  );
+
+  let computedValue: unknown;
+  let expression: string = JSON.stringify("");
+  if (prop?.type === "string") {
+    expression = JSON.stringify(prop.value);
+    computedValue = prop.value;
+  }
+  if (prop?.type === "expression") {
+    expression = prop.value;
+    computedValue = computeExpression(prop.value, variableValues);
+  }
+  if (prop?.type === "resource") {
+    const resource = resources.get(prop.value);
+    if (resource) {
+      expression = resource.url;
+      computedValue = computeExpression(resource.url, variableValues);
+    }
+  }
+
+  const updateResourceUrl = (urlExpression: string) => {
+    updateWebstudioData((data) => {
+      if (prop?.type === "resource") {
+        const resource = data.resources.get(prop.value);
+        if (resource) {
+          resource.url = urlExpression;
+        }
+      } else {
+        let method: Resource["method"] = "post";
+        for (const prop of data.props.values()) {
+          if (
+            prop.instanceId === instanceId &&
+            prop.type === "string" &&
+            prop.name === "method"
+          ) {
+            const value = prop.value.toLowerCase();
+            if (
+              value === "get" ||
+              value === "post" ||
+              value === "put" ||
+              value === "delete"
+            ) {
+              method = value;
+            }
+            break;
+          }
+        }
+
+        const newResource: Resource = {
+          id: nanoid(),
+          name: propName,
+          url: urlExpression,
+          method,
+          headers: [{ name: "Content-Type", value: `"application/json"` }],
+        };
+        const newProp: Prop = {
+          id: prop?.id ?? nanoid(),
+          instanceId,
+          name: propName,
+          type: "resource",
+          value: newResource.id,
+        };
+        data.props.set(newProp.id, newProp);
+        data.resources.set(newResource.id, newResource);
+      }
+    });
+  };
+
+  const deletePropAndResource = () => {
+    updateWebstudioData((data) => {
+      if (prop?.type === "resource") {
+        data.resources.delete(prop.value);
+      }
+      if (prop) {
+        data.props.delete(prop.id);
+      }
+    });
+  };
+
+  const id = useId();
+  const label = humanizeAttribute(meta.label || propName);
+  let variant: BindingVariant = "bound";
+  let readOnly = true;
+  if (isLiteralExpression(expression)) {
+    variant = "default";
+    readOnly = false;
+  }
+  const localValue = useLocalValue(String(computedValue ?? ""), (value) =>
+    updateResourceUrl(JSON.stringify(value))
+  );
+
+  return (
+    <ResponsiveLayout
+      label={
+        <Label htmlFor={id} description={meta.description} readOnly={readOnly}>
+          {label}
+        </Label>
+      }
+      deletable={deletable}
+      onDelete={deletePropAndResource}
+    >
+      <BindingControl>
+        <InputField
+          id={id}
+          disabled={readOnly}
+          value={localValue.value}
+          onChange={(event) => localValue.set(event.target.value)}
+          onBlur={localValue.save}
+          onSubmit={localValue.save}
+        />
+        <BindingPopover
+          scope={scope}
+          aliases={aliases}
+          validate={(value) => {
+            if (value !== undefined && typeof value !== "string") {
+              return `${label} expects a string value`;
+            }
+          }}
+          variant={variant}
+          value={expression}
+          onChange={(newExpression) => updateResourceUrl(newExpression)}
+          onRemove={(evaluatedValue) =>
+            updateResourceUrl(JSON.stringify(String(evaluatedValue)))
+          }
+        />
+      </BindingControl>
+    </ResponsiveLayout>
+  );
+};

apps/builder/app/builder/features/settings-panel/controls/text.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useRef } from "react";
+import { useId } from "react";
 import { useStore } from "@nanostores/react";
 import { TextArea } from "@webstudio-is/design-system";
 import {
@@ -22,7 +22,6 @@ export const TextControl = ({
   propName,
   deletable,
   computedValue,
-  autoFocus,
   onChange,
   onDelete,
 }: ControlProps<"text">) => {
@@ -35,24 +34,16 @@ export const TextControl = ({
   });
   const id = useId();
   const label = humanizeAttribute(meta.label || propName);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const { scope, aliases } = useStore($selectedInstanceScope);
   const expression =
     prop?.type === "expression" ? prop.value : JSON.stringify(computedValue);
   const { overwritable, variant } = useBindingState(
     prop?.type === "expression" ? prop.value : undefined
   );
 
-  useEffect(() => {
-    if (autoFocus) {
-      textAreaRef.current?.focus();
-    }
-  }, [autoFocus]);
-
   const input = (
     <BindingControl>
       <TextArea
-        ref={textAreaRef}
         id={id}
         disabled={overwritable === false}
         autoGrow

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -59,10 +59,9 @@ const matchOrSuggestToCreate = (
 const renderProperty = (
   { propsLogic: logic, propValues, component, instanceId }: PropsSectionProps,
   { prop, propName, meta }: PropAndMeta,
-  { deletable, autoFocus }: { deletable?: boolean; autoFocus?: boolean } = {}
+  { deletable }: { deletable?: boolean } = {}
 ) =>
   renderControl({
-    autoFocus,
     key: propName,
     instanceId,
     meta,

apps/builder/app/builder/features/settings-panel/resource-panel.tsx

@@ -13,7 +13,7 @@ import {
 import { useStore } from "@nanostores/react";
 import type { DataSource, Resource } from "@webstudio-is/sdk";
 import {
-  encodeDataSourceVariable,
+  encodeDataVariableId,
   generateObjectExpression,
   isLiteralExpression,
   parseObjectExpression,
@@ -383,7 +383,7 @@ const $hiddenDataSourceIds = computed(
   }
 );
 
-const $selectedInstanceScope = computed(
+export const $selectedInstanceResourceScope = computed(
   [
     $selectedInstanceKeyWithRoot,
     $variableValuesByInstanceSelector,
@@ -398,8 +398,9 @@ const $selectedInstanceScope = computed(
   ) => {
     const scope: Record<string, unknown> = {};
     const aliases = new Map<string, string>();
+    const variableValues = new Map<DataSource["id"], unknown>();
     if (instanceKey === undefined) {
-      return { scope, aliases };
+      return { variableValues, scope, aliases };
     }
     const values = variableValuesByInstanceSelector.get(instanceKey);
     if (values) {
@@ -411,21 +412,21 @@ const $selectedInstanceScope = computed(
         if (dataSourceId === SYSTEM_VARIABLE_ID) {
           dataSource = systemParameter;
         }
-        if (dataSource === undefined) {
-          continue;
+        if (dataSource) {
+          const name = encodeDataVariableId(dataSourceId);
+          variableValues.set(dataSourceId, value);
+          scope[name] = value;
+          aliases.set(name, dataSource.name);
         }
-        const name = encodeDataSourceVariable(dataSourceId);
-        scope[name] = value;
-        aliases.set(name, dataSource.name);
       }
     }
-    return { scope, aliases };
+    return { variableValues, scope, aliases };
   }
 );
 
 const useScope = ({ variable }: { variable?: DataSource }) => {
   const { scope: scopeWithCurrentVariable, aliases } = useStore(
-    $selectedInstanceScope
+    $selectedInstanceResourceScope
   );
   const currentVariableId = variable?.id;
   // prevent showing currently edited variable in suggestions
@@ -435,7 +436,7 @@ const useScope = ({ variable }: { variable?: DataSource }) => {
       return scopeWithCurrentVariable;
     }
     const newScope: Record<string, unknown> = { ...scopeWithCurrentVariable };
-    delete newScope[encodeDataSourceVariable(currentVariableId)];
+    delete newScope[encodeDataVariableId(currentVariableId)];
     return newScope;
   }, [scopeWithCurrentVariable, currentVariableId]);
   return { scope, aliases };

apps/builder/app/builder/features/settings-panel/shared.tsx

@@ -72,7 +72,6 @@ export type ControlProps<Control> = {
   deletable: boolean;
   onChange: (value: PropValue) => void;
   onDelete: () => void;
-  autoFocus?: boolean;
 };
 
 export const RemovePropButton = (props: { onClick: () => void }) => (

apps/builder/app/shared/nano-states/props.ts

@@ -570,11 +570,18 @@ const computeResource = (
 };
 
 const $computedResources = computed(
-  [$resources, $loaderVariableValues],
-  (resources, values) => {
+  [$dataSources, $resources, $loaderVariableValues],
+  (dataSources, resources, values) => {
     const computedResources: ResourceRequest[] = [];
-    for (const resource of resources.values()) {
-      computedResources.push(computeResource(resource, values));
+    // load only resources bound to variables
+    // action resources should not be loaded automatically
+    for (const dataSource of dataSources.values()) {
+      if (dataSource.type === "resource") {
+        const resource = resources.get(dataSource.resourceId);
+        if (resource) {
+          computedResources.push(computeResource(resource, values));
+        }
+      }
     }
     return computedResources;
   }

fixtures/react-router-docker/app/routes/[another-page]._index.tsx

@@ -231,10 +231,6 @@ export const action = async ({
     formData.delete(formBotFieldName);
 
     if (resource) {
-      resource.headers.push({
-        name: "Content-Type",
-        value: "application/json",
-      });
       resource.body = Object.fromEntries(formData);
     } else {
       if (contactEmail === undefined) {

fixtures/react-router-docker/app/routes/_index.tsx

@@ -231,10 +231,6 @@ export const action = async ({
     formData.delete(formBotFieldName);
 
     if (resource) {
-      resource.headers.push({
-        name: "Content-Type",
-        value: "application/json",
-      });
       resource.body = Object.fromEntries(formData);
     } else {
       if (contactEmail === undefined) {

fixtures/react-router-netlify/app/routes/[another-page]._index.tsx

@@ -231,10 +231,6 @@ export const action = async ({
     formData.delete(formBotFieldName);
 
     if (resource) {
-      resource.headers.push({
-        name: "Content-Type",
-        value: "application/json",
-      });
       resource.body = Object.fromEntries(formData);
     } else {
       if (contactEmail === undefined) {