[DOP-22354] add Transfer canvas (#66)

* [DOP-22354] add Transfer canvas

* [DOP-22354] fix after review

---------

Co-authored-by: Zabilsya <kvcherniko@mts.ru>

src/app/styles/antd.less

@@ -40,3 +40,17 @@
   top: 0;
   height: auto;
 }
+
+.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab {
+  padding: 10px 20px;
+  background-color: @white;
+  border-radius: 8px;
+
+  &.ant-tabs-tab-active {
+    border-color: @primary-color;
+  }
+
+  + .ant-tabs-tab {
+    margin-left: 8px;
+  }
+}

src/entities/connection/assets/index.ts

@@ -0,0 +1,10 @@
+import S3Icon from './s3.svg';
+import ClickhouseIcon from './clickhouse.svg';
+import HdfsIcon from './hdfs.svg';
+import HiveIcon from './hive.svg';
+import MssqlIcon from './mssql.svg';
+import MysqlIcon from './mysql.svg';
+import OracleIcon from './oracle.svg';
+import PostgresIcon from './postgres.svg';
+
+export { ClickhouseIcon, HdfsIcon, HiveIcon, MssqlIcon, MysqlIcon, OracleIcon, PostgresIcon, S3Icon };

src/entities/connection/constants.ts → src/entities/connection/constants.tsx

@@ -1,6 +1,8 @@
+import React, { ReactNode } from 'react';
 import { ConnectionType } from '@shared/types';
 import { prepareOptionsForSelect } from '@shared/ui';
 
