From 84b207eddb76531fb98acc6ddec44286a1851939 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Tue, 20 Jul 2021 13:20:41 -0600
Subject: [PATCH] ui(admin): fix eslint errors, add CreateAllocationForm

---
 .../scripts/api/admin/nodes/getAllocations.ts |   4 +-
 .../admin/databases/DatabasesContainer.tsx    |  14 +-
 .../admin/locations/LocationsContainer.tsx    |  14 +-
 .../admin/mounts/MountsContainer.tsx          |  14 +-
 .../components/admin/nests/NestEggTable.tsx   |  14 +-
 .../components/admin/nests/NestsContainer.tsx |  14 +-
 .../admin/nodes/CreateAllocationForm.tsx      |  97 +++++++++
 .../admin/nodes/NodeAllocationContainer.tsx   |  84 +-------
 .../components/admin/nodes/NodesContainer.tsx |  14 +-
 .../components/admin/roles/RolesContainer.tsx |  14 +-
 .../admin/servers/ServersContainer.tsx        |  13 +-
 .../components/admin/users/UsersContainer.tsx |  13 +-
 .../scripts/components/elements/Select2.ts    | 101 ----------
 .../components/elements/SelectField.tsx       | 190 ++++++++++++++++++
 14 files changed, 311 insertions(+), 289 deletions(-)
 create mode 100644 resources/scripts/components/admin/nodes/CreateAllocationForm.tsx
 delete mode 100644 resources/scripts/components/elements/Select2.ts
 create mode 100644 resources/scripts/components/elements/SelectField.tsx

diff --git a/resources/scripts/api/admin/nodes/getAllocations.ts b/resources/scripts/api/admin/nodes/getAllocations.ts
index 791af342c..4809d2703 100644
--- a/resources/scripts/api/admin/nodes/getAllocations.ts
+++ b/resources/scripts/api/admin/nodes/getAllocations.ts
@@ -18,9 +18,9 @@ export const rawDataToAllocation = (data: FractalResponseData): Allocation => ({
     assigned: data.attributes.assigned,
 });
 
