Add support for editing a subuser

Author: DaneEveritt

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, MutableRefObject, useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { Subuser } from '@/state/server/subusers';
 import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
 import { array, object, string } from 'yup';
@@ -39,15 +39,17 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
 
     return (
         <Modal {...props} showSpinnerOverlay={isSubmitting}>
-            <h3 ref={ref}>{subuser ? 'Edit subuser' : 'Create new subuser'}</h3>
+            <h3 ref={ref}>{subuser ? `Modify permissions for ${subuser.email}` : 'Create new subuser'}</h3>
             <FlashMessageRender byKey={'user:edit'} className={'mt-4'}/>
+            {!subuser &&
             <div className={'mt-6'}>
                 <Field
                     name={'email'}
                     label={'User Email'}
                     description={'Enter the email address of the user you wish to invite as a subuser for this server.'}
                 />
             </div>
+            }
             <div className={'mt-6'}>
                 {Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => (
                     <TitledGreyBox

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

@@ -1,21 +1,27 @@
 import React, { useState } from 'react';
 import { Subuser } from '@/state/server/subusers';
-import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
-import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import RemoveSubuserButton from '@/components/server/users/RemoveSubuserButton';
+import EditSubuserModal from '@/components/server/users/EditSubuserModal';
 
 interface Props {
     subuser: Subuser;
 }
 
 export default ({ subuser }: Props) => {
-    const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
+    const [ visible, setVisible ] = useState(false);
 
     return (
         <div className={'grey-row-box mb-2'}>
+            {visible &&
+            <EditSubuserModal
+                appear={true}
+                visible={true}
+                subuser={subuser}
+                onDismissed={() => setVisible(false)}
+            />
+            }
             <div className={'w-10 h-10 rounded-full bg-white border-2 border-inset border-neutral-800 overflow-hidden'}>
                 <img className={'f-full h-full'} src={`${subuser.image}?s=400`}/>
             </div>
@@ -26,7 +32,7 @@ export default ({ subuser }: Props) => {
                 type={'button'}
                 aria-label={'Edit subuser'}
                 className={'block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4'}
-                onClick={() => null}
+                onClick={() => setVisible(true)}
             >
                 <FontAwesomeIcon icon={faPencilAlt}/>
             </button>

resources/scripts/state/server/subusers.ts

@@ -38,7 +38,20 @@ const subusers: ServerSubuserStore = {
     }),
 
     appendSubuser: action((state, payload) => {
-        state.data = [ ...state.data.filter(user => user.uuid !== payload.uuid), payload ];
+        let matched = false;
+        state.data = [
+            ...state.data
+                .map(user => {
+                    if (user.uuid === payload.uuid) {
+                        matched = true;
+
+                        return payload;
+                    }
+
+                    return user;
+                })
+                .concat(matched ? [] : [ payload ]),
+        ];
     }),
 
     removeSubuser: action((state, payload) => {