feat: add HTTP Trigger node component

src/assets/icons/Http.tsx

@@ -0,0 +1,23 @@
+import { SVGProps } from "react";
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <g clipPath="url(#a)">
+      <path
+        fill="currentColor"
+        d="M4.5 11h-2V9H1v6h1.5v-2.5h2V15H6V9H4.5v2Zm2.5-.5h1.5V15H10v-4.5h1.5V9H7v1.5Zm5.5 0H14V15h1.5v-4.5H17V9h-4.5v1.5Zm9-1.5H18v6h1.5v-2h2c.8 0 1.5-.7 1.5-1.5v-1c0-.8-.7-1.5-1.5-1.5Zm0 2.5h-2v-1h2v1Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgComponent;

src/assets/icons/index.ts

@@ -106,12 +106,15 @@ export { TableColumn };
 import { DragVertical } from "mdi-material-ui";
 export { DragVertical };
 
+export { default as Http } from "./Http";
+
 export {
   Plus,
   CursorPointer,
   GestureTap,
   ClockOutline,
   FlashOutline,
+  Api,
 } from "mdi-material-ui";
 
 export * from "./AddRow";

src/components/Workflow/HttpTriggerNode.tsx

@@ -0,0 +1,47 @@
+import { Http } from "@src/assets/icons";
+import {
+  Node,
+  NodeName,
+  NodeParam,
+  NodeParams,
+  NodeToolbar,
+} from "@src/components/Workflow";
+import { useCallback, useState } from "react";
+
+export default function HttpTriggerNode() {
+  const [name, setName] = useState("HTTP Trigger");
+
+  const [collapsed, setCollapsed] = useState(false);
+
+  const handleToggleCollapse = useCallback(() => {
+    setCollapsed((collapsed) => !collapsed);
+  }, [setCollapsed]);
+
+  return (
+    <Node>
+      <NodeToolbar
+        collapsed={collapsed}
+        onToggleCollapse={handleToggleCollapse}
+      >
+        <Http />
+        <NodeName
+          name={name}
+          onNameChange={setName}
+          tooltip="Triggered by an HTTP request"
+        />
+      </NodeToolbar>
+      <NodeParams open={!collapsed}>
+        <NodeParam
+          name="Method"
+          tooltip="The HTTP method to listen for"
+          htmlFor="method"
+        />
+        <NodeParam
+          name="Path"
+          tooltip="The path to listen for"
+          htmlFor="path"
+        />
+      </NodeParams>
+    </Node>
+  );
+}

src/components/Workflow/index.ts

@@ -0,0 +1,8 @@
+import HttpTriggerNode from "./HttpTriggerNode";
+import Node from "./Node";
+import NodeName from "./NodeName";
+import NodeParam from "./NodeParam";
+import NodeParams from "./NodeParams";
+import NodeToolbar from "./NodeToolbar";
+
+export { HttpTriggerNode, Node, NodeName, NodeParam, NodeParams, NodeToolbar };

src/pages/Workflow/WorkflowPage.tsx

@@ -1,15 +1,21 @@
 import { Button, ListItemIcon, Menu, MenuItem, Stack } from "@mui/material";
 import {
-  Plus as PlusIcon,
-  CursorPointer as CursorPointerIcon,
+  Api as ApiIcon,
   ClockOutline as ClockOutlineIcon,
-  GestureTap as GestureTapIcon,
   FlashOutline as FlashOutlineIcon,
+  GestureTap as GestureTapIcon,
+  Plus as PlusIcon,
 } from "@src/assets/icons";
+import { HttpTriggerNode } from "@src/components/Workflow";
+import Node from "@src/components/Workflow/Node";
+import NodeName from "@src/components/Workflow/NodeName";
+import NodeParam from "@src/components/Workflow/NodeParam";
+import NodeParams from "@src/components/Workflow/NodeParams";
+import NodeToolbar from "@src/components/Workflow/NodeToolbar";
 import {
-  usePopupState,
-  bindToggle,
   bindPopover,
+  bindToggle,
+  usePopupState,
 } from "material-ui-popup-state/hooks";
 
 export default function WorkflowPage() {
@@ -34,6 +40,12 @@ export default function WorkflowPage() {
           </ListItemIcon>
           Manually trigger
         </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <ApiIcon />
+          </ListItemIcon>
+          HTTP trigger
+        </MenuItem>
         <MenuItem>
           <ListItemIcon>
             <ClockOutlineIcon />
@@ -47,6 +59,7 @@ export default function WorkflowPage() {
           Automated trigger
         </MenuItem>
       </Menu>
+      <HttpTriggerNode />
     </Stack>
   );
 }