-export default (uuid: string): Promise<Allocation[]> => {
+export default (id: string | number): Promise<Allocation[]> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/application/nodes/${uuid}/allocations`)
+        http.get(`/api/application/nodes/${id}/allocations`)
             .then(({ data }) => resolve((data.data || []).map(rawDataToAllocation)))
             .catch(reject);
     });
diff --git a/resources/scripts/components/admin/databases/DatabasesContainer.tsx b/resources/scripts/components/admin/databases/DatabasesContainer.tsx
index 5cdc057e5..93ffc86b4 100644
--- a/resources/scripts/components/admin/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/admin/databases/DatabasesContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import getDatabases, { Context as DatabasesContext, Filters } from '@/api/admin/databases/getDatabases';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
@@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, {
-    TableBody,
-    TableHead,
-    TableHeader,
-    TableRow,
-    Pagination,
-    Loading,
-    NoItems,
-    ContentWrapper,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 
diff --git a/resources/scripts/components/admin/locations/LocationsContainer.tsx b/resources/scripts/components/admin/locations/LocationsContainer.tsx
index 190843740..9cc11bb2b 100644
--- a/resources/scripts/components/admin/locations/LocationsContainer.tsx
+++ b/resources/scripts/components/admin/locations/LocationsContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import getLocations, { Context as LocationsContext, Filters } from '@/api/admin/locations/getLocations';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
@@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, {
-    TableBody,
-    TableHead,
-    TableHeader,
-    TableRow,
-    Pagination,
-    Loading,
-    NoItems,
-    ContentWrapper,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 import NewLocationButton from '@/components/admin/locations/NewLocationButton';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 
diff --git a/resources/scripts/components/admin/mounts/MountsContainer.tsx b/resources/scripts/components/admin/mounts/MountsContainer.tsx
index 415a69078..e627a3a85 100644
--- a/resources/scripts/components/admin/mounts/MountsContainer.tsx
+++ b/resources/scripts/components/admin/mounts/MountsContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import getMounts, { Context as MountsContext, Filters } from '@/api/admin/mounts/getMounts';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
@@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, {
-    TableBody,
-    TableHead,
-    TableHeader,
-    TableRow,
-    Pagination,
-    Loading,
-    NoItems,
-    ContentWrapper,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 
diff --git a/resources/scripts/components/admin/nests/NestEggTable.tsx b/resources/scripts/components/admin/nests/NestEggTable.tsx
index 4bb573b32..b13d122f5 100644
--- a/resources/scripts/components/admin/nests/NestEggTable.tsx
+++ b/resources/scripts/components/admin/nests/NestEggTable.tsx
@@ -1,21 +1,11 @@
 import CopyOnClick from '@/components/elements/CopyOnClick';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import getEggs, { Context as EggsContext, Filters } from '@/api/admin/nests/getEggs';
 import useFlash from '@/plugins/useFlash';
 import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, {
-    TableBody,
-    TableHead,
-    TableHeader,
-    TableRow,
-    Pagination,
-    Loading,
-    NoItems,
-    ContentWrapper,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 import { Context } from '@/components/admin/nests/NestEditContainer';
 
 const RowCheckbox = ({ id }: { id: number}) => {
diff --git a/resources/scripts/components/admin/nests/NestsContainer.tsx b/resources/scripts/components/admin/nests/NestsContainer.tsx
index 6b89518da..6654aa28d 100644
--- a/resources/scripts/components/admin/nests/NestsContainer.tsx
+++ b/resources/scripts/components/admin/nests/NestsContainer.tsx
@@ -1,5 +1,5 @@
 import CopyOnClick from '@/components/elements/CopyOnClick';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import getNests, { Context as NestsContext, Filters } from '@/api/admin/nests/getNests';
 import NewNestButton from '@/components/admin/nests/NewNestButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -9,17 +9,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, {
-    TableBody,
-    TableHead,
-    TableHeader,
-    TableRow,
-    Pagination,
-    Loading,
-    NoItems,
-    ContentWrapper,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 
 const RowCheckbox = ({ id }: { id: number}) => {
     const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);
diff --git a/resources/scripts/components/admin/nodes/CreateAllocationForm.tsx b/resources/scripts/components/admin/nodes/CreateAllocationForm.tsx
new file mode 100644
index 000000000..3da5ac7c2
--- /dev/null
+++ b/resources/scripts/components/admin/nodes/CreateAllocationForm.tsx
@@ -0,0 +1,97 @@
+import { Form, Formik, FormikHelpers } from 'formik';
+import React, { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+import { array, number, object, string } from 'yup';
+import getAllocations from '@/api/admin/nodes/getAllocations';
+import Button from '@/components/elements/Button';
+import SelectField, { Option } from '@/components/elements/SelectField';
+
+interface Values {
+    ips: string[];
+    ports: number[];
+}
+
+const distinct = (value: any, index: any, self: any) => {
+    return self.indexOf(value) === index;
+};
+
+function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
+    const [ ips, setIPs ] = useState<Option[]>([]);
+    const [ ports ] = useState<Option[]>([]);
+
+    useEffect(() => {
+        getAllocations(nodeId)
+            .then(allocations => {
+                setIPs(allocations.map(a => a.ip).filter(distinct).map(ip => {
+                    return { value: ip, label: ip };
+                }));
+            });
+    }, [ nodeId ]);
+
+    const isValidIP = (inputValue: string): boolean => {
+        // TODO: Better way of checking for a valid ip (and CIDR).
+        return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
+    };
+
+    const isValidPort = (inputValue: string): boolean => {
+        // TODO: Better way of checking for a valid port (and port range)
+        return inputValue.match(/^([0-9-]+)$/) !== null;
+    };
+
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        setSubmitting(false);
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                ips: [] as string[],
+                ports: [] as number[],
+            }}
+            validationSchema={object().shape({
+                ips: array(string()).min(1, 'You must select at least one ip address.'),
+                ports: array(number()).min(1, 'You must select at least one port.'),
+            })}
+        >
+            {
+                ({ isSubmitting, isValid }) => (
+                    <Form>
+                        <SelectField
+                            id={'ips'}
+                            name={'ips'}
+                            label={'IPs and CIDRs'}
+                            options={ips}
+                            isValidNewOption={isValidIP}
+                            isMulti
+                            isSearchable
+                            isCreatable
+                            css={tw`mb-6`}
+                        />
+
+                        <SelectField
+                            id={'ports'}
+                            name={'ports'}
+                            label={'Ports'}
+                            options={ports}
+                            isValidNewOption={isValidPort}
+                            isMulti
+                            isSearchable
+                            isCreatable
+                        />
+
+                        <div css={tw`w-full flex flex-row items-center mt-6`}>
+                            <div css={tw`flex ml-auto`}>
+                                <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                    Create Allocations
+                                </Button>
+                            </div>
+                        </div>
+                    </Form>
+                )
+            }
+        </Formik>
+    );
+}
+
+export default CreateAllocationForm;
diff --git a/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx b/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx
index d28f5ffc7..92b3fecb7 100644
--- a/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx
@@ -1,90 +1,14 @@
-import Label from '@/components/elements/Label';
-import React, { useEffect, useState } from 'react';
-import AdminBox from '@/components/admin/AdminBox';
-import Creatable from 'react-select/creatable';
-import { ActionMeta, GroupTypeBase, InputActionMeta, ValueType } from 'react-select/src/types';
-import { SelectStyle } from '@/components/elements/Select2';
-import tw from 'twin.macro';
-import getAllocations from '@/api/admin/nodes/getAllocations';
+import React from 'react';
 import { useRouteMatch } from 'react-router-dom';
-
-interface Option {
-    value: string;
-    label: string;
-}
-
-const distinct = (value: any, index: any, self: any) => {
-    return self.indexOf(value) === index;
-};
+import AdminBox from '@/components/admin/AdminBox';
+import CreateAllocationForm from '@/components/admin/nodes/CreateAllocationForm';
 
 export default () => {
     const match = useRouteMatch<{ id: string }>();
 
-    const [ ips, setIPs ] = useState<Option[]>([]);
-    const [ ports ] = useState<Option[]>([]);
-
-    useEffect(() => {
-        getAllocations(match.params.id)
-            .then(allocations => {
-                setIPs(allocations.map(a => a.ip).filter(distinct).map(ip => {
-                    return { value: ip, label: ip };
-                }));
-            });
-    }, []);
-
-    const onChange = (value: ValueType<Option, any>, action: ActionMeta<any>) => {
-        console.log({
-            event: 'onChange',
-            value,
-            action,
-        });
-    };
-
-    const onInputChange = (newValue: string, actionMeta: InputActionMeta) => {
-        console.log({
-            event: 'onInputChange',
-            newValue,
-            actionMeta,
-        });
-    };
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const isValidNewOption1 = (inputValue: string, selectValue: ValueType<Option, any>, selectOptions: ReadonlyArray<Option | GroupTypeBase<Option>>): boolean => {
-        return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
-    };
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const isValidNewOption2 = (inputValue: string, selectValue: ValueType<Option, any>, selectOptions: ReadonlyArray<Option | GroupTypeBase<Option>>): boolean => {
-        return inputValue.match(/^([0-9-]+)$/) !== null;
-    };
-
     return (
         <AdminBox title={'Allocations'}>
-            <div css={tw`mb-6`}>
-                <Label>IPs and CIDRs</Label>
-                <Creatable
-                    options={ips}
-                    styles={SelectStyle}
-                    onChange={onChange}
-                    onInputChange={onInputChange}
-                    isValidNewOption={isValidNewOption1}
-                    isMulti
-                    isSearchable
-                />
-            </div>
-
-            <div css={tw`mb-6`}>
-                <Label>Ports</Label>
-                <Creatable
-                    options={ports}
-                    styles={SelectStyle}
-                    // onChange={onChange}
-                    // onInputChange={onInputChange}
-                    isValidNewOption={isValidNewOption2}
-                    isMulti
-                    isSearchable
-                />
-            </div>
+            <CreateAllocationForm nodeId={match.params.id}/>
         </AdminBox>
     );
 };
diff --git a/resources/scripts/components/admin/nodes/NodesContainer.tsx b/resources/scripts/components/admin/nodes/NodesContainer.tsx
index f55fd7247..cc119910a 100644
--- a/resources/scripts/components/admin/nodes/NodesContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodesContainer.tsx
@@ -1,5 +1,5 @@
 import { Filters } from '@/api/admin/servers/getServers';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import getNodes, { Context as NodesContext } from '@/api/admin/nodes/getNodes';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
@@ -8,17 +8,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, {
-    TableBody,
-    TableHead,
-    TableHeader,
-    TableRow,
-    Pagination,
-    Loading,
-    NoItems,
-    ContentWrapper,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import { bytesToHuman, megabytesToBytes } from '@/helpers';
diff --git a/resources/scripts/components/admin/roles/RolesContainer.tsx b/resources/scripts/components/admin/roles/RolesContainer.tsx
index 1ef9a70a5..5404da22d 100644
--- a/resources/scripts/components/admin/roles/RolesContainer.tsx
+++ b/resources/scripts/components/admin/roles/RolesContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import getRoles, { Context as RolesContext, Filters } from '@/api/admin/roles/getRoles';
 import { AdminContext } from '@/state/admin';
 import NewRoleButton from '@/components/admin/roles/NewRoleButton';
@@ -8,17 +8,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, {
-    TableBody,
-    TableHead,
-    TableHeader,
-    TableRow,
-    Pagination,
-    Loading,
-    NoItems,
-    ContentWrapper,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 
 const RowCheckbox = ({ id }: { id: number }) => {
diff --git a/resources/scripts/components/admin/servers/ServersContainer.tsx b/resources/scripts/components/admin/servers/ServersContainer.tsx
index a97d9e880..50d78a805 100644
--- a/resources/scripts/components/admin/servers/ServersContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServersContainer.tsx
@@ -1,16 +1,7 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, {
-    ContentWrapper,
-    Loading,
-    NoItems,
-    Pagination,
-    TableBody,
-    TableHead,
-    TableHeader,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import FlashMessageRender from '@/components/FlashMessageRender';
diff --git a/resources/scripts/components/admin/users/UsersContainer.tsx b/resources/scripts/components/admin/users/UsersContainer.tsx
index 66038310d..790e7dfad 100644
--- a/resources/scripts/components/admin/users/UsersContainer.tsx
+++ b/resources/scripts/components/admin/users/UsersContainer.tsx
@@ -1,17 +1,8 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import getUsers, { Context as UsersContext, Filters } from '@/api/admin/users/getUsers';
-import AdminTable, {
-    ContentWrapper,
-    Loading,
-    NoItems,
-    Pagination,
-    TableBody,
-    TableHead,
-    TableHeader,
-    useTableHooks
-} from '@/components/admin/AdminTable';
+import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
diff --git a/resources/scripts/components/elements/Select2.ts b/resources/scripts/components/elements/Select2.ts
deleted file mode 100644
index 7c73b3e53..000000000
--- a/resources/scripts/components/elements/Select2.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { CSSObject } from '@emotion/serialize';
-import { ContainerProps, ControlProps, InputProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
-import { theme } from 'twin.macro';
-
-type T = any;
-
-export const SelectStyle: StylesConfig<T, any, any> = {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    container: (base: CSSObject, props: ContainerProps<T, any, any>): CSSObject => {
-        return {
-            ...base,
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    control: (base: CSSObject, props: ControlProps<T, any, any>): CSSObject => {
-        return {
-            ...base,
-            height: '2.75rem',
-            /* paddingTop: '0.75rem',
-            paddingBottom: '0.75rem',
-            paddingLeft: '4rem',
-            paddingRight: '4rem', */
-            background: theme`colors.neutral.600`,
-            borderColor: theme`colors.neutral.500`,
-            borderWidth: '2px',
-            color: theme`colors.neutral.200`,
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    input: (base: CSSObject, props: InputProps): CSSObject => {
-        return {
-            ...base,
-            color: theme`colors.neutral.200`,
-            fontSize: '0.875rem',
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    menu: (base: CSSObject, props: MenuProps<T, any, any>): CSSObject => {
-        return {
-            ...base,
-            background: theme`colors.neutral.900`,
-            color: theme`colors.neutral.200`,
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    multiValue: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
-        return {
-            ...base,
-            background: theme`colors.neutral.900`,
-            color: theme`colors.neutral.200`,
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    multiValueLabel: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
-        return {
-            ...base,
-            color: theme`colors.neutral.200`,
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    option: (base: CSSObject, props: OptionProps<T, any, any>): CSSObject => {
-        return {
-            ...base,
-            background: theme`colors.neutral.900`,
-            ':hover': {
-                background: theme`colors.neutral.700`,
-                cursor: 'pointer',
-            },
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    placeholder: (base: CSSObject, props: PlaceholderProps<T, any, any>): CSSObject => {
-        return {
-            ...base,
-            color: theme`colors.neutral.300`,
-            fontSize: '0.875rem',
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    singleValue: (base: CSSObject, props: SingleValueProps<T, any>): CSSObject => {
-        return {
-            ...base,
-            color: '#00000',
-        };
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    valueContainer: (base: CSSObject, props: ValueContainerProps<T, any>): CSSObject => {
-        return {
-            ...base,
-        };
-    },
-};
diff --git a/resources/scripts/components/elements/SelectField.tsx b/resources/scripts/components/elements/SelectField.tsx
new file mode 100644
index 000000000..c6a698f53
--- /dev/null
+++ b/resources/scripts/components/elements/SelectField.tsx
@@ -0,0 +1,190 @@
+import { CSSObject } from '@emotion/serialize';
+import { Field as FormikField, FieldProps } from 'formik';
+import React, { forwardRef } from 'react';
+import Select, { ContainerProps, ControlProps, InputProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
+import Creatable from 'react-select/creatable';
+import tw, { theme } from 'twin.macro';
+import Label from '@/components/elements/Label';
+import { ValueType } from 'react-select/src/types';
+
+type T = any;
+
+export const SelectStyle: StylesConfig<T, any, any> = {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    container: (base: CSSObject, props: ContainerProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    control: (base: CSSObject, props: ControlProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            height: '2.75rem',
+            /* paddingTop: '0.75rem',
+            paddingBottom: '0.75rem',
+            paddingLeft: '4rem',
+            paddingRight: '4rem', */
+            background: theme`colors.neutral.600`,
+            borderColor: theme`colors.neutral.500`,
+            borderWidth: '2px',
+            color: theme`colors.neutral.200`,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    input: (base: CSSObject, props: InputProps): CSSObject => {
+        return {
+            ...base,
+            color: theme`colors.neutral.200`,
+            fontSize: '0.875rem',
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    menu: (base: CSSObject, props: MenuProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            background: theme`colors.neutral.900`,
+            color: theme`colors.neutral.200`,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    multiValue: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
+        return {
+            ...base,
+            background: theme`colors.neutral.900`,
+            color: theme`colors.neutral.200`,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    multiValueLabel: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
+        return {
+            ...base,
+            color: theme`colors.neutral.200`,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    option: (base: CSSObject, props: OptionProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            background: theme`colors.neutral.900`,
+            ':hover': {
+                background: theme`colors.neutral.700`,
+                cursor: 'pointer',
+            },
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    placeholder: (base: CSSObject, props: PlaceholderProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            color: theme`colors.neutral.300`,
+            fontSize: '0.875rem',
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    singleValue: (base: CSSObject, props: SingleValueProps<T, any>): CSSObject => {
+        return {
+            ...base,
+            color: '#00000',
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    valueContainer: (base: CSSObject, props: ValueContainerProps<T, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+};
+
+export interface Option {
+    value: string;
+    label: string;
+}
+
+interface Props {
+    id?: string;
+    name: string;
+    label?: string;
+    description?: string;
+    validate?: (value: any) => undefined | string | Promise<any>;
+
+    options: Array<Option>;
+
+    isMulti?: boolean;
+    isSearchable?: boolean;
+    isCreatable?: boolean;
+    isValidNewOption?: ((
+        inputValue: string,
+        value: ValueType<any, boolean>,
+        options: ReadonlyArray<any>,
+    ) => boolean) | undefined;
+
+    className?: string;
+}
+
+const SelectField = forwardRef<HTMLElement, Props>(({ id, name, label, description, validate, className, isMulti, isCreatable, ...props }, ref) => {
+    const { options } = props;
+
+    const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
+        if (isMulti) {
+            setFieldValue(name, (options as Option[]).map(o => o.value));
+            return;
+        }
+
+        setFieldValue(name, (options as Option).value);
+    };
+
+    return (
+        <FormikField innerRef={ref} name={name} validate={validate}>
+            {
+                ({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
+                    <div className={className}>
+                        {label &&
+                        <Label htmlFor={id}>{label}</Label>
+                        }
+                        {isCreatable ?
+                            <Creatable
+                                {...field}
+                                {...props}
+                                styles={SelectStyle}
+                                options={options}
+                                value={(options ? options.find(o => o.value === field.value) : '') as any}
+                                onChange={o => onChange(o, name, setFieldValue)}
+                                isMulti={isMulti}
+                            />
+                            :
+                            <Select
+                                {...field}
+                                {...props}
+                                styles={SelectStyle}
+                                options={options}
+                                value={(options ? options.find(o => o.value === field.value) : '') as any}
+                                onChange={o => onChange(o, name, setFieldValue)}
+                                isMulti={isMulti}
+                            />
+                        }
+                        {touched[field.name] && errors[field.name] ?
+                            <p css={tw`text-red-200 text-xs mt-1`}>
+                                {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
+                            </p>
+                            :
+                            description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
+                        }
+                    </div>
+                )
+            }
+        </FormikField>
+    );
+});
+SelectField.displayName = 'SelectField';
+
+export default SelectField;