Add ability for user to change server's name

resources/scripts/api/server/renameServer.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (uuid: string, name: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/client/servers/${uuid}/settings/rename`, { name })
+            .then(() => resolve())
+            .catch(reject);
+    });
+};

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>
     );
 };

resources/scripts/routers/ServerRouter.tsx

@@ -47,7 +47,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
             <Provider store={ServerContext.useStore()}>
                 <WebsocketHandler/>
                 <TransitionRouter>
-                    <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
+                    <div className={'w-full mx-auto px-3'} style={{ maxWidth: '1200px' }}>
                         {!server ?
                             <div className={'flex justify-center m-20'}>
                                 <Spinner size={'large'}/>