diff --git a/striker-ui/components/Files/EditFileForm.tsx b/striker-ui/components/Files/EditFileForm.tsx index 4f62720c..3dfb6334 100644 --- a/striker-ui/components/Files/EditFileForm.tsx +++ b/striker-ui/components/Files/EditFileForm.tsx @@ -1,12 +1,13 @@ import { useFormik } from 'formik'; -import { FC, useMemo } from 'react'; +import { FC, useCallback, useMemo, useRef } from 'react'; import ActionGroup from '../ActionGroup'; import api from '../../lib/api'; import convertFormikErrorsToMessages from '../../lib/convertFormikErrorsToMessages'; import FileInputGroup from './FileInputGroup'; import FlexBox from '../FlexBox'; -import MessageGroup from '../MessageGroup'; +import handleAPIError from '../../lib/handleAPIError'; +import MessageGroup, { MessageGroupForwardedRefContent } from '../MessageGroup'; import fileListSchema from './schema'; const toEditFileRequestBody = ( @@ -67,6 +68,14 @@ const toEditFileRequestBody = ( const EditFileForm: FC = (props) => { const { anvils, drHosts, previous: file } = props; + const messageGroupRef = useRef({}); + + const setApiMessage = useCallback( + (message?: Message) => + messageGroupRef.current.setMessage?.call(null, 'api', message), + [], + ); + const formikInitialValues = useMemo(() => { const { locations, name, type, uuid } = file; @@ -97,10 +106,21 @@ const EditFileForm: FC = (props) => { const formik = useFormik({ initialValues: formikInitialValues, - onSubmit: (values) => { + onSubmit: (values, { setSubmitting }) => { const body = toEditFileRequestBody(values[file.uuid], file); - api.put(`/file/${file.uuid}`, body); + api + .put(`/file/${file.uuid}`, body) + .catch((error) => { + const emsg = handleAPIError(error); + + emsg.children = <>Failed to modify file. {emsg.children}; + + setApiMessage(emsg); + }) + .finally(() => { + setSubmitting(false); + }); }, validationSchema: fileListSchema, }); @@ -136,8 +156,9 @@ const EditFileForm: FC = (props) => { showSyncInputGroup showTypeInput /> - +