11import React from 'react' ;
22import { ServerContext } from '@/state/server' ;
33import TitledGreyBox from '@/components/elements/TitledGreyBox' ;
4- import { Form , Formik , FormikHelpers , useFormikContext } from 'formik' ;
4+ import { Field as FormikField , Form , Formik , FormikHelpers , useFormikContext } from 'formik' ;
55import { Actions , useStoreActions } from 'easy-peasy' ;
66import renameServer from '@/api/server/renameServer' ;
77import Field from '@/components/elements/Field' ;
@@ -11,19 +11,29 @@ import { ApplicationStore } from '@/state';
1111import { httpErrorToHuman } from '@/api/http' ;
1212import { Button } from '@/components/elements/button/index' ;
1313import tw from 'twin.macro' ;
14+ import Label from '@/components/elements/Label' ;
15+ import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper' ;
16+ import { Textarea } from '@/components/elements/Input' ;
1417
1518interface Values {
1619 name : string ;
20+ description : string ;
1721}
1822
1923const RenameServerBox = ( ) => {
2024 const { isSubmitting } = useFormikContext < Values > ( ) ;
2125
2226 return (
23- < TitledGreyBox title = { 'Change Server Name ' } css = { tw `relative` } >
27+ < TitledGreyBox title = { 'Change Server Details ' } css = { tw `relative` } >
2428 < SpinnerOverlay visible = { isSubmitting } />
2529 < Form css = { tw `mb-0` } >
2630 < Field id = { 'name' } name = { 'name' } label = { 'Server Name' } type = { 'text' } />
31+ < div css = { tw `mt-6` } >
32+ < Label > Server Description</ Label >
33+ < FormikFieldWrapper name = { 'description' } >
34+ < FormikField as = { Textarea } name = { 'description' } rows = { 3 } />
35+ </ FormikFieldWrapper >
36+ </ div >
2737 < div css = { tw `mt-6 text-right` } >
2838 < Button type = { 'submit' } > Save</ Button >
2939 </ div >
@@ -37,10 +47,10 @@ export default () => {
3747 const setServer = ServerContext . useStoreActions ( ( actions ) => actions . server . setServer ) ;
3848 const { addError, clearFlashes } = useStoreActions ( ( actions : Actions < ApplicationStore > ) => actions . flashes ) ;
3949
40- const submit = ( { name } : Values , { setSubmitting } : FormikHelpers < Values > ) => {
50+ const submit = ( { name, description } : Values , { setSubmitting } : FormikHelpers < Values > ) => {
4151 clearFlashes ( 'settings' ) ;
42- renameServer ( server . uuid , name )
43- . then ( ( ) => setServer ( { ...server , name } ) )
52+ renameServer ( server . uuid , name , description )
53+ . then ( ( ) => setServer ( { ...server , name, description } ) )
4454 . catch ( ( error ) => {
4555 console . error ( error ) ;
4656 addError ( { key : 'settings' , message : httpErrorToHuman ( error ) } ) ;
@@ -53,9 +63,11 @@ export default () => {
5363 onSubmit = { submit }
5464 initialValues = { {
5565 name : server . name ,
66+ description : server . description ,
5667 } }
5768 validationSchema = { object ( ) . shape ( {
5869 name : string ( ) . required ( ) . min ( 1 ) ,
70+ description : string ( ) . nullable ( ) ,
5971 } ) }
6072 >
6173 < RenameServerBox />
0 commit comments