admin(ui): add ability to edit nests

resources/scripts/components/admin/AdminBox.tsx

@@ -0,0 +1,31 @@
+import React, { memo } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import tw from 'twin.macro';
+import isEqual from 'react-fast-compare';
+
+interface Props {
+    icon?: IconProp;
+    title: string | React.ReactNode;
+    className?: string;
+    children: React.ReactNode;
+}
+
+const AdminBox = ({ icon, title, children, className }: Props) => (
+    <div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
+        <div css={tw`bg-neutral-900 rounded-t px-6 py-3 border-b border-black`}>
+            {typeof title === 'string' ?
+                <p css={tw`text-sm uppercase`}>
+                    {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
+                </p>
+                :
+                title
+            }
+        </div>
+        <div css={tw`px-6 py-4`}>
+            {children}
+        </div>
+    </div>
+);
+
+export default memo(AdminBox, isEqual);

resources/scripts/components/admin/databases/DatabasesContainer.tsx

@@ -44,7 +44,7 @@ const DatabasesContainer = () => {
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'databases' });
+        clearAndAddHttpError({ key: 'databases', error });
     }, [ error ]);
 
     const length = databases?.items?.length || 0;

resources/scripts/components/admin/locations/LocationsContainer.tsx

@@ -44,7 +44,7 @@ const LocationsContainer = () => {
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'locations' });
+        clearAndAddHttpError({ key: 'locations', error });
     }, [ error ]);
 
     const length = locations?.items?.length || 0;

resources/scripts/components/admin/locations/NewLocationButton.tsx

@@ -38,7 +38,7 @@ export default () => {
                 setVisible(false);
             })
             .catch(error => {
-                clearAndAddHttpError(error);
+                clearAndAddHttpError({ key: 'location:create', error });
                 setSubmitting(false);
             });
     };

resources/scripts/components/admin/mounts/MountsContainer.tsx

@@ -44,7 +44,7 @@ const MountsContainer = () => {
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'mounts' });
+        clearAndAddHttpError({ key: 'mounts', error });
     }, [ error ]);
 
     const length = mounts?.items?.length || 0;

resources/scripts/components/admin/nests/NestEditContainer.tsx

@@ -1,20 +1,113 @@
-import React, { useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
-import useFlash from '@/plugins/useFlash';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Nest } from '@/api/admin/nests/getNests';
 import getNest from '@/api/admin/nests/getNest';
+import updateNest from '@/api/admin/nests/updateNest';
+import { object, string } from 'yup';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { Form, Formik, FormikHelpers } from 'formik';
+import AdminBox from '@/components/admin/AdminBox';
 
