[DOP-22900] add React flow and some refactor transfer connection type forms

package.json

@@ -20,6 +20,7 @@
     "@ant-design/icons": "5.5.1",
     "@tanstack/react-query": "5.56.2",
     "@tanstack/react-query-devtools": "5.56.2",
+    "@xyflow/react": "12.4.1",
     "antd": "4.24.13",
     "axios": "1.7.7",
     "clsx": "2.1.1",

src/entities/transfer/index.ts

@@ -1,2 +1,3 @@
 export * from './api';
 export * from './constants';
+export * from './ui';

src/entities/transfer/types.ts

@@ -0,0 +1,5 @@
+import { TransferConnectionParamFieldName } from './api';
+
+export interface ConnectionParamFieldName {
+  name: TransferConnectionParamFieldName;
+}

src/features/transfer/MutateTransferForm/components/TransferConnectionHdfs/index.tsx → src/entities/transfer/ui/TransferConnectionHdfs/index.tsx

@@ -20,6 +20,8 @@ export const TransferConnectionHdfs = ({ name }: TransferConnectionHdfsProps) =>
       </Form.Item>
       <Form.Item label="File format" name={[name, 'file_format', 'type']} rules={[{ required: true }]}>
         <Select
+          /** className "nodrag" for opening dropdown in select in custom node React Flow https://github.com/xyflow/xyflow/discussions/2694 */
+          className="nodrag"
           size="large"
           options={
             name === 'source_params'

src/features/transfer/MutateTransferForm/components/TransferConnectionS3/index.tsx → src/entities/transfer/ui/TransferConnectionS3/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Form, Input, Select } from 'antd';
+import { ABSOLUTE_PATH_REGEXP } from '@shared/constants';
+
 import {
   TRANSFER_SOURCE_CONNECTION_FILE_FORMAT_SELECT_OPTIONS,
   TRANSFER_TARGET_CONNECTION_FILE_FORMAT_SELECT_OPTIONS,
-} from '@entities/transfer';
-import { ABSOLUTE_PATH_REGEXP } from '@shared/constants';
+} from '../../constants';
 
 import { TransferConnectionS3Props } from './types';
 
