Function JsonTextBox

components/actions/editActionModal.tsx:511–608

(props: JsonTextBoxProps)

};

function JsonTextBox(props: JsonTextBoxProps) {
  const [text, setText] = useState(
    // Just format the text once at the start to prevent formatting mid-editing
    textToJson(JSON.stringify(props.action[props.title])),
  );
  useEffect(() => {
    setText(textToJson(JSON.stringify(props.action[props.title])));
  }, [props.action]);

  return (
    <>
      <div className="w-full px-6 py-0.5 flex flex-row justify-between place-items-start overflow-hidden">
        <div className="flex flex-col w-32">
          <div
            className={classNames(
              "font-bold text-lg mt-4",
              props.disabled ? "text-gray-500" : "text-gray-100",
            )}
          >
            {props.title !== "keys_to_keep"
              ? props.title.charAt(0).toUpperCase() +
                props.title.slice(1).replace(/_/g, " ")
              : "Include these keys in response"}
          </div>
          {props.title === "keys_to_keep" && (
            <div
              className={classNames(
                "mt-1 text-sm",
                props.disabled ? "text-gray-600" : "text-gray-400",
              )}
            >
              Comma-separated list of keys
            </div>
          )}
        </div>
        <AutoGrowingTextArea
          className={classNames(
            "border border-gray-700 flex-1 px-4 py-3 font-mono text-sm rounded whitespace-pre-wrap resize-none overflow-hidden",
            props.disabled
              ? "bg-gray-700 text-gray-800"
              : "bg-gray-50 text-black",
          )}
          onChange={(e) => {
            setText(e.target.value);
            props.setValidJSON(isJsonString(e.target.value));
          }}
          value={text}
          placeholder={"{}"}
          onBlur={(e) => {
            try {
              const textarea = e.target as HTMLTextAreaElement;
              textarea.value = textToJson(textarea.value);
              const newAction = props.action;
              newAction[props.title] = JSON.parse(e.target.value);
              props.setLocalAction(newAction);
              props.setValidJSON(true);
            } catch (error) {
              props.setValidJSON(false);