Skip to content

Commit

Permalink
[DOP-23004] refactor connection types and forms (#55)
Browse files Browse the repository at this point in the history 
Co-authored-by: Zabilsya <kvcherniko@mts.ru>
  • Loading branch information
@Zabilsya
Zabilsya and Zabilsya authored Dec 26, 2024
1 parent 6233c25 commit 2438779
Show file tree
Hide file tree
Showing 49 changed files with 198 additions and 532 deletions.
81 changes: 33 additions & 48 deletions src/entities/connection/api/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,38 +21,43 @@ export type ConnectionBucketStyle = 'domain' | 'path';

export type ConnectionProtocol = 'https' | 'http';

export enum ConnectionAuthType {
BASIC = 'basic',
S3 = 's3',
}

interface ConnectionAuthBasic {
type: ConnectionAuthType.BASIC;
user: string;
password?: string;
}

interface ConnectionAuthS3 {
type: ConnectionAuthType.S3;
access_key: string;
secret_key?: string;
}

export interface ConnectionHive {
auth_data: {
type: ConnectionType.HIVE;
user: string;
password?: string;
};
type: ConnectionType.HIVE;
auth_data: ConnectionAuthBasic;
connection_data: {
type: ConnectionType.HIVE;
cluster: string;
};
}

export interface ConnectionHdfs {
auth_data: {
type: ConnectionType.HDFS;
user: string;
password?: string;
};
type: ConnectionType.HDFS;
auth_data: ConnectionAuthBasic;
connection_data: {
type: ConnectionType.HDFS;
cluster: string;
};
}

export interface ConnectionOracle {
auth_data: {
type: ConnectionType.ORACLE;
user: string;
password?: string;
};
type: ConnectionType.ORACLE;
auth_data: ConnectionAuthBasic;
connection_data: {
type: ConnectionType.ORACLE;
host: string;
port: number;
service_name: string | null;
Expand All @@ -61,69 +66,49 @@ export interface ConnectionOracle {
}

export interface ConnectionPostgres {
auth_data: {
type: ConnectionType.POSTGRES;
user: string;
password?: string;
};
type: ConnectionType.POSTGRES;
auth_data: ConnectionAuthBasic;
connection_data: {
type: ConnectionType.POSTGRES;
host: string;
port: number;
database_name: string;
};
}

export interface ConnectionClickhouse {
auth_data: {
type: ConnectionType.CLICKHOUSE;
user: string;
password?: string;
};
type: ConnectionType.CLICKHOUSE;
auth_data: ConnectionAuthBasic;
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;
};
type: ConnectionType.MY_SQL;
auth_data: ConnectionAuthBasic;
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;
};
type: ConnectionType.MS_SQL;
auth_data: ConnectionAuthBasic;
connection_data: {
type: ConnectionType.MS_SQL;
host: string;
port: number;
database_name: string;
};
}

export interface ConnectionS3 {
auth_data: {
type: ConnectionType.S3;
access_key: string;
secret_key?: string;
};
type: ConnectionType.S3;
auth_data: ConnectionAuthS3;
connection_data: {
type: ConnectionType.S3;
host: string;
bucket: string;
bucket_style: ConnectionBucketStyle;
Expand Down
1 change: 0 additions & 1 deletion src/entities/connection/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export * from './api';
export * from './constants';
export * from './ui';
export * from './utils';
20 changes: 20 additions & 0 deletions src/entities/connection/ui/ConnectionTypeForm/components/ConnectionAuthBasic/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import { Form, Input } from 'antd';

import { useSensitiveFields } from '../../hooks';

export const ConnectionAuthBasic = () => {
const { isRequired } = useSensitiveFields();

return (
<>
<Form.Item name={['auth_data', 'type']} hidden />
<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>
</>
);
};
20 changes: 20 additions & 0 deletions src/entities/connection/ui/ConnectionTypeForm/components/ConnectionAuthS3/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import { Form, Input } from 'antd';

import { useSensitiveFields } from '../../hooks';

export const ConnectionAuthS3 = () => {
const { isRequired } = useSensitiveFields();

return (
<>
<Form.Item name={['auth_data', 'type']} hidden />
<Form.Item label="Access key" name={['auth_data', 'access_key']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Secret key" name={['auth_data', 'secret_key']} rules={[{ required: isRequired }]}>
<Input.Password size="large" />
</Form.Item>
</>
);
};
17 changes: 5 additions & 12 deletions src/entities/connection/ui/ConnectionTypeForm/components/ConnectionClickhouse/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import React from 'react';
import { Form, Input, InputNumber } from 'antd';

import { useSensitiveFields } from '../../hooks';
import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';

export const ConnectionClickhouse = () => {
const { isRequired } = useSensitiveFields();

return (
<>
<Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
<Form.Item label="Database name" name={['connection_data', 'database_name']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Host" name="host" rules={[{ required: true }]}>
<Form.Item label="Host" name={['connection_data', 'host']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Port" name="port" rules={[{ required: true }]}>
<Form.Item label="Port" name={['connection_data', '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>
<ConnectionAuthBasic />
</>
);
};
13 changes: 3 additions & 10 deletions src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHdfs/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
import React from 'react';
import { Form, Input } from 'antd';

import { useSensitiveFields } from '../../hooks';
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';

export const ConnectionHdfs = () => {
const { isRequired } = useSensitiveFields();

return (
<>
<Form.Item label="Cluster" name="cluster" rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="User" name="user" rules={[{ required: true }]}>
<Form.Item label="Cluster" name={['connection_data', 'cluster']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
<Input.Password size="large" />
</Form.Item>
<ConnectionAuthBasic />
</>
);
};
13 changes: 3 additions & 10 deletions src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHive/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
import React from 'react';
import { Form, Input } from 'antd';

import { useSensitiveFields } from '../../hooks';
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';

export const ConnectionHive = () => {
const { isRequired } = useSensitiveFields();

return (
<>
<Form.Item label="Cluster" name="cluster" rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="User" name="user" rules={[{ required: true }]}>
<Form.Item label="Cluster" name={['connection_data', 'cluster']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
<Input.Password size="large" />
</Form.Item>
<ConnectionAuthBasic />
</>
);
};
17 changes: 5 additions & 12 deletions src/entities/connection/ui/ConnectionTypeForm/components/ConnectionMsSql/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import React from 'react';
import { Form, Input, InputNumber } from 'antd';

import { useSensitiveFields } from '../../hooks';
import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';

export const ConnectionMsSql = () => {
const { isRequired } = useSensitiveFields();

return (
<>
<Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
<Form.Item label="Database name" name={['connection_data', 'database_name']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Host" name="host" rules={[{ required: true }]}>
<Form.Item label="Host" name={['connection_data', 'host']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Port" name="port" rules={[{ required: true }]}>
<Form.Item label="Port" name={['connection_data', '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>
<ConnectionAuthBasic />
</>
);
};
17 changes: 5 additions & 12 deletions src/entities/connection/ui/ConnectionTypeForm/components/ConnectionMySql/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import React from 'react';
import { Form, Input, InputNumber } from 'antd';

import { useSensitiveFields } from '../../hooks';
import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';

export const ConnectionMySql = () => {
const { isRequired } = useSensitiveFields();

return (
<>
<Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
<Form.Item label="Database name" name={['connection_data', 'database_name']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Host" name="host" rules={[{ required: true }]}>
<Form.Item label="Host" name={['connection_data', 'host']} rules={[{ required: true }]}>
<Input size="large" />
</Form.Item>
<Form.Item label="Port" name="port" rules={[{ required: true }]}>
<Form.Item label="Port" name={['connection_data', '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>
<ConnectionAuthBasic />
</>
);
};
Loading

0 comments on commit 2438779

Please sign in to comment.