From 56556e9660ffb7a0df3fa0fea75cc6be83040576 Mon Sep 17 00:00:00 2001
From: Matthew Penner <matthew@pterodactyl.io>
Date: Wed, 4 Aug 2021 22:41:52 -0600
Subject: [PATCH] ui(admin): implement new mount page

---
 .../admin/mounts/MountEditContainer.tsx       | 210 +++---------------
 .../components/admin/mounts/MountForm.tsx     | 170 ++++++++++++++
 .../admin/mounts/MountsContainer.tsx          |   8 +-
 .../admin/mounts/NewMountContainer.tsx        |  47 ++++
 resources/scripts/routers/AdminRouter.tsx     |   2 +
 5 files changed, 258 insertions(+), 179 deletions(-)
 create mode 100644 resources/scripts/components/admin/mounts/MountForm.tsx
 create mode 100644 resources/scripts/components/admin/mounts/NewMountContainer.tsx

diff --git a/resources/scripts/components/admin/mounts/MountEditContainer.tsx b/resources/scripts/components/admin/mounts/MountEditContainer.tsx
index 9c3a04800..174720fa0 100644
--- a/resources/scripts/components/admin/mounts/MountEditContainer.tsx
+++ b/resources/scripts/components/admin/mounts/MountEditContainer.tsx
@@ -1,23 +1,18 @@
+import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
-import tw from 'twin.macro';
 import { useRouteMatch } from 'react-router-dom';
-import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy';
+import tw from 'twin.macro';
 import { Mount } from '@/api/admin/mounts/getMounts';
 import getMount from '@/api/admin/mounts/getMount';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { ApplicationStore } from '@/state';
-import { boolean, object, string } from 'yup';
-import updateMount from '@/api/admin/mounts/updateMount';
-import AdminBox from '@/components/admin/AdminBox';
-import Button from '@/components/elements/Button';
-import Field from '@/components/elements/Field';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
-import Label from '@/components/elements/Label';
 import MountDeleteButton from '@/components/admin/mounts/MountDeleteButton';
+import MountForm from '@/components/admin/mounts/MountForm';
+import { ApplicationStore } from '@/state';
+import { FormikHelpers } from 'formik';
+import updateMount from '@/api/admin/mounts/updateMount';
 
 interface ctx {
     mount: Mount | undefined;
@@ -32,30 +27,22 @@ export const Context = createContextStore<ctx>({
     }),
 });
 
