Skip to content

Commit 2438779

Browse files
ZabilsyaZabilsya
andauthored
[DOP-23004] refactor connection types and forms (#55)
Co-authored-by: Zabilsya <[email protected]>
1 parent 6233c25 commit 2438779

File tree

49 files changed

+198
-532
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+198
-532
lines changed

src/entities/connection/api/types.ts

Lines changed: 33 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -21,38 +21,43 @@ export type ConnectionBucketStyle = 'domain' | 'path';
2121

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

24+
export enum ConnectionAuthType {
25+
BASIC = 'basic',
26+
S3 = 's3',
27+
}
28+
29+
interface ConnectionAuthBasic {
30+
type: ConnectionAuthType.BASIC;
31+
user: string;
32+
password?: string;
33+
}
34+
35+
interface ConnectionAuthS3 {
36+
type: ConnectionAuthType.S3;
37+
access_key: string;
38+
secret_key?: string;
39+
}
40+
2441
export interface ConnectionHive {
25-
auth_data: {
26-
type: ConnectionType.HIVE;
27-
user: string;
28-
password?: string;
29-
};
42+
type: ConnectionType.HIVE;
43+
auth_data: ConnectionAuthBasic;
3044
connection_data: {
31-
type: ConnectionType.HIVE;
3245
cluster: string;
3346
};
3447
}
3548

3649
export interface ConnectionHdfs {
37-
auth_data: {
38-
type: ConnectionType.HDFS;
39-
user: string;
40-
password?: string;
41-
};
50+
type: ConnectionType.HDFS;
51+
auth_data: ConnectionAuthBasic;
4252
connection_data: {
43-
type: ConnectionType.HDFS;
4453
cluster: string;
4554
};
4655
}
4756

4857
export interface ConnectionOracle {
49-
auth_data: {
50-
type: ConnectionType.ORACLE;
51-
user: string;
52-
password?: string;
53-
};
58+
type: ConnectionType.ORACLE;
59+
auth_data: ConnectionAuthBasic;
5460
connection_data: {
55-
type: ConnectionType.ORACLE;
5661
host: string;
5762
port: number;
5863
service_name: string | null;
@@ -61,69 +66,49 @@ export interface ConnectionOracle {
6166
}
6267

6368
export interface ConnectionPostgres {
64-
auth_data: {
65-
type: ConnectionType.POSTGRES;
66-
user: string;
67-
password?: string;
68-
};
69+
type: ConnectionType.POSTGRES;
70+
auth_data: ConnectionAuthBasic;
6971
connection_data: {
70-
type: ConnectionType.POSTGRES;
7172
host: string;
7273
port: number;
7374
database_name: string;
7475
};
7576
}
7677

7778
export interface ConnectionClickhouse {
78-
auth_data: {
79-
type: ConnectionType.CLICKHOUSE;
80-
user: string;
81-
password?: string;
82-
};
79+
type: ConnectionType.CLICKHOUSE;
80+
auth_data: ConnectionAuthBasic;
8381
connection_data: {
84-
type: ConnectionType.CLICKHOUSE;
8582
host: string;
8683
port: number;
8784
database_name: string;
8885
};
8986
}
9087

9188
export interface ConnectionMySql {
92-
auth_data: {
93-
type: ConnectionType.MY_SQL;
94-
user: string;
95-
password?: string;
96-
};
89+
type: ConnectionType.MY_SQL;
90+
auth_data: ConnectionAuthBasic;
9791
connection_data: {
98-
type: ConnectionType.MY_SQL;
9992
host: string;
10093
port: number;
10194
database_name: string;
10295
};
10396
}
10497

10598
export interface ConnectionMsSql {
106-
auth_data: {
107-
type: ConnectionType.MS_SQL;
108-
user: string;
109-
password?: string;
110-
};
99+
type: ConnectionType.MS_SQL;
100+
auth_data: ConnectionAuthBasic;
111101
connection_data: {
112-
type: ConnectionType.MS_SQL;
113102
host: string;
114103
port: number;
115104
database_name: string;
116105
};
117106
}
118107

119108
export interface ConnectionS3 {
120-
auth_data: {
121-
type: ConnectionType.S3;
122-
access_key: string;
123-
secret_key?: string;
124-
};
109+
type: ConnectionType.S3;
110+
auth_data: ConnectionAuthS3;
125111
connection_data: {
126-
type: ConnectionType.S3;
127112
host: string;
128113
bucket: string;
129114
bucket_style: ConnectionBucketStyle;

src/entities/connection/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
export * from './api';
22
export * from './constants';
33
export * from './ui';
4-
export * from './utils';
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Form, Input } from 'antd';
3+
4+
import { useSensitiveFields } from '../../hooks';
5+
6+
export const ConnectionAuthBasic = () => {
7+
const { isRequired } = useSensitiveFields();
8+
9+
return (
10+
<>
11+
<Form.Item name={['auth_data', 'type']} hidden />
12+
<Form.Item label="User" name={['auth_data', 'user']} rules={[{ required: true }]}>
13+
<Input size="large" />
14+
</Form.Item>
15+
<Form.Item label="Password" name={['auth_data', 'password']} rules={[{ required: isRequired }]}>
16+
<Input.Password size="large" />
17+
</Form.Item>
18+
</>
19+
);
20+
};
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Form, Input } from 'antd';
3+
4+
import { useSensitiveFields } from '../../hooks';
5+
6+
export const ConnectionAuthS3 = () => {
7+
const { isRequired } = useSensitiveFields();
8+
9+
return (
10+
<>
11+
<Form.Item name={['auth_data', 'type']} hidden />
12+
<Form.Item label="Access key" name={['auth_data', 'access_key']} rules={[{ required: true }]}>
13+
<Input size="large" />
14+
</Form.Item>
15+
<Form.Item label="Secret key" name={['auth_data', 'secret_key']} rules={[{ required: isRequired }]}>
16+
<Input.Password size="large" />
17+
</Form.Item>
18+
</>
19+
);
20+
};
Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,22 @@
11
import React from 'react';
22
import { Form, Input, InputNumber } from 'antd';
33

4-
import { useSensitiveFields } from '../../hooks';
54
import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
5+
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';
66

77
export const ConnectionClickhouse = () => {
8-
const { isRequired } = useSensitiveFields();
9-
108
return (
119
<>
12-
<Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
10+
<Form.Item label="Database name" name={['connection_data', 'database_name']} rules={[{ required: true }]}>
1311
<Input size="large" />
1412
</Form.Item>
15-
<Form.Item label="Host" name="host" rules={[{ required: true }]}>
13+
<Form.Item label="Host" name={['connection_data', 'host']} rules={[{ required: true }]}>
1614
<Input size="large" />
1715
</Form.Item>
18-
<Form.Item label="Port" name="port" rules={[{ required: true }]}>
16+
<Form.Item label="Port" name={['connection_data', 'port']} rules={[{ required: true }]}>
1917
<InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} />
2018
</Form.Item>
21-
<Form.Item label="User" name="user" rules={[{ required: true }]}>
22-
<Input size="large" />
23-
</Form.Item>
24-
<Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
25-
<Input.Password size="large" />
26-
</Form.Item>
19+
<ConnectionAuthBasic />
2720
</>
2821
);
2922
};
Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
import React from 'react';
22
import { Form, Input } from 'antd';
33

4-
import { useSensitiveFields } from '../../hooks';
4+
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';
55

66
export const ConnectionHdfs = () => {
7-
const { isRequired } = useSensitiveFields();
8-
97
return (
108
<>
11-
<Form.Item label="Cluster" name="cluster" rules={[{ required: true }]}>
12-
<Input size="large" />
13-
</Form.Item>
14-
<Form.Item label="User" name="user" rules={[{ required: true }]}>
9+
<Form.Item label="Cluster" name={['connection_data', 'cluster']} rules={[{ required: true }]}>
1510
<Input size="large" />
1611
</Form.Item>
17-
<Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
18-
<Input.Password size="large" />
19-
</Form.Item>
12+
<ConnectionAuthBasic />
2013
</>
2114
);
2215
};
Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
import React from 'react';
22
import { Form, Input } from 'antd';
33

4-
import { useSensitiveFields } from '../../hooks';
4+
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';
55

66
export const ConnectionHive = () => {
7-
const { isRequired } = useSensitiveFields();
8-
97
return (
108
<>
11-
<Form.Item label="Cluster" name="cluster" rules={[{ required: true }]}>
12-
<Input size="large" />
13-
</Form.Item>
14-
<Form.Item label="User" name="user" rules={[{ required: true }]}>
9+
<Form.Item label="Cluster" name={['connection_data', 'cluster']} rules={[{ required: true }]}>
1510
<Input size="large" />
1611
</Form.Item>
17-
<Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
18-
<Input.Password size="large" />
19-
</Form.Item>
12+
<ConnectionAuthBasic />
2013
</>
2114
);
2215
};
Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,22 @@
11
import React from 'react';
22
import { Form, Input, InputNumber } from 'antd';
33

4-
import { useSensitiveFields } from '../../hooks';
54
import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
5+
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';
66

77
export const ConnectionMsSql = () => {
8-
const { isRequired } = useSensitiveFields();
9-
108
return (
119
<>
12-
<Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
10+
<Form.Item label="Database name" name={['connection_data', 'database_name']} rules={[{ required: true }]}>
1311
<Input size="large" />
1412
</Form.Item>
15-
<Form.Item label="Host" name="host" rules={[{ required: true }]}>
13+
<Form.Item label="Host" name={['connection_data', 'host']} rules={[{ required: true }]}>
1614
<Input size="large" />
1715
</Form.Item>
18-
<Form.Item label="Port" name="port" rules={[{ required: true }]}>
16+
<Form.Item label="Port" name={['connection_data', 'port']} rules={[{ required: true }]}>
1917
<InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} />
2018
</Form.Item>
21-
<Form.Item label="User" name="user" rules={[{ required: true }]}>
22-
<Input size="large" />
23-
</Form.Item>
24-
<Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
25-
<Input.Password size="large" />
26-
</Form.Item>
19+
<ConnectionAuthBasic />
2720
</>
2821
);
2922
};
Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,22 @@
11
import React from 'react';
22
import { Form, Input, InputNumber } from 'antd';
33

4-
import { useSensitiveFields } from '../../hooks';
54
import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
5+
import { ConnectionAuthBasic } from '../ConnectionAuthBasic';
66

77
export const ConnectionMySql = () => {
8-
const { isRequired } = useSensitiveFields();
9-
108
return (
119
<>
12-
<Form.Item label="Database name" name="database_name" rules={[{ required: true }]}>
10+
<Form.Item label="Database name" name={['connection_data', 'database_name']} rules={[{ required: true }]}>
1311
<Input size="large" />
1412
</Form.Item>
15-
<Form.Item label="Host" name="host" rules={[{ required: true }]}>
13+
<Form.Item label="Host" name={['connection_data', 'host']} rules={[{ required: true }]}>
1614
<Input size="large" />
1715
</Form.Item>
18-
<Form.Item label="Port" name="port" rules={[{ required: true }]}>
16+
<Form.Item label="Port" name={['connection_data', 'port']} rules={[{ required: true }]}>
1917
<InputNumber size="large" min={MIN_ALLOWED_PORT} max={MAX_ALLOWED_PORT} />
2018
</Form.Item>
21-
<Form.Item label="User" name="user" rules={[{ required: true }]}>
22-
<Input size="large" />
23-
</Form.Item>
24-
<Form.Item label="Password" name="password" rules={[{ required: isRequired }]}>
25-
<Input.Password size="large" />
26-
</Form.Item>
19+
<ConnectionAuthBasic />
2720
</>
2821
);
2922
};

0 commit comments

Comments
 (0)