Allow users to change the server description (#4420)

resources/lang/en/activity.php

@@ -115,6 +115,7 @@ return [
         ],
         'settings' => [
             'rename' => 'Renamed the server from :old to :new',
+            'description' => 'Changed the server description from :old to :new',
         ],
         'startup' => [
             'edit' => 'Changed the :variable variable from ":old" to ":new"',

resources/scripts/api/server/renameServer.ts

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ServerContext } from '@/state/server';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
-import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
+import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
 import { Actions, useStoreActions } from 'easy-peasy';
 import renameServer from '@/api/server/renameServer';
 import Field from '@/components/elements/Field';
@@ -11,19 +11,29 @@ import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import { Button } from '@/components/elements/button/index';
 import tw from 'twin.macro';
+import Label from '@/components/elements/Label';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import { Textarea } from '@/components/elements/Input';
 
 interface Values {
     name: string;
+    description: string;
 }
 
 const RenameServerBox = () => {
     const { isSubmitting } = useFormikContext<Values>();
 
     return (
-        <TitledGreyBox title={'Change Server Name'} css={tw`relative`}>
+        <TitledGreyBox title={'Change Server Details'} css={tw`relative`}>
             <SpinnerOverlay visible={isSubmitting} />
             <Form css={tw`mb-0`}>
                 <Field id={'name'} name={'name'} label={'Server Name'} type={'text'} />
+                <div css={tw`mt-6`}>
+                    <Label>Server Description</Label>
+                    <FormikFieldWrapper name={'description'}>
+                        <FormikField as={Textarea} name={'description'} rows={3} />
+                    </FormikFieldWrapper>
+                </div>
                 <div css={tw`mt-6 text-right`}>
                     <Button type={'submit'}>Save</Button>
                 </div>
@@ -37,10 +47,10 @@ export default () => {
     const setServer = ServerContext.useStoreActions((actions) => actions.server.setServer);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
-    const submit = ({ name }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('settings');
-        renameServer(server.uuid, name)
-            .then(() => setServer({ ...server, name }))
+        renameServer(server.uuid, name, description)
+            .then(() => setServer({ ...server, name, description }))
             .catch((error) => {
                 console.error(error);
                 addError({ key: 'settings', message: httpErrorToHuman(error) });
@@ -53,9 +63,11 @@ export default () => {
             onSubmit={submit}
             initialValues={{
                 name: server.name,
+                description: server.description,
             }}
             validationSchema={object().shape({
                 name: string().required().min(1),
+                description: string().nullable(),
             })}
         >
             <RenameServerBox />