Added error messages for admin dashboard forms

core/src/containers/forms/country-form/create-country-form/CreateCountryForm.tsx

@@ -49,6 +49,8 @@ const CreateCountryForm: FC<CreateCountryFormProps> = ({ onSuccess }) => {
     resolver: yupResolver(createCountryValidationSchema),
   })
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   const handleTagsChange = (tags: string[]) => {
     setValue("searchTags", tags, { shouldDirty: true })
   }
@@ -118,6 +120,9 @@ const CreateCountryForm: FC<CreateCountryFormProps> = ({ onSuccess }) => {
           <TagInput tags={[]} onChange={handleTagsChange} />
         </Label>
       </DataList>
+      <p className="country-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         disabled={!isDirty || data.isLoading}
         isLoading={data.isLoading}

core/src/containers/forms/country-form/edit-country-form/EditCountryForm.tsx

@@ -43,6 +43,8 @@ const EditCountryForm: FC<EditCountryFormProps> = ({ country, onSuccess }) => {
     resolver: yupResolver(editCountryValidationSchema),
   })
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   const handleTagsChange = (tags: string[]) => {
     setValue("searchTags", tags, { shouldDirty: true })
   }
@@ -110,6 +112,9 @@ const EditCountryForm: FC<EditCountryFormProps> = ({ country, onSuccess }) => {
           <TagInput tags={country.searchTags} onChange={handleTagsChange} />
         </Label>
       </DataList>
+      <p className="country-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}

core/src/containers/forms/country-form/styles.scss

@@ -1,5 +1,12 @@
 @import "@design-system";
 
 .country-form__data-list {
-  margin-bottom: sp(10);
+  margin-bottom: sp(5);
+}
+
+.country-form__error-msg {
+  font-size: $fs-sm;
+  color: $error;
+  margin-bottom: sp(5);
+  padding-left: sp(2);
 }

core/src/containers/forms/indicator-form/create-indicator-form/CreateIndicatorForm.tsx

@@ -56,6 +56,8 @@ const CreateIndicatorForm: FC<CreateIndicatorFormProps> = ({ onSuccess }) => {
     await mutate(preparedData)
   }
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   return (
     <form className="indicator-form" onSubmit={handleSubmit(onSubmit)}>
       <DataList className="indicator-form__data-list">
@@ -142,6 +144,9 @@ const CreateIndicatorForm: FC<CreateIndicatorFormProps> = ({ onSuccess }) => {
           <Switch {...register("absolute")}>Absolute</Switch>
         </div>
       </DataList>
+      <p className="indicator-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}

core/src/containers/forms/indicator-form/edit-indicator-form/EditIndicatorForm.tsx

@@ -41,6 +41,8 @@ const EditIndicatorForm: FC<EditIndicatorFormProps> = ({
     resolver: yupResolver(validationSchema),
   })
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   const handleTagsChange = (tags: string[]) => {
     setValue("searchTags", tags, { shouldDirty: true })
   }
@@ -135,6 +137,9 @@ const EditIndicatorForm: FC<EditIndicatorFormProps> = ({
           <Switch {...register("absolute")}>Absolute</Switch>
         </div>
       </DataList>
+      <p className="indicator-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}

core/src/containers/forms/indicator-form/styles.scss

@@ -7,5 +7,12 @@
 }
 
 .indicator-form__data-list {
-  margin-bottom: sp(6);
+  margin-bottom: sp(1);
+}
+
+.indicator-form__error-msg {
+  font-size: $fs-sm;
+  color: $error;
+  margin-bottom: sp(5);
+  padding-left: sp(2);
 }

core/src/containers/forms/value-form/create-value-form/CreateValueForm.tsx

@@ -36,6 +36,8 @@ const CreateValueForm: FC<CreateValueFormProps> = ({ onSuccess }) => {
     await mutate(data)
   }
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   return (
     <form className="value-form" onSubmit={handleSubmit(onSubmit)}>
       <DataList className="value-form__data-list">
@@ -72,6 +74,9 @@ const CreateValueForm: FC<CreateValueFormProps> = ({ onSuccess }) => {
           </Label>
         </InputGroup>
       </DataList>
+      <p className="value-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}

core/src/containers/forms/value-form/edit-value-form/EditValueForm.tsx

@@ -40,6 +40,8 @@ const EditValueForm: FC<EditValueFormProps> = ({ value, onSuccess }) => {
     await mutate({ ...filteredValues, id: value.id })
   }
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   return (
     <form className="value-form" onSubmit={handleSubmit(onSubmit)}>
       <DataList className="value-form__data-list">
@@ -76,6 +78,9 @@ const EditValueForm: FC<EditValueFormProps> = ({ value, onSuccess }) => {
           </Label>
         </InputGroup>
       </DataList>
+      <p className="value-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}

core/src/containers/forms/value-form/styles.scss

@@ -1,5 +1,12 @@
 @import "@design-system";
 
 .value-form__data-list {
-  margin-bottom: sp(10);
+  margin-bottom: sp(5);
+}
+
+.value-form__error-msg {
+  font-size: $fs-sm;
+  color: $error;
+  margin-bottom: sp(5);
+  padding-left: sp(2);
 }