Add ability for user to change server's name

resources/scripts/components/server/settings/RenameServerBox.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { ServerContext } from '@/state/server';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import { Form, FormikProps, withFormik } from 'formik';
+import { Server } from '@/api/server/getServer';
+import { ActionCreator } from 'easy-peasy';
+import renameServer from '@/api/server/renameServer';
+import Field from '@/components/elements/Field';
+import { object, string } from 'yup';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+
+interface OwnProps {
+    server: Server;
+    setServer: ActionCreator<Server>;
+}
+
+interface Values {
+    name: string;
+}
+
+const RenameServerBox = ({ isSubmitting, ...props }: OwnProps & FormikProps<Values>) => (
+    <TitledGreyBox title={'Change Server Name'} className={'relative'}>
+        <SpinnerOverlay size={'normal'} visible={isSubmitting}/>
+        <Form className={'mb-0'}>
+            <Field
+                id={'name'}
+                name={'name'}
+                label={'Server Name'}
+                type={'text'}
+            />
+            <div className={'mt-6 text-right'}>
+                <button type={'submit'} className={'btn btn-sm btn-primary'}>
+                    Save
+                </button>
+            </div>
+        </Form>
+    </TitledGreyBox>
+);
+
+const EnhancedForm = withFormik<OwnProps, Values>({
+    displayName: 'RenameServerBoxForm',
+
+    mapPropsToValues: props => ({
+        name: props.server.name,
+    }),
+
+    validationSchema: () => object().shape({
+        name: string().required().min(1),
+    }),
+
+    handleSubmit: (values, { props, setSubmitting }) => {
+        renameServer(props.server.uuid, values.name)
+            .then(() => props.setServer({ ...props.server, name: values.name }))
+            .catch(error => {
+                console.error(error);
+            })
+            .then(() => setSubmitting(false));
+    },
+})(RenameServerBox);
+
+export default () => {
+    const server = ServerContext.useStoreState(state => state.server.data!);
+    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
+
+    return <EnhancedForm server={server} setServer={setServer}/>;
+};

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -4,14 +4,15 @@ import { ServerContext } from '@/state/server';
 import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { UserData } from '@/state/user';
+import RenameServerBox from '@/components/server/settings/RenameServerBox';
 
 export default () => {
     const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
     const server = ServerContext.useStoreState(state => state.server.data!);
 
     return (
-        <div className={'my-10 mb-6 flex'}>
-            <TitledGreyBox title={'SFTP Details'} className={'w-full md:w-1/2'}>
+        <div className={'my-10 mb-6 md:flex'}>
+            <TitledGreyBox title={'SFTP Details'} className={'w-full md:flex-1 md:mr-6'}>
                 <div>
                     <label className={'input-dark-label'}>Server Address</label>
                     <input
@@ -38,6 +39,9 @@ export default () => {
                     </div>
                 </div>
             </TitledGreyBox>
+            <div className={'w-full mt-6 md:flex-1 md:mt-0'}>
+                <RenameServerBox/>
+            </div>
         </div>
     );
 };