-interface Values {
-    name: string;
-    description: string;
-    source: string;
-    target: string;
-    readOnly: string;
-    userMountable: string;
-}
-
-const EditInformationContainer = () => {
+const MountEditContainer = () => {
     const history = useHistory();
 
+    const match = useRouteMatch<{ id?: string }>();
+
     const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const [ loading, setLoading ] = useState(true);
 
     const mount = Context.useStoreState(state => state.mount);
     const setMount = Context.useStoreActions(actions => actions.setMount);
 
-    if (mount === undefined) {
-        return (
-            <></>
-        );
-    }
+    const submit = ({ name, description, source, target, readOnly, userMountable }: any, { setSubmitting }: FormikHelpers<any>) => {
+        if (mount === undefined) {
+            return;
+        }
 
-    const submit = ({ name, description, source, target, readOnly, userMountable }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('mount');
 
         updateMount(mount.id, name, description, source, target, readOnly === '1', userMountable === '1')
@@ -67,154 +54,6 @@ const EditInformationContainer = () => {
             .then(() => setSubmitting(false));
     };
 
-    return (
-        <Formik
-            onSubmit={submit}
-            initialValues={{
-                name: mount.name,
-                description: mount.description || '',
-                source: mount.source,
-                target: mount.target,
-                readOnly: mount.readOnly ? '1' : '0',
-                userMountable: mount.userMountable ? '1' : '0',
-            }}
-            validationSchema={object().shape({
-                name: string().required().min(1),
-                description: string().max(255, ''),
-                source: string().max(255, ''),
-                target: string().max(255, ''),
-                readOnly: boolean(),
-                userMountable: boolean(),
-            })}
-        >
-            {
-                ({ isSubmitting, isValid }) => (
-                    <React.Fragment>
-                        <AdminBox title={'Edit Mount'} css={tw`relative`}>
-                            <SpinnerOverlay visible={isSubmitting}/>
-
-                            <Form css={tw`mb-0`}>
-                                <div>
-                                    <Field
-                                        id={'name'}
-                                        name={'name'}
-                                        label={'Name'}
-                                        type={'text'}
-                                    />
-                                </div>
-
-                                <div css={tw`mt-6`}>
-                                    <Field
-                                        id={'description'}
-                                        name={'description'}
-                                        label={'Description'}
-                                        type={'text'}
-                                    />
-                                </div>
-
-                                <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
-                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
-                                        <Field
-                                            id={'source'}
-                                            name={'source'}
-                                            label={'Source'}
-                                            type={'text'}
-                                        />
-                                    </div>
-
-                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
-                                        <Field
-                                            id={'target'}
-                                            name={'target'}
-                                            label={'Target'}
-                                            type={'text'}
-                                        />
-                                    </div>
-                                </div>
-
-                                <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
-                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
-                                        <Label htmlFor={'readOnly'}>Permissions</Label>
-
-                                        <div>
-                                            <label css={tw`inline-flex items-center mr-2`}>
-                                                <FormikField
-                                                    name={'readOnly'}
-                                                    type={'radio'}
-                                                    value={'0'}
-                                                />
-                                                <span css={tw`ml-2`}>Writable</span>
-                                            </label>
-
-                                            <label css={tw`inline-flex items-center ml-2`}>
-                                                <FormikField
-                                                    name={'readOnly'}
-                                                    type={'radio'}
-                                                    value={'1'}
-                                                />
-                                                <span css={tw`ml-2`}>Read Only</span>
-                                            </label>
-                                        </div>
-                                    </div>
-
-                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
-                                        <Label htmlFor={'userMountable'}>User Mountable</Label>
-
-                                        <div>
-                                            <label css={tw`inline-flex items-center mr-2`}>
-                                                <FormikField
-                                                    name={'userMountable'}
-                                                    type={'radio'}
-                                                    value={'0'}
-                                                />
-                                                <span css={tw`ml-2`}>Admin Only</span>
-                                            </label>
-
-                                            <label css={tw`inline-flex items-center ml-2`}>
-                                                <FormikField
-                                                    name={'userMountable'}
-                                                    type={'radio'}
-                                                    value={'1'}
-
-                                                />
-                                                <span css={tw`ml-2`}>Users</span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div css={tw`w-full flex flex-row items-center mt-6`}>
-                                    <div css={tw`flex`}>
-                                        <MountDeleteButton
-                                            mountId={mount.id}
-                                            onDeleted={() => history.push('/admin/mounts')}
-                                        />
-                                    </div>
-
-                                    <div css={tw`flex ml-auto`}>
-                                        <Button type={'submit'} disabled={isSubmitting || !isValid}>
-                                            Save
-                                        </Button>
-                                    </div>
-                                </div>
-                            </Form>
-                        </AdminBox>
-                    </React.Fragment>
-                )
-            }
-        </Formik>
-    );
-};
-
-const MountEditContainer = () => {
-    const match = useRouteMatch<{ id?: string }>();
-
-    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-    const [ loading, setLoading ] = useState(true);
-
-    const mount = Context.useStoreState(state => state.mount);
-    const setMount = Context.useStoreActions(actions => actions.setMount);
-
     useEffect(() => {
         clearFlashes('mount');
 
@@ -257,7 +96,26 @@ const MountEditContainer = () => {
 
             <FlashMessageRender byKey={'mount'} css={tw`mb-4`}/>
 
-            <EditInformationContainer/>
+            <MountForm
+                action={'Save'}
+                title={'Edit Mount'}
+                initialValues={{
+                    name: mount.name,
+                    description: mount.description || '',
+                    source: mount.source,
+                    target: mount.target,
+                    readOnly: mount.readOnly ? '1' : '0',
+                    userMountable: mount.userMountable ? '1' : '0',
+                }}
+                onSubmit={submit}
+            >
+                <div css={tw`flex`}>
+                    <MountDeleteButton
+                        mountId={mount.id}
+                        onDeleted={() => history.push('/admin/mounts')}
+                    />
+                </div>
+            </MountForm>
         </AdminContentBlock>
     );
 };
diff --git a/resources/scripts/components/admin/mounts/MountForm.tsx b/resources/scripts/components/admin/mounts/MountForm.tsx
new file mode 100644
index 000000000..ba1c44694
--- /dev/null
+++ b/resources/scripts/components/admin/mounts/MountForm.tsx
@@ -0,0 +1,170 @@
+import { boolean, object, string } from 'yup';
+import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
+import React from 'react';
+import AdminBox from '@/components/admin/AdminBox';
+import tw from 'twin.macro';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import Field from '@/components/elements/Field';
+import Label from '@/components/elements/Label';
+import Button from '@/components/elements/Button';
+
+interface Values {
+    name: string;
+    description: string;
+    source: string;
+    target: string;
+    readOnly: string;
+    userMountable: string;
+}
+
+interface Props {
+    action: string;
+    title: string,
+    initialValues?: Values;
+
+    onSubmit: (values: Values, helpers: FormikHelpers<Values>) => void;
+
+    children?: React.ReactNode
+}
+
+function MountForm ({ action, title, initialValues, children, onSubmit }: Props) {
+    const submit = (values: Values, helpers: FormikHelpers<Values>) => {
+        onSubmit(values, helpers);
+    };
+
+    if (!initialValues) {
+        initialValues = {
+            name: '',
+            description: '',
+            source: '',
+            target: '',
+            readOnly: '0',
+            userMountable: '0',
+        };
+    }
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={initialValues}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+                description: string().max(255, ''),
+                source: string().max(255, ''),
+                target: string().max(255, ''),
+                readOnly: boolean(),
+                userMountable: boolean(),
+            })}
+        >
+            {
+                ({ isSubmitting, isValid }) => (
+                    <AdminBox title={title} css={tw`relative`}>
+                        <SpinnerOverlay visible={isSubmitting}/>
+
+                        <Form css={tw`mb-0`}>
+                            <div>
+                                <Field
+                                    id={'name'}
+                                    name={'name'}
+                                    label={'Name'}
+                                    type={'text'}
+                                />
+                            </div>
+
+                            <div css={tw`mt-6`}>
+                                <Field
+                                    id={'description'}
+                                    name={'description'}
+                                    label={'Description'}
+                                    type={'text'}
+                                />
+                            </div>
+
+                            <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                                <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
+                                    <Field
+                                        id={'source'}
+                                        name={'source'}
+                                        label={'Source'}
+                                        type={'text'}
+                                    />
+                                </div>
+
+                                <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
+                                    <Field
+                                        id={'target'}
+                                        name={'target'}
+                                        label={'Target'}
+                                        type={'text'}
+                                    />
+                                </div>
+                            </div>
+
+                            <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                                <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
+                                    <Label htmlFor={'readOnly'}>Permissions</Label>
+
+                                    <div>
+                                        <label css={tw`inline-flex items-center mr-2`}>
+                                            <FormikField
+                                                name={'readOnly'}
+                                                type={'radio'}
+                                                value={'0'}
+                                            />
+                                            <span css={tw`ml-2`}>Writable</span>
+                                        </label>
+
+                                        <label css={tw`inline-flex items-center ml-2`}>
+                                            <FormikField
+                                                name={'readOnly'}
+                                                type={'radio'}
+                                                value={'1'}
+                                            />
+                                            <span css={tw`ml-2`}>Read Only</span>
+                                        </label>
+                                    </div>
+                                </div>
+
+                                <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
+                                    <Label htmlFor={'userMountable'}>User Mountable</Label>
+
+                                    <div>
+                                        <label css={tw`inline-flex items-center mr-2`}>
+                                            <FormikField
+                                                name={'userMountable'}
+                                                type={'radio'}
+                                                value={'0'}
+                                            />
+                                            <span css={tw`ml-2`}>Admin Only</span>
+                                        </label>
+
+                                        <label css={tw`inline-flex items-center ml-2`}>
+                                            <FormikField
+                                                name={'userMountable'}
+                                                type={'radio'}
+                                                value={'1'}
+                                            />
+                                            <span css={tw`ml-2`}>Users</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div css={tw`w-full flex flex-row items-center mt-6`}>
+                                {children}
+
+                                <div css={tw`flex ml-auto`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        {action}
+                                    </Button>
+                                </div>
+                            </div>
+                        </Form>
+                    </AdminBox>
+                )
+            }
+        </Formik>
+    );
+}
+
+export default MountForm;
diff --git a/resources/scripts/components/admin/mounts/MountsContainer.tsx b/resources/scripts/components/admin/mounts/MountsContainer.tsx
index e627a3a85..d20171e28 100644
--- a/resources/scripts/components/admin/mounts/MountsContainer.tsx
+++ b/resources/scripts/components/admin/mounts/MountsContainer.tsx
@@ -80,9 +80,11 @@ const MountsContainer = () => {
                 </div>
 
                 <div css={tw`flex ml-auto pl-4`}>
-                    <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
-                        New Mount
-                    </Button>
+                    <NavLink to={`${match.url}/new`}>
+                        <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                            New Mount
+                        </Button>
+                    </NavLink>
                 </div>
             </div>
 
diff --git a/resources/scripts/components/admin/mounts/NewMountContainer.tsx b/resources/scripts/components/admin/mounts/NewMountContainer.tsx
new file mode 100644
index 000000000..83f0c03db
--- /dev/null
+++ b/resources/scripts/components/admin/mounts/NewMountContainer.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import tw from 'twin.macro';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import MountForm from '@/components/admin/mounts/MountForm';
+import { FormikHelpers } from 'formik';
+import { useHistory } from 'react-router-dom';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import createMount from '@/api/admin/mounts/createMount';
+
+export default () => {
+    const history = useHistory();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const submit = ({ name, description, source, target, readOnly, userMountable }: any, { setSubmitting }: FormikHelpers<any>) => {
+        clearFlashes('mount:create');
+
+        createMount(name, description, source, target, readOnly === '1', userMountable === '1')
+            .then(mount => history.push(`/admin/mounts/${mount.id}`))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'mount:create', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <AdminContentBlock title={'New Mount'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Mount</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new mount to the panel.</p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'mount:create'} css={tw`mb-4`}/>
+
+            <MountForm
+                action={'Create'}
+                title={'Create Mount'}
+                onSubmit={submit}
+            />
+        </AdminContentBlock>
+    );
+};
diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx
index 7f34bde32..02800c7f4 100644
--- a/resources/scripts/routers/AdminRouter.tsx
+++ b/resources/scripts/routers/AdminRouter.tsx
@@ -30,6 +30,7 @@ import EggRouter from '@/components/admin/nests/eggs/EggRouter';
 import ServerRouter from '@/components/admin/servers/ServerRouter';
 import { NotFound } from '@/components/elements/ScreenBlock';
 import { usePersistedState } from '@/plugins/usePersistedState';
+import NewMountContainer from '@/components/admin/mounts/NewMountContainer';
 
 const Sidebar = styled.div<{ collapsed?: boolean }>`
     ${tw`fixed h-screen hidden md:flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`};
@@ -255,6 +256,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                         />
 
                         <Route path={`${match.path}/mounts`} component={MountsContainer} exact/>
+                        <Route path={`${match.path}/mounts/new`} component={NewMountContainer} exact/>
                         <Route
                             path={`${match.path}/mounts/:id`}
                             component={MountEditContainer}