[DOP-22298] add new connection types (#75)

Co-authored-by: Zabilsya <[email protected]>

Author: Zabilsya

src/entities/connection/api/types.ts

@@ -8,22 +8,32 @@ export type Connection = {
 } & ConnectionData;
 
 export type ConnectionData =
-  | ConnectionHive
+  | ConnectionFtp
+  | ConnectionFtps
+  | ConnectionSftp
+  | ConnectionWebdav
+  | ConnectionSamba
   | ConnectionHdfs
+  | ConnectionS3
+  | ConnectionHive
   | ConnectionOracle
   | ConnectionPostgres
   | ConnectionClickhouse
   | ConnectionMySql
-  | ConnectionMsSql
-  | ConnectionS3;
+  | ConnectionMsSql;
 
 export type ConnectionBucketStyle = 'domain' | 'path';
 
 export type ConnectionProtocol = 'https' | 'http';
 
+export type ConnectionSambaProtocol = 'SMB' | 'NetBIOS';
+
+export type ConnectionSambaAuthType = 'NTLMv1' | 'NTLMv2';
+
 export enum ConnectionAuthType {
   BASIC = 'basic',
   S3 = 's3',
+  SAMBA = 'samba',
 }
 
 interface ConnectionAuthBasic {
@@ -38,6 +48,13 @@ interface ConnectionAuthS3 {
   secret_key?: string;
 }
 
+interface ConnectionAuthSamba {
+  type: ConnectionAuthType.SAMBA;
+  user: string;
+  password?: string;
+  auth_type: ConnectionSambaAuthType;
+}
+
 export interface ConnectionHive {
   type: ConnectionType.HIVE;
   auth_data: ConnectionAuthBasic;
@@ -81,7 +98,7 @@ export interface ConnectionClickhouse {
   connection_data: {
     host: string;
     port: number;
-    database_name: string;
+    database_name: string | null;
   };
 }
 
@@ -105,6 +122,55 @@ export interface ConnectionMsSql {
   };
 }
 
+export interface ConnectionFtp {
+  type: ConnectionType.FTP;
+  auth_data: ConnectionAuthBasic;
+  connection_data: {
+    host: string;
+    port: number;
+  };
+}
+
+export interface ConnectionFtps {
+  type: ConnectionType.FTPS;
+  auth_data: ConnectionAuthBasic;
+  connection_data: {
+    host: string;
+    port: number;
+  };
+}
+
+export interface ConnectionSftp {
+  type: ConnectionType.SFTP;
+  auth_data: ConnectionAuthBasic;
+  connection_data: {
+    host: string;
+    port: number;
+  };
+}
+
+export interface ConnectionWebdav {
+  type: ConnectionType.WEBDAV;
+  auth_data: ConnectionAuthBasic;
+  connection_data: {
+    host: string;
+    port: number | null;
+    protocol: ConnectionProtocol;
+  };
+}
+
+export interface ConnectionSamba {
+  type: ConnectionType.SAMBA;
+  auth_data: ConnectionAuthSamba;
+  connection_data: {
+    host: string;
+    share: string;
+    port: number | null;
+    protocol: ConnectionSambaProtocol;
+    domain: string;
+  };
+}
+
 export interface ConnectionS3 {
   type: ConnectionType.S3;
   auth_data: ConnectionAuthS3;

src/entities/connection/assets/ftp.svg

@@ -6,5 +6,22 @@ import MssqlIcon from './mssql.svg';
 import MysqlIcon from './mysql.svg';
 import OracleIcon from './oracle.svg';
 import PostgresIcon from './postgres.svg';
+import WebDavIcon from './webdav.svg';
+import SambaIcon from './samba.svg';
+import FtpIcon from './ftp.svg';
+import SftpIcon from './sftp.svg';
 
-export { ClickhouseIcon, HdfsIcon, HiveIcon, MssqlIcon, MysqlIcon, OracleIcon, PostgresIcon, S3Icon };
+export {
+  ClickhouseIcon,
+  HdfsIcon,
+  HiveIcon,
+  MssqlIcon,
+  MysqlIcon,
+  OracleIcon,
+  PostgresIcon,
+  S3Icon,
+  WebDavIcon,
+  SambaIcon,
+  FtpIcon,
+  SftpIcon,
+};

src/entities/connection/assets/index.ts

@@ -2,41 +2,69 @@ 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 {
+  ClickhouseIcon,
+  FtpIcon,
+  HdfsIcon,
+  HiveIcon,
+  MssqlIcon,
+  MysqlIcon,
+  OracleIcon,
+  PostgresIcon,
+  S3Icon,
+  SambaIcon,
+  SftpIcon,
+  WebDavIcon,
+} from './assets';
 import { ConnectionBucketStyle, ConnectionProtocol } from './api';
 
 export const CONNECTION_TYPE_NAMES: Record<ConnectionType, string> = {
-  [ConnectionType.CLICKHOUSE]: 'ClickHouse',
+  [ConnectionType.FTP]: 'FTP',
+  [ConnectionType.FTPS]: 'FTPS',
+  [ConnectionType.SFTP]: 'SFTP',
+  [ConnectionType.WEBDAV]: 'WebDAV',
+  [ConnectionType.SAMBA]: 'Samba',
   [ConnectionType.HDFS]: 'HDFS',
+  [ConnectionType.S3]: 'S3',
+  [ConnectionType.CLICKHOUSE]: 'ClickHouse',
   [ConnectionType.HIVE]: 'Hive',
   [ConnectionType.MS_SQL]: 'MSSQL',
   [ConnectionType.MY_SQL]: 'MySQL',
   [ConnectionType.ORACLE]: 'Oracle',
   [ConnectionType.POSTGRES]: 'Postgres',
-  [ConnectionType.S3]: 'S3',
 };
 
 export const CONNECTION_ICONS: Record<ConnectionType, ReactNode> = {
-  [ConnectionType.CLICKHOUSE]: <ClickhouseIcon />,
+  [ConnectionType.FTP]: <FtpIcon />,
+  [ConnectionType.FTPS]: <FtpIcon />,
+  [ConnectionType.SFTP]: <SftpIcon />,
+  [ConnectionType.WEBDAV]: <WebDavIcon />,
+  [ConnectionType.SAMBA]: <SambaIcon />,
   [ConnectionType.HDFS]: <HdfsIcon />,
+  [ConnectionType.S3]: <S3Icon />,
+  [ConnectionType.CLICKHOUSE]: <ClickhouseIcon />,
   [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] },
+    { value: ConnectionType.FTP, label: CONNECTION_TYPE_NAMES[ConnectionType.FTP] },
+    { value: ConnectionType.FTPS, label: CONNECTION_TYPE_NAMES[ConnectionType.FTPS] },
     { 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.SAMBA, label: CONNECTION_TYPE_NAMES[ConnectionType.SAMBA] },
+    { value: ConnectionType.SFTP, label: CONNECTION_TYPE_NAMES[ConnectionType.SFTP] },
     { value: ConnectionType.S3, label: CONNECTION_TYPE_NAMES[ConnectionType.S3] },
+    { value: ConnectionType.WEBDAV, label: CONNECTION_TYPE_NAMES[ConnectionType.WEBDAV] },
   ],
   renderLabel: (data) => data.label,
   renderValue: (data) => data.value,

src/entities/connection/assets/samba.svg

@@ -0,0 +1,8 @@
+import { ConnectionSambaAuthType } from '@entities/connection';
+import { prepareOptionsForSelect } from '@shared/ui';
+
+export const CONNECTION_SAMBA_AUTH_TYPE_SELECT_OPTIONS = prepareOptionsForSelect<ConnectionSambaAuthType>({
+  data: ['NTLMv1', 'NTLMv2'],
+  renderLabel: (data) => data,
+  renderValue: (data) => data,
+});

src/entities/connection/assets/sftp.svg

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { Select } from '@shared/ui';
+
+import { useSensitiveFields } from '../../hooks';
+
+import { CONNECTION_SAMBA_AUTH_TYPE_SELECT_OPTIONS } from './constants';
+
+export const ConnectionAuthSamba = () => {
+  const { isRequired } = useSensitiveFields();
+
+  return (
+    <>
+      {/* Hide Form.Item control, because its value is set in 'useSelectConnectionType' hook */}
+      <Form.Item name={['auth_data', 'type']} hidden>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="User" name={['auth_data', 'user']} rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label="Password" name={['auth_data', 'password']} rules={[{ required: isRequired }]}>
+        <Input.Password size="large" />
+      </Form.Item>
+      <Form.Item name={['auth_data', 'auth_type']}>
+        <Select
+          size="large"
+          options={CONNECTION_SAMBA_AUTH_TYPE_SELECT_OPTIONS}
+          placeholder="Select connection protocol"
+        />
+      </Form.Item>
+    </>
+  );
+};

src/entities/connection/assets/webdav.svg

@@ -7,7 +7,7 @@ import { ConnectionAuthBasic } from '../ConnectionAuthBasic';
 export const ConnectionClickhouse = () => {
   return (
     <>
-      <Form.Item label="Database name" name={['connection_data', 'database_name']} rules={[{ required: true }]}>
+      <Form.Item label="Database name" name={['connection_data', 'database_name']}>
         <Input size="large" />
       </Form.Item>
       <Form.Item label="Host" name={['connection_data', 'host']} rules={[{ required: true }]}>