+import { ClickhouseIcon, HdfsIcon, HiveIcon, MssqlIcon, MysqlIcon, OracleIcon, PostgresIcon, S3Icon } from './assets';
 import { ConnectionBucketStyle, ConnectionProtocol } from './api';
 
 export const CONNECTION_TYPE_NAMES: Record<ConnectionType, string> = {
@@ -14,6 +16,17 @@ export const CONNECTION_TYPE_NAMES: Record<ConnectionType, string> = {
   [ConnectionType.S3]: 'S3',
 };
 
+export const CONNECTION_ICONS: Record<ConnectionType, ReactNode> = {
+  [ConnectionType.CLICKHOUSE]: <ClickhouseIcon />,
+  [ConnectionType.HDFS]: <HdfsIcon />,
+  [ConnectionType.HIVE]: <HiveIcon />,
+  [ConnectionType.MS_SQL]: <MssqlIcon />,
+  [ConnectionType.MY_SQL]: <MysqlIcon />,
+  [ConnectionType.ORACLE]: <OracleIcon />,
+  [ConnectionType.POSTGRES]: <PostgresIcon />,
+  [ConnectionType.S3]: <S3Icon />,
+};
+
 export const CONNECTION_TYPE_SELECT_OPTIONS = prepareOptionsForSelect({
   data: [
     { value: ConnectionType.CLICKHOUSE, label: CONNECTION_TYPE_NAMES[ConnectionType.CLICKHOUSE] },

src/entities/connection/ui/ConnectionTypeForm/components/ConnectionS3/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Form, Input, InputNumber, Select } from 'antd';
+import { Form, Input, InputNumber } from 'antd';
 import { CONNECTION_BUCKET_STYLE_SELECT_OPTIONS, CONNECTION_PROTOCOL_SELECT_OPTIONS } from '@entities/connection';
+import { Select } from '@shared/ui';
 
 import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
 import { ConnectionAuthS3 } from '../ConnectionAuthS3';

src/entities/connection/ui/ConnectionTypeForm/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Form, Select } from 'antd';
+import { Form } from 'antd';
 import { CONNECTION_TYPE_SELECT_OPTIONS } from '@entities/connection';
 import { Fieldset } from '@shared/ui';
+import { Select } from '@shared/ui';
 
 import { ConnectionTypeFormProps } from './types';
 import { CONNECTION_TYPE_COMPONENT, SensitiveFieldsContext } from './constants';

src/entities/transfer/ui/TransferConnectionClickhouse/index.tsx

@@ -6,7 +6,7 @@ import { TransferConnectionClickhouseProps } from './types';
 export const TransferConnectionClickhouse = ({ name }: TransferConnectionClickhouseProps) => {
   return (
     <Form.Item label="Table name" name={[name, 'table_name']} rules={[{ required: true }]}>
-      <Input size="large" />
+      <Input className="nodrag" size="large" />
     </Form.Item>
   );
 };

src/entities/transfer/ui/TransferConnectionHdfs/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { Form, Input, Select } from 'antd';
+import { Form, Input } from 'antd';
 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';
+import { Select } from '@shared/ui';
 
 import { TransferConnectionHdfsProps } from './types';
 
@@ -16,7 +17,7 @@ export const TransferConnectionHdfs = ({ name }: TransferConnectionHdfsProps) =>
         name={[name, 'directory_path']}
         rules={[{ required: true, pattern: ABSOLUTE_PATH_REGEXP }]}
       >
-        <Input size="large" />
+        <Input className="nodrag" size="large" />
       </Form.Item>
       <Form.Item label="File format" name={[name, 'file_format', 'type']} rules={[{ required: true }]}>
         <Select

src/entities/transfer/ui/TransferConnectionHive/index.tsx

@@ -6,7 +6,7 @@ import { TransferConnectionHiveProps } from './types';
 export const TransferConnectionHive = ({ name }: TransferConnectionHiveProps) => {
   return (
     <Form.Item label="Table name" name={[name, 'table_name']} rules={[{ required: true }]}>
-      <Input size="large" />
+      <Input className="nodrag" size="large" />
     </Form.Item>
   );
 };

src/entities/transfer/ui/TransferConnectionMsSql/index.tsx

@@ -6,7 +6,7 @@ import { TransferConnectionMsSqlProps } from './types';
 export const TransferConnectionMsSql = ({ name }: TransferConnectionMsSqlProps) => {
   return (
     <Form.Item label="Table name" name={[name, 'table_name']} rules={[{ required: true }]}>
-      <Input size="large" />
+      <Input className="nodrag" size="large" />
     </Form.Item>
   );
 };

src/entities/transfer/ui/TransferConnectionMySql/index.tsx

@@ -6,7 +6,7 @@ import { TransferConnectionMySqlProps } from './types';
 export const TransferConnectionMySql = ({ name }: TransferConnectionMySqlProps) => {
   return (
     <Form.Item label="Table name" name={[name, 'table_name']} rules={[{ required: true }]}>
-      <Input size="large" />
+      <Input className="nodrag" size="large" />
     </Form.Item>
   );
 };

src/entities/transfer/ui/TransferConnectionOracle/index.tsx

@@ -6,7 +6,7 @@ import { TransferConnectionOracleProps } from './types';
 export const TransferConnectionOracle = ({ name }: TransferConnectionOracleProps) => {
   return (
     <Form.Item label="Table name" name={[name, 'table_name']} rules={[{ required: true }]}>
-      <Input size="large" />
+      <Input className="nodrag" size="large" />
     </Form.Item>
   );
 };

src/entities/transfer/ui/TransferConnectionPostgres/index.tsx

@@ -6,7 +6,7 @@ import { TransferConnectionPostgresProps } from './types';
 export const TransferConnectionPostgres = ({ name }: TransferConnectionPostgresProps) => {
   return (
     <Form.Item label="Table name" name={[name, 'table_name']} rules={[{ required: true }]}>
-      <Input size="large" />
+      <Input className="nodrag" size="large" />
     </Form.Item>
   );
 };

src/entities/transfer/ui/TransferConnectionS3/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Form, Input, Select } from 'antd';
+import { Form, Input } from 'antd';
 import { ABSOLUTE_PATH_REGEXP } from '@shared/constants';
+import { Select } from '@shared/ui';
 
 import {
   TRANSFER_SOURCE_CONNECTION_FILE_FORMAT_SELECT_OPTIONS,
@@ -17,7 +18,7 @@ export const TransferConnectionS3 = ({ name }: TransferConnectionS3Props) => {
         name={[name, 'directory_path']}
         rules={[{ required: true, pattern: ABSOLUTE_PATH_REGEXP }]}
       >
-        <Input size="large" />
+        <Input className="nodrag" size="large" />
       </Form.Item>
       <Form.Item label="File format" name={[name, 'file_format', 'type']} rules={[{ required: true }]}>
         <Select

src/features/group/AddGroupUser/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ControlButtons, ManagedForm, ManagedSelect } from '@shared/ui';
-import { Form, Select } from 'antd';
+import { ControlButtons, ManagedForm, ManagedSelect, Select } from '@shared/ui';
+import { Form } from 'antd';
 import { GroupQueryKey, groupService, USER_ROLE_IN_GROUP_SELECT_OPTIONS } from '@entities/group';
 import { UserQueryKey, userService } from '@entities/user';
 

src/features/group/UpdateGroupUser/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ControlButtons, ManagedForm } from '@shared/ui';
-import { Form, Select, Typography } from 'antd';
+import { ControlButtons, ManagedForm, Select } from '@shared/ui';
+import { Form, Typography } from 'antd';
 import { GroupQueryKey, groupService, USER_ROLE_IN_GROUP_SELECT_OPTIONS } from '@entities/group';
 
 import { UpdateGroupUserForm, UpdateGroupUserProps } from './types';

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

@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { ConnectionQueryKey, connectionService } from '@entities/connection';
-import { Fieldset, ManagedSelect } from '@shared/ui';
+import { ManagedSelect } from '@shared/ui';
 import { Form, Input } from 'antd';
 
 import { useSelectConnectionType } from '../../hooks';
 
 import { SourceParamsProps } from './types';
 import { TRANSFER_SOURCE_CONNECTION_TYPE_COMPONENT } from './constants';
 
-export const SourceParams = ({ groupId, initialSourceConnectionType }: SourceParamsProps) => {
+export const SourceParams = memo(({ groupId, initialSourceConnectionType }: SourceParamsProps) => {
   const { selectedConnectionType, handleSelectConnection } = useSelectConnectionType({
     connectionParamFieldName: 'source_params',
     initialConnectionType: initialSourceConnectionType,
   });
 
   return (
-    <Fieldset title="Source connection">
+    <>
       <Form.Item label="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 */
@@ -35,6 +35,6 @@ export const SourceParams = ({ groupId, initialSourceConnectionType }: SourcePar
         <Input />
       </Form.Item>
       {TRANSFER_SOURCE_CONNECTION_TYPE_COMPONENT[selectedConnectionType!]}
-    </Fieldset>
+    </>
   );
-};
+});

src/features/transfer/MutateTransferForm/components/SourceParamsNode/SourceParamsNode.tsx

@@ -1,9 +1,35 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { CanvasNode } from '@shared/ui';
+import { Handle, Position } from '@xyflow/react';
+import { Form } from 'antd';
+import { CONNECTION_ICONS } from '@entities/connection';
+import { ConnectionType } from '@shared/types';
 
 import { SourceParams } from '../SourceParams';
+import { TransferCanvasEdge } from '../TransferConnectionsCanvas';
 
 import { SourceParamsNodeProps } from './types';
+import classes from './styles.module.less';
 
 export const SourceParamsNode = ({ data }: SourceParamsNodeProps) => {
-  return <SourceParams groupId={data.groupId} initialSourceConnectionType={data.initialSourceConnectionType} />;
+  const connectionType = Form.useWatch<ConnectionType>(['source_params', 'type']);
+
+  const icon = useMemo(() => {
+    return CONNECTION_ICONS[connectionType];
+  }, [connectionType]);
+
+  const children = useMemo(() => {
+    return (
+      <>
+        <SourceParams groupId={data.groupId} initialSourceConnectionType={data.initialSourceConnectionType} />
+        <Handle type="source" position={Position.Right} id={TransferCanvasEdge.SOURCE} />
+      </>
+    );
+  }, [data.groupId, data.initialSourceConnectionType]);
+
+  return (
+    <CanvasNode className={classes.root} title="Source" icon={icon}>
+      {children}
+    </CanvasNode>
+  );
 };

src/features/transfer/MutateTransferForm/components/SourceParamsNode/styles.module.less

@@ -0,0 +1,3 @@
+.root {
+  width: 300px;
+}

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

@@ -1,8 +1,8 @@
 import { Node, NodeProps } from '@xyflow/react';
 
 import { SourceParamsProps } from '../SourceParams';
+import { TransferCanvasNode } from '../TransferConnectionsCanvas';
 
-//TODO: [DOP-22354] change 'sourceParams' to NodeType.SOURCE
-export interface SourceParamsNodeData extends Node<SourceParamsProps, 'sourceParams'> {}
+export interface SourceParamsNodeData extends Node<SourceParamsProps, TransferCanvasNode.SOURCE> {}
 
 export interface SourceParamsNodeProps extends NodeProps<SourceParamsNodeData> {}

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

@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { ConnectionQueryKey, connectionService } from '@entities/connection';
-import { Fieldset, ManagedSelect } from '@shared/ui';
+import { ManagedSelect } from '@shared/ui';
 import { Form, Input } from 'antd';
 
 import { useSelectConnectionType } from '../../hooks';
 
 import { TargetParamsProps } from './types';
 import { TRANSFER_TARGET_CONNECTION_TYPE_COMPONENT } from './constants';
 
-export const TargetParams = ({ groupId, initialTargetConnectionType }: TargetParamsProps) => {
+export const TargetParams = memo(({ groupId, initialTargetConnectionType }: TargetParamsProps) => {
   const { selectedConnectionType, handleSelectConnection } = useSelectConnectionType({
     connectionParamFieldName: 'target_params',
     initialConnectionType: initialTargetConnectionType,
   });
 
   return (
-    <Fieldset title="Target connection">
+    <>
       <Form.Item label="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 */
@@ -35,6 +35,6 @@ export const TargetParams = ({ groupId, initialTargetConnectionType }: TargetPar
         <Input />
       </Form.Item>
       {TRANSFER_TARGET_CONNECTION_TYPE_COMPONENT[selectedConnectionType!]}
-    </Fieldset>
+    </>
   );
-};
+});