[DOP-22196] add clickhouse, mssql, mysql connection types

src/entities/connection/api/types.ts

@@ -7,7 +7,15 @@ export type Connection = {
   description: string;
 } & ConnectionData;
 
-export type ConnectionData = ConnectionHive | ConnectionHdfs | ConnectionOracle | ConnectionPostgres | ConnectionS3;
+export type ConnectionData =
+  | ConnectionHive
+  | ConnectionHdfs
+  | ConnectionOracle
+  | ConnectionPostgres
+  | ConnectionClickhouse
+  | ConnectionMySql
+  | ConnectionMsSql
+  | ConnectionS3;
 
 export type ConnectionBucketStyle = 'domain' | 'path';
 
@@ -66,6 +74,48 @@ export interface ConnectionPostgres {
   };
 }
 
+export interface ConnectionClickhouse {
+  auth_data: {
+    type: ConnectionType.CLICKHOUSE;
+    user: string;
+    password?: string;
+  };
+  connection_data: {
+    type: ConnectionType.CLICKHOUSE;
+    host: string;
+    port: number;
+    database_name: string;
+  };
+}
+
+export interface ConnectionMySql {
+  auth_data: {
+    type: ConnectionType.MY_SQL;
+    user: string;
+    password?: string;
+  };
+  connection_data: {
+    type: ConnectionType.MY_SQL;
+    host: string;
+    port: number;
+    database_name: string;
+  };
+}
+
+export interface ConnectionMsSql {
+  auth_data: {
+    type: ConnectionType.MS_SQL;
+    user: string;
+    password?: string;
+  };
+  connection_data: {
+    type: ConnectionType.MS_SQL;
+    host: string;
+    port: number;
+    database_name: string;
+  };
+}
+
 export interface ConnectionS3 {
   auth_data: {
     type: ConnectionType.S3;

src/entities/connection/constants.ts

@@ -3,10 +3,30 @@ import { prepareOptionsForSelect } from '@shared/ui';
 
 import { ConnectionBucketStyle, ConnectionProtocol } from './api';
 
-export const CONNECTION_TYPE_SELECT_OPTIONS = prepareOptionsForSelect<ConnectionType>({
-  data: Object.values(ConnectionType),
-  renderLabel: (data) => data,
-  renderValue: (data) => data,
+export const CONNECTION_TYPE_NAMES: Record<ConnectionType, string> = {
+  [ConnectionType.CLICKHOUSE]: 'ClickHouse',
+  [ConnectionType.HDFS]: 'HDFS',
+  [ConnectionType.HIVE]: 'Hive',
+  [ConnectionType.MS_SQL]: 'MSSQL',
+  [ConnectionType.MY_SQL]: 'MySQL',
+  [ConnectionType.ORACLE]: 'Oracle',
+  [ConnectionType.POSTGRES]: 'Postgres',
+  [ConnectionType.S3]: 'S3',
+};
+
+export const CONNECTION_TYPE_SELECT_OPTIONS = prepareOptionsForSelect({
+  data: [
+    { value: ConnectionType.CLICKHOUSE, label: CONNECTION_TYPE_NAMES[ConnectionType.CLICKHOUSE] },
+    { value: ConnectionType.HDFS, label: CONNECTION_TYPE_NAMES[ConnectionType.HDFS] },
+    { value: ConnectionType.HIVE, label: CONNECTION_TYPE_NAMES[ConnectionType.HIVE] },
+    { value: ConnectionType.MS_SQL, label: CONNECTION_TYPE_NAMES[ConnectionType.MS_SQL] },
+    { value: ConnectionType.MY_SQL, label: CONNECTION_TYPE_NAMES[ConnectionType.MY_SQL] },
+    { value: ConnectionType.ORACLE, label: CONNECTION_TYPE_NAMES[ConnectionType.ORACLE] },
+    { value: ConnectionType.POSTGRES, label: CONNECTION_TYPE_NAMES[ConnectionType.POSTGRES] },
+    { value: ConnectionType.S3, label: CONNECTION_TYPE_NAMES[ConnectionType.S3] },
+  ],
+  renderLabel: (data) => data.label,
+  renderValue: (data) => data.value,
 });
 
 export const CONNECTION_BUCKET_STYLE_SELECT_OPTIONS = prepareOptionsForSelect<ConnectionBucketStyle>({

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Input, InputNumber } from 'antd';
+
+import { useSensitiveFields } from '../../hooks';
+import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
+
+export const ConnectionClickhouse = () => {
+  const { isRequired } = useSensitiveFields();
+
+  return (
+    <>
+      <Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Host" name="host" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Port" name="port" rules={[{ required: true }]}>
+        <InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} />
+      </Form.Item>
+      <Form.Item label="User" name="user" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
+        <Input.Password size="large" />
+      </Form.Item>
+    </>
+  );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Input, InputNumber } from 'antd';
+
+import { useSensitiveFields } from '../../hooks';
+import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
+
+export const ConnectionMsSql = () => {
+  const { isRequired } = useSensitiveFields();
+
+  return (
+    <>
+      <Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Host" name="host" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Port" name="port" rules={[{ required: true }]}>
+        <InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} />
+      </Form.Item>
+      <Form.Item label="User" name="user" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
+        <Input.Password size="large" />
+      </Form.Item>
+    </>
+  );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Input, InputNumber } from 'antd';
+
+import { useSensitiveFields } from '../../hooks';
+import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
+
+export const ConnectionMySql = () => {
+  const { isRequired } = useSensitiveFields();
+
+  return (
+    <>
+      <Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Host" name="host" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Port" name="port" rules={[{ required: true }]}>
+        <InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} />
+      </Form.Item>
+      <Form.Item label="User" name="user" rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
+        <Input.Password size="large" />
+      </Form.Item>
+    </>
+  );
+};

src/entities/connection/ui/ConnectionTypeForm/components/index.ts

@@ -3,3 +3,6 @@ export * from './ConnectionHive';
 export * from './ConnectionOracle';
 export * from './ConnectionPostgres';
 export * from './ConnectionS3';
+export * from './ConnectionClickhouse';
+export * from './ConnectionMySql';
+export * from './ConnectionMsSql';

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

@@ -3,7 +3,16 @@ import { createContext } from 'react';
 import { ConnectionType } from '@shared/types';
 
 import { SensitiveFieldsContextProps } from './types';
-import { ConnectionHdfs, ConnectionHive, ConnectionOracle, ConnectionPostgres, ConnectionS3 } from './components';
+import {
+  ConnectionClickhouse,
+  ConnectionHdfs,
+  ConnectionHive,
+  ConnectionMsSql,
+  ConnectionMySql,
+  ConnectionOracle,
+  ConnectionPostgres,
+  ConnectionS3,
+} from './components';
 
 const SENSITIVE_FIELDS_CONTEXT_INITIAL_VALUE: SensitiveFieldsContextProps = {
   isRequired: true,
@@ -21,5 +30,8 @@ export const CONNECTION_TYPE_COMPONENT = {
   [ConnectionType.HIVE]: <ConnectionHive />,
   [ConnectionType.ORACLE]: <ConnectionOracle />,
   [ConnectionType.POSTGRES]: <ConnectionPostgres />,
+  [ConnectionType.CLICKHOUSE]: <ConnectionClickhouse />,
+  [ConnectionType.MY_SQL]: <ConnectionMySql />,
+  [ConnectionType.MS_SQL]: <ConnectionMsSql />,
   [ConnectionType.S3]: <ConnectionS3 />,
 };

src/entities/connection/utils/adaptConnectionClickhouse/index.ts

@@ -0,0 +1,20 @@
+import { ConnectionClickhouse } from '../../api';
+
+import { AdaptConnectionClickhouseProps } from './types';
+
+/* Util for creating a ConnectionData object for "Clickhouse" connection by its fields */
+export const adaptConnectionClickhouse = (data: AdaptConnectionClickhouseProps): ConnectionClickhouse => {
+  return {
+    auth_data: {
+      type: data.type,
+      user: data.user,
+      password: data.password,
+    },
+    connection_data: {
+      type: data.type,
+      database_name: data.database_name,
+      host: data.host,
+      port: data.port,
+    },
+  };
+};

src/entities/connection/utils/adaptConnectionClickhouse/types.ts

@@ -0,0 +1,4 @@
+import { ConnectionClickhouse } from '../../api';
+
+export type AdaptConnectionClickhouseProps = ConnectionClickhouse['auth_data'] &
+  ConnectionClickhouse['connection_data'];

src/entities/connection/utils/adaptConnectionMsSql/index.ts

@@ -0,0 +1,20 @@
+import { ConnectionMsSql } from '../../api';
+
+import { AdaptConnectionMsSqlProps } from './types';
+
+/* Util for creating a ConnectionData object for "MsSQL" connection by its fields */
+export const adaptConnectionMsSql = (data: AdaptConnectionMsSqlProps): ConnectionMsSql => {
+  return {
+    auth_data: {
+      type: data.type,
+      user: data.user,
+      password: data.password,
+    },
+    connection_data: {
+      type: data.type,
+      database_name: data.database_name,
+      host: data.host,
+      port: data.port,
+    },
+  };
+};

src/entities/connection/utils/adaptConnectionMsSql/types.ts

@@ -0,0 +1,3 @@
+import { ConnectionMsSql } from '../../api';
+
+export type AdaptConnectionMsSqlProps = ConnectionMsSql['auth_data'] & ConnectionMsSql['connection_data'];

src/entities/connection/utils/adaptConnectionMySql/index.ts

@@ -0,0 +1,20 @@
+import { ConnectionMySql } from '../../api';
+
+import { AdaptConnectionMySqlProps } from './types';
+
+/* Util for creating a ConnectionData object for "MySQL" connection by its fields */
+export const adaptConnectionMySql = (data: AdaptConnectionMySqlProps): ConnectionMySql => {
+  return {
+    auth_data: {
+      type: data.type,
+      user: data.user,
+      password: data.password,
+    },
+    connection_data: {
+      type: data.type,
+      database_name: data.database_name,
+      host: data.host,
+      port: data.port,
+    },
+  };
+};

src/entities/connection/utils/adaptConnectionMySql/types.ts

@@ -0,0 +1,3 @@
+import { ConnectionMySql } from '../../api';
+
+export type AdaptConnectionMySqlProps = ConnectionMySql['auth_data'] & ConnectionMySql['connection_data'];

src/entities/connection/utils/index.ts

@@ -3,3 +3,6 @@ export * from './adaptConnectionHive';
 export * from './adaptConnectionOracle';
 export * from './adaptConnectionPostgres';
 export * from './adaptConnectionS3';
+export * from './adaptConnectionClickhouse';
+export * from './adaptConnectionMySql';
+export * from './adaptConnectionMsSql';

src/entities/transfer/api/types.ts

@@ -12,12 +12,18 @@ export interface Transfer {
     | TransferParamsHive
     | TransferParamsOracle
     | TransferParamsPostgres
+    | TransferParamsClickhouse
+    | TransferParamsMsSql
+    | TransferParamsMySql
     | TransferSourceParamsHdfs
     | TransferSourceParamsS3;
   target_params:
     | TransferParamsHive
     | TransferParamsOracle
     | TransferParamsPostgres
+    | TransferParamsClickhouse
+    | TransferParamsMsSql
+    | TransferParamsMySql
     | TransferTargetParamsHdfs
     | TransferTargetParamsS3;
   strategy_params: TransferStrategyParams;
@@ -46,6 +52,21 @@ interface TransferParamsPostgres {
   table_name: string;
 }
 
+interface TransferParamsMySql {
+  type: ConnectionType.MY_SQL;
+  table_name: string;
+}
+
+interface TransferParamsMsSql {
+  type: ConnectionType.MS_SQL;
+  table_name: string;
+}
+
+interface TransferParamsClickhouse {
+  type: ConnectionType.CLICKHOUSE;
+  table_name: string;
+}
+
 interface TransferParamsHdfs {
   type: ConnectionType.HDFS;
   directory_path: string;

src/features/connection/ConnectionDetailInfo/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Descriptions } from 'antd';
 import { Link } from 'react-router-dom';
+import { CONNECTION_TYPE_NAMES } from '@entities/connection';
 
 import { ConnectionDetailInfoProps } from './types';
 import { getConnectionAuthData, getConnectionData } from './utils';
@@ -21,7 +22,7 @@ export const ConnectionDetailInfo = ({ connection, group, ...props }: Connection
         <Link to={`/groups/${group.id}`}>{group.name}</Link>
       </Descriptions.Item>
       <Descriptions.Item label="Type" span={3}>
-        {connection.connection_data.type}
+        {CONNECTION_TYPE_NAMES[connection.connection_data.type]}
       </Descriptions.Item>
       {getConnectionAuthData({ data: connection.auth_data }).map((item, index) => (
         <Descriptions.Item label={item.label} span={3} key={index}>

src/features/connection/ConnectionDetailInfo/utils/getConnectionAuthData/index.ts

@@ -16,6 +16,9 @@ export const getConnectionAuthData = ({ data }: GetDescriptionItemsProps): Descr
     case ConnectionType.HDFS:
     case ConnectionType.ORACLE:
     case ConnectionType.POSTGRES:
+    case ConnectionType.CLICKHOUSE:
+    case ConnectionType.MY_SQL:
+    case ConnectionType.MS_SQL:
       return [
         {
           label: 'User',

src/features/connection/ConnectionDetailInfo/utils/getConnectionData/index.ts

@@ -21,6 +21,9 @@ export const getConnectionData = ({ data }: GetDescriptionItemsProps): Descripti
         },
       ];
     case ConnectionType.POSTGRES:
+    case ConnectionType.CLICKHOUSE:
+    case ConnectionType.MY_SQL:
+    case ConnectionType.MS_SQL:
       return [
         {
           label: 'Database name',