admin(ui): implement MountEditContainer.tsx, minor tweaks

resources/scripts/api/admin/mounts/getMounts.ts

@@ -6,7 +6,7 @@ export interface Mount {
     id: number;
     uuid: string;
     name: string;
-    description: string;
+    description?: string;
     source: string;
     target: string;
     readOnly: boolean;

resources/scripts/api/admin/mounts/updateMount.ts

@@ -1,7 +1,7 @@
 import http from '@/api/http';
 import { Mount, rawDataToMount } from '@/api/admin/mounts/getMounts';
 
-export default (id: number, name: string, description: string, source: string, target: string, readOnly: boolean, userMountable: boolean): Promise<Mount> => {
+export default (id: number, name: string, description: string | null, source: string, target: string, readOnly: boolean, userMountable: boolean): Promise<Mount> => {
     return new Promise((resolve, reject) => {
         http.patch(`/api/application/mounts/${id}`, {
             name, description, source, target, read_only: readOnly, user_mountable: userMountable,

resources/scripts/api/admin/nests/getNests.ts

@@ -8,7 +8,7 @@ export interface Nest {
     uuid: string;
     author: string;
     name: string;
-    description: string | null;
+    description?: string;
     createdAt: Date;
     updatedAt: Date;
 

resources/scripts/api/admin/roles/getRoles.ts

@@ -3,7 +3,7 @@ import http, { FractalResponseData } from '@/api/http';
 export interface Role {
     id: number;
     name: string;
-    description: string | null;
+    description?: string;
 }
 
 export const rawDataToRole = ({ attributes }: FractalResponseData): Role => ({

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

@@ -8,6 +8,13 @@ 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 { Form, Formik, FormikHelpers } from 'formik';
 
 interface ctx {
     mount: Mount | undefined;
@@ -22,6 +29,115 @@ export const Context = createContextStore<ctx>({
     }),
 });
 
+interface Values {
+    name: string;
+    description: string;
+    source: string;
+    target: string;
+    readOnly: boolean;
+    userMountable: boolean;
+}
+
+const EditInformationContainer = () => {
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    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 }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('nest');
+
+        updateMount(mount.id, name, description, source, target, readOnly, userMountable)
+            .then(() => setMount({ ...mount, name, description, source, target, readOnly, userMountable }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'nest', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: mount.name,
+                description: mount.description || '',
+                source: mount.source,
+                target: mount.target,
+                readOnly: mount.readOnly,
+                userMountable: mount.userMountable,
+            }}
+            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 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`}>
+                                    <Field
+                                        id={'source'}
+                                        name={'source'}
+                                        label={'Source'}
+                                        type={'text'}
+                                    />
+                                </div>
+
+                                <div css={tw`mt-6`}>
+                                    <Field
+                                        id={'target'}
+                                        name={'target'}
+                                        label={'Target'}
+                                        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 MountEditContainer = () => {
     const match = useRouteMatch<{ id?: string }>();
 
@@ -60,11 +176,20 @@ const MountEditContainer = () => {
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{mount.name}</h2>
+                    {
+                        (mount.description || '').length < 1 ?
+                            <p css={tw`text-base text-neutral-400`}>
+                                <span css={tw`italic`}>No description</span>
+                            </p>
+                            :
                             <p css={tw`text-base text-neutral-400`}>{mount.description}</p>
+                    }
                 </div>
             </div>
 
             <FlashMessageRender byKey={'mount'} css={tw`mb-4`}/>
+
+            <EditInformationContainer/>
         </AdminContentBlock>
     );
 };

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

@@ -56,7 +56,7 @@ export const Context = createContextStore<ctx>({
 
 interface Values {
     name: string;
-    description: string | null;
+    description: string;
 }
 
 const EditInformationContainer = () => {
@@ -73,7 +73,7 @@ const EditInformationContainer = () => {
     const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('nest');
 
-        updateNest(nest.id, name, description || undefined)
+        updateNest(nest.id, name, description)
             .then(() => setNest({ ...nest, name, description }))
             .catch(error => {
                 console.error(error);
@@ -87,7 +87,7 @@ const EditInformationContainer = () => {
             onSubmit={submit}
             initialValues={{
                 name: nest.name,
-                description: nest.description,
+                description: nest.description || '',
             }}
             validationSchema={object().shape({
                 name: string().required().min(1),
@@ -251,7 +251,14 @@ const NestEditContainer = () => {
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{nest.name}</h2>
+                    {
+                        (nest.description || '').length < 1 ?
+                            <p css={tw`text-base text-neutral-400`}>
+                                <span css={tw`italic`}>No description</span>
+                            </p>
+                            :
                             <p css={tw`text-base text-neutral-400`}>{nest.description}</p>
+                    }
                 </div>
             </div>
 

resources/scripts/components/admin/nests/eggs/EggEditContainer.tsx

@@ -59,7 +59,14 @@ const EggEditContainer = () => {
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{egg.name}</h2>
+                    {
+                        (egg.description || '').length < 1 ?
+                            <p css={tw`text-base text-neutral-400`}>
+                                <span css={tw`italic`}>No description</span>
+                            </p>
+                            :
                             <p css={tw`text-base text-neutral-400`}>{egg.description}</p>
+                    }
                 </div>
             </div>
 

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

@@ -60,7 +60,7 @@ const NodeEditContainer = () => {
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{node.name}</h2>
-                    <p css={tw`text-base text-neutral-400`}>{node.description}</p>
+                    <p css={tw`text-base text-neutral-400`}>{node.uuid}</p>
                 </div>
             </div>
 

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

@@ -60,7 +60,14 @@ const RoleEditContainer = () => {
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{role.name}</h2>
+                    {
+                        (role.description || '').length < 1 ?
+                            <p css={tw`text-base text-neutral-400`}>
+                                <span css={tw`italic`}>No description</span>
+                            </p>
+                            :
                             <p css={tw`text-base text-neutral-400`}>{role.description}</p>
+                    }
                 </div>
             </div>
 

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

@@ -60,7 +60,14 @@ const ServerEditContainer = () => {
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{server.name}</h2>
+                    {
+                        (server.description || '').length < 1 ?
+                            <p css={tw`text-base text-neutral-400`}>
+                                <span css={tw`italic`}>No description</span>
+                            </p>
+                            :
                             <p css={tw`text-base text-neutral-400`}>{server.description}</p>
+                    }
                 </div>
             </div>