Merge remote-tracking branch 'origin/main' into tauri-main

.gitignore

@@ -42,3 +42,6 @@ yarn-error.log
 # Personal files
 start-dev.sh
 slam-geese.sh
+
+# Ignore .dev.vars files in the examples folder
+examples/**/*.dev.vars

studio/src/components/CodeMirrorEditor/CodeMirrorInput.tsx

@@ -3,6 +3,7 @@ import "./CodeMirrorEditorCssOverrides.css";
 import { cn } from "@/utils";
 import CodeMirror, { EditorView, gutter, keymap } from "@uiw/react-codemirror";
 import { useMemo, useState } from "react";
+import { createOnSubmitKeymap, escapeKeymap } from "./keymaps";
 
 const inputTheme = EditorView.theme({
   "&": {
@@ -113,30 +114,6 @@ const preventNewlineInFirefox = keymap.of([
   },
 ]);
 
-// Extension that blurs the editor when the user presses "Escape"
-const escapeKeymap = keymap.of([
-  {
-    key: "Escape",
-    run: (view) => {
-      view.contentDOM.blur();
-      return true;
-    },
-  },
-]);
-
-const submitKeymap = (onSubmit: (() => void) | undefined) =>
-  keymap.of([
-    {
-      key: "Mod-Enter",
-      run: (_view) => {
-        if (onSubmit) {
-          onSubmit();
-        }
-        return true;
-      },
-    },
-  ]);
-
 export function CodeMirrorInput(props: CodeMirrorInputProps) {
   const { value, onChange, placeholder, className, readOnly, onSubmit } = props;
 
@@ -163,7 +140,7 @@ export function CodeMirrorInput(props: CodeMirrorInputProps) {
       EditorView.lineWrapping,
       readOnly ? readonlyExtension : noopExtension,
       isFocused ? noopExtension : inputTrucateExtension,
-      submitKeymap(onSubmit),
+      createOnSubmitKeymap(onSubmit),
     ];
   }, [isFocused, readOnly, onSubmit]);
 

studio/src/components/CodeMirrorEditor/CodeMirrorJsonEditor.tsx

@@ -2,8 +2,9 @@ import "./CodeMirrorEditorCssOverrides.css";
 
 import { json } from "@codemirror/lang-json";
 import { duotoneDark } from "@uiw/codemirror-theme-duotone";
-
-import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import CodeMirror, { basicSetup, EditorView } from "@uiw/react-codemirror";
+import { useMemo } from "react";
+import { createOnSubmitKeymap, escapeKeymap } from "./keymaps";
 import { customTheme } from "./themes";
 
 type CodeMirrorEditorProps = {
@@ -14,6 +15,7 @@ type CodeMirrorEditorProps = {
   readOnly?: boolean;
   value?: string;
   onChange: (value?: string) => void;
+  onSubmit?: () => void;
 };
 
 export function CodeMirrorJsonEditor(props: CodeMirrorEditorProps) {
@@ -24,24 +26,36 @@ export function CodeMirrorJsonEditor(props: CodeMirrorEditorProps) {
     readOnly,
     minHeight = "200px",
     maxHeight,
+    onSubmit,
   } = props;
 
+  const extensions = useMemo(
+    () => [
+      createOnSubmitKeymap(onSubmit, false),
+      basicSetup({
+        // Turn off searching the input via cmd+g and cmd+f
+        searchKeymap: false,
+      }),
+      EditorView.lineWrapping,
+      json(),
+      escapeKeymap,
+    ],
+    [onSubmit],
+  );
+
   return (
     <CodeMirror
       value={value}
       height={height}
       maxHeight={maxHeight}
       minHeight={minHeight}
-      extensions={[EditorView.lineWrapping, json()]}
+      extensions={extensions}
       onChange={onChange}
       theme={[duotoneDark, customTheme]}
       readOnly={readOnly}
-      basicSetup={{
-        // Turn off searching the input via cmd+g and cmd+f
-        searchKeymap: false,
-        // Investigate: Remap the default keymap: https://codemirror.net/docs/ref/#commands.defaultKeymap
-        //              This will allow us to do things like cmd+enter to submit a payload
-      }}
+      // Turn off basic setup here, but then use it as an extension instead (in the extension array),
+      // AFTER using a keymap that allows us to conditionally intercept the "Mod+Enter" combo
+      basicSetup={false}
     />
   );
 }

studio/src/components/CodeMirrorEditor/CodeMirrorSqlEditor.tsx

@@ -7,10 +7,24 @@ import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { customTheme } from "./themes";
 import type { CodeMirrorEditorProps } from "./types";
 
-type CodeMirrorSqlEditorProps = CodeMirrorEditorProps;
+type CodeMirrorSqlEditorProps = CodeMirrorEditorProps & {
+  /**
+   * Whether to show line numbers in the editor
+   * @default true
+   */
+  lineNumbers?: boolean;
+};
 
 export function CodeMirrorSqlEditor(props: CodeMirrorSqlEditorProps) {
-  const { height, value, onChange, minHeight, maxHeight, readOnly } = props;
+  const {
+    height,
+    value,
+    onChange,
+    minHeight,
+    maxHeight,
+    readOnly,
+    lineNumbers,
+  } = props;
   return (
     <CodeMirror
       value={value}
@@ -21,6 +35,9 @@ export function CodeMirrorSqlEditor(props: CodeMirrorSqlEditorProps) {
       extensions={[EditorView.lineWrapping, sql()]}
       onChange={onChange}
       theme={[duotoneDark, customTheme]}
+      basicSetup={{
+        lineNumbers: lineNumbers ?? true,
+      }}
     />
   );
 }

studio/src/components/CodeMirrorEditor/keymaps.ts

@@ -0,0 +1,36 @@
+import { keymap } from "@uiw/react-codemirror";
+
+// Extension that blurs the editor when the user presses "Escape"
+export const escapeKeymap = keymap.of([
+  {
+    key: "Escape",
+    run: (view) => {
+      view.contentDOM.blur();
+      return true;
+    },
+  },
+]);
+
+/**
+ * Creates a keymap that calls the given (optional) onSubmit function when the user presses "Mod-Enter"
+ *
+ * @param onSubmit - Function to call when the user presses "Mod-Enter"
+ * @param bubbleWhenNoHandler - If there is no onSubmit function, let another extension handle the key event
+ * @returns - Keymap that calls the onSubmit function when the user presses "Mod-Enter"
+ */
+export const createOnSubmitKeymap = (
+  onSubmit: (() => void) | undefined,
+  bubbleWhenNoHandler = true,
+) =>
+  keymap.of([
+    {
+      key: "Mod-Enter",
+      run: () => {
+        if (onSubmit) {
+          onSubmit();
+          return true;
+        }
+        return bubbleWhenNoHandler;
+      },
+    },
+  ]);

studio/src/components/Timeline/DetailsList/index.ts

@@ -1,3 +1,4 @@
 export { CollapsibleKeyValueTableV2 } from "./KeyValueTableV2";
 export { TimelineListDetails } from "./TimelineDetailsList";
 export { BodyViewerV2 } from "./BodyViewerV2";
+export { useFormattedNeonQuery } from "./spans";

studio/src/components/Timeline/DetailsList/spans/FetchSpan.tsx → studio/src/components/Timeline/DetailsList/spans/FetchSpan/FetchSpan.tsx

@@ -20,12 +20,12 @@ import {
 import type { OtelSpan } from "@fiberplane/fpx-types";
 import { ClockIcon } from "@radix-ui/react-icons";
 import { useMemo } from "react";
-import { format } from "sql-formatter";
-import { useTimelineIcon } from "../../hooks";
-import { CollapsibleSubSection, SectionHeading } from "../../shared";
-import { SubSection, SubSectionHeading } from "../../shared";
-import { CollapsibleKeyValueTableV2 } from "../KeyValueTableV2";
-import { TextOrJsonViewer } from "../TextJsonViewer";
+import { useTimelineIcon } from "../../../hooks";
+import { CollapsibleSubSection, SectionHeading } from "../../../shared";
+import { SubSection, SubSectionHeading } from "../../../shared";
+import { CollapsibleKeyValueTableV2 } from "../../KeyValueTableV2";
+import { TextOrJsonViewer } from "../../TextJsonViewer";
+import { useFormattedNeonQuery } from "./hooks";
 
 export function FetchSpan({
   span,
@@ -226,21 +226,7 @@ function useVendorSpecificSection(vendorInfo: VendorInfo) {
 }
 
 function NeonSection({ vendorInfo }: { vendorInfo: NeonVendorInfo }) {
-  const queryValue = useMemo(() => {
-    try {
-      const paramsFromNeon = vendorInfo.sql.params ?? [];
-      // NOTE - sql-formatter expects the index in the array to match the `$nr` syntax from postgres
-      //        this makes the 0th index unused, but it makes the rest of the indices match the `$1`, `$2`, etc.
-      const params = ["", ...paramsFromNeon];
-      return format(vendorInfo.sql.query, {
-        language: "postgresql",
-        params,
-      });
-    } catch (e) {
-      // Being very defensive soz
-      return vendorInfo?.sql?.query ?? "";
-    }
-  }, [vendorInfo]);
+  const queryValue = useFormattedNeonQuery(vendorInfo?.sql);
   return (
     <SubSection>
       <SubSectionHeading>SQL Query</SubSectionHeading>

studio/src/components/Timeline/DetailsList/spans/FetchSpan/hooks.ts

@@ -0,0 +1,29 @@
+import { useMemo } from "react";
+import { format } from "sql-formatter";
+
+export function useFormattedNeonQuery(
+  sql: {
+    query: string;
+    params?: string[];
+  },
+  options?: {
+    tabWidth?: number;
+  },
+) {
+  return useMemo(() => {
+    try {
+      const paramsFromNeon = sql.params ?? [];
+      // NOTE - sql-formatter expects the index in the array to match the `$nr` syntax from postgres
+      //        this makes the 0th index unused, but it makes the rest of the indices match the `$1`, `$2`, etc.
+      const params = ["", ...paramsFromNeon];
+      return format(sql.query, {
+        language: "postgresql",
+        params,
+        tabWidth: options?.tabWidth ?? 2,
+      });
+    } catch (_e) {
+      // Being very defensive soz
+      return sql?.query ?? "";
+    }
+  }, [sql, options?.tabWidth]);
+}

studio/src/components/Timeline/DetailsList/spans/FetchSpan/index.ts

@@ -0,0 +1,2 @@
+export { FetchSpan } from "./FetchSpan";
+export { useFormattedNeonQuery } from "./hooks";

studio/src/components/Timeline/DetailsList/spans/index.ts

@@ -1,3 +1,4 @@
 export { GenericSpan } from "./GenericSpan";
 export { IncomingRequest } from "./IncomingRequest";
 export { FetchSpan } from "./FetchSpan";
+export { useFormattedNeonQuery } from "./FetchSpan";

studio/src/components/Timeline/index.ts

@@ -6,5 +6,6 @@ export {
   BodyViewerV2,
   CollapsibleKeyValueTableV2,
   TimelineListDetails,
+  useFormattedNeonQuery,
 } from "./DetailsList";
 export { TimelineProvider } from "./context";

studio/src/pages/RequestorPage/FormDataForm/FormDataForm.tsx

@@ -1,6 +1,6 @@
+import { CodeMirrorInput } from "@/components/CodeMirrorEditor";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
 import { cn, noop } from "@/utils";
 import { FileIcon, TrashIcon } from "@radix-ui/react-icons";
 import { useCallback, useRef, useState } from "react";
@@ -18,6 +18,7 @@ import type {
 type Props = {
   keyValueParameters: FormDataParameter[];
   onChange: ChangeFormDataParametersHandler;
+  onSubmit?: () => void;
 };
 
 type FormDataRowProps = {
@@ -27,6 +28,7 @@ type FormDataRowProps = {
   onChangeKey?: (key: string) => void;
   onChangeValue: (value: FormDataParameter["value"]) => void;
   removeValue?: () => void;
+  onSubmit?: () => void;
 };
 
 const FormDataFormRow = (props: FormDataRowProps) => {
@@ -37,6 +39,7 @@ const FormDataFormRow = (props: FormDataRowProps) => {
     onChangeValue,
     removeValue,
     parameter,
+    onSubmit,
   } = props;
   const { enabled, key, value } = parameter;
   const [isHovering, setIsHovering] = useState(false);
@@ -67,23 +70,23 @@ const FormDataFormRow = (props: FormDataRowProps) => {
           return handler();
         }}
       />
-      <Input
-        type="text"
+      <CodeMirrorInput
+        className="w-[140px]"
         value={key}
-        placeholder="name"
+        placeholder="form_key"
         readOnly={!onChangeKey}
-        onChange={(e) => onChangeKey?.(e.target.value)}
-        className="w-28 h-8 bg-transparent shadow-none px-2 py-0 text-sm border-none"
+        onChange={(value) => onChangeKey?.(value ?? "")}
+        onSubmit={onSubmit}
       />
       {value.type === "text" && (
-        <Input
-          type="text"
+        <CodeMirrorInput
+          className="w-[calc(100%-140px)]"
           value={value.value}
           placeholder="value"
-          onChange={(e) =>
-            onChangeValue({ value: e.target.value, type: "text" })
+          onChange={(value) =>
+            onChangeValue({ value: value ?? "", type: "text" })
           }
-          className="h-8 flex-grow bg-transparent shadow-none px-2 py-0 text-sm border-none"
+          onSubmit={onSubmit}
         />
       )}
       {value.type === "file" && (
@@ -129,7 +132,7 @@ const FormDataFormRow = (props: FormDataRowProps) => {
 };
 
 export const FormDataForm = (props: Props) => {
-  const { onChange, keyValueParameters } = props;
+  const { onChange, keyValueParameters, onSubmit } = props;
 
   return (
     <div className="flex flex-col gap-0">
@@ -160,6 +163,7 @@ export const FormDataForm = (props: Props) => {
                 keyValueParameters.filter(({ id }) => parameter.id !== id),
               );
             }}
+            onSubmit={onSubmit}
           />
         );
       })}