@@ -20,6 +21,8 @@ export const TransferConnectionS3 = ({ name }: TransferConnectionS3Props) => {
       </Form.Item>
       <Form.Item label="File format" name={[name, 'file_format', 'type']} rules={[{ required: true }]}>
         <Select
+          /** className "nodrag" for opening dropdown in select in custom node React Flow https://github.com/xyflow/xyflow/discussions/2694 */
+          className="nodrag"
           size="large"
           options={
             name === 'source_params'

src/entities/transfer/ui/index.ts

@@ -0,0 +1,8 @@
+export * from './TransferConnectionClickhouse';
+export * from './TransferConnectionHdfs';
+export * from './TransferConnectionHive';
+export * from './TransferConnectionMsSql';
+export * from './TransferConnectionMySql';
+export * from './TransferConnectionOracle';
+export * from './TransferConnectionPostgres';
+export * from './TransferConnectionS3';

src/features/transfer/MutateTransferForm/components/SourceParams/constants.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { ConnectionType } from '@shared/types';
-
-import { TransferConnectionHdfs } from '../TransferConnectionHdfs';
-import { TransferConnectionHive } from '../TransferConnectionHive';
-import { TransferConnectionOracle } from '../TransferConnectionOracle';
-import { TransferConnectionPostgres } from '../TransferConnectionPostgres';
-import { TransferConnectionS3 } from '../TransferConnectionS3';
-import { TransferConnectionClickhouse } from '../TransferConnectionClickhouse';
-import { TransferConnectionMySql } from '../TransferConnectionMySql';
-import { TransferConnectionMsSql } from '../TransferConnectionMsSql';
+import {
+  TransferConnectionHdfs,
+  TransferConnectionHive,
+  TransferConnectionOracle,
+  TransferConnectionPostgres,
+  TransferConnectionClickhouse,
+  TransferConnectionMySql,
+  TransferConnectionMsSql,
+  TransferConnectionS3,
+} from '@entities/transfer';
 
 export const TRANSFER_SOURCE_CONNECTION_TYPE_COMPONENT = {
   [ConnectionType.HDFS]: <TransferConnectionHdfs name="source_params" />,

src/features/transfer/MutateTransferForm/components/TargetParams/constants.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { ConnectionType } from '@shared/types';
-
-import { TransferConnectionHdfs } from '../TransferConnectionHdfs';
-import { TransferConnectionHive } from '../TransferConnectionHive';
-import { TransferConnectionOracle } from '../TransferConnectionOracle';
-import { TransferConnectionPostgres } from '../TransferConnectionPostgres';
-import { TransferConnectionS3 } from '../TransferConnectionS3';
-import { TransferConnectionClickhouse } from '../TransferConnectionClickhouse';
-import { TransferConnectionMySql } from '../TransferConnectionMySql';
-import { TransferConnectionMsSql } from '../TransferConnectionMsSql';
+import {
+  TransferConnectionHdfs,
+  TransferConnectionHive,
+  TransferConnectionOracle,
+  TransferConnectionPostgres,
+  TransferConnectionClickhouse,
+  TransferConnectionMySql,
+  TransferConnectionMsSql,
+  TransferConnectionS3,
+} from '@entities/transfer';
 
 export const TRANSFER_TARGET_CONNECTION_TYPE_COMPONENT = {
   [ConnectionType.HDFS]: <TransferConnectionHdfs name="target_params" />,

src/shared/ui/Canvas/index.tsx

@@ -0,0 +1,26 @@
+import { Background, BackgroundVariant, Controls, Edge, MiniMap, Node, ReactFlow } from '@xyflow/react';
+import React from 'react';
+
+import { CanvasProps } from './types';
+
+export const Canvas = <N extends Node, E extends Edge>(props: CanvasProps<N, E>) => {
+  return (
+    <ReactFlow
+      nodesFocusable
+      elementsSelectable
+      nodesConnectable={false}
+      nodesDraggable
+      panOnScroll={false}
+      panOnDrag
+      zoomOnScroll
+      zoomOnPinch
+      zoomOnDoubleClick={false}
+      fitView
+      {...props}
+    >
+      <Background variant={BackgroundVariant.Dots} />
+      <Controls />
+      <MiniMap />
+    </ReactFlow>
+  );
+};

src/shared/ui/Canvas/types.ts

@@ -0,0 +1,3 @@
+import { Edge, Node, ReactFlowProps } from '@xyflow/react';
+
+export interface CanvasProps<N extends Node, E extends Edge> extends ReactFlowProps<N, E> {}

src/shared/ui/index.ts

@@ -11,3 +11,4 @@ export * from './DatePicker';
 export * from './TimePicker';
 export * from './Calendar';
 export * from './CronSelect';
+export * from './Canvas';

yarn.lock

@@ -2092,6 +2092,57 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/d3-color@npm:*":
+  version: 3.1.3
+  resolution: "@types/d3-color@npm:3.1.3"
+  checksum: 10c0/65eb0487de606eb5ad81735a9a5b3142d30bc5ea801ed9b14b77cb14c9b909f718c059f13af341264ee189acf171508053342142bdf99338667cea26a2d8d6ae
+  languageName: node
+  linkType: hard
+
+"@types/d3-drag@npm:^3.0.7":
+  version: 3.0.7
+  resolution: "@types/d3-drag@npm:3.0.7"
+  dependencies:
+    "@types/d3-selection": "npm:*"
+  checksum: 10c0/65e29fa32a87c72d26c44b5e2df3bf15af21cd128386bcc05bcacca255927c0397d0cd7e6062aed5f0abd623490544a9d061c195f5ed9f018fe0b698d99c079d
+  languageName: node
+  linkType: hard
+
+"@types/d3-interpolate@npm:*":
+  version: 3.0.4
+  resolution: "@types/d3-interpolate@npm:3.0.4"
+  dependencies:
+    "@types/d3-color": "npm:*"
+  checksum: 10c0/066ebb8da570b518dd332df6b12ae3b1eaa0a7f4f0c702e3c57f812cf529cc3500ec2aac8dc094f31897790346c6b1ebd8cd7a077176727f4860c2b181a65ca4
+  languageName: node
+  linkType: hard
+
+"@types/d3-selection@npm:*, @types/d3-selection@npm:^3.0.10":
+  version: 3.0.11
+  resolution: "@types/d3-selection@npm:3.0.11"
+  checksum: 10c0/0c512956c7503ff5def4bb32e0c568cc757b9a2cc400a104fc0f4cfe5e56d83ebde2a97821b6f2cb26a7148079d3b86a2f28e11d68324ed311cf35c2ed980d1d
+  languageName: node
+  linkType: hard
+
+"@types/d3-transition@npm:^3.0.8":
+  version: 3.0.9
+  resolution: "@types/d3-transition@npm:3.0.9"
+  dependencies:
+    "@types/d3-selection": "npm:*"
+  checksum: 10c0/4f68b9df7ac745b3491216c54203cbbfa0f117ae4c60e2609cdef2db963582152035407fdff995b10ee383bae2f05b7743493f48e1b8e46df54faa836a8fb7b5
+  languageName: node
+  linkType: hard
+
+"@types/d3-zoom@npm:^3.0.8":
+  version: 3.0.8
+  resolution: "@types/d3-zoom@npm:3.0.8"
+  dependencies:
+    "@types/d3-interpolate": "npm:*"
+    "@types/d3-selection": "npm:*"
+  checksum: 10c0/1dbdbcafddcae12efb5beb6948546963f29599e18bc7f2a91fb69cc617c2299a65354f2d47e282dfb86fec0968406cd4fb7f76ba2d2fb67baa8e8d146eb4a547
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.3":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -2695,6 +2746,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xyflow/react@npm:12.4.1":
+  version: 12.4.1
+  resolution: "@xyflow/react@npm:12.4.1"
+  dependencies:
+    "@xyflow/system": "npm:0.0.49"
+    classcat: "npm:^5.0.3"
+    zustand: "npm:^4.4.0"
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: 10c0/edc2a2a7935265920025c3f8ad04c330baf8a0a754d92390539bed66a8f1db761e1d13959bbe2f8c5e6e843c0459018ab2cdcd7e529f08eaa89e1cae5ff95337
+  languageName: node
+  linkType: hard
+
+"@xyflow/system@npm:0.0.49":
+  version: 0.0.49
+  resolution: "@xyflow/system@npm:0.0.49"
+  dependencies:
+    "@types/d3-drag": "npm:^3.0.7"
+    "@types/d3-selection": "npm:^3.0.10"
+    "@types/d3-transition": "npm:^3.0.8"
+    "@types/d3-zoom": "npm:^3.0.8"
+    d3-drag: "npm:^3.0.0"
+    d3-selection: "npm:^3.0.0"
+    d3-zoom: "npm:^3.0.0"
+  checksum: 10c0/673b399777d95e12e3e2d3feb181c1670c3780620a16e25662b6f4f0e68b0fbc3c470f6da917ca91d80115197acb22a16b58e35e37c770c72fb66a2eab32b43f
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -3463,6 +3543,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classcat@npm:^5.0.3":
+  version: 5.0.5
+  resolution: "classcat@npm:5.0.5"
+  checksum: 10c0/ff8d273055ef9b518529cfe80fd0486f7057a9917373807ff802d75ceb46e8f8e148f41fa094ee7625c8f34642cfaa98395ff182d9519898da7cbf383d4a210d
+  languageName: node
+  linkType: hard
+
 "classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
@@ -3977,6 +4064,88 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-color@npm:1 - 3":
+  version: 3.1.0
+  resolution: "d3-color@npm:3.1.0"
+  checksum: 10c0/a4e20e1115fa696fce041fbe13fbc80dc4c19150fa72027a7c128ade980bc0eeeba4bcf28c9e21f0bce0e0dbfe7ca5869ef67746541dcfda053e4802ad19783c
+  languageName: node
+  linkType: hard
+
+"d3-dispatch@npm:1 - 3":
+  version: 3.0.1
+  resolution: "d3-dispatch@npm:3.0.1"
+  checksum: 10c0/6eca77008ce2dc33380e45d4410c67d150941df7ab45b91d116dbe6d0a3092c0f6ac184dd4602c796dc9e790222bad3ff7142025f5fd22694efe088d1d941753
+  languageName: node
+  linkType: hard
+
+"d3-drag@npm:2 - 3, d3-drag@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "d3-drag@npm:3.0.0"
+  dependencies:
+    d3-dispatch: "npm:1 - 3"
+    d3-selection: "npm:3"
+  checksum: 10c0/d2556e8dc720741a443b595a30af403dd60642dfd938d44d6e9bfc4c71a962142f9a028c56b61f8b4790b65a34acad177d1263d66f103c3c527767b0926ef5aa
+  languageName: node
+  linkType: hard
+
+"d3-ease@npm:1 - 3":
+  version: 3.0.1
+  resolution: "d3-ease@npm:3.0.1"
+  checksum: 10c0/fec8ef826c0cc35cda3092c6841e07672868b1839fcaf556e19266a3a37e6bc7977d8298c0fcb9885e7799bfdcef7db1baaba9cd4dcf4bc5e952cf78574a88b0
+  languageName: node
+  linkType: hard
+
+"d3-interpolate@npm:1 - 3":
+  version: 3.0.1
+  resolution: "d3-interpolate@npm:3.0.1"
+  dependencies:
+    d3-color: "npm:1 - 3"
+  checksum: 10c0/19f4b4daa8d733906671afff7767c19488f51a43d251f8b7f484d5d3cfc36c663f0a66c38fe91eee30f40327443d799be17169f55a293a3ba949e84e57a33e6a
+  languageName: node
+  linkType: hard
+
+"d3-selection@npm:2 - 3, d3-selection@npm:3, d3-selection@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "d3-selection@npm:3.0.0"
+  checksum: 10c0/e59096bbe8f0cb0daa1001d9bdd6dbc93a688019abc97d1d8b37f85cd3c286a6875b22adea0931b0c88410d025563e1643019161a883c516acf50c190a11b56b
+  languageName: node
+  linkType: hard
+
+"d3-timer@npm:1 - 3":
+  version: 3.0.1
+  resolution: "d3-timer@npm:3.0.1"
+  checksum: 10c0/d4c63cb4bb5461d7038aac561b097cd1c5673969b27cbdd0e87fa48d9300a538b9e6f39b4a7f0e3592ef4f963d858c8a9f0e92754db73116770856f2fc04561a
+  languageName: node
+  linkType: hard
+
+"d3-transition@npm:2 - 3":
+  version: 3.0.1
+  resolution: "d3-transition@npm:3.0.1"
+  dependencies:
+    d3-color: "npm:1 - 3"
+    d3-dispatch: "npm:1 - 3"
+    d3-ease: "npm:1 - 3"
+    d3-interpolate: "npm:1 - 3"
+    d3-timer: "npm:1 - 3"
+  peerDependencies:
+    d3-selection: 2 - 3
+  checksum: 10c0/4e74535dda7024aa43e141635b7522bb70cf9d3dfefed975eb643b36b864762eca67f88fafc2ca798174f83ca7c8a65e892624f824b3f65b8145c6a1a88dbbad
+  languageName: node
+  linkType: hard
+
+"d3-zoom@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "d3-zoom@npm:3.0.0"
+  dependencies:
+    d3-dispatch: "npm:1 - 3"
+    d3-drag: "npm:2 - 3"
+    d3-interpolate: "npm:1 - 3"
+    d3-selection: "npm:2 - 3"
+    d3-transition: "npm:2 - 3"
+  checksum: 10c0/ee2036479049e70d8c783d594c444fe00e398246048e3f11a59755cd0e21de62ece3126181b0d7a31bf37bcf32fd726f83ae7dea4495ff86ec7736ce5ad36fd3
+  languageName: node
+  linkType: hard
+
 "damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
@@ -10049,6 +10218,7 @@ __metadata:
     "@types/react-dom": "npm:18.2.23"
     "@typescript-eslint/eslint-plugin": "npm:7.5.0"
     "@typescript-eslint/parser": "npm:7.5.0"
+    "@xyflow/react": "npm:12.4.1"
     antd: "npm:4.24.13"
     axios: "npm:1.7.7"
     clsx: "npm:2.1.1"
@@ -10480,6 +10650,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.2.2":
+  version: 1.4.0
+  resolution: "use-sync-external-store@npm:1.4.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/ec011a5055962c0f6b509d6e78c0b143f8cd069890ae370528753053c55e3b360d3648e76cfaa854faa7a59eb08d6c5fb1015e60ffde9046d32f5b2a295acea5
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -10921,3 +11100,23 @@ __metadata:
   checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
   languageName: node
   linkType: hard
+
+"zustand@npm:^4.4.0":
+  version: 4.5.6
+  resolution: "zustand@npm:4.5.6"
+  dependencies:
+    use-sync-external-store: "npm:^1.2.2"
+  peerDependencies:
+    "@types/react": ">=16.8"
+    immer: ">=9.0.6"
+    react: ">=16.8"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+  checksum: 10c0/5b39aff2ef57e5a8ada647261ec1115697d397be311c51461d9ea81b5b63c6d2c498b960477ad2db72dc21db6aa229a92bdf644f6a8ecf7b1d71df5b4a5e95d3
+  languageName: node
+  linkType: hard