+
+
+
+ {fields.map((field, index) => (
+
+
+
+
+
+
+ ))}
+
+
+
+
{getValues('resourceName')}
+
+
+
+ | Attribute Name |
+ Attribute Type |
+
+
+
+ {fields.map((attribute, index) => {
+ if (!attribute.attributeName) {
+ return
+ }
+ return (
+
+ | {attribute.attributeName} |
+ {attribute.attributeType} |
+
+ )
+ })}
+
+
+
+ {editingIndex !== null && editingIndex !== undefined ? (
+
+ ) : (
+
+ )}
+
+
+
+ )
+}
diff --git a/ui/src/components/react-flow/nodes/microservice/MicroService.node.styles.scss b/ui/src/components/react-flow/nodes/microservice/MicroService.node.styles.scss
new file mode 100644
index 000000000..52930085b
--- /dev/null
+++ b/ui/src/components/react-flow/nodes/microservice/MicroService.node.styles.scss
@@ -0,0 +1,42 @@
+.custom-drag-handle {
+ height: 12px;
+ opacity: 0.3;
+ width: 100%;
+ background-color: #e8f1ff;
+ width: 100%;
+ cursor: grab;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.customNode {
+ width: 300px;
+ max-height: 450px;
+ border: 1px solid #dbe2ed;
+ // background-color: #f3f3fe;
+ box-shadow: 0 10px 10px #2d559c1a;
+ padding: 10px 10px;
+ overflow: scroll;
+ overflow-x: hidden;
+
+ .customNodeHeader {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ h1 {
+ flex: 1;
+ color: #020f1e;
+ font-size: 18px;
+ font-family: inherit;
+ font-weight: normal;
+ }
+ .delete-icon {
+ transform: scale(1.2);
+ }
+ }
+ // .customNodeBody {
+ // display: flex;
+ // height: 100%;
+ // }
+}
diff --git a/ui/src/components/react-flow/nodes/microservice/MicroService.node.tsx b/ui/src/components/react-flow/nodes/microservice/MicroService.node.tsx
new file mode 100644
index 000000000..e4d17d666
--- /dev/null
+++ b/ui/src/components/react-flow/nodes/microservice/MicroService.node.tsx
@@ -0,0 +1,100 @@
+import './MicroService.node.styles.scss'
+
+import { Button } from 'components/elements'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState } from 'react'
+import {
+ Handle,
+ NodeProps,
+ Position,
+ ReactFlowState,
+ useStore,
+} from 'reactflow'
+import { useReactFlowStore } from 'store'
+
+import { ReactComponent as DeleteIcon } from 'assets/deleteIcon.svg'
+import { ReactComponent as DragHandleIcon } from 'assets/drag-handle.svg'
+
+import MicroServiceNodeForm from './MicroService.node.form'
+import { TMicroServiceNodeData } from './Microservice.node.types'
+
+// Rest of your imports...
+const connectionNodeIdSelector = (state: ReactFlowState) =>
+ state.connectionNodeId
+function MicroService({ data, id }: NodeProps