-export default () => {
+interface ctx {
+    nest: Nest | undefined;
+    setNest: (value: Nest | undefined) => void;
+}
+
+export const Context = createContext<ctx>({ nest: undefined, setNest: () => 1 });
+
+interface Values {
+    name: string;
+    description: string | null;
+}
+
+const NestEditBox = () => {
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { nest, setNest } = useContext(Context);
+
+    if (nest === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('nest');
+
+        updateNest(nest.id, name, description || undefined)
+            .then(() => setNest({ ...nest, name, description }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'nest', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: nest.name,
+                description: nest.description,
+            }}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+                description: string().max(255, ''),
+            })}
+        >
+            {
+                ({ isSubmitting, isValid }) => (
+                    <React.Fragment>
+                        <AdminBox title={'Edit Nest'} 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`mt-6 text-right`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        Save
+                                    </Button>
+                                </div>
+                            </Form>
+                        </AdminBox>
+                    </React.Fragment>
+                )
+            }
+        </Formik>
+    );
+};
+
+const NestEditContainer = () => {
     const match = useRouteMatch<{ nestId?: string }>();
 
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const [ loading, setLoading ] = useState(true);
 
-    const [ nest, setNest ] = useState<Nest | undefined>(undefined);
+    const { nest, setNest } = useContext(Context);
 
     useEffect(() => {
         clearFlashes('nest');
@@ -23,7 +116,7 @@ export default () => {
             .then(nest => setNest(nest))
             .catch(error => {
                 console.error(error);
-                clearAndAddHttpError(error);
+                clearAndAddHttpError({ key: 'nest', error });
             })
             .then(() => setLoading(false));
     }, []);
@@ -31,11 +124,11 @@ export default () => {
     if (loading || nest === undefined) {
         return (
             <AdminContentBlock title={'Nests'}>
+                <FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
+
                 <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
                     <Spinner size={'base'}/>
                 </div>
-
-                <FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
             </AdminContentBlock>
         );
     }
@@ -49,7 +142,19 @@ export default () => {
                 </div>
             </div>
 
-            <p>{JSON.stringify(nest.relations.eggs)}</p>
+            <FlashMessageRender byKey={'nest'} css={tw`mb-4`}/>
+
+            <NestEditBox/>
         </AdminContentBlock>
     );
 };
+
+export default () => {
+    const [ nest, setNest ] = useState<Nest | undefined>(undefined);
+
+    return (
+        <Context.Provider value={{ nest, setNest }}>
+            <NestEditContainer/>
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/nests/NestsContainer.tsx

@@ -44,7 +44,7 @@ const NestsContainer = () => {
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'nests' });
+        clearAndAddHttpError({ key: 'nests', error });
     }, [ error ]);
 
     const length = nests?.items?.length || 0;

resources/scripts/components/admin/nodes/NodesContainer.tsx

@@ -45,7 +45,7 @@ const NodesContainer = () => {
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'nodes' });
+        clearAndAddHttpError({ key: 'nodes', error });
     }, [ error ]);
 
     const length = nodes?.items?.length || 0;

resources/scripts/components/admin/overview/OverviewContainer.tsx

@@ -26,7 +26,7 @@ export default () => {
             .then(versionData => setVersionData(versionData))
             .catch(error => {
                 console.error(error);
-                clearAndAddHttpError(error);
+                clearAndAddHttpError({ key: 'overview', error });
             })
             .then(() => setLoading(false));
     }, []);

resources/scripts/components/admin/roles/NewRoleButton.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import createRole from '@/api/admin/roles/createRole';
-import { httpErrorToHuman } from '@/api/http';
 import { AdminContext } from '@/state/admin';
 import Button from '@/components/elements/Button';
 import Field from '@/components/elements/Field';
@@ -26,7 +25,7 @@ const schema = object().shape({
 
 export default () => {
     const [ visible, setVisible ] = useState(false);
-    const { addError, clearFlashes } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
 
     const appendRole = AdminContext.useStoreActions(actions => actions.roles.appendRole);
 
@@ -40,7 +39,7 @@ export default () => {
                 setVisible(false);
             })
             .catch(error => {
-                addError({ key: 'role:create', message: httpErrorToHuman(error) });
+                clearAndAddHttpError({ key: 'role:create', error });
                 setSubmitting(false);
             });
     };

resources/scripts/components/admin/roles/RolesContainer.tsx

@@ -52,7 +52,7 @@ export default () => {
             .then(roles => setRoles(roles))
             .catch(error => {
                 console.error(error);
-                clearAndAddHttpError(error);
+                clearAndAddHttpError({ key: 'roles', error });
             })
             .then(() => setLoading(false));
     }, []);

resources/scripts/components/admin/servers/ServersContainer.tsx

@@ -44,7 +44,7 @@ const UsersContainer = () => {
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'servers' });
+        clearAndAddHttpError({ key: 'servers', error });
     }, [ error ]);
 
     const length = servers?.items?.length || 0;

resources/scripts/components/admin/users/UsersContainer.tsx

@@ -44,7 +44,7 @@ const UsersContainer = () => {
             return;
         }
 
-        clearAndAddHttpError({ error, key: 'users' });
+        clearAndAddHttpError({ key: 'users', error });
     }, [ error ]);
 
     const length = users?.items?.length || 0;