refactor: node string param component

src/components/Workflow/HttpTriggerNode.tsx

@@ -4,12 +4,15 @@ import {
   NodeName,
   NodeParam,
   NodeParams,
+  NodeStringParam,
   NodeToolbar,
 } from "@src/components/Workflow";
 import { useCallback, useState } from "react";
 
 export default function HttpTriggerNode() {
   const [name, setName] = useState("HTTP Trigger");
+  const [method, setMethod] = useState("GET");
+  const [path, setPath] = useState("/");
 
   const [collapsed, setCollapsed] = useState(false);
 
@@ -32,14 +35,16 @@ export default function HttpTriggerNode() {
       </NodeToolbar>
       <NodeParams open={!collapsed}>
         <NodeParam
-          name="Method"
+          label="Method"
           tooltip="The HTTP method to listen for"
           htmlFor="method"
         />
-        <NodeParam
-          name="Path"
+        <NodeStringParam
+          label="Path"
           tooltip="The path to listen for"
           htmlFor="path"
+          value={path}
+          onChange={setPath}
         />
       </NodeParams>
     </Node>

src/components/Workflow/NodeParam/NodeParam.tsx

@@ -0,0 +1,38 @@
+import { Stack, Tooltip, Typography } from "@mui/material";
+import { FC, PropsWithChildren } from "react";
+
+export interface NodeParamProps {
+  htmlFor?: string;
+
+  label: string;
+
+  tooltip?: string;
+}
+
+const NodeParam: FC<PropsWithChildren<NodeParamProps>> = ({
+  htmlFor,
+  label,
+  tooltip,
+  children,
+}) => {
+  return (
+    <Stack direction="row">
+      <Tooltip title={tooltip}>
+        <Typography
+          component="label"
+          htmlFor={htmlFor}
+          variant="caption"
+          flex={1}
+          overflow="hidden"
+          textOverflow="ellipsis"
+          sx={{ whiteSpace: "nowrap" }}
+        >
+          {label}
+        </Typography>
+      </Tooltip>
+      {children}
+    </Stack>
+  );
+};
+
+export default NodeParam;

src/components/Workflow/NodeParam/NodeStringParam.tsx

@@ -0,0 +1,33 @@
+import { Box } from "@mui/material";
+import NodeParam, { NodeParamProps } from "./NodeParam";
+
+export interface NodeStringParamProps extends NodeParamProps {
+  value: string;
+
+  onChange: (value: string) => void;
+}
+
+export default function NodeStringParam({
+  htmlFor,
+  value,
+  onChange,
+  ...rest
+}: NodeStringParamProps) {
+  return (
+    <NodeParam htmlFor={htmlFor} {...rest}>
+      <Box
+        component="input"
+        id={htmlFor}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        height={24}
+        width={140}
+        border={0}
+        borderRadius={1}
+        bgcolor="background.default"
+        sx={(theme) => ({ outlineColor: theme.palette.primary.main })}
+      />
+    </NodeParam>
+  );
+}

src/components/Workflow/OpenApiNode.tsx

@@ -5,7 +5,7 @@ import { map } from "lodash-es";
 import { SVGProps, useMemo, useState } from "react";
 import Node from "./Node";
 import NodeName from "./NodeName";
-import NodeParam from "./NodeParam";
+import NodeParam from "./NodeParam/NodeParam";
 import NodeToolbar from "./NodeToolbar";
 
 export interface OpenApiNodeProps {
@@ -86,7 +86,7 @@ const Params = ({ meth, collapsed }: any) => {
           <NodeParam
             key={param.name}
             htmlFor={`${meth.operationId}_${param.name}`}
-            name={param.name}
+            label={param.name}
             tooltip={param.description}
           />
         ))}

src/components/Workflow/ScriptNode.tsx

@@ -4,7 +4,7 @@ import { map } from "lodash-es";
 import { FC, SVGProps, useCallback, useEffect, useState } from "react";
 import Node from "./Node";
 import NodeName from "./NodeName";
-import NodeParam from "./NodeParam";
+import NodeParam from "./NodeParam/NodeParam";
 import NodeParams from "./NodeParams";
 import NodeToolbar from "./NodeToolbar";
 
@@ -84,7 +84,7 @@ const ScriptNode: FC<IScriptNodeProps> = ({}) => {
             <NodeParam
               key={key}
               htmlFor={key}
-              name={key}
+              label={key}
               tooltip={(param as any).description as any}
             />
           ))}

src/components/Workflow/index.ts

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

src/pages/Workflow/WorkflowPage.tsx

@@ -12,13 +12,20 @@ import {
   bindToggle,
   usePopupState,
 } from "material-ui-popup-state/hooks";
+import { useState } from "react";
 
 export default function WorkflowPage() {
   const addTriggerPopupState = usePopupState({
     variant: "popover",
     popupId: "addTrigger",
   });
 
+  const [trigger, setTrigger] = useState({
+    type: "http",
+    method: "get",
+    path: "/some",
+  });
+
   return (
     <Stack alignItems="center">
       <Button startIcon={<PlusIcon />} {...bindToggle(addTriggerPopupState)}>