feat(patients): better form feedback for add allergy

src/locales/enUs/translations/patient/index.ts

@@ -42,6 +42,7 @@ export default {
       new: 'Add Allergy',
       error: {
         nameRequired: 'Name is required.',
+        unableToAdd: 'Unable to add allergy.',
       },
       warning: {
         noAllergies: 'No Allergies',

src/patients/allergies/NewAllergyModal.tsx

@@ -14,6 +14,8 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
   const { show, onCloseButtonClick, onSave } = props
   const [allergy, setAllergy] = useState({ name: '' })
   const [errorMessage, setErrorMessage] = useState('')
+  const [isInvalid, setIsInvalid] = useState(false)
+  const [nameRequiredFeedback, setNameRequiredFeedback] = useState('')
   const { t } = useTranslation()
 
   useEffect(() => {
@@ -29,7 +31,9 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
   const onSaveButtonClick = () => {
     let newErrorMessage = ''
     if (!allergy.name) {
-      newErrorMessage += `${t('patient.allergies.error.nameRequired')} `
+      newErrorMessage += `${t('patient.allergies.error.unableToAdd')} `
+      setIsInvalid(true)
+      setNameRequiredFeedback(`${t('patient.allergies.error.nameRequired')} `)
     }
 
     if (newErrorMessage) {
@@ -49,13 +53,15 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
       {errorMessage && <Alert color="danger" title={t('states.error')} message={errorMessage} />}
       <form>
         <TextInputWithLabelFormGroup
+          feedback={nameRequiredFeedback}
           name="name"
           isRequired
           label={t('patient.allergies.allergyName')}
           isEditable
           placeholder={t('patient.allergies.allergyName')}
           value={allergy.name}
           onChange={onNameChange}
+          isInvalid={isInvalid}
         />
       </form>
     </>