Merge pull request #150 from softflow24/feat/request-block-config-panel

Feat(editor): Request block

packages/blocks/src/block/index.ts

@@ -7,7 +7,10 @@ export abstract class Block implements IBlock {
   readonly type: string;
   inputs: Record<string, unknown>;
   outputs: Record<string, unknown>;
-  private inputConfigs: Record<string, { type: string; required: boolean }>;
+  private inputConfigs: Record<
+    string,
+    { type: string | string[]; required: boolean }
+  >;
   private outputConfigs: Record<string, { type: string }>;
   readonly retry: number;
   readonly timeout: number;
@@ -65,7 +68,15 @@ export abstract class Block implements IBlock {
         inputs[key] !== null &&
         inputs[key] !== ""
       ) {
-        if (typeof inputs[key] !== config.type) {
+        if (
+          Array.isArray(config.type) &&
+          !config.type.includes(typeof inputs[key])
+        ) {
+          invalidFields.push(key);
+        } else if (
+          !Array.isArray(config.type) &&
+          typeof inputs[key] !== config.type
+        ) {
           invalidFields.push(key);
         } else {
           cleanedInputs[key] = inputs[key];

packages/blocks/src/blockFactory/index.ts

@@ -1,11 +1,14 @@
 import { IBlockConfig, IBlock } from "@data-river/shared/interfaces";
 import { ILogger } from "@data-river/shared/interfaces/ILogger";
 
-import { StartBlock } from "../startBlock";
-import { EndBlock } from "../endBlock";
-import { InputBlock } from "../inputBlock";
-import { OutputBlock } from "../outputBlock";
-import { LogicBlock } from "..";
+import {
+  RequestBlock,
+  StartBlock,
+  EndBlock,
+  InputBlock,
+  OutputBlock,
+  LogicBlock,
+} from "..";
 
 type BlockConstructor = new (config: IBlockConfig, logger: ILogger) => IBlock;
 
@@ -15,6 +18,7 @@ const blockRegistry: Record<string, BlockConstructor> = {
   "blocks/[email protected]": InputBlock,
   "blocks/[email protected]": OutputBlock,
   "blocks/[email protected]": LogicBlock,
+  "blocks/[email protected]": RequestBlock,
 };
 
 export function createBlock(config: IBlockConfig, logger: ILogger): IBlock {

packages/blocks/src/endBlock/index.ts

@@ -9,7 +9,10 @@ export class EndBlock extends Block {
       {
         ...config,
         inputConfigs: {
-          data: { type: "string", required: false },
+          data: {
+            type: ["string", "number", "boolean", "object", "array"],
+            required: false,
+          },
         },
         outputConfigs: {},
       },

packages/blocks/src/index.ts

@@ -4,5 +4,6 @@ export * from "./endBlock";
 export * from "./inputBlock";
 export * from "./outputBlock";
 export * from "./logicBlock";
+export * from "./requestBlock";
 export * from "./blockFactory";
 // Note: We're not exporting DatabaseBlock here, as it's a plugin

packages/blocks/src/outputBlock/index.ts

@@ -9,7 +9,10 @@ export class OutputBlock extends Block {
       {
         ...config,
         inputConfigs: {
-          data: { type: "string", required: true },
+          data: {
+            type: ["string", "number", "boolean", "object", "array"],
+            required: true,
+          },
         },
         outputConfigs: {},
       },

packages/blocks/src/plugins/PluginRegistration.ts

@@ -2,8 +2,4 @@ import { registerBlockType } from "../blockFactory";
 
 import { DatabaseBlock } from "./DatabaseBlock";
 
-import { RequestBlock } from "./RequestBlock";
-
 registerBlockType("database", DatabaseBlock);
-
-registerBlockType("request", RequestBlock);

packages/blocks/src/requestBlock/index.ts

@@ -0,0 +1,77 @@
+import {
+  RequestFormData,
+  RequestFormSchema,
+} from "@data-river/shared/contracts/blocks/request";
+import axios, { AxiosRequestConfig, Method } from "axios";
+import { Block } from "..";
+import { IBlockConfig } from "@data-river/shared/interfaces";
+import { ILogger } from "@data-river/shared/interfaces/ILogger";
+
+export class RequestBlock extends Block {
+  private config: RequestFormData;
+
+  constructor(config: IBlockConfig, logger: ILogger) {
+    super(config, logger);
+    const result = RequestFormSchema.safeParse(config.config);
+    if (!result.success) {
+      throw new Error(`Invalid request configuration: ${result.error}`);
+    }
+    this.config = result.data;
+  }
+
+  async execute(): Promise<any> {
+    const { httpMethod, url, headers, queryParams, bodyType, body } =
+      this.config;
+
+    const axiosConfig: AxiosRequestConfig = {
+      method: httpMethod as Method,
+      url,
+      headers: headers?.reduce(
+        (acc, { key, value }) => ({ ...acc, [key]: value }),
+        {},
+      ),
+      params: queryParams,
+    };
+
+    if (body) {
+      let contentType: string | undefined = undefined;
+
+      switch (bodyType) {
+        case "json":
+          contentType = "application/json";
+          axiosConfig.data = JSON.parse(body);
+          break;
+        case "form-data":
+          contentType = "multipart/form-data";
+          axiosConfig.data = body;
+          break;
+        case "x-www-form-urlencoded":
+          contentType = "application/x-www-form-urlencoded";
+          axiosConfig.data = new URLSearchParams(body);
+          break;
+      }
+
+      if (contentType) {
+        axiosConfig.headers = {
+          ...axiosConfig.headers,
+          "Content-Type": contentType,
+        };
+      }
+    }
+
+    try {
+      const response = await axios(axiosConfig);
+      return {
+        data: response.data,
+        status: response.status,
+        statusText: response.statusText,
+      };
+    } catch (error) {
+      // TODO: Add option in config to accept error and handle it manually if needed.
+      if (axios.isAxiosError(error)) {
+        throw new Error(`Request failed: ${error.message}`);
+      }
+      throw error;
+    }
+  }
+}

packages/client/vite.config.ts

@@ -26,9 +26,10 @@ export default defineConfig({
         "../execution-engine/src",
       ),
     },
+    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
   },
   optimizeDeps: {
-    include: ["@data-river/editor", "@data-river/shared"],
+    include: ["@data-river/editor", "@data-river/shared", "@data-river/blocks"],
   },
   build: {
     commonjsOptions: {

packages/editor/package.json

@@ -15,6 +15,7 @@
     "@data-river/blocks": "workspace:*",
     "@data-river/execution-engine": "workspace:*",
     "@data-river/shared": "workspace:*",
+    "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",

packages/editor/src/blocks/index.ts

@@ -3,13 +3,15 @@ import { inputNode } from "./inputNode";
 import { logicNode } from "./logicNode";
 import { outputNode } from "./outputNode";
 import { endNode } from "./endNode";
+import { requestNode } from "./requestNode";
 
 export const blockConfigs = {
   start: startNode,
   input: inputNode,
   logic: logicNode,
   output: outputNode,
   end: endNode,
+  request: requestNode,
 };
 
 export type BlockType = keyof typeof blockConfigs;

packages/editor/src/blocks/requestNode.ts

@@ -0,0 +1,33 @@
+import { Node } from "reactflow";
+import { RequestNodeData } from "@/types/NodeTypes";
+
+export const requestNode: Omit<Node<RequestNodeData>, "position"> = {
+  id: "0",
+  type: "custom",
+  data: {
+    block: "[email protected]",
+    label: "Request",
+    color: "rgb(234 179 8)",
+    sourceHandle: true,
+    targetHandle: true,
+    icon: "Network",
+    config: {
+      httpMethod: "GET",
+      url: "https://pokeapi.co/api/v2/pokemon/ditto",
+      headers: [
+        {
+          key: "Content-Type",
+          value: "application/json",
+        },
+      ],
+      bodyType: "none",
+    },
+    controls: [
+      {
+        type: "request-info",
+        label: "Request Info",
+        name: "request-info",
+      },
+    ],
+  },
+};

packages/editor/src/components/Flow.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import ReactFlow, {
   ConnectionMode,
   Background,
@@ -11,7 +11,6 @@ import "reactflow/dist/style.css";
 import { useReactFlowState } from "@hooks/useReactFlowState";
 import { useReactFlowHooks } from "@hooks/useReactFlowHooks";
 import { useReactFlowEventHandlers } from "@hooks/useReactFlowEventHandlers";
-import useEditorState from "@/hooks/useEditorState";
 
 import CustomNode from "./CustomNode";
 import CustomNodeInfo from "./CustomNodeInfo";
@@ -30,7 +29,6 @@ const FlowChart: React.FC = () => {
   const { lightTheme, nodes, edges } = useReactFlowState();
   const eventHandlers = useReactFlowEventHandlers();
   useReactFlowHooks();
-  const isPanning = useEditorState((state) => state.isPanning);
 
   return (
     <div
@@ -80,9 +78,6 @@ const FlowChart: React.FC = () => {
           <CustomNodeInfo />
         </Panel>
       </ReactFlow>
-      <span className="absolute top-20 left-20">
-        {isPanning ? "true" : "false"}
-      </span>
     </div>
   );
 };

packages/editor/src/components/MonacoEditorWrapper.tsx

@@ -0,0 +1,73 @@
+import { Editor, EditorProps, OnMount } from "@monaco-editor/react";
+import { MemoExoticComponent, useCallback, useEffect, useState } from "react";
+import { editor } from "monaco-editor";
+import darkTheme from "../themes/dark.json";
+import useTheme from "@data-river/shared/ui/hooks/useTheme";
+import { Skeleton } from "@data-river/shared/ui";
+
+const EditorSkeleton = () => {
+  return (
+    <div className="flex flex-col space-y-3">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+    </div>
+  );
+};
+
+const MonacoEditorWrapper = (props: EditorProps) => {
+  const [MonacoEditor, setMonacoEditor] = useState<
+    MemoExoticComponent<typeof Editor>
+  >(null as unknown as MemoExoticComponent<typeof Editor>);
+
+  const [editor, setEditor] = useState<editor.IStandaloneCodeEditor | null>(
+    null,
+  );
+
+  const theme = useTheme();
+  useEffect(() => {
+    import("@monaco-editor/react").then((module) => {
+      setMonacoEditor(
+        () => module.default as unknown as MemoExoticComponent<typeof Editor>,
+      );
+    });
+  }, []);
+
+  const handleEditorDidMount: OnMount = useCallback(
+    (_editor, monaco) => {
+      const customTheme: editor.IStandaloneThemeData = {
+        base: "vs-dark",
+        inherit: true,
+        colors: darkTheme.colors,
+        rules: [],
+      };
+
+      monaco.editor.defineTheme("customTheme", customTheme);
+      theme === "dark"
+        ? monaco.editor.setTheme("customTheme")
+        : monaco.editor.setTheme("vs-light");
+      setEditor(_editor);
+    },
+    [theme, setEditor],
+  );
+
+  useEffect(() => {
+    editor?.updateOptions({
+      theme: theme === "dark" ? "customTheme" : "vs-light",
+    });
+  }, [theme, editor]);
+
+  if (!MonacoEditor) return <EditorSkeleton />;
+
+  return (
+    <MonacoEditor
+      {...props}
+      options={{ ...props.options }}
+      onMount={handleEditorDidMount}
+      loading={<EditorSkeleton />}
+    />
+  );
+};
+
+export default MonacoEditorWrapper;