mysql, mssql connect

web/src/modals/ConnectionModal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import ModalBase from './ModalBase';
-import { FormRow, FormLabel, FormValue, FormTextField, FormSubmit } from '../utility/forms';
+import { FormRow, FormLabel, FormValue, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
 import { TextField } from '../utility/inputs';
 import { Formik, Form } from 'formik';
 // import FormikForm from '../utility/FormikForm';
@@ -21,8 +21,13 @@ export default function ConnectionModal({ modalState }) {
   return (
     <ModalBase modalState={modalState}>
       <h2>Add connection</h2>
-      <Formik onSubmit={handleSubmit} initialValues={{ server: 'localhost' }}>
+      <Formik onSubmit={handleSubmit} initialValues={{ server: 'localhost', engine: 'mssql' }}>
         <Form>
+          <FormSelectField label="Database engine" name="engine">
+            <option value="mssql">Microsoft SQL Server</option>
+            <option value="mysql">MySQL</option>
+            <option value="postgre">Postgre SQL</option>
+          </FormSelectField>
           <FormTextField label="Server" name="server" />
           <FormTextField label="Port" name="port" />
           <FormTextField label="User" name="user" />

web/src/utility/forms.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { TextField } from './inputs';
+import { TextField, SelectField } from './inputs';
 import { Field } from 'formik';
 
 export const FormRow = styled.div`
@@ -26,10 +26,23 @@ export function FormTextField({ label, ...other }) {
   );
 }
 
-export function FormSubmit({text}) {
+export function FormSelectField({ label, children, ...other }) {
   return (
     <FormRow>
-      <input type="submit" value={text}/>
+      <FormLabel>{label}</FormLabel>
+      <FormValue>
+        <Field {...other} as={SelectField}>
+          {children}
+        </Field>
+      </FormValue>
+    </FormRow>
+  );
+}
+
+export function FormSubmit({ text }) {
+  return (
+    <FormRow>
+      <input type="submit" value={text} />
     </FormRow>
   );
 }

web/src/utility/inputs.js

@@ -3,3 +3,11 @@ import React from 'react';
 export function TextField({ ...other }) {
   return <input type="text" {...other}></input>;
 }
+
+export function SelectField({ children, ...other }) {
+  return (
+    <select {...other}>
+      {children}
+    </select>
+  );
+}