Merge Samba and S3 auth with other fields

Author: dolfinus

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Form, Input } from 'antd';
 import { useTranslation } from 'react-i18next';
 
@@ -8,9 +8,14 @@ export const ConnectionAuthBasic = () => {
   const { t } = useTranslation('auth');
   const { isRequired } = useSensitiveFields();
 
+  // Reset auth type after switching connection type in form
+  const formInstance = Form.useFormInstance();
+  useEffect(() => {
+    formInstance.setFieldValue(['auth_data', 'type'], 'basic');
+  }, [formInstance]);
+
   return (
     <>
-      {/* Hide Form.Item control, because its value is set in 'useSelectConnectionType' hook */}
       <Form.Item name={['auth_data', 'type']} hidden />
       <Form.Item label={t('username')} name={['auth_data', 'user']} rules={[{ required: true }]}>
         <Input size="large" />

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

@@ -1,12 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Form, Input, Radio } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import { ConnectionAuthS3 } from '../ConnectionAuthS3';
 import { ConnectionHttpProtocol } from '../ConnectionHttpProtocol';
+import { useSensitiveFields } from '../../hooks';
 
 export const ConnectionS3 = () => {
   const { t } = useTranslation('connection');
+  const { isRequired } = useSensitiveFields();
+
+  // Reset auth type after switching connection type in form
+  const formInstance = Form.useFormInstance();
+  useEffect(() => {
+    formInstance.setFieldValue(['auth_data', 'type'], 's3');
+  }, [formInstance]);
 
   return (
     <>
@@ -31,7 +38,14 @@ export const ConnectionS3 = () => {
       <Form.Item label={t('s3.region')} name={['connection_data', 'region']}>
         <Input size="large" placeholder="us-east-1" />
       </Form.Item>
-      <ConnectionAuthS3 />
+
+      <Form.Item name={['auth_data', 'type']} hidden />
+      <Form.Item label={t('s3.accessKey')} name={['auth_data', 'access_key']} rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item label={t('s3.secretKey')} name={['auth_data', 'secret_key']} rules={[{ required: isRequired }]}>
+        <Input.Password size="large" />
+      </Form.Item>
     </>
   );
 };

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

@@ -1,13 +1,15 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Form, Input, InputNumber, Radio, RadioChangeEvent } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import { MAX_ALLOWED_PORT, MIN_ALLOWED_PORT } from '../../constants';
-import { ConnectionAuthSamba } from '../ConnectionAuthSamba';
+import { useSensitiveFields } from '../../hooks';
 
 export const ConnectionSamba = () => {
   const { t } = useTranslation('connection');
+  const { isRequired } = useSensitiveFields();
 
+  // Reset auth type after switching connection type in form
   const formInstance = Form.useFormInstance();
   Form.useWatch('protocol', formInstance);
 
@@ -21,6 +23,10 @@ export const ConnectionSamba = () => {
     }
   };
 
+  useEffect(() => {
+    formInstance.setFieldValue(['auth_data', 'type'], 'samba');
+  }, [formInstance]);
+
   return (
     <>
       <Form.Item label={t('host')} name={['connection_data', 'host']} rules={[{ required: true }]}>
@@ -46,7 +52,25 @@ export const ConnectionSamba = () => {
       <Form.Item label={t('samba.domain')} name={['connection_data', 'domain']}>
         <Input size="large" placeholder="mycompany.com" />
       </Form.Item>
-      <ConnectionAuthSamba />
+
+      {/* Hide Form.Item control, because its value is set in 'useSelectConnectionType' hook */}
+      <Form.Item name={['auth_data', 'type']} hidden />
+      <Form.Item label={t('username', { ns: 'auth' })} name={['auth_data', 'user']} rules={[{ required: true }]}>
+        <Input size="large" />
+      </Form.Item>
+      <Form.Item
+        label={t('password', { ns: 'auth' })}
+        name={['auth_data', 'password']}
+        rules={[{ required: isRequired }]}
+      >
+        <Input.Password size="large" />
+      </Form.Item>
+      <Form.Item label={t('samba.authType')} name={['auth_data', 'auth_type']} initialValue="NTLMv2">
+        <Radio.Group>
+          <Radio.Button value="NTLMv1">NTLMv1</Radio.Button>
+          <Radio.Button value="NTLMv2">NTLMv2</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
     </>
   );
 };

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

@@ -1,39 +1,14 @@
 import { ConnectionType } from '@shared/types';
-import { Form } from 'antd';
 import { useState } from 'react';
-import { ConnectionAuthType } from '@entities/connection';
 
 import { UseSelectConnectionTypeProps } from './types';
 
 /** Hook for handling connection type state in connection form */
 export const useSelectConnectionType = ({ initialType }: UseSelectConnectionTypeProps) => {
-  const formInstance = Form.useFormInstance();
   const [selectedConnectionType, setConnectionType] = useState<ConnectionType | undefined>(initialType);
 
-  const getAuthDataTypeValue = (type: ConnectionType): ConnectionAuthType => {
-    switch (type) {
-      case ConnectionType.CLICKHOUSE:
-      case ConnectionType.FTP:
-      case ConnectionType.FTPS:
-      case ConnectionType.HDFS:
-      case ConnectionType.HIVE:
-      case ConnectionType.MSSQL:
-      case ConnectionType.MYSQL:
-      case ConnectionType.ORACLE:
-      case ConnectionType.POSTGRES:
-      case ConnectionType.SFTP:
-      case ConnectionType.WEBDAV:
-        return ConnectionAuthType.BASIC;
-      case ConnectionType.S3:
-        return ConnectionAuthType.S3;
-      case ConnectionType.SAMBA:
-        return ConnectionAuthType.SAMBA;
-    }
-  };
-
   const handleSelectConnectionType = (type: ConnectionType) => {
     setConnectionType(type);
-    formInstance.setFieldValue(['auth_data', 'type'], getAuthDataTypeValue(type));
   };
 
   return { selectedConnectionType, handleSelectConnectionType };