[FE-data] Add initial value setting when no data source is selected #250

frontend-web/src/pages/Data/DataSource/form/OracleDatabaseForm.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Stack, TextField } from '@mui/material';
+import SubmitButton from '@/components/button/SubmitButton';
+
+const inputStyle = {
+  width: '800px',
+};
+
+const OracleDatabaseForm = props => {
+  const { testConnect, formData, setFormData } = props;
+  const handleSubmit = data => {
+    data.preventDefault();
+    const item = {
+      name: data.target.name.value,
+      host: data.target.host.value,
+      port: Number(data.target.port.value),
+      user: data.target.user.value,
+      password: data.target.password.value,
+      database: data.target.database.value,
+      instanceName: data.target.instanceName.value,
+      fetchAsString: data.target.fetchAsString.value,
+      requestTimeout: data.target.requestTimeout.value,
+    };
+    testConnect(item);
+  };
+
+  const handleNameChange = event => {
+    setFormData(prevState => ({ ...prevState, [event.target.name]: event.target.value }));
+  };
+
+  const handleChange = event => {
+    setFormData(prevState => ({ ...prevState, oracle: { ...prevState.oracle, [event.target.name]: event.target.value } }));
+  };
+
+  return (
+    <Stack component="form" sx={{ maxWidth: 800, mx: 'auto', mt: 3 }} onSubmit={handleSubmit}>
+      <Stack sx={{ display: 'flex', justifyContent: 'space-between' }} spacing="20px">
+        <TextField
+          label="이름"
+          name="name"
+          value={formData?.name || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleNameChange}
+        />
+        <TextField
+          label="Host"
+          name="host"
+          value={formData?.oracle?.host || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Port"
+          name="port"
+          type="number"
+          value={formData?.oracle?.port || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="User"
+          name="user"
+          value={formData?.oracle?.user || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Password"
+          name="password"
+          value={formData?.oracle?.password || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Database"
+          name="database"
+          value={formData?.oracle?.database || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="InstanceName"
+          name="instanceName"
+          value={formData?.oracle?.instanceName || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="FetchAsString"
+          name="fetchAsString"
+          value={formData?.oracle?.fetchAsString || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="RequestTimeout"
+          name="requestTimeout"
+          value={formData?.oracle?.requestTimeout || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <SubmitButton label="TEST CONNECT" type="submit" sx={{ height: '50px', fontSize: '13px' }} />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default OracleDatabaseForm;

frontend-web/src/pages/Data/DataSource/index.tsx

@@ -15,6 +15,7 @@ import BigQueryDatabaseForm from '@/pages/Data/DataSource/form/BigQueryDatabaseF
 import { SnackbarContext } from '@/contexts/AlertContext';
 import { LoadingContext } from '@/contexts/LoadingContext';
 import SnowflakeDatabaseForm from '@/pages/Data/DataSource/form/SnowflakeDatabaseForm';
+import OracleDatabaseForm from '@/pages/Data/DataSource/form/OracleDatabaseForm';
 
 function DataSource() {
   const { sourceId } = useParams();
@@ -30,8 +31,8 @@ function DataSource() {
   const [typeList, setTypeList] = useState([]);
   const [formData, setFormData] = useState<any>({
     type: '',
+    name: '',
     default: {
-      name: '',
       host: '',
       port: null,
       user: '',
@@ -39,17 +40,28 @@ function DataSource() {
       database: '',
     },
     sqlite: {
-      name: '',
+      // name: '',
       filename: '',
     },
     bigquery: {
-      name: '',
+      // name: '',
       projectId: '',
       filename: '',
       database: '',
     },
+    oracle: {
+      // name: '',
+      host: '',
+      port: null,
+      user: '',
+      password: '',
+      database: '',
+      instanceName: '',
+      fetchAsString: '',
+      requestTimeout: '',
+    },
     snowflake: {
-      name: '',
+      // name: '',
       account: '',
       username: '',
       password: '',
@@ -98,6 +110,17 @@ function DataSource() {
             keyFilename: databaseInfo.connectionConfig.keyFilename,
             schema: databaseInfo.connectionConfig.schema,
           };
+        } else if (databaseInfo.type === 'oracle') {
+          temp.oracle = {
+            host: databaseInfo.connectionConfig.host,
+            port: Number(databaseInfo.connectionConfig.port),
+            user: databaseInfo.connectionConfig.user,
+            password: databaseInfo.connectionConfig.password,
+            database: databaseInfo.connectionConfig.database,
+            instanceName: databaseInfo.connectionConfig.instanceName,
+            fetchAsString: databaseInfo.connectionConfig.fetchAsString,
+            requestTimeout: databaseInfo.connectionConfig.requestTimeout,
+          };
         } else if (databaseInfo.type === 'snowflake') {
           temp.snowflake = {
             account: databaseInfo.connectionConfig.account,
@@ -152,9 +175,9 @@ function DataSource() {
         const list = response.data.data;
         list.map(item => (item.icon = getDatabaseIcon(item.type)));
         setTypeList(list);
-        if (list.length > 0) {
-          setDataType(list[0]);
-        }
+        // if (list.length > 0) {
+        //   setDataType(list[0]);
+        // }
       }
     });
   };
@@ -172,6 +195,8 @@ function DataSource() {
         return 'sqlite';
       case 'bigquery':
         return 'bigquery';
+      case 'oracle':
+        return 'oracle';
       case 'snowflake':
         return 'snowflake';
       default:
@@ -242,8 +267,12 @@ function DataSource() {
         return <SqliteDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
       case 'bigquery':
         return <BigQueryDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case 'oracle':
+        return <OracleDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
       case 'snowflake':
         return <SnowflakeDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case undefined:
+        return <Typography sx={{ my: '160px', mx: 'auto' }}>데이터 소스 타입을 먼저 선택해 주세요.</Typography>;
       default:
         return <DatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
     }