[FE-data] Add connection of snowflake #207

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

@@ -72,7 +72,6 @@ const DatabaseForm = props => {
         <TextField
           label="Password"
           name="password"
-          type="password"
           value={formData?.default?.password || ''}
           required
           fullWidth

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Stack, TextField } from '@mui/material';
+import SubmitButton from '@/components/button/SubmitButton';
+
+const inputStyle = {
+  width: '800px',
+};
+
+const SnowflakeDatabaseForm = props => {
+  const { testConnect, formData, setFormData } = props;
+  const handleSubmit = data => {
+    data.preventDefault();
+    const item = {
+      name: data.target.name.value,
+      account: data.target.account.value,
+      username: data.target.username.value,
+      password: data.target.password.value,
+      database: data.target.database.value,
+      application: data.target.application.value,
+      schema: data.target.schema.value,
+      warehouse: data.target.warehouse.value,
+    };
+    testConnect(item);
+  };
+
+  const handleNameChange = event => {
+    setFormData(prevState => ({ ...prevState, [event.target.name]: event.target.value }));
+  };
+
+  const handleChange = event => {
+    setFormData(prevState => ({
+      ...prevState,
+      snowflake: { ...prevState.snowflake, [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="Account"
+          name="account"
+          value={formData?.snowflake?.account || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Username"
+          name="username"
+          value={formData?.snowflake?.username || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Password"
+          name="password"
+          value={formData?.snowflake?.password || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Database"
+          name="database"
+          value={formData?.snowflake?.database || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />{' '}
+        <TextField
+          label="Application"
+          name="application"
+          value={formData?.snowflake?.application || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Schema"
+          name="schema"
+          value={formData?.snowflake?.schema || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <TextField
+          label="Warehouse"
+          name="warehouse"
+          value={formData?.snowflake?.warehouse || ''}
+          required
+          fullWidth
+          sx={inputStyle}
+          onChange={handleChange}
+        />
+        <SubmitButton label="TEST CONNECT" type="submit" sx={{ height: '50px', fontSize: '13px' }} />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default SnowflakeDatabaseForm;

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

@@ -14,6 +14,7 @@ import SqliteDatabaseForm from '@/pages/Data/DataSource/form/SqliteDatabaseForm'
 import BigQueryDatabaseForm from '@/pages/Data/DataSource/form/BigQueryDatabaseForm';
 import { SnackbarContext } from '@/contexts/AlertContext';
 import { LoadingContext } from '@/contexts/LoadingContext';
+import SnowflakeDatabaseForm from '@/pages/Data/DataSource/form/SnowflakeDatabaseForm';
 
 function DataSource() {
   const { sourceId } = useParams();
@@ -47,6 +48,16 @@ function DataSource() {
       filename: '',
       database: '',
     },
+    snowflake: {
+      name: '',
+      account: '',
+      username: '',
+      password: '',
+      database: '',
+      application: '',
+      schema: '',
+      warehouse: '',
+    },
   });
 
   useLayoutEffect(() => {
@@ -81,14 +92,22 @@ function DataSource() {
           temp.sqlite = {
             filename: databaseInfo.connectionConfig.filename,
           };
-        }
-        if (databaseInfo.type === 'bigquery') {
+        } else if (databaseInfo.type === 'bigquery') {
           temp.bigquery = {
-            name: databaseInfo.connectionConfig.name,
             projectId: databaseInfo.connectionConfig.projectId,
             keyFilename: databaseInfo.connectionConfig.keyFilename,
             schema: databaseInfo.connectionConfig.schema,
           };
+        } else if (databaseInfo.type === 'snowflake') {
+          temp.snowflake = {
+            account: databaseInfo.connectionConfig.account,
+            username: databaseInfo.connectionConfig.username,
+            password: databaseInfo.connectionConfig.password,
+            database: databaseInfo.connectionConfig.database,
+            application: databaseInfo.connectionConfig.application,
+            schema: databaseInfo.connectionConfig.schema,
+            warehouse: databaseInfo.connectionConfig.warehouse,
+          };
         } else {
           temp.default = {
             host: databaseInfo.connectionConfig.host,
@@ -153,6 +172,8 @@ function DataSource() {
         return 'sqlite';
       case 'bigquery':
         return 'bigquery';
+      case 'snowflake':
+        return 'snowflake';
       default:
         return 'default';
     }
@@ -221,6 +242,8 @@ function DataSource() {
         return <SqliteDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
       case 'bigquery':
         return <BigQueryDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
+      case 'snowflake':
+        return <SnowflakeDatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
       default:
         return <DatabaseForm testConnect={testConnect} formData={formData} setFormData={setFormData} />;
     }

frontend-web/src/theme/theme.tsx

@@ -318,6 +318,26 @@ export default createTheme({
         },
       },
     },
+    MuiAlert: {
+      styleOverrides: {
+        standardSuccess: {
+          color: '#184a00',
+          backgroundColor: '#ecf8e6',
+        },
+        standardError: {
+          color: '#a00000',
+          backgroundColor: '#ffeded',
+        },
+      },
+    },
+    MuiSnackbar: {
+      styleOverrides: {
+        root: {
+          borderRadius: '4px',
+          boxShadow: '2px 2px 4px 0 rgba(0, 0, 0, 0.15)',
+        },
+      },
+    },
     MuiCssBaseline: {
       styleOverrides: {
         'html, body, #root': {