From f75905649e945ad6d0dbcca6fcb471d137e79ad6 Mon Sep 17 00:00:00 2001 From: Zabilsya Date: Mon, 2 Dec 2024 22:59:23 +0600 Subject: [PATCH 1/4] [DOP-20046] create update delete connection --- docker/entrypoint.sh | 2 + src/app/config/router/instance.tsx | 15 +++- src/app/styles/antd.less | 8 +- src/entities/auth/api/types.ts | 2 +- .../connection/api/connectionService.ts | 21 ++++- src/entities/connection/api/hooks/index.ts | 1 + .../api/hooks/useDeleteConnection/index.ts | 25 ++++++ src/entities/connection/api/types.ts | 31 ++++++- src/entities/connection/constants.ts | 22 +++++ src/entities/connection/index.ts | 2 + .../components/ConnectionHdfs/index.tsx | 22 +++++ .../components/ConnectionHive/index.tsx | 22 +++++ .../components/ConnectionOracle/index.tsx | 71 +++++++++++++++ .../components/ConnectionPostgres/index.tsx | 29 ++++++ .../components/ConnectionS3/index.tsx | 43 +++++++++ .../ui/ConnectionTypeForm/components/index.ts | 5 ++ .../ui/ConnectionTypeForm/constants.ts | 14 +++ .../ui/ConnectionTypeForm/hooks/index.ts | 1 + .../useIsRequiredSensitiveFields/index.ts | 5 ++ .../ui/ConnectionTypeForm/index.tsx | 49 +++++++++++ .../connection/ui/ConnectionTypeForm/types.ts | 10 +++ src/entities/connection/ui/index.ts | 1 + src/entities/queue/api/hooks/index.ts | 1 + .../queue/api/hooks/useDeleteQueue/index.ts | 2 +- src/entities/queue/api/types.ts | 16 ---- .../components/ConnectionAuthData/index.tsx | 20 ----- .../components/ConnectionAuthData/types.ts | 6 -- .../ConnectionAuthData/utils/index.ts | 1 - .../components/ConnectionData/index.tsx | 20 ----- .../components/ConnectionData/types.ts | 6 -- .../components/ConnectionData/utils/index.ts | 1 - .../ConnectionDetailInfo/components/index.ts | 2 - .../connection/ConnectionDetailInfo/index.tsx | 48 +++++----- .../ConnectionDetailInfo/styles.module.less | 19 ---- .../getConnectionAuthData}/index.ts | 4 +- .../getConnectionAuthData}/types.ts | 0 .../getConnectionData}/index.ts | 36 ++++---- .../getConnectionData}/types.ts | 0 .../ConnectionDetailInfo/utils/index.ts | 2 + .../connection/ConnectionList/index.tsx | 4 +- .../connection/ConnectionList/types.ts | 3 + .../connection/CreateConnection/index.tsx | 44 ++++++++++ .../connection/CreateConnection/types.ts | 10 +++ .../adaptCreateConnectionRequest/index.ts | 88 +++++++++++++++++++ .../CreateConnection/utils/index.ts | 1 + .../connection/DeleteConnection/index.tsx | 30 +++++++ .../DeleteConnection/styles.module.less | 20 +++++ .../connection/DeleteConnection/types.ts | 7 ++ .../connection/UpdateConnection/index.tsx | 51 +++++++++++ .../connection/UpdateConnection/types.ts | 11 +++ .../adaptUpdateConnectionRequest/index.ts | 88 +++++++++++++++++++ .../getUpdateConnectionInitialValues/index.ts | 59 +++++++++++++ .../UpdateConnection/utils/index.ts | 2 + src/features/connection/index.ts | 3 + .../getUpdateGroupInitialValues/index.ts | 1 + src/features/queue/DeleteQueue/index.tsx | 2 +- .../getUpdateQueueInitialValues/index.ts | 1 + src/index.html | 1 - .../connection/ConnectionListPage/index.tsx | 13 ++- .../ConnectionListPage/styles.module.less | 3 + .../connection/CreateConnectionPage/index.tsx | 30 +++++++ .../connection/UpdateConnectionPage/index.tsx | 33 +++++++ src/pages/connection/index.ts | 2 + src/shared/config/axios/instance.ts | 2 +- .../ui/FormCurrentGroupDescription/index.tsx | 6 +- .../DeleteConnectionButton/index.tsx | 44 ++++++++++ .../DeleteConnectionButton/types.ts | 5 ++ .../UpdateConnectionButton/index.tsx | 13 +++ .../UpdateConnectionButton/types.ts | 3 + .../ConnectionDetail/components/index.ts | 2 + .../connection/ConnectionDetail/index.tsx | 19 +++- .../ConnectionDetail/styles.module.less | 5 ++ .../ConnectionListWrapper/index.tsx | 55 +++++++++++- .../components/DeleteQueueButton/index.tsx | 10 ++- 74 files changed, 1091 insertions(+), 165 deletions(-) create mode 100644 src/entities/connection/api/hooks/useDeleteConnection/index.ts create mode 100644 src/entities/connection/constants.ts create mode 100644 src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHdfs/index.tsx create mode 100644 src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHive/index.tsx create mode 100644 src/entities/connection/ui/ConnectionTypeForm/components/ConnectionOracle/index.tsx create mode 100644 src/entities/connection/ui/ConnectionTypeForm/components/ConnectionPostgres/index.tsx create mode 100644 src/entities/connection/ui/ConnectionTypeForm/components/ConnectionS3/index.tsx create mode 100644 src/entities/connection/ui/ConnectionTypeForm/components/index.ts create mode 100644 src/entities/connection/ui/ConnectionTypeForm/constants.ts create mode 100644 src/entities/connection/ui/ConnectionTypeForm/hooks/index.ts create mode 100644 src/entities/connection/ui/ConnectionTypeForm/hooks/useIsRequiredSensitiveFields/index.ts create mode 100644 src/entities/connection/ui/ConnectionTypeForm/index.tsx create mode 100644 src/entities/connection/ui/ConnectionTypeForm/types.ts create mode 100644 src/entities/connection/ui/index.ts delete mode 100644 src/features/connection/ConnectionDetailInfo/components/ConnectionAuthData/index.tsx delete mode 100644 src/features/connection/ConnectionDetailInfo/components/ConnectionAuthData/types.ts delete mode 100644 src/features/connection/ConnectionDetailInfo/components/ConnectionAuthData/utils/index.ts delete mode 100644 src/features/connection/ConnectionDetailInfo/components/ConnectionData/index.tsx delete mode 100644 src/features/connection/ConnectionDetailInfo/components/ConnectionData/types.ts delete mode 100644 src/features/connection/ConnectionDetailInfo/components/ConnectionData/utils/index.ts delete mode 100644 src/features/connection/ConnectionDetailInfo/components/index.ts delete mode 100644 src/features/connection/ConnectionDetailInfo/styles.module.less rename src/features/connection/ConnectionDetailInfo/{components/ConnectionAuthData/utils/getDescriptionItems => utils/getConnectionAuthData}/index.ts (72%) rename src/features/connection/ConnectionDetailInfo/{components/ConnectionAuthData/utils/getDescriptionItems => utils/getConnectionAuthData}/types.ts (100%) rename src/features/connection/ConnectionDetailInfo/{components/ConnectionData/utils/getDescriptionItems => utils/getConnectionData}/index.ts (78%) rename src/features/connection/ConnectionDetailInfo/{components/ConnectionData/utils/getDescriptionItems => utils/getConnectionData}/types.ts (100%) create mode 100644 src/features/connection/ConnectionDetailInfo/utils/index.ts create mode 100644 src/features/connection/CreateConnection/index.tsx create mode 100644 src/features/connection/CreateConnection/types.ts create mode 100644 src/features/connection/CreateConnection/utils/adaptCreateConnectionRequest/index.ts create mode 100644 src/features/connection/CreateConnection/utils/index.ts create mode 100644 src/features/connection/DeleteConnection/index.tsx create mode 100644 src/features/connection/DeleteConnection/styles.module.less create mode 100644 src/features/connection/DeleteConnection/types.ts create mode 100644 src/features/connection/UpdateConnection/index.tsx create mode 100644 src/features/connection/UpdateConnection/types.ts create mode 100644 src/features/connection/UpdateConnection/utils/adaptUpdateConnectionRequest/index.ts create mode 100644 src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts create mode 100644 src/features/connection/UpdateConnection/utils/index.ts create mode 100644 src/pages/connection/ConnectionListPage/styles.module.less create mode 100644 src/pages/connection/CreateConnectionPage/index.tsx create mode 100644 src/pages/connection/UpdateConnectionPage/index.tsx create mode 100644 src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/index.tsx create mode 100644 src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/types.ts create mode 100644 src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/index.tsx create mode 100644 src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/types.ts create mode 100644 src/widgets/connection/ConnectionDetail/components/index.ts create mode 100644 src/widgets/connection/ConnectionDetail/styles.module.less diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh index 0853fc59..7492f92b 100644 --- a/docker/entrypoint.sh +++ b/docker/entrypoint.sh @@ -6,4 +6,6 @@ window.env = { }; EOF +sed -i '/<\/head>/i \ ' /usr/share/nginx/html/index.html + exec "$@" \ No newline at end of file diff --git a/src/app/config/router/instance.tsx b/src/app/config/router/instance.tsx index 5a416218..1045d0b4 100644 --- a/src/app/config/router/instance.tsx +++ b/src/app/config/router/instance.tsx @@ -6,7 +6,12 @@ import { AuthLayout, ErrorLayout, PrivateLayout } from '@app/layouts'; import { CreateGroupPage, GroupDetailPage, GroupListPage, UpdateGroupPage } from '@pages/group'; import { AuthProvider } from '@entities/auth'; import { CreateQueuePage, QueueDetailPage, QueueListPage, UpdateQueuePage } from '@pages/queue'; -import { ConnectionDetailPage, ConnectionListPage } from '@pages/connection'; +import { + ConnectionDetailPage, + ConnectionListPage, + CreateConnectionPage, + UpdateConnectionPage, +} from '@pages/connection'; import { TransferDetailPage, TransferListPage } from '@pages/transfer'; import { RunDetailPage } from '@pages/run'; @@ -92,6 +97,14 @@ export const router = createBrowserRouter([ path: '/connections/:id', element: , }, + { + path: '/connections/create', + element: , + }, + { + path: '/connections/:id/update', + element: , + }, { path: '/transfers', element: , diff --git a/src/app/styles/antd.less b/src/app/styles/antd.less index e326b010..b10f3b3f 100644 --- a/src/app/styles/antd.less +++ b/src/app/styles/antd.less @@ -3,10 +3,6 @@ border-radius: 0; } -.ant-descriptions { - width: 100%; -} - .ant-descriptions-item-label { width: 250px; font-weight: 700; @@ -16,7 +12,9 @@ background-color: @white; } -.ant-select { +.ant-descriptions, +.ant-select, +.ant-input-number { width: 100%; } diff --git a/src/entities/auth/api/types.ts b/src/entities/auth/api/types.ts index aea1434c..27c01598 100644 --- a/src/entities/auth/api/types.ts +++ b/src/entities/auth/api/types.ts @@ -11,5 +11,5 @@ export interface LoginRequest { export interface LoginResponse { access_token: string; - refresh_token: string; + token_type: string; } diff --git a/src/entities/connection/api/connectionService.ts b/src/entities/connection/api/connectionService.ts index d335c04d..19d90050 100644 --- a/src/entities/connection/api/connectionService.ts +++ b/src/entities/connection/api/connectionService.ts @@ -1,7 +1,14 @@ import { axiosInstance } from '@shared/config'; import { PaginationResponse } from '@shared/types'; -import { GetConnectionsRequest, Connection, GetConnectionRequest } from './types'; +import { + GetConnectionsRequest, + Connection, + GetConnectionRequest, + CreateConnectionRequest, + UpdateConnectionRequest, + DeleteConnectionRequest, +} from './types'; export const connectionService = { getConnections: (params: GetConnectionsRequest): Promise> => { @@ -11,4 +18,16 @@ export const connectionService = { getConnection: ({ id }: GetConnectionRequest): Promise => { return axiosInstance.get(`connections/${id}`); }, + + createConnection: (data: CreateConnectionRequest): Promise => { + return axiosInstance.post(`connections`, data); + }, + + updateConnection: ({ id, ...data }: UpdateConnectionRequest): Promise => { + return axiosInstance.patch(`connections/${id}`, data); + }, + + deleteConnection: ({ id }: DeleteConnectionRequest): Promise => { + return axiosInstance.delete(`connections/${id}`); + }, }; diff --git a/src/entities/connection/api/hooks/index.ts b/src/entities/connection/api/hooks/index.ts index aad81f64..276dc7f8 100644 --- a/src/entities/connection/api/hooks/index.ts +++ b/src/entities/connection/api/hooks/index.ts @@ -1 +1,2 @@ export * from './useGetConnection'; +export * from './useDeleteConnection'; diff --git a/src/entities/connection/api/hooks/useDeleteConnection/index.ts b/src/entities/connection/api/hooks/useDeleteConnection/index.ts new file mode 100644 index 00000000..071aaa99 --- /dev/null +++ b/src/entities/connection/api/hooks/useDeleteConnection/index.ts @@ -0,0 +1,25 @@ +import { useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query'; +import { notification } from 'antd'; +import { getErrorMessage } from '@shared/config'; + +import { connectionService } from '../../connectionService'; +import { DeleteConnectionRequest } from '../../types'; +import { ConnectionQueryKey } from '../../keys'; + +/** Hook for deleting connection */ +export const useDeleteConnection = (data: DeleteConnectionRequest): UseMutationResult => { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: () => connectionService.deleteConnection(data), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [ConnectionQueryKey.GET_CONNECTIONS] }); + queryClient.removeQueries({ queryKey: [ConnectionQueryKey.GET_CONNECTION, data.id] }); + }, + onError: (error) => { + notification.error({ + message: getErrorMessage(error), + }); + }, + }); +}; diff --git a/src/entities/connection/api/types.ts b/src/entities/connection/api/types.ts index 0eb964a4..2233fff9 100644 --- a/src/entities/connection/api/types.ts +++ b/src/entities/connection/api/types.ts @@ -9,10 +9,15 @@ export type Connection = { type ConnectionData = ConnectionHive | ConnectionHdfs | ConnectionOracle | ConnectionPostgres | ConnectionS3; +export type ConnectionBucketStyle = 'domain' | 'path'; + +export type ConnectionProtocol = 'https' | 'http'; + interface ConnectionHive { auth_data: { type: ConnectionType.HIVE; user: string; + password?: string; }; connection_data: { type: ConnectionType.HIVE; @@ -24,6 +29,7 @@ interface ConnectionHdfs { auth_data: { type: ConnectionType.HDFS; user: string; + password?: string; }; connection_data: { type: ConnectionType.HDFS; @@ -35,6 +41,7 @@ interface ConnectionOracle { auth_data: { type: ConnectionType.ORACLE; user: string; + password?: string; }; connection_data: { type: ConnectionType.ORACLE; @@ -42,7 +49,6 @@ interface ConnectionOracle { port: number; service_name: string | null; sid: string | null; - additional_params: object; }; } @@ -50,13 +56,13 @@ interface ConnectionPostgres { auth_data: { type: ConnectionType.POSTGRES; user: string; + password?: string; }; connection_data: { type: ConnectionType.POSTGRES; host: string; port: number; database_name: string; - additional_params: object; }; } @@ -64,15 +70,16 @@ interface ConnectionS3 { auth_data: { type: ConnectionType.S3; access_key: string; + secret_key?: string; }; connection_data: { type: ConnectionType.S3; host: string; bucket: string; - bucket_style: 'domain' | 'path'; + bucket_style: ConnectionBucketStyle; port: number | null; region: string | null; - protocol: 'http' | 'https'; + protocol: ConnectionProtocol; }; } @@ -83,3 +90,19 @@ export interface GetConnectionsRequest extends PaginationRequest { export interface GetConnectionRequest { id: number; } + +export type CreateConnectionRequest = { + group_id: number; + name: string; + description: string; +} & ConnectionData; + +export type UpdateConnectionRequest = { + id: number; + name: string; + description: string; +} & ConnectionData; + +export interface DeleteConnectionRequest { + id: number; +} diff --git a/src/entities/connection/constants.ts b/src/entities/connection/constants.ts new file mode 100644 index 00000000..d25edff7 --- /dev/null +++ b/src/entities/connection/constants.ts @@ -0,0 +1,22 @@ +import { ConnectionType } from '@shared/types'; +import { prepareOptionsForSelect } from '@shared/ui'; + +import { ConnectionBucketStyle, ConnectionProtocol } from './api'; + +export const CONNECTION_TYPE_SELECT_OPTIONS = prepareOptionsForSelect({ + data: Object.values(ConnectionType), + renderLabel: (data) => data, + renderValue: (data) => data, +}); + +export const CONNECTION_BUCKET_STYLE_SELECT_OPTIONS = prepareOptionsForSelect({ + data: ['domain', 'path'], + renderLabel: (data) => data, + renderValue: (data) => data, +}); + +export const CONNECTION_PROTOCOL_SELECT_OPTIONS = prepareOptionsForSelect({ + data: ['https', 'http'], + renderLabel: (data) => data, + renderValue: (data) => data, +}); diff --git a/src/entities/connection/index.ts b/src/entities/connection/index.ts index b1c13e73..93c999ea 100644 --- a/src/entities/connection/index.ts +++ b/src/entities/connection/index.ts @@ -1 +1,3 @@ export * from './api'; +export * from './constants'; +export * from './ui'; diff --git a/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHdfs/index.tsx b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHdfs/index.tsx new file mode 100644 index 00000000..1aebf2e3 --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHdfs/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Form, Input } from 'antd'; + +import { useSensitiveFields } from '../../hooks'; + +export const ConnectionHdfs = () => { + const { isRequired } = useSensitiveFields(); + + return ( + <> + + + + + + + + + + + ); +}; diff --git a/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHive/index.tsx b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHive/index.tsx new file mode 100644 index 00000000..4d7c5726 --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionHive/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Form, Input } from 'antd'; + +import { useSensitiveFields } from '../../hooks'; + +export const ConnectionHive = () => { + const { isRequired } = useSensitiveFields(); + + return ( + <> + + + + + + + + + + + ); +}; diff --git a/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionOracle/index.tsx b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionOracle/index.tsx new file mode 100644 index 00000000..68d31f53 --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionOracle/index.tsx @@ -0,0 +1,71 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import { Form, Input, InputNumber } from 'antd'; + +import { useSensitiveFields } from '../../hooks'; +import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants'; + +export const ConnectionOracle = () => { + const { isRequired } = useSensitiveFields(); + const form = Form.useFormInstance(); + + const [isServiceNameDisabled, setServiceNameDisabled] = useState(false); + const [isSidDisabled, setSidDisabled] = useState(false); + + const changeDisabledFields = useCallback(() => { + const serviceName = form.getFieldValue('service_name'); + const sid = form.getFieldValue('sid'); + setServiceNameDisabled(!!sid); + setSidDisabled(!!serviceName); + }, [form]); + + const handleFieldChange = () => { + changeDisabledFields(); + form.validateFields(['service_name', 'sid']); + }; + + //* It needs to validate required fields service_name and sid correctly if they have initial values + useEffect(() => { + changeDisabledFields(); + }, [changeDisabledFields]); + + return ( + <> + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionPostgres/index.tsx b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionPostgres/index.tsx new file mode 100644 index 00000000..3405f75f --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionPostgres/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 ConnectionPostgres = () => { + const { isRequired } = useSensitiveFields(); + + return ( + <> + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionS3/index.tsx b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionS3/index.tsx new file mode 100644 index 00000000..35b454d0 --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/components/ConnectionS3/index.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { Form, Input, InputNumber, Select } from 'antd'; +import { CONNECTION_BUCKET_STYLE_SELECT_OPTIONS, CONNECTION_PROTOCOL_SELECT_OPTIONS } from '@entities/connection'; + +import { useSensitiveFields } from '../../hooks'; +import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants'; + +export const ConnectionS3 = () => { + const { isRequired } = useSensitiveFields(); + + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/entities/connection/ui/ConnectionTypeForm/components/index.ts b/src/entities/connection/ui/ConnectionTypeForm/components/index.ts new file mode 100644 index 00000000..22c76bdb --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/components/index.ts @@ -0,0 +1,5 @@ +export * from './ConnectionHdfs'; +export * from './ConnectionHive'; +export * from './ConnectionOracle'; +export * from './ConnectionPostgres'; +export * from './ConnectionS3'; diff --git a/src/entities/connection/ui/ConnectionTypeForm/constants.ts b/src/entities/connection/ui/ConnectionTypeForm/constants.ts new file mode 100644 index 00000000..5f7de275 --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/constants.ts @@ -0,0 +1,14 @@ +import { createContext } from 'react'; + +import { SensitiveFieldsContextProps } from './types'; + +const SENSITIVE_FIELDS_CONTEXT_INITIAL_VALUE: SensitiveFieldsContextProps = { + isRequired: true, +}; + +export const MIN_ALLOWED_PORT = 1; +export const MAX_ALLOWED_PORT = 65535; + +export const SensitiveFieldsContext = createContext( + SENSITIVE_FIELDS_CONTEXT_INITIAL_VALUE, +); diff --git a/src/entities/connection/ui/ConnectionTypeForm/hooks/index.ts b/src/entities/connection/ui/ConnectionTypeForm/hooks/index.ts new file mode 100644 index 00000000..93d5003c --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/hooks/index.ts @@ -0,0 +1 @@ +export * from './useIsRequiredSensitiveFields'; diff --git a/src/entities/connection/ui/ConnectionTypeForm/hooks/useIsRequiredSensitiveFields/index.ts b/src/entities/connection/ui/ConnectionTypeForm/hooks/useIsRequiredSensitiveFields/index.ts new file mode 100644 index 00000000..062564ee --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/hooks/useIsRequiredSensitiveFields/index.ts @@ -0,0 +1,5 @@ +import { useContext } from 'react'; + +import { SensitiveFieldsContext } from '../../constants'; + +export const useSensitiveFields = () => useContext(SensitiveFieldsContext); diff --git a/src/entities/connection/ui/ConnectionTypeForm/index.tsx b/src/entities/connection/ui/ConnectionTypeForm/index.tsx new file mode 100644 index 00000000..e1a9dcb2 --- /dev/null +++ b/src/entities/connection/ui/ConnectionTypeForm/index.tsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import { ConnectionType } from '@shared/types'; +import { Form, Select } from 'antd'; +import { CONNECTION_TYPE_SELECT_OPTIONS } from '@entities/connection'; + +import { ConnectionHdfs, ConnectionHive, ConnectionOracle, ConnectionPostgres, ConnectionS3 } from './components'; +import { ConnectionTypeFormProps } from './types'; +import { SensitiveFieldsContext } from './constants'; + +export const ConnectionTypeForm = ({ initialType, isRequiredSensitiveFields = true }: ConnectionTypeFormProps) => { + const [selectedConnectionType, setConnectionType] = useState(initialType); + + const handleSelectConnectionType = (type: ConnectionType) => { + setConnectionType(type); + }; + + const renderForm = () => { + switch (selectedConnectionType) { + case ConnectionType.HDFS: + return ; + case ConnectionType.HIVE: + return ; + case ConnectionType.ORACLE: + return ; + case ConnectionType.POSTGRES: + return ; + case ConnectionType.S3: + return ; + default: + return null; + } + }; + + return ( + <> + + + + + + + + + + + + ); +}; diff --git a/src/features/connection/CreateConnection/types.ts b/src/features/connection/CreateConnection/types.ts new file mode 100644 index 00000000..86e3ccc1 --- /dev/null +++ b/src/features/connection/CreateConnection/types.ts @@ -0,0 +1,10 @@ +import { CreateConnectionRequest } from '@entities/connection'; +import { GroupData } from '@entities/group'; + +export type CreateConnectionForm = Omit & + CreateConnectionRequest['connection_data'] & + CreateConnectionRequest['auth_data']; + +export interface CreateConnectionProps { + group: GroupData; +} diff --git a/src/features/connection/CreateConnection/utils/adaptCreateConnectionRequest/index.ts b/src/features/connection/CreateConnection/utils/adaptCreateConnectionRequest/index.ts new file mode 100644 index 00000000..addf453e --- /dev/null +++ b/src/features/connection/CreateConnection/utils/adaptCreateConnectionRequest/index.ts @@ -0,0 +1,88 @@ +import { ConnectionType } from '@shared/types'; +import { CreateConnectionRequest } from '@entities/connection'; + +import { CreateConnectionForm } from '../../types'; + +/* Util for preparing request data for creating connection */ +export const adaptCreateConnectionRequest = ( + values: CreateConnectionForm, + groupId: number, +): CreateConnectionRequest => { + const baseRequestData = { + name: values.name, + description: values.description, + group_id: groupId, + }; + switch (values.type) { + case ConnectionType.HDFS: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + user: values.user, + password: values.password, + }, + connection_data: { + type: values.type, + cluster: values.cluster, + }, + }); + case ConnectionType.HIVE: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + user: values.user, + password: values.password, + }, + connection_data: { + type: values.type, + cluster: values.cluster, + }, + }); + case ConnectionType.ORACLE: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + user: values.user, + password: values.password, + }, + connection_data: { + type: values.type, + service_name: values.service_name, + sid: values.sid, + host: values.host, + port: values.port, + }, + }); + case ConnectionType.POSTGRES: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + user: values.user, + password: values.password, + }, + connection_data: { + type: values.type, + database_name: values.database_name, + host: values.host, + port: values.port, + }, + }); + case ConnectionType.S3: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + access_key: values.access_key, + secret_key: values.secret_key, + }, + connection_data: { + type: values.type, + bucket_style: values.bucket_style, + bucket: values.bucket, + host: values.host, + protocol: values.protocol, + port: values.port, + region: values.region, + }, + }); + } +}; diff --git a/src/features/connection/CreateConnection/utils/index.ts b/src/features/connection/CreateConnection/utils/index.ts new file mode 100644 index 00000000..40bb9f0a --- /dev/null +++ b/src/features/connection/CreateConnection/utils/index.ts @@ -0,0 +1 @@ +export * from './adaptCreateConnectionRequest'; diff --git a/src/features/connection/DeleteConnection/index.tsx b/src/features/connection/DeleteConnection/index.tsx new file mode 100644 index 00000000..67ba0a71 --- /dev/null +++ b/src/features/connection/DeleteConnection/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { ControlButtons } from '@shared/ui'; +import { Typography } from 'antd'; +import { WarningOutlined } from '@ant-design/icons'; +import { useDeleteConnection } from '@entities/connection'; + +import classes from './styles.module.less'; +import { DeleteConnectionProps } from './types'; + +const { Text } = Typography; + +export const DeleteConnection = ({ connection, onSuccess, onCancel }: DeleteConnectionProps) => { + const { mutate: deleteConnection, isPending } = useDeleteConnection({ id: connection.id }); + + const handleSubmit = () => { + deleteConnection(null, { onSuccess }); + }; + + return ( +
+
+ + + Do you really want to delete connection «{connection.name}»? + +
+ +
+ ); +}; diff --git a/src/features/connection/DeleteConnection/styles.module.less b/src/features/connection/DeleteConnection/styles.module.less new file mode 100644 index 00000000..4341ad51 --- /dev/null +++ b/src/features/connection/DeleteConnection/styles.module.less @@ -0,0 +1,20 @@ +.root { + display: flex; + flex-direction: column; + gap: 24px; + + .main { + display: flex; + align-items: flex-start; + gap: 24px; + + .icon { + color: @red-6; + + svg { + width: 24px; + height: 24px; + } + } + } +} diff --git a/src/features/connection/DeleteConnection/types.ts b/src/features/connection/DeleteConnection/types.ts new file mode 100644 index 00000000..251fdc7d --- /dev/null +++ b/src/features/connection/DeleteConnection/types.ts @@ -0,0 +1,7 @@ +import { Connection } from '@entities/connection'; + +export interface DeleteConnectionProps { + connection: Connection; + onSuccess: () => void; + onCancel: () => void; +} diff --git a/src/features/connection/UpdateConnection/index.tsx b/src/features/connection/UpdateConnection/index.tsx new file mode 100644 index 00000000..6a58294e --- /dev/null +++ b/src/features/connection/UpdateConnection/index.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { ControlButtons, FormCurrentGroupDescription, ManagedForm } from '@shared/ui'; +import { Form, Input } from 'antd'; +import { useNavigate } from 'react-router-dom'; +import { Connection, ConnectionQueryKey, connectionService, ConnectionTypeForm } from '@entities/connection'; + +import { UpdateConnectionForm, UpdateConnectionProps } from './types'; +import { getUpdateConnectionInitialValues } from './utils'; +import { adaptUpdateConnectionRequest } from './utils/adaptUpdateConnectionRequest'; + +export const UpdateConnection = ({ connection, group }: UpdateConnectionProps) => { + const navigate = useNavigate(); + + const handleUpdateConnection = (values: UpdateConnectionForm) => { + return connectionService.updateConnection(adaptUpdateConnectionRequest(values, connection.id)); + }; + + const onSuccess = (response: Connection) => { + navigate(`/connections/${response.id}`); + }; + + const onCancel = () => { + navigate('/connections'); + }; + + return ( + + mutationFunction={handleUpdateConnection} + initialValues={getUpdateConnectionInitialValues(connection)} + onSuccess={onSuccess} + keysInvalidateQueries={[ + [{ queryKey: [ConnectionQueryKey.GET_CONNECTIONS, group.id] }], + [{ queryKey: [ConnectionQueryKey.GET_CONNECTION, connection.id] }], + ]} + > + + + + + + + + + + + + + + + ); +}; diff --git a/src/features/connection/UpdateConnection/types.ts b/src/features/connection/UpdateConnection/types.ts new file mode 100644 index 00000000..39aea141 --- /dev/null +++ b/src/features/connection/UpdateConnection/types.ts @@ -0,0 +1,11 @@ +import { Connection, CreateConnectionRequest, UpdateConnectionRequest } from '@entities/connection'; +import { GroupData } from '@entities/group'; + +export type UpdateConnectionForm = Omit & + CreateConnectionRequest['connection_data'] & + CreateConnectionRequest['auth_data']; + +export interface UpdateConnectionProps { + connection: Connection; + group: GroupData; +} diff --git a/src/features/connection/UpdateConnection/utils/adaptUpdateConnectionRequest/index.ts b/src/features/connection/UpdateConnection/utils/adaptUpdateConnectionRequest/index.ts new file mode 100644 index 00000000..b2129fc9 --- /dev/null +++ b/src/features/connection/UpdateConnection/utils/adaptUpdateConnectionRequest/index.ts @@ -0,0 +1,88 @@ +import { ConnectionType } from '@shared/types'; +import { UpdateConnectionRequest } from '@entities/connection'; + +import { UpdateConnectionForm } from '../../types'; + +/* Util for preparing request data for updating connection */ +export const adaptUpdateConnectionRequest = ( + values: UpdateConnectionForm, + connectionId: number, +): UpdateConnectionRequest => { + const baseRequestData = { + name: values.name, + description: values.description, + id: connectionId, + }; + switch (values.type) { + case ConnectionType.HDFS: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + user: values.user, + password: values.password, + }, + connection_data: { + type: values.type, + cluster: values.cluster, + }, + }); + case ConnectionType.HIVE: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + user: values.user, + password: values.password, + }, + connection_data: { + type: values.type, + cluster: values.cluster, + }, + }); + case ConnectionType.ORACLE: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + user: values.user, + password: values.password, + }, + connection_data: { + type: values.type, + service_name: values.service_name, + sid: values.sid, + host: values.host, + port: values.port, + }, + }); + case ConnectionType.POSTGRES: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + user: values.user, + password: values.password, + }, + connection_data: { + type: values.type, + database_name: values.database_name, + host: values.host, + port: values.port, + }, + }); + case ConnectionType.S3: + return Object.assign(baseRequestData, { + auth_data: { + type: values.type, + access_key: values.access_key, + secret_key: values.secret_key, + }, + connection_data: { + type: values.type, + bucket_style: values.bucket_style, + bucket: values.bucket, + host: values.host, + protocol: values.protocol, + port: values.port, + region: values.region, + }, + }); + } +}; diff --git a/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts b/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts new file mode 100644 index 00000000..a831fd91 --- /dev/null +++ b/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts @@ -0,0 +1,59 @@ +import { Connection } from '@entities/connection'; +import { ConnectionType } from '@shared/types'; + +import { UpdateConnectionForm } from '../../types'; + +/* Util for preparing initial data for update connection form */ +export const getUpdateConnectionInitialValues = (connection: Connection): UpdateConnectionForm => { + const baseFormData = { + name: connection.name, + description: connection.description, + id: connection.id, + }; + // TODO: Temporary solution until backend takes ConnectionType up a level in response. + if (connection.auth_data.type === ConnectionType.HDFS && connection.connection_data.type === ConnectionType.HDFS) { + return Object.assign(baseFormData, { + ...connection.connection_data, + ...connection.auth_data, + }); + } + if (connection.auth_data.type === ConnectionType.HIVE && connection.connection_data.type === ConnectionType.HIVE) { + return Object.assign(baseFormData, { + ...connection.connection_data, + ...connection.auth_data, + }); + } + if ( + connection.auth_data.type === ConnectionType.ORACLE && + connection.connection_data.type === ConnectionType.ORACLE + ) { + return Object.assign(baseFormData, { + ...connection.connection_data, + ...connection.auth_data, + }); + } + if ( + connection.auth_data.type === ConnectionType.POSTGRES && + connection.connection_data.type === ConnectionType.POSTGRES + ) { + return Object.assign(baseFormData, { + ...connection.connection_data, + ...connection.auth_data, + }); + } + if (connection.auth_data.type === ConnectionType.S3 && connection.connection_data.type === ConnectionType.S3) { + return Object.assign(baseFormData, { + ...connection.connection_data, + ...connection.auth_data, + }); + } + return { + name: connection.name, + description: connection.description, + id: connection.id, + type: ConnectionType.HDFS, + cluster: '', + user: '', + password: '', + }; +}; diff --git a/src/features/connection/UpdateConnection/utils/index.ts b/src/features/connection/UpdateConnection/utils/index.ts new file mode 100644 index 00000000..4b7ba3df --- /dev/null +++ b/src/features/connection/UpdateConnection/utils/index.ts @@ -0,0 +1,2 @@ +export * from './getUpdateConnectionInitialValues'; +export * from './adaptUpdateConnectionRequest'; diff --git a/src/features/connection/index.ts b/src/features/connection/index.ts index 92f2c7c1..51f160df 100644 --- a/src/features/connection/index.ts +++ b/src/features/connection/index.ts @@ -1,2 +1,5 @@ export * from './ConnectionList'; export * from './ConnectionDetailInfo'; +export * from './DeleteConnection'; +export * from './CreateConnection'; +export * from './UpdateConnection'; diff --git a/src/features/group/UpdateGroup/utils/getUpdateGroupInitialValues/index.ts b/src/features/group/UpdateGroup/utils/getUpdateGroupInitialValues/index.ts index 0d7a93a6..587a63dc 100644 --- a/src/features/group/UpdateGroup/utils/getUpdateGroupInitialValues/index.ts +++ b/src/features/group/UpdateGroup/utils/getUpdateGroupInitialValues/index.ts @@ -2,6 +2,7 @@ import { GroupData } from '@entities/group'; import { UpdateGroupForm } from '../../types'; +/* Util for preparing initial values for update group form */ export const getUpdateGroupInitialValues = (group: GroupData): UpdateGroupForm => { return { name: group.name, diff --git a/src/features/queue/DeleteQueue/index.tsx b/src/features/queue/DeleteQueue/index.tsx index ffea8116..925074cb 100644 --- a/src/features/queue/DeleteQueue/index.tsx +++ b/src/features/queue/DeleteQueue/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ControlButtons } from '@shared/ui'; import { Typography } from 'antd'; import { WarningOutlined } from '@ant-design/icons'; -import { useDeleteQueue } from '@entities/queue/api/hooks/useDeleteQueue'; +import { useDeleteQueue } from '@entities/queue'; import classes from './styles.module.less'; import { DeleteQueueProps } from './types'; diff --git a/src/features/queue/UpdateQueue/utils/getUpdateQueueInitialValues/index.ts b/src/features/queue/UpdateQueue/utils/getUpdateQueueInitialValues/index.ts index 12f1b0f6..b94f85f5 100644 --- a/src/features/queue/UpdateQueue/utils/getUpdateQueueInitialValues/index.ts +++ b/src/features/queue/UpdateQueue/utils/getUpdateQueueInitialValues/index.ts @@ -2,6 +2,7 @@ import { Queue } from '@entities/queue'; import { UpdateQueueForm } from '../../types'; +/* Util for preparing initial values for update queue form */ export const getUpdateQueueInitialValues = (queue: Queue): UpdateQueueForm => { return { name: queue.name, diff --git a/src/index.html b/src/index.html index e3a6686d..aa4e0767 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,6 @@ SyncMaster -
diff --git a/src/pages/connection/ConnectionListPage/index.tsx b/src/pages/connection/ConnectionListPage/index.tsx index 98df3433..0067d043 100644 --- a/src/pages/connection/ConnectionListPage/index.tsx +++ b/src/pages/connection/ConnectionListPage/index.tsx @@ -1,8 +1,12 @@ import React from 'react'; -import { PageContentWrapper } from '@shared/ui'; -import { Typography } from 'antd'; +import { AccessWrapper, PageContentWrapper } from '@shared/ui'; +import { Button, Typography } from 'antd'; import { GroupWarningAlert, useSelectedGroup } from '@entities/group'; import { ConnectionListWrapper } from '@widgets/connection'; +import { UserRole } from '@shared/types'; +import { Link } from 'react-router-dom'; + +import classes from './styles.module.less'; const { Title } = Typography; @@ -16,6 +20,11 @@ export const ConnectionListPage = () => { return ( + + + ); diff --git a/src/pages/connection/ConnectionListPage/styles.module.less b/src/pages/connection/ConnectionListPage/styles.module.less new file mode 100644 index 00000000..e2457ca4 --- /dev/null +++ b/src/pages/connection/ConnectionListPage/styles.module.less @@ -0,0 +1,3 @@ +.createButton { + align-self: flex-end; +} diff --git a/src/pages/connection/CreateConnectionPage/index.tsx b/src/pages/connection/CreateConnectionPage/index.tsx new file mode 100644 index 00000000..3e28f4fc --- /dev/null +++ b/src/pages/connection/CreateConnectionPage/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Typography } from 'antd'; +import { PageContentWrapper } from '@shared/ui'; +import { GroupWarningAlert, useSelectedGroup } from '@entities/group'; +import { hasAccessByUserRole } from '@shared/utils'; +import { UserRole } from '@shared/types'; +import { CreateConnection } from '@features/connection'; + +const { Title } = Typography; + +export const CreateConnectionPage = () => { + const { group } = useSelectedGroup(); + + const renderContent = () => { + if (!group?.data.id) { + return ; + } + if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { + return ; + } + return ; + }; + + return ( + + Create Connection + {renderContent()} + + ); +}; diff --git a/src/pages/connection/UpdateConnectionPage/index.tsx b/src/pages/connection/UpdateConnectionPage/index.tsx new file mode 100644 index 00000000..5b763a65 --- /dev/null +++ b/src/pages/connection/UpdateConnectionPage/index.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Typography } from 'antd'; +import { PageContentWrapper } from '@shared/ui'; +import { useParams } from 'react-router-dom'; +import { PageDetailParams, UserRole } from '@shared/types'; +import { useGetGroup } from '@entities/group'; +import { hasAccessByUserRole } from '@shared/utils'; +import { AccessError } from '@shared/config'; +import { useGetConnection } from '@entities/connection'; +import { UpdateConnection } from '@features/connection'; + +const { Title } = Typography; + +export const UpdateConnectionPage = () => { + const params = useParams(); + const { data: connection } = useGetConnection({ id: Number(params.id) }); + const { data: group } = useGetGroup({ id: connection.group_id }); + + if (!connection || !group) { + return null; + } + + if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { + throw new AccessError(); + } + + return ( + + Update Connection + + + ); +}; diff --git a/src/pages/connection/index.ts b/src/pages/connection/index.ts index 010aeb23..83b16ffa 100644 --- a/src/pages/connection/index.ts +++ b/src/pages/connection/index.ts @@ -1,2 +1,4 @@ export * from './ConnectionListPage'; export * from './ConnectionDetailPage'; +export * from './CreateConnectionPage'; +export * from './UpdateConnectionPage'; diff --git a/src/shared/config/axios/instance.ts b/src/shared/config/axios/instance.ts index df87340d..ef804cc9 100644 --- a/src/shared/config/axios/instance.ts +++ b/src/shared/config/axios/instance.ts @@ -3,7 +3,7 @@ import axios from 'axios'; import { requestInterceptor, responseSuccessInterceptor } from './interceptors'; export const axiosInstance = axios.create({ - baseURL: window.env?.API_URL || process.env.API_URL || 'http://localhost:8000/', + baseURL: window.env?.API_URL || process.env.API_URL || 'http://localhost:8000/v1/', headers: { Accept: 'application/json', 'Content-Type': 'application/json', diff --git a/src/shared/ui/FormCurrentGroupDescription/index.tsx b/src/shared/ui/FormCurrentGroupDescription/index.tsx index acc8f4af..4fb31512 100644 --- a/src/shared/ui/FormCurrentGroupDescription/index.tsx +++ b/src/shared/ui/FormCurrentGroupDescription/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import { Typography } from 'antd'; import classes from './styles.module.less'; @@ -6,7 +6,7 @@ import { FormCurrentGroupDescriptionProps } from './types'; const { Text } = Typography; -export const FormCurrentGroupDescription = ({ groupName }: FormCurrentGroupDescriptionProps) => { +export const FormCurrentGroupDescription = memo(({ groupName }: FormCurrentGroupDescriptionProps) => { return (
@@ -14,4 +14,4 @@ export const FormCurrentGroupDescription = ({ groupName }: FormCurrentGroupDescr
); -}; +}); diff --git a/src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/index.tsx b/src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/index.tsx new file mode 100644 index 00000000..1417ecd9 --- /dev/null +++ b/src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/index.tsx @@ -0,0 +1,44 @@ +import { DEFAULT_MODAL_DELETE_WIDTH } from '@shared/constants'; +import { useModalState } from '@shared/hooks'; +import { ModalWrapper } from '@shared/ui'; +import { Button } from 'antd'; +import React from 'react'; +import { DeleteConnection } from '@features/connection'; +import { useNavigate } from 'react-router-dom'; + +import { DeleteConnectionButtonProps } from './types'; + +export const DeleteConnectionButton = ({ connection }: DeleteConnectionButtonProps) => { + const navigate = useNavigate(); + + const { + isOpened: isOpenedDeleteConnectionModal, + handleOpen: handleOpenDeleteConnectionModal, + handleClose: handleCloseDeleteConnectionModal, + } = useModalState(); + + const handleSuccessDeleteConnection = () => { + navigate('/connections'); + handleCloseDeleteConnectionModal(); + }; + + return ( + <> + + + + + + ); +}; diff --git a/src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/types.ts b/src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/types.ts new file mode 100644 index 00000000..e39242d3 --- /dev/null +++ b/src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/types.ts @@ -0,0 +1,5 @@ +import { Connection } from '@entities/connection'; + +export interface DeleteConnectionButtonProps { + connection: Connection; +} diff --git a/src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/index.tsx b/src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/index.tsx new file mode 100644 index 00000000..85db89ac --- /dev/null +++ b/src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Button } from 'antd'; +import { Link } from 'react-router-dom'; + +import { UpdateConnectionButtonProps } from './types'; + +export const UpdateConnectionButton = ({ connectionId }: UpdateConnectionButtonProps) => { + return ( + + ); +}; diff --git a/src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/types.ts b/src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/types.ts new file mode 100644 index 00000000..dd6b1a63 --- /dev/null +++ b/src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/types.ts @@ -0,0 +1,3 @@ +export interface UpdateConnectionButtonProps { + connectionId: number; +} diff --git a/src/widgets/connection/ConnectionDetail/components/index.ts b/src/widgets/connection/ConnectionDetail/components/index.ts new file mode 100644 index 00000000..ae69eb85 --- /dev/null +++ b/src/widgets/connection/ConnectionDetail/components/index.ts @@ -0,0 +1,2 @@ +export * from './DeleteConnectionButton'; +export * from './UpdateConnectionButton'; diff --git a/src/widgets/connection/ConnectionDetail/index.tsx b/src/widgets/connection/ConnectionDetail/index.tsx index 0bef5fc3..5ad51366 100644 --- a/src/widgets/connection/ConnectionDetail/index.tsx +++ b/src/widgets/connection/ConnectionDetail/index.tsx @@ -1,14 +1,27 @@ import React from 'react'; -import { PageContentWrapper } from '@shared/ui'; +import { AccessWrapper, PageContentWrapper } from '@shared/ui'; import { ConnectionDetailInfo } from '@features/connection'; +import { UserRole } from '@shared/types'; import { ConnectionDetailProps } from './types'; +import { DeleteConnectionButton, UpdateConnectionButton } from './components'; +import classes from './styles.module.less'; export const ConnectionDetail = ({ connection, group }: ConnectionDetailProps) => { return ( - {/* //TODO: [DOP-20043] add update and delete actions for connection */} - + +
+ + +
+ + } + /> ); }; diff --git a/src/widgets/connection/ConnectionDetail/styles.module.less b/src/widgets/connection/ConnectionDetail/styles.module.less new file mode 100644 index 00000000..f0c745a4 --- /dev/null +++ b/src/widgets/connection/ConnectionDetail/styles.module.less @@ -0,0 +1,5 @@ +.actions { + display: flex; + align-items: center; + gap: 16px; +} diff --git a/src/widgets/connection/ConnectionListWrapper/index.tsx b/src/widgets/connection/ConnectionListWrapper/index.tsx index 721234b0..afa78cf5 100644 --- a/src/widgets/connection/ConnectionListWrapper/index.tsx +++ b/src/widgets/connection/ConnectionListWrapper/index.tsx @@ -1,9 +1,56 @@ -import React from 'react'; -import { ConnectionList } from '@features/connection'; +import React, { useCallback, useState } from 'react'; +import { ConnectionList, DeleteConnection } from '@features/connection'; +import { ModalWrapper } from '@shared/ui'; +import { DEFAULT_MODAL_DELETE_WIDTH } from '@shared/constants'; +import { useNavigate } from 'react-router-dom'; +import { Connection } from '@entities/connection'; +import { useModalState } from '@shared/hooks'; import { ConnectionListWrapperProps } from './types'; export const ConnectionListWrapper = ({ group }: ConnectionListWrapperProps) => { - //TODO: [DOP-20043] add update and delete actions for connection - return ; + const navigate = useNavigate(); + const [selectedConnection, setSelectedConnection] = useState(); + + const { + isOpened: isOpenedDeleteConnectionModal, + handleOpen: handleOpenDeleteConnectionModal, + handleClose: handleCloseDeleteConnectionModal, + } = useModalState(); + + const handleDeleteUserClick = useCallback( + (connection: Connection) => { + setSelectedConnection(connection); + handleOpenDeleteConnectionModal(); + }, + [handleOpenDeleteConnectionModal], + ); + + const handleUpdateRowClick = useCallback( + (record: Connection) => { + navigate(`/connections/${record.id}/update`); + }, + [navigate], + ); + + return ( + <> + {selectedConnection && ( + + + + )} + + + + ); }; diff --git a/src/widgets/queue/QueueDetail/components/DeleteQueueButton/index.tsx b/src/widgets/queue/QueueDetail/components/DeleteQueueButton/index.tsx index 3e707ddb..54410e29 100644 --- a/src/widgets/queue/QueueDetail/components/DeleteQueueButton/index.tsx +++ b/src/widgets/queue/QueueDetail/components/DeleteQueueButton/index.tsx @@ -4,16 +4,24 @@ import { useModalState } from '@shared/hooks'; import { ModalWrapper } from '@shared/ui'; import { Button } from 'antd'; import React from 'react'; +import { useNavigate } from 'react-router-dom'; import { DeleteQueueButtonProps } from './types'; export const DeleteQueueButton = ({ queue }: DeleteQueueButtonProps) => { + const navigate = useNavigate(); + const { isOpened: isOpenedDeleteQueueModal, handleOpen: handleOpenDeleteQueueModal, handleClose: handleCloseDeleteQueueModal, } = useModalState(); + const handleSuccessDeleteQueue = () => { + navigate('/queues'); + handleCloseDeleteQueueModal(); + }; + return ( <> From 21caecd6e3da5b2c192bb851ef80d48cb13abfdb Mon Sep 17 00:00:00 2001 From: Zabilsya Date: Wed, 4 Dec 2024 17:44:57 +0600 Subject: [PATCH 3/4] [DOP-20046] fix after review --- .../getUpdateConnectionInitialValues/index.ts | 2 +- .../CreateConnectionPageContent/index.tsx | 17 ++++++++++++++++ .../CreateConnectionPage/components/index.ts | 1 + .../connection/CreateConnectionPage/index.tsx | 20 +++---------------- 4 files changed, 22 insertions(+), 18 deletions(-) create mode 100644 src/pages/connection/CreateConnectionPage/components/CreateConnectionPageContent/index.tsx create mode 100644 src/pages/connection/CreateConnectionPage/components/index.ts diff --git a/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts b/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts index a831fd91..08cba531 100644 --- a/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts +++ b/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts @@ -10,7 +10,7 @@ export const getUpdateConnectionInitialValues = (connection: Connection): Update description: connection.description, id: connection.id, }; - // TODO: Temporary solution until backend takes ConnectionType up a level in response. + // TODO: [DOP-21832] Temporary solution until backend takes ConnectionType up a level in response. if (connection.auth_data.type === ConnectionType.HDFS && connection.connection_data.type === ConnectionType.HDFS) { return Object.assign(baseFormData, { ...connection.connection_data, diff --git a/src/pages/connection/CreateConnectionPage/components/CreateConnectionPageContent/index.tsx b/src/pages/connection/CreateConnectionPage/components/CreateConnectionPageContent/index.tsx new file mode 100644 index 00000000..56ec23da --- /dev/null +++ b/src/pages/connection/CreateConnectionPage/components/CreateConnectionPageContent/index.tsx @@ -0,0 +1,17 @@ +import { GroupWarningAlert, useSelectedGroup } from '@entities/group'; +import { CreateConnection } from '@features/connection'; +import { UserRole } from '@shared/types'; +import { hasAccessByUserRole } from '@shared/utils'; +import React from 'react'; + +export const CreateConnectionPageContent = () => { + const { group } = useSelectedGroup(); + + if (!group?.data.id) { + return ; + } + if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { + return ; + } + return ; +}; diff --git a/src/pages/connection/CreateConnectionPage/components/index.ts b/src/pages/connection/CreateConnectionPage/components/index.ts new file mode 100644 index 00000000..e4f6b351 --- /dev/null +++ b/src/pages/connection/CreateConnectionPage/components/index.ts @@ -0,0 +1 @@ +export * from './CreateConnectionPageContent'; diff --git a/src/pages/connection/CreateConnectionPage/index.tsx b/src/pages/connection/CreateConnectionPage/index.tsx index 3e28f4fc..ec6601a6 100644 --- a/src/pages/connection/CreateConnectionPage/index.tsx +++ b/src/pages/connection/CreateConnectionPage/index.tsx @@ -1,30 +1,16 @@ import React from 'react'; import { Typography } from 'antd'; import { PageContentWrapper } from '@shared/ui'; -import { GroupWarningAlert, useSelectedGroup } from '@entities/group'; -import { hasAccessByUserRole } from '@shared/utils'; -import { UserRole } from '@shared/types'; -import { CreateConnection } from '@features/connection'; + +import { CreateConnectionPageContent } from './components'; const { Title } = Typography; export const CreateConnectionPage = () => { - const { group } = useSelectedGroup(); - - const renderContent = () => { - if (!group?.data.id) { - return ; - } - if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { - return ; - } - return ; - }; - return ( Create Connection - {renderContent()} + ); }; From 1053ff0563996b52821011be6a37cdb470e4d961 Mon Sep 17 00:00:00 2001 From: Zabilsya Date: Wed, 4 Dec 2024 18:55:39 +0600 Subject: [PATCH 4/4] [DOP-20046] fix after review --- src/entities/connection/api/types.ts | 12 +-- src/entities/connection/index.ts | 1 + .../utils/adaptConnectionHdfs/index.ts | 18 ++++ .../utils/adaptConnectionHdfs/types.ts | 3 + .../utils/adaptConnectionHive/index.ts | 18 ++++ .../utils/adaptConnectionHive/types.ts | 3 + .../utils/adaptConnectionOracle/index.ts | 21 +++++ .../utils/adaptConnectionOracle/types.ts | 3 + .../utils/adaptConnectionPostgres/index.ts | 20 +++++ .../utils/adaptConnectionPostgres/types.ts | 3 + .../utils/adaptConnectionS3/index.ts | 23 +++++ .../utils/adaptConnectionS3/types.ts | 3 + src/entities/connection/utils/index.ts | 5 ++ .../connection/CreateConnection/index.tsx | 9 +- .../adaptCreateConnectionRequest/index.ts | 88 ------------------- .../CreateConnection/utils/index.ts | 1 - .../connection/UpdateConnection/index.tsx | 9 +- .../connection/UpdateConnection/types.ts | 2 +- .../adaptUpdateConnectionRequest/index.ts | 88 ------------------- .../getUpdateConnectionInitialValues/index.ts | 1 - .../UpdateConnection/utils/index.ts | 1 - .../utils/adaptConnectionTypeRequest/index.ts | 27 ++++++ .../utils/adaptConnectionTypeRequest/types.ts | 3 + src/features/connection/utils/index.ts | 1 + 24 files changed, 171 insertions(+), 192 deletions(-) create mode 100644 src/entities/connection/utils/adaptConnectionHdfs/index.ts create mode 100644 src/entities/connection/utils/adaptConnectionHdfs/types.ts create mode 100644 src/entities/connection/utils/adaptConnectionHive/index.ts create mode 100644 src/entities/connection/utils/adaptConnectionHive/types.ts create mode 100644 src/entities/connection/utils/adaptConnectionOracle/index.ts create mode 100644 src/entities/connection/utils/adaptConnectionOracle/types.ts create mode 100644 src/entities/connection/utils/adaptConnectionPostgres/index.ts create mode 100644 src/entities/connection/utils/adaptConnectionPostgres/types.ts create mode 100644 src/entities/connection/utils/adaptConnectionS3/index.ts create mode 100644 src/entities/connection/utils/adaptConnectionS3/types.ts create mode 100644 src/entities/connection/utils/index.ts delete mode 100644 src/features/connection/CreateConnection/utils/adaptCreateConnectionRequest/index.ts delete mode 100644 src/features/connection/CreateConnection/utils/index.ts delete mode 100644 src/features/connection/UpdateConnection/utils/adaptUpdateConnectionRequest/index.ts create mode 100644 src/features/connection/utils/adaptConnectionTypeRequest/index.ts create mode 100644 src/features/connection/utils/adaptConnectionTypeRequest/types.ts create mode 100644 src/features/connection/utils/index.ts diff --git a/src/entities/connection/api/types.ts b/src/entities/connection/api/types.ts index 2233fff9..15339496 100644 --- a/src/entities/connection/api/types.ts +++ b/src/entities/connection/api/types.ts @@ -7,13 +7,13 @@ export type Connection = { description: string; } & ConnectionData; -type ConnectionData = ConnectionHive | ConnectionHdfs | ConnectionOracle | ConnectionPostgres | ConnectionS3; +export type ConnectionData = ConnectionHive | ConnectionHdfs | ConnectionOracle | ConnectionPostgres | ConnectionS3; export type ConnectionBucketStyle = 'domain' | 'path'; export type ConnectionProtocol = 'https' | 'http'; -interface ConnectionHive { +export interface ConnectionHive { auth_data: { type: ConnectionType.HIVE; user: string; @@ -25,7 +25,7 @@ interface ConnectionHive { }; } -interface ConnectionHdfs { +export interface ConnectionHdfs { auth_data: { type: ConnectionType.HDFS; user: string; @@ -37,7 +37,7 @@ interface ConnectionHdfs { }; } -interface ConnectionOracle { +export interface ConnectionOracle { auth_data: { type: ConnectionType.ORACLE; user: string; @@ -52,7 +52,7 @@ interface ConnectionOracle { }; } -interface ConnectionPostgres { +export interface ConnectionPostgres { auth_data: { type: ConnectionType.POSTGRES; user: string; @@ -66,7 +66,7 @@ interface ConnectionPostgres { }; } -interface ConnectionS3 { +export interface ConnectionS3 { auth_data: { type: ConnectionType.S3; access_key: string; diff --git a/src/entities/connection/index.ts b/src/entities/connection/index.ts index 93c999ea..6b9a58e4 100644 --- a/src/entities/connection/index.ts +++ b/src/entities/connection/index.ts @@ -1,3 +1,4 @@ export * from './api'; export * from './constants'; export * from './ui'; +export * from './utils'; diff --git a/src/entities/connection/utils/adaptConnectionHdfs/index.ts b/src/entities/connection/utils/adaptConnectionHdfs/index.ts new file mode 100644 index 00000000..6b48cb6f --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionHdfs/index.ts @@ -0,0 +1,18 @@ +import { ConnectionHdfs } from '../../api'; + +import { AdaptConnectionHdfsProps } from './types'; + +/* Util for creating a ConnectionData object for "HDFS" connection by its fields */ +export const adaptConnectionHdfs = (data: AdaptConnectionHdfsProps): ConnectionHdfs => { + return { + auth_data: { + type: data.type, + user: data.user, + password: data.password, + }, + connection_data: { + type: data.type, + cluster: data.cluster, + }, + }; +}; diff --git a/src/entities/connection/utils/adaptConnectionHdfs/types.ts b/src/entities/connection/utils/adaptConnectionHdfs/types.ts new file mode 100644 index 00000000..22a19bba --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionHdfs/types.ts @@ -0,0 +1,3 @@ +import { ConnectionHdfs } from '../../api'; + +export type AdaptConnectionHdfsProps = ConnectionHdfs['auth_data'] & ConnectionHdfs['connection_data']; diff --git a/src/entities/connection/utils/adaptConnectionHive/index.ts b/src/entities/connection/utils/adaptConnectionHive/index.ts new file mode 100644 index 00000000..d86869d6 --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionHive/index.ts @@ -0,0 +1,18 @@ +import { ConnectionHive } from '../../api'; + +import { AdaptConnectionHiveProps } from './types'; + +/* Util for creating a ConnectionData object for "Hive" connection by its fields */ +export const adaptConnectionHive = (data: AdaptConnectionHiveProps): ConnectionHive => { + return { + auth_data: { + type: data.type, + user: data.user, + password: data.password, + }, + connection_data: { + type: data.type, + cluster: data.cluster, + }, + }; +}; diff --git a/src/entities/connection/utils/adaptConnectionHive/types.ts b/src/entities/connection/utils/adaptConnectionHive/types.ts new file mode 100644 index 00000000..da0483c8 --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionHive/types.ts @@ -0,0 +1,3 @@ +import { ConnectionHive } from '../../api'; + +export type AdaptConnectionHiveProps = ConnectionHive['auth_data'] & ConnectionHive['connection_data']; diff --git a/src/entities/connection/utils/adaptConnectionOracle/index.ts b/src/entities/connection/utils/adaptConnectionOracle/index.ts new file mode 100644 index 00000000..3b10f7cb --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionOracle/index.ts @@ -0,0 +1,21 @@ +import { ConnectionOracle } from '../../api'; + +import { AdaptConnectionOracleProps } from './types'; + +/* Util for creating a ConnectionData object for "Oracle" connection by its fields */ +export const adaptConnectionOracle = (data: AdaptConnectionOracleProps): ConnectionOracle => { + return { + auth_data: { + type: data.type, + user: data.user, + password: data.password, + }, + connection_data: { + type: data.type, + service_name: data.service_name, + sid: data.sid, + host: data.host, + port: data.port, + }, + }; +}; diff --git a/src/entities/connection/utils/adaptConnectionOracle/types.ts b/src/entities/connection/utils/adaptConnectionOracle/types.ts new file mode 100644 index 00000000..df8239e5 --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionOracle/types.ts @@ -0,0 +1,3 @@ +import { ConnectionOracle } from '../../api'; + +export type AdaptConnectionOracleProps = ConnectionOracle['auth_data'] & ConnectionOracle['connection_data']; diff --git a/src/entities/connection/utils/adaptConnectionPostgres/index.ts b/src/entities/connection/utils/adaptConnectionPostgres/index.ts new file mode 100644 index 00000000..268496ee --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionPostgres/index.ts @@ -0,0 +1,20 @@ +import { ConnectionPostgres } from '../../api'; + +import { AdaptConnectionPostgresProps } from './types'; + +/* Util for creating a ConnectionData object for "Postgres" connection by its fields */ +export const adaptConnectionPostgres = (data: AdaptConnectionPostgresProps): ConnectionPostgres => { + 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, + }, + }; +}; diff --git a/src/entities/connection/utils/adaptConnectionPostgres/types.ts b/src/entities/connection/utils/adaptConnectionPostgres/types.ts new file mode 100644 index 00000000..9917ec6d --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionPostgres/types.ts @@ -0,0 +1,3 @@ +import { ConnectionPostgres } from '../../api'; + +export type AdaptConnectionPostgresProps = ConnectionPostgres['auth_data'] & ConnectionPostgres['connection_data']; diff --git a/src/entities/connection/utils/adaptConnectionS3/index.ts b/src/entities/connection/utils/adaptConnectionS3/index.ts new file mode 100644 index 00000000..85a23f31 --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionS3/index.ts @@ -0,0 +1,23 @@ +import { ConnectionS3 } from '../../api'; + +import { AdaptConnectionS3Props } from './types'; + +/* Util for creating a ConnectionData object for "S3" connection by its fields */ +export const adaptConnectionS3 = (data: AdaptConnectionS3Props): ConnectionS3 => { + return { + auth_data: { + type: data.type, + access_key: data.access_key, + secret_key: data.secret_key, + }, + connection_data: { + type: data.type, + bucket_style: data.bucket_style, + bucket: data.bucket, + host: data.host, + protocol: data.protocol, + port: data.port, + region: data.region, + }, + }; +}; diff --git a/src/entities/connection/utils/adaptConnectionS3/types.ts b/src/entities/connection/utils/adaptConnectionS3/types.ts new file mode 100644 index 00000000..6ba5e3cc --- /dev/null +++ b/src/entities/connection/utils/adaptConnectionS3/types.ts @@ -0,0 +1,3 @@ +import { ConnectionS3 } from '../../api'; + +export type AdaptConnectionS3Props = ConnectionS3['auth_data'] & ConnectionS3['connection_data']; diff --git a/src/entities/connection/utils/index.ts b/src/entities/connection/utils/index.ts new file mode 100644 index 00000000..9d5ec57e --- /dev/null +++ b/src/entities/connection/utils/index.ts @@ -0,0 +1,5 @@ +export * from './adaptConnectionHdfs'; +export * from './adaptConnectionHive'; +export * from './adaptConnectionOracle'; +export * from './adaptConnectionPostgres'; +export * from './adaptConnectionS3'; diff --git a/src/features/connection/CreateConnection/index.tsx b/src/features/connection/CreateConnection/index.tsx index 776e3b1a..072b20cb 100644 --- a/src/features/connection/CreateConnection/index.tsx +++ b/src/features/connection/CreateConnection/index.tsx @@ -4,14 +4,17 @@ import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; import { Connection, ConnectionQueryKey, connectionService, ConnectionTypeForm } from '@entities/connection'; +import { adaptConnectionTypeRequest } from '../utils'; + import { CreateConnectionForm, CreateConnectionProps } from './types'; -import { adaptCreateConnectionRequest } from './utils'; export const CreateConnection = ({ group }: CreateConnectionProps) => { const navigate = useNavigate(); - const handleCreateConnection = (values: CreateConnectionForm) => { - return connectionService.createConnection(adaptCreateConnectionRequest(values, group.id)); + const handleCreateConnection = ({ name, description, ...values }: CreateConnectionForm) => { + return connectionService.createConnection( + Object.assign({ group_id: group.id, name, description }, adaptConnectionTypeRequest(values)), + ); }; const onSuccess = (response: Connection) => { diff --git a/src/features/connection/CreateConnection/utils/adaptCreateConnectionRequest/index.ts b/src/features/connection/CreateConnection/utils/adaptCreateConnectionRequest/index.ts deleted file mode 100644 index addf453e..00000000 --- a/src/features/connection/CreateConnection/utils/adaptCreateConnectionRequest/index.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { ConnectionType } from '@shared/types'; -import { CreateConnectionRequest } from '@entities/connection'; - -import { CreateConnectionForm } from '../../types'; - -/* Util for preparing request data for creating connection */ -export const adaptCreateConnectionRequest = ( - values: CreateConnectionForm, - groupId: number, -): CreateConnectionRequest => { - const baseRequestData = { - name: values.name, - description: values.description, - group_id: groupId, - }; - switch (values.type) { - case ConnectionType.HDFS: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - user: values.user, - password: values.password, - }, - connection_data: { - type: values.type, - cluster: values.cluster, - }, - }); - case ConnectionType.HIVE: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - user: values.user, - password: values.password, - }, - connection_data: { - type: values.type, - cluster: values.cluster, - }, - }); - case ConnectionType.ORACLE: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - user: values.user, - password: values.password, - }, - connection_data: { - type: values.type, - service_name: values.service_name, - sid: values.sid, - host: values.host, - port: values.port, - }, - }); - case ConnectionType.POSTGRES: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - user: values.user, - password: values.password, - }, - connection_data: { - type: values.type, - database_name: values.database_name, - host: values.host, - port: values.port, - }, - }); - case ConnectionType.S3: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - access_key: values.access_key, - secret_key: values.secret_key, - }, - connection_data: { - type: values.type, - bucket_style: values.bucket_style, - bucket: values.bucket, - host: values.host, - protocol: values.protocol, - port: values.port, - region: values.region, - }, - }); - } -}; diff --git a/src/features/connection/CreateConnection/utils/index.ts b/src/features/connection/CreateConnection/utils/index.ts deleted file mode 100644 index 40bb9f0a..00000000 --- a/src/features/connection/CreateConnection/utils/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './adaptCreateConnectionRequest'; diff --git a/src/features/connection/UpdateConnection/index.tsx b/src/features/connection/UpdateConnection/index.tsx index 6a58294e..34b21958 100644 --- a/src/features/connection/UpdateConnection/index.tsx +++ b/src/features/connection/UpdateConnection/index.tsx @@ -4,15 +4,18 @@ import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; import { Connection, ConnectionQueryKey, connectionService, ConnectionTypeForm } from '@entities/connection'; +import { adaptConnectionTypeRequest } from '../utils'; + import { UpdateConnectionForm, UpdateConnectionProps } from './types'; import { getUpdateConnectionInitialValues } from './utils'; -import { adaptUpdateConnectionRequest } from './utils/adaptUpdateConnectionRequest'; export const UpdateConnection = ({ connection, group }: UpdateConnectionProps) => { const navigate = useNavigate(); - const handleUpdateConnection = (values: UpdateConnectionForm) => { - return connectionService.updateConnection(adaptUpdateConnectionRequest(values, connection.id)); + const handleUpdateConnection = ({ name, description, ...values }: UpdateConnectionForm) => { + return connectionService.updateConnection( + Object.assign({ id: connection.id, name, description }, adaptConnectionTypeRequest(values)), + ); }; const onSuccess = (response: Connection) => { diff --git a/src/features/connection/UpdateConnection/types.ts b/src/features/connection/UpdateConnection/types.ts index 39aea141..775e0d0a 100644 --- a/src/features/connection/UpdateConnection/types.ts +++ b/src/features/connection/UpdateConnection/types.ts @@ -1,7 +1,7 @@ import { Connection, CreateConnectionRequest, UpdateConnectionRequest } from '@entities/connection'; import { GroupData } from '@entities/group'; -export type UpdateConnectionForm = Omit & +export type UpdateConnectionForm = Omit & CreateConnectionRequest['connection_data'] & CreateConnectionRequest['auth_data']; diff --git a/src/features/connection/UpdateConnection/utils/adaptUpdateConnectionRequest/index.ts b/src/features/connection/UpdateConnection/utils/adaptUpdateConnectionRequest/index.ts deleted file mode 100644 index b2129fc9..00000000 --- a/src/features/connection/UpdateConnection/utils/adaptUpdateConnectionRequest/index.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { ConnectionType } from '@shared/types'; -import { UpdateConnectionRequest } from '@entities/connection'; - -import { UpdateConnectionForm } from '../../types'; - -/* Util for preparing request data for updating connection */ -export const adaptUpdateConnectionRequest = ( - values: UpdateConnectionForm, - connectionId: number, -): UpdateConnectionRequest => { - const baseRequestData = { - name: values.name, - description: values.description, - id: connectionId, - }; - switch (values.type) { - case ConnectionType.HDFS: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - user: values.user, - password: values.password, - }, - connection_data: { - type: values.type, - cluster: values.cluster, - }, - }); - case ConnectionType.HIVE: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - user: values.user, - password: values.password, - }, - connection_data: { - type: values.type, - cluster: values.cluster, - }, - }); - case ConnectionType.ORACLE: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - user: values.user, - password: values.password, - }, - connection_data: { - type: values.type, - service_name: values.service_name, - sid: values.sid, - host: values.host, - port: values.port, - }, - }); - case ConnectionType.POSTGRES: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - user: values.user, - password: values.password, - }, - connection_data: { - type: values.type, - database_name: values.database_name, - host: values.host, - port: values.port, - }, - }); - case ConnectionType.S3: - return Object.assign(baseRequestData, { - auth_data: { - type: values.type, - access_key: values.access_key, - secret_key: values.secret_key, - }, - connection_data: { - type: values.type, - bucket_style: values.bucket_style, - bucket: values.bucket, - host: values.host, - protocol: values.protocol, - port: values.port, - region: values.region, - }, - }); - } -}; diff --git a/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts b/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts index 08cba531..e1e5eec2 100644 --- a/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts +++ b/src/features/connection/UpdateConnection/utils/getUpdateConnectionInitialValues/index.ts @@ -50,7 +50,6 @@ export const getUpdateConnectionInitialValues = (connection: Connection): Update return { name: connection.name, description: connection.description, - id: connection.id, type: ConnectionType.HDFS, cluster: '', user: '', diff --git a/src/features/connection/UpdateConnection/utils/index.ts b/src/features/connection/UpdateConnection/utils/index.ts index 4b7ba3df..9b2f85be 100644 --- a/src/features/connection/UpdateConnection/utils/index.ts +++ b/src/features/connection/UpdateConnection/utils/index.ts @@ -1,2 +1 @@ export * from './getUpdateConnectionInitialValues'; -export * from './adaptUpdateConnectionRequest'; diff --git a/src/features/connection/utils/adaptConnectionTypeRequest/index.ts b/src/features/connection/utils/adaptConnectionTypeRequest/index.ts new file mode 100644 index 00000000..573a474e --- /dev/null +++ b/src/features/connection/utils/adaptConnectionTypeRequest/index.ts @@ -0,0 +1,27 @@ +import { ConnectionType } from '@shared/types'; +import { + adaptConnectionHdfs, + adaptConnectionHive, + adaptConnectionOracle, + adaptConnectionPostgres, + adaptConnectionS3, + ConnectionData, +} from '@entities/connection'; + +import { AdaptConnectionTypeRequestProps } from './types'; + +/* Util for for creating ConnectionData object for preparing request data for creating/updating connection */ +export const adaptConnectionTypeRequest = (values: AdaptConnectionTypeRequestProps): ConnectionData => { + switch (values.type) { + case ConnectionType.HDFS: + return adaptConnectionHdfs(values); + case ConnectionType.HIVE: + return adaptConnectionHive(values); + case ConnectionType.ORACLE: + return adaptConnectionOracle(values); + case ConnectionType.POSTGRES: + return adaptConnectionPostgres(values); + case ConnectionType.S3: + return adaptConnectionS3(values); + } +}; diff --git a/src/features/connection/utils/adaptConnectionTypeRequest/types.ts b/src/features/connection/utils/adaptConnectionTypeRequest/types.ts new file mode 100644 index 00000000..01f42b7c --- /dev/null +++ b/src/features/connection/utils/adaptConnectionTypeRequest/types.ts @@ -0,0 +1,3 @@ +import { ConnectionData } from '@entities/connection'; + +export type AdaptConnectionTypeRequestProps = ConnectionData['auth_data'] & ConnectionData['connection_data']; diff --git a/src/features/connection/utils/index.ts b/src/features/connection/utils/index.ts new file mode 100644 index 00000000..bca9a6c7 --- /dev/null +++ b/src/features/connection/utils/index.ts @@ -0,0 +1 @@ +export * from './adaptConnectionTypeRequest';