SIMSBIOHUB-461: "Missing Field" snackbar fix

app/src/components/alert/SnackbarComponent.tsx

@@ -0,0 +1,44 @@
+import Alert from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
+import { useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+
+const SnackbarComponent = () => {
+  const formikProps = useFormikContext<any>();
+  const { errors, submitCount } = formikProps;
+  const [openSnackbar, setOpenSnackbar] = useState({ open: false, msg: '' });
+
+  useEffect(() => {
+    const showSnackBar = (message: string) => {
+      setOpenSnackbar({ open: true, msg: message });
+    };
+
+    if (errors && submitCount > 0) {
+      showSnackBar('Missing one or more required fields.');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors, submitCount]);
+
+  const closeSnackBar = () =>
+    setOpenSnackbar((currentState) => {
+      return { open: false, msg: currentState.msg };
+    });
+
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center'
+        }}
+        open={openSnackbar.open}
+        onClose={closeSnackBar}>
+        <Alert elevation={4} severity="error" variant="filled" onClose={closeSnackBar}>
+          {openSnackbar.msg}
+        </Alert>
+      </Snackbar>
+    </>
+  );
+};
+
+export default SnackbarComponent;

app/src/components/species/FocalSpeciesComponent.tsx

@@ -7,7 +7,7 @@ import SelectedSpecies from './components/SelectedSpecies';
 import SpeciesAutocompleteField from './components/SpeciesAutocompleteField';
 
 const FocalSpeciesComponent = () => {
-  const { values, setFieldValue, setErrors, errors } = useFormikContext<ITaxonomy[]>();
+  const { values, setFieldValue, setErrors, errors, submitCount } = useFormikContext<ITaxonomy[]>();
 
   const selectedSpecies: ITaxonomy[] = get(values, 'species.focal_species') || [];
 
@@ -32,7 +32,7 @@ const FocalSpeciesComponent = () => {
         required={true}
         handleAddSpecies={handleAddSpecies}
       />
-      {errors && get(errors, 'species.focal_species') && (
+      {submitCount > 0 && errors && get(errors, 'species.focal_species') && (
         <Box mt={3}>
           <AlertBar
             severity="error"

app/src/features/projects/create/CreateProjectForm.tsx

@@ -2,8 +2,8 @@ import { Theme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@mui/styles';
+import SnackbarComponent from 'components/alert/SnackbarComponent';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
-import { ScrollToFormikError } from 'components/formik/ScrollToFormikError';
 import { PROJECT_ROLE } from 'constants/roles';
 import { Formik, FormikProps } from 'formik';
 import { useAuthStateContext } from 'hooks/useAuthStateContext';
@@ -106,8 +106,7 @@ const CreateProjectForm: React.FC<ICreateProjectForm> = (props) => {
       enableReinitialize={true}
       onSubmit={handleSubmit}>
       <>
-        <ScrollToFormikError fieldOrder={Object.keys(initialProjectFieldData)} />
-
+        <SnackbarComponent />
         <HorizontalSplitFormComponent
           title="General Information"
           summary="Enter general information, objectives and timelines for the project."

app/src/features/projects/edit/EditProjectForm.tsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@mui/styles';
+import SnackbarComponent from 'components/alert/SnackbarComponent';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
 import { Formik, FormikProps } from 'formik';
 import { IGetAllCodeSetsResponse } from 'interfaces/useCodesApi.interface';
@@ -62,6 +63,7 @@ const EditProjectForm: React.FC<IEditProjectForm> = (props) => {
         enableReinitialize={true}
         onSubmit={handleSubmit}>
         <>
+          <SnackbarComponent />
           <HorizontalSplitFormComponent
             title="General Information"
             summary="Enter general information, objectives and timelines for the project."

app/src/features/surveys/CreateSurveyPage.tsx

@@ -8,9 +8,9 @@ import Link from '@mui/material/Link';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import SnackbarComponent from 'components/alert/SnackbarComponent';
 import { IErrorDialogProps } from 'components/dialog/ErrorDialog';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
-import { ScrollToFormikError } from 'components/formik/ScrollToFormikError';
 import PageHeader from 'components/layout/PageHeader';
 import { DATE_FORMAT, DATE_LIMIT } from 'constants/dateTimeFormats';
 import { CreateSurveyI18N } from 'constants/i18n';
@@ -276,7 +276,7 @@ const CreateSurveyPage = () => {
               validateOnChange={false}
               onSubmit={handleSubmit}>
               <>
-                <ScrollToFormikError fieldOrder={Object.keys(surveyInitialValues)} />
+                <SnackbarComponent />
                 <Stack gap={5} divider={<Divider flexItem />}>
                   <HorizontalSplitFormComponent
                     title="General Information"

app/src/features/surveys/edit/EditSurveyForm.tsx

@@ -4,8 +4,8 @@ import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import { makeStyles } from '@mui/styles';
+import SnackbarComponent from 'components/alert/SnackbarComponent';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
-import { ScrollToFormikError } from 'components/formik/ScrollToFormikError';
 import { DATE_FORMAT, DATE_LIMIT } from 'constants/dateTimeFormats';
 import { default as dayjs } from 'dayjs';
 import SamplingStrategyForm from 'features/surveys/components/SamplingStrategyForm';
@@ -157,8 +157,7 @@ const EditSurveyForm: React.FC<IEditSurveyForm> = (props) => {
         validateOnChange={false}
         onSubmit={props.handleSubmit}>
         <>
-          <ScrollToFormikError fieldOrder={Object.keys(surveyInitialValues)} />
-
+          <SnackbarComponent />
           <HorizontalSplitFormComponent
             title="General Information"
             summary=""