Datamapper move schematics

src/main/frontend/app/components/datamapper/basic-components/import-button.tsx

@@ -0,0 +1,60 @@
+import { useId } from 'react'
+import clsx from 'clsx'
+import Button from '../../inputs/button'
+import { showErrorToast } from '../../toast'
+
+interface ImportButtonProperties {
+  fileType: string
+  importFunc: (file: File) => void
+  file: File | null
+  setFile: (file: File | null) => void
+}
+
+// Generic import button with visual feedback for uploaded files
+function ImportButton({ fileType, importFunc, file, setFile }: ImportButtonProperties) {
+  const inputId = `UploadImportButton${useId()}`
+
+  return (
+    <div className="flex w-full flex-col items-center gap-1">
+      <label
+        htmlFor={inputId}
+        className={clsx(
+          'w-full cursor-pointer rounded-lg border px-3 py-3 text-center text-sm font-medium transition-colors',
+          file && 'border-green-600 bg-green-600 text-white hover:bg-green-500',
+          !file && 'border-border bg-backdrop text-foreground hover:bg-hover active:bg-selected',
+        )}
+      >
+        {file ? (
+          <span className="flex flex-col items-center truncate">
+            <span className="text-xs opacity-80">Uploaded</span>
+            <span className="max-w-full truncate">{file?.name}</span>
+          </span>
+        ) : (
+          <span className="flex flex-col items-center gap-1 truncate p-1">Upload file</span>
+        )}
+      </label>
+
+      <input
+        id={inputId}
+        type="file"
+        accept={fileType}
+        className="hidden"
+        onChange={(event) => setFile(event.target.files?.[0] || null)}
+      />
+      {
+        <Button
+          className="m-3 w-full"
+          disabled={!file}
+          onClick={() => {
+            if (file) importFunc(file)
+            else showErrorToast('import file failed')
+          }}
+        >
+          Confirm
+        </Button>
+      }
+    </div>
+  )
+}
+
+export default ImportButton

src/main/frontend/app/components/datamapper/react-flow/import-schematic-node.tsx

@@ -0,0 +1,61 @@
+import { Handle, Position } from '@xyflow/react'
+
+import { GROUP_WIDTH } from '~/utils/datamapper_utils/constant'
+
+import ImportButton from '../basic-components/import-button'
+import type { ImportSchematicFunc } from '~/hooks/use-datamapper-flow-management'
+import CodeFile from '/icons/solar/Code File.svg?react'
+import { useState } from 'react'
+import clsx from 'clsx'
+import { showErrorToast } from '~/components/toast'
+
+//DataType needed
+export interface ImportSchematicNodeprops {
+  data: {
+    fileType: string
+    side: 'source' | 'target'
+    importFunc: ImportSchematicFunc
+  } & Record<string, unknown>
+}
+
+function ImportSchematicNode({ data }: ImportSchematicNodeprops) {
+  const [isDragging, setIsDragging] = useState(false)
+  const [file, setFile] = useState<File | null>(null)
+  return (
+    <div
+      className={clsx(
+        'group cap-3 flex h-full flex-col items-center rounded-xl border-dashed border-gray-400 p-3 shadow',
+        isDragging || file ? 'bg-selected border! border-solid' : 'border-2',
+      )}
+      style={{ width: `${GROUP_WIDTH}px` }}
+      onDragOver={(e) => {
+        e.preventDefault()
+        setIsDragging(true)
+      }}
+      onDragLeave={() => setIsDragging(false)}
+      onDrop={(e) => {
+        e.preventDefault()
+        setIsDragging(false)
+
+        const file = e.dataTransfer.files?.[0]
+        if (file.name.endsWith(data.fileType)) setFile(file)
+        else showErrorToast(file.name, 'Incorrect filetype!')
+      }}
+    >
+      {/* Header */}
+      <div className="flex text-xl">Import schema</div>
+      <CodeFile className={clsx('fill-foreground m-5 flex h-10 w-10')} />
+
+      <ImportButton
+        fileType={data.fileType}
+        file={file}
+        setFile={setFile}
+        importFunc={(file: File) => data.importFunc(file, data.side, file.name.replace(data.fileType, ''))}
+      />
+
+      <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
+      <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} />
+    </div>
+  )
+}
+export default ImportSchematicNode

src/main/frontend/app/components/datamapper/react-flow/node-types.tsx

@@ -9,6 +9,7 @@ import type { CustomNodeData, MappingNodeData } from '~/types/datamapper_types/r
 import ArrayGroupNode, { type ArrayGroupNodeProperties } from './array-group-node'
 import type { ArrayMappingNodeProperties } from './array-mapping-node'
 import ArrayMappingNode from './array-mapping-node'
+import ImportSchematicNode, { type ImportSchematicNodeprops } from './import-schematic-node'
 
 interface GetNodeTypesParameters {
   flow: ReturnType<typeof useFlowManagement>
@@ -120,4 +121,5 @@ export const getNodeTypes = ({
       }}
     />
   ),
+  importSchematicNode: (node: ImportSchematicNodeprops) => <ImportSchematicNode {...node} />,
 })

src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx

@@ -45,7 +45,7 @@ function OneEdgeNode({ id, data, variant = 'source', onEdit, onDelete, onHighlig
     <div
       onClick={updateChecked}
       className={clsx(
-        'border-border group mr-2 flex cursor-pointer items-center gap-2 rounded-md p-2',
+        'border-border group mr-2 flex cursor-pointer items-center gap-2 rounded-md border-2 p-2',
         checked ? 'bg-foreground-active text-neutral' : 'bg-backdrop',
         data.isHidden && 'opacity-20',
       )}

src/main/frontend/app/components/inputs/input.tsx

@@ -28,7 +28,7 @@ export default function Input({
     >
       <input
         className={twMerge(
-          'text-foreground focus:border-b-brand w-full rounded-sm border-b-[2px] border-transparent px-3 py-2 outline-none sm:text-sm',
+          'text-foreground focus:border-b-brand w-full rounded-sm border-b-2 border-transparent px-3 py-2 outline-none sm:text-sm',
           disabled && 'cursor-not-allowed',
           inputClassName,
         )}