From 9ada0cdf718c0b486b1e924968f13c48b1d7f263 Mon Sep 17 00:00:00 2001
From: Kirill Chernikov <72095428+Zabilsya@users.noreply.github.com>
Date: Wed, 22 Jan 2025 13:04:31 +0600
Subject: [PATCH] [DOP-22352] add SourceParamsNode and TargetParamsNode (#64)

Co-authored-by: Zabilsya <kvcherniko@mts.ru>
---
 .../components/SourceParams/SourceParams.tsx             | 2 ++
 .../MutateTransferForm/components/SourceParams/types.ts  | 4 ++--
 .../components/SourceParamsNode/SourceParamsNode.tsx     | 9 +++++++++
 .../components/SourceParamsNode/index.ts                 | 2 ++
 .../components/SourceParamsNode/types.ts                 | 8 ++++++++
 .../components/TargetParams/TargetParams.tsx             | 2 ++
 .../MutateTransferForm/components/TargetParams/types.ts  | 4 ++--
 .../components/TargetParamsNode/TargetParamsNode.tsx     | 9 +++++++++
 .../components/TargetParamsNode/index.ts                 | 2 ++
 .../components/TargetParamsNode/types.ts                 | 8 ++++++++
 10 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/features/transfer/MutateTransferForm/components/SourceParamsNode/SourceParamsNode.tsx
 create mode 100644 src/features/transfer/MutateTransferForm/components/SourceParamsNode/index.ts
 create mode 100644 src/features/transfer/MutateTransferForm/components/SourceParamsNode/types.ts
 create mode 100644 src/features/transfer/MutateTransferForm/components/TargetParamsNode/TargetParamsNode.tsx
 create mode 100644 src/features/transfer/MutateTransferForm/components/TargetParamsNode/index.ts
 create mode 100644 src/features/transfer/MutateTransferForm/components/TargetParamsNode/types.ts

diff --git a/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx b/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx
index 8fb9a848..ce6eb82e 100644
--- a/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx
+++ b/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx
@@ -19,6 +19,8 @@ export const SourceParams = ({ groupId, initialSourceConnectionType }: SourcePar
       <Divider>Source params</Divider>
       <Form.Item label="Source connection" name="source_connection_id" rules={[{ required: true }]}>
         <ManagedSelect
+          /** className "nodrag" for opening dropdown in select in custom node React Flow https://github.com/xyflow/xyflow/discussions/2694 */
+          className="nodrag"
           size="large"
           queryKey={[ConnectionQueryKey.GET_CONNECTIONS, groupId]}
           queryFunction={(params) => connectionService.getConnections({ group_id: groupId, ...params })}
diff --git a/src/features/transfer/MutateTransferForm/components/SourceParams/types.ts b/src/features/transfer/MutateTransferForm/components/SourceParams/types.ts
index 58e69a96..7b1e80d8 100644
--- a/src/features/transfer/MutateTransferForm/components/SourceParams/types.ts
+++ b/src/features/transfer/MutateTransferForm/components/SourceParams/types.ts
@@ -1,6 +1,6 @@
 import { ConnectionType } from '@shared/types';
 
-export interface SourceParamsProps {
+export type SourceParamsProps = {
   groupId: number;
   initialSourceConnectionType?: ConnectionType;
-}
+};
diff --git a/src/features/transfer/MutateTransferForm/components/SourceParamsNode/SourceParamsNode.tsx b/src/features/transfer/MutateTransferForm/components/SourceParamsNode/SourceParamsNode.tsx
new file mode 100644
index 00000000..e8079795
--- /dev/null
+++ b/src/features/transfer/MutateTransferForm/components/SourceParamsNode/SourceParamsNode.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { SourceParams } from '../SourceParams';
+
+import { SourceParamsNodeProps } from './types';
+
+export const SourceParamsNode = ({ data }: SourceParamsNodeProps) => {
+  return <SourceParams groupId={data.groupId} initialSourceConnectionType={data.initialSourceConnectionType} />;
+};
diff --git a/src/features/transfer/MutateTransferForm/components/SourceParamsNode/index.ts b/src/features/transfer/MutateTransferForm/components/SourceParamsNode/index.ts
new file mode 100644
index 00000000..2085110a
--- /dev/null
+++ b/src/features/transfer/MutateTransferForm/components/SourceParamsNode/index.ts
@@ -0,0 +1,2 @@
+export * from './SourceParamsNode';
+export * from './types';
diff --git a/src/features/transfer/MutateTransferForm/components/SourceParamsNode/types.ts b/src/features/transfer/MutateTransferForm/components/SourceParamsNode/types.ts
new file mode 100644
index 00000000..7ab09453
--- /dev/null
+++ b/src/features/transfer/MutateTransferForm/components/SourceParamsNode/types.ts
@@ -0,0 +1,8 @@
+import { Node, NodeProps } from '@xyflow/react';
+
+import { SourceParamsProps } from '../SourceParams';
+
+//TODO: [DOP-22354] change 'sourceParams' to NodeType.SOURCE
+export interface SourceParamsNodeData extends Node<SourceParamsProps, 'sourceParams'> {}
+
+export interface SourceParamsNodeProps extends NodeProps<SourceParamsNodeData> {}
diff --git a/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx b/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx
index 71da7d01..81e1f2bc 100644
--- a/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx
+++ b/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx
@@ -19,6 +19,8 @@ export const TargetParams = ({ groupId, initialTargetConnectionType }: TargetPar
       <Divider>Target params</Divider>
       <Form.Item label="Target connection" name="target_connection_id" rules={[{ required: true }]}>
         <ManagedSelect
+          /** className "nodrag" for opening dropdown in select in custom node React Flow https://github.com/xyflow/xyflow/discussions/2694 */
+          className="nodrag"
           size="large"
           queryKey={[ConnectionQueryKey.GET_CONNECTIONS, groupId]}
           queryFunction={(params) => connectionService.getConnections({ group_id: groupId, ...params })}
diff --git a/src/features/transfer/MutateTransferForm/components/TargetParams/types.ts b/src/features/transfer/MutateTransferForm/components/TargetParams/types.ts
index 0945b45f..b05b13c7 100644
--- a/src/features/transfer/MutateTransferForm/components/TargetParams/types.ts
+++ b/src/features/transfer/MutateTransferForm/components/TargetParams/types.ts
@@ -1,6 +1,6 @@
 import { ConnectionType } from '@shared/types';
 
-export interface TargetParamsProps {
+export type TargetParamsProps = {
   groupId: number;
   initialTargetConnectionType?: ConnectionType;
-}
+};
diff --git a/src/features/transfer/MutateTransferForm/components/TargetParamsNode/TargetParamsNode.tsx b/src/features/transfer/MutateTransferForm/components/TargetParamsNode/TargetParamsNode.tsx
new file mode 100644
index 00000000..dda79be3
--- /dev/null
+++ b/src/features/transfer/MutateTransferForm/components/TargetParamsNode/TargetParamsNode.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { TargetParams } from '../TargetParams';
+
+import { TargetParamsNodeProps } from './types';
+
+export const TargetParamsNode = ({ data }: TargetParamsNodeProps) => {
+  return <TargetParams groupId={data.groupId} initialTargetConnectionType={data.initialTargetConnectionType} />;
+};
diff --git a/src/features/transfer/MutateTransferForm/components/TargetParamsNode/index.ts b/src/features/transfer/MutateTransferForm/components/TargetParamsNode/index.ts
new file mode 100644
index 00000000..f0fd1100
--- /dev/null
+++ b/src/features/transfer/MutateTransferForm/components/TargetParamsNode/index.ts
@@ -0,0 +1,2 @@
+export * from './TargetParamsNode';
+export * from './types';
diff --git a/src/features/transfer/MutateTransferForm/components/TargetParamsNode/types.ts b/src/features/transfer/MutateTransferForm/components/TargetParamsNode/types.ts
new file mode 100644
index 00000000..566330b4
--- /dev/null
+++ b/src/features/transfer/MutateTransferForm/components/TargetParamsNode/types.ts
@@ -0,0 +1,8 @@
+import { Node, NodeProps } from '@xyflow/react';
+
+import { TargetParamsProps } from '../TargetParams';
+
+//TODO: [DOP-22354] change 'targetParams' to NodeType.TARGET
+export interface TargetParamsNodeData extends Node<TargetParamsProps, 'targetParams'> {}
+
+export interface TargetParamsNodeProps extends NodeProps<TargetParamsNodeData> {}