[DOP-22352] add SourceParamsNode and TargetParamsNode

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 })}

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;
-}
+};

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} />;
+};

src/features/transfer/MutateTransferForm/components/SourceParamsNode/index.ts

@@ -0,0 +1,2 @@
+export * from './SourceParamsNode';
+export * from './types';

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> {}

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 })}

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;
-}
+};

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} />;
+};

src/features/transfer/MutateTransferForm/components/TargetParamsNode/index.ts

@@ -0,0 +1,2 @@
+export * from './TargetParamsNode';
+export * from './types';

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> {}