Implement basic code for creating/updating a subuser

resources/scripts/api/server/users/createOrUpdateSubuser.ts

@@ -0,0 +1,18 @@
+import http from '@/api/http';
+import { rawDataToServerSubuser } from '@/api/server/users/getServerSubusers';
+import { Subuser } from '@/state/server/subusers';
+
+interface Params {
+    email: string;
+    permissions: string[];
+}
+
+export default (uuid: string, params: Params, subuser?: Subuser): Promise<Subuser> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/client/servers/${uuid}/users${subuser ? `/${subuser.uuid}` : ''}`, {
+            ...params,
+        })
+            .then(data => resolve(rawDataToServerSubuser(data.data)))
+            .catch(reject);
+    });
+}

resources/scripts/api/server/users/getServerSubusers.ts

@@ -8,13 +8,13 @@ export const rawDataToServerSubuser = (data: FractalResponseData): Subuser => ({
     image: data.attributes.image,
     twoFactorEnabled: data.attributes['2fa_enabled'],
     createdAt: new Date(data.attributes.created_at),
-    permissions: data.attributes.relationships!.permissions.attributes.permissions,
-    can: permission => data.attributes.relationships!.permissions.attributes.permissions.indexOf(permission) >= 0,
+    permissions: data.attributes.permissions || [],
+    can: permission => (data.attributes.permissions || []).indexOf(permission) >= 0,
 });
 
 export default (uuid: string): Promise<Subuser[]> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/client/servers/${uuid}/users`, { params: { include: [ 'permissions' ] } })
+        http.get(`/api/client/servers/${uuid}/users`)
             .then(({ data }) => resolve((data.data || []).map(rawDataToServerSubuser)))
             .catch(reject);
     });

resources/scripts/components/server/users/EditSubuserModal.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { forwardRef, MutableRefObject, useRef } from 'react';
 import { Subuser } from '@/state/server/subusers';
-import { Formik, FormikHelpers, useFormikContext } from 'formik';
+import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
 import { array, object, string } from 'yup';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import Field from '@/components/elements/Field';
-import { useStoreState } from 'easy-peasy';
+import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Checkbox from '@/components/elements/Checkbox';
 import styled from 'styled-components';
 import classNames from 'classnames';
+import createOrUpdateSubuser from '@/api/server/users/createOrUpdateSubuser';
+import { ServerContext } from '@/state/server';
+import { httpErrorToHuman } from '@/api/http';
+import FlashMessageRender from '@/components/FlashMessageRender';
 
 type Props = {
     subuser?: Subuser;
@@ -29,13 +33,14 @@ const PermissionLabel = styled.label`
   }
 `;
 
-const EditSubuserModal = ({ subuser, ...props }: Props) => {
+const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...props }, ref) => {
     const { values, isSubmitting, setFieldValue } = useFormikContext<Values>();
     const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
 
     return (
         <Modal {...props} showSpinnerOverlay={isSubmitting}>
-            <h3>{subuser ? 'Edit subuser' : 'Create new subuser'}</h3>
+            <h3 ref={ref}>{subuser ? 'Edit subuser' : 'Create new subuser'}</h3>
+            <FlashMessageRender byKey={'user:edit'} className={'mt-4'}/>
             <div className={'mt-6'}>
                 <Field
                     name={'email'}
@@ -115,25 +120,48 @@ const EditSubuserModal = ({ subuser, ...props }: Props) => {
             </div>
         </Modal>
     );
-};
+});
 
-export default (props: Props) => {
-    const submit = (values: Values, helpers: FormikHelpers<Values>) => {
+export default ({ subuser, ...props }: Props) => {
+    const ref = useRef<HTMLHeadingElement>(null);
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
+
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('user:edit');
+        createOrUpdateSubuser(uuid, values, subuser)
+            .then(subuser => {
+                appendSubuser(subuser);
+                props.onDismissed();
+            })
+            .catch(error => {
+                console.error(error);
+                setSubmitting(false);
+                addError({ key: 'user:edit', message: httpErrorToHuman(error) });
+
+                if (ref.current) {
+                    ref.current.scrollIntoView();
+                }
+            });
     };
 
     return (
         <Formik
             onSubmit={submit}
             initialValues={{
-                email: '',
-                permissions: [],
+                email: subuser?.email || '',
+                permissions: subuser?.permissions || [],
             } as Values}
             validationSchema={object().shape({
                 email: string().email('A valid email address must be provided.').required('A valid email address must be provided.'),
                 permissions: array().of(string()),
             })}
         >
-            <EditSubuserModal {...props}/>
+            <Form>
+                <EditSubuserModal ref={ref} subuser={subuser} {...props}/>
+            </Form>
         </Formik>
     );
 };

resources/scripts/state/server/subusers.ts

@@ -39,7 +39,7 @@ const subusers: ServerSubuserStore = {
     }),
 
     appendSubuser: action((state, payload) => {
-        state.data = [ ...state.data, payload ];
+        state.data = [ ...state.data.filter(user => user.uuid !== payload.uuid), payload ];
     }),
 
     getSubusers: thunk(async (actions, payload) => {