Show error message when attempting to change a server's name

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

@@ -1,24 +1,23 @@
 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 { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
+import { Actions, useStoreActions } 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>;
-}
+import { ApplicationStore } from '@/state';
+import { httpErrorToHuman } from '@/api/http';
 
 interface Values {
     name: string;
 }
 
-const RenameServerBox = ({ isSubmitting, ...props }: OwnProps & FormikProps<Values>) => (
+const RenameServerBox = () => {
+    const { isSubmitting } = useFormikContext<Values>();
+
+    return (
         <TitledGreyBox title={'Change Server Name'} className={'relative'}>
             <SpinnerOverlay size={'normal'} visible={isSubmitting}/>
             <Form className={'mb-0'}>
@@ -35,32 +34,36 @@ const RenameServerBox = ({ isSubmitting, ...props }: OwnProps & FormikProps<Valu
                 </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);
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
-    return <EnhancedForm server={server} setServer={setServer}/>;
+    const submit = ({ name }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('settings');
+        renameServer(server.uuid, name)
+            .then(() => setServer({ ...server, name }))
+            .catch(error => {
+                console.error(error);
+                addError({ key: 'settings', message: httpErrorToHuman(error) });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: server.name,
+            }}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+            })}
+        >
+            <RenameServerBox/>
+        </Formik>
+    );
 };

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

@@ -5,13 +5,16 @@ import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { UserData } from '@/state/user';
 import RenameServerBox from '@/components/server/settings/RenameServerBox';
+import FlashMessageRender from '@/components/FlashMessageRender';
 
 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 md:flex'}>
+        <div className={'my-10 mb-6'}>
+            <FlashMessageRender byKey={'settings'} className={'mb-4'}/>
+            <div className={'md:flex'}>
                 <TitledGreyBox title={'SFTP Details'} className={'w-full md:flex-1 md:mr-6'}>
                     <div>
                         <label className={'input-dark-label'}>Server Address</label>
@@ -53,5 +56,6 @@ export default () => {
                     <RenameServerBox/>
                 </div>
             </div>
+        </div>
     );
 };