bcgov · al-rosenthal · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git a/app/src/features/surveys/CreateSurveyPage.tsx b/app/src/features/surveys/CreateSurveyPage.tsx
@@ -380,8 +380,8 @@ const CreateSurveyPage = () => {
                 <Divider className={classes.sectionDivider} />
 
                 <HorizontalSplitFormComponent
-                  title="Block Data"
-                  summary="Data for Blocks"
+                  title="Sampling Methods"
+                  summary="Specify site selection methods, stratums and optional sampling blocks for this survey."
                   component={<SurveyBlockSection />}
                 />
                 <Divider className={classes.sectionDivider} />

diff --git a/app/src/features/surveys/components/BlockForm.tsx b/app/src/features/surveys/components/BlockForm.tsx
@@ -1,4 +1,3 @@
-import Typography from '@mui/material/Typography';
 import { Box } from '@mui/system';
 import CustomTextField from 'components/fields/CustomTextField';
 import React from 'react';
@@ -12,25 +11,20 @@ export interface IBlockData {
 const BlockForm: React.FC = () => {
   return (
     <form>
-      <Box>
-        <Box component={'fieldset'} mb={4}>
-          <Typography component="legend">Name and Description</Typography>
-          <Box mt={0.5} mb={3}>
-            <CustomTextField
-              name="name"
-              label="Name"
-              maxLength={50}
-              other={{ placeholder: 'Maximum 50 characters', required: true }}
-            />
-          </Box>
-          <CustomTextField
-            name="description"
-            label="Description"
-            maxLength={250}
-            other={{ multiline: true, placeholder: 'Maximum 250 characters', required: true, rows: 3 }}
-          />
-        </Box>
+      <Box mb={3}>
+        <CustomTextField
+          name="name"
+          label="Name"
+          maxLength={50}
+          other={{ placeholder: 'Maximum 50 characters', required: true }}
+        />
       </Box>
+      <CustomTextField
+        name="description"
+        label="Description"
+        maxLength={250}
+        other={{ multiline: true, placeholder: 'Maximum 250 characters', required: true, rows: 3 }}
+      />
     </form>
   );
 };

diff --git a/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx b/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx
@@ -1,9 +1,4 @@
-import CloseIcon from '@mui/icons-material/Close';
-import { Typography } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
-import Snackbar from '@mui/material/Snackbar';
 import EditDialog from 'components/dialog/EditDialog';
-import { useState } from 'react';
 import BlockForm from './BlockForm';
 import { BlockYupSchema } from './SurveyBlockSection';
 interface ICreateBlockProps {
@@ -14,15 +9,10 @@ interface ICreateBlockProps {
 
 const CreateSurveyBlockDialog: React.FC<ICreateBlockProps> = (props) => {
   const { open, onSave, onClose } = props;
-  const [isSnackBarOpen, setIsSnackBarOpen] = useState(false);
-  const [blockName, setBlockName] = useState('');
   return (
     <>
       <EditDialog
         dialogTitle={'Add Block'}
-        dialogText={
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.'
-        }
         open={open}
         dialogLoading={false}
         component={{
@@ -37,36 +27,9 @@ const CreateSurveyBlockDialog: React.FC<ICreateBlockProps> = (props) => {
         dialogSaveButtonLabel="Add Block"
         onCancel={() => onClose()}
         onSave={(formValues) => {
-          setBlockName(formValues.name);
-          setIsSnackBarOpen(true);
           onSave(formValues);
         }}
       />
-
-      <Snackbar
-        open={isSnackBarOpen}
-        autoHideDuration={6000}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        onClose={() => {
-          setIsSnackBarOpen(false);
-          setBlockName('');
-        }}
-        message={
-          <>
-            <Typography variant="body2" component="div">
-              Block <strong>{blockName}</strong> has been added.
-            </Typography>
-          </>
-        }
-        action={
-          <IconButton size="small" aria-label="close" color="inherit" onClick={() => setIsSnackBarOpen(false)}>
-            <CloseIcon fontSize="small" />
-          </IconButton>
-        }
-      />
     </>
   );
 };

diff --git a/app/src/features/surveys/components/EditSurveyBlockDialog.tsx b/app/src/features/surveys/components/EditSurveyBlockDialog.tsx
@@ -1,9 +1,4 @@
-import CloseIcon from '@mui/icons-material/Close';
-import { Typography } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
-import Snackbar from '@mui/material/Snackbar';
 import EditDialog from 'components/dialog/EditDialog';
-import { useState } from 'react';
 import BlockForm from './BlockForm';
 import { BlockYupSchema, IEditBlock } from './SurveyBlockSection';
 
@@ -16,15 +11,10 @@ interface IEditBlockProps {
 
 const EditSurveyBlockDialog: React.FC<IEditBlockProps> = (props) => {
   const { open, initialData, onSave, onClose } = props;
-  const [isSnackBarOpen, setIsSnackBarOpen] = useState(false);
-  const [blockName, setBlockName] = useState('');
   return (
     <>
       <EditDialog
-        dialogTitle={'Edit Block'}
-        dialogText={
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.'
-        }
+        dialogTitle={'Edit Block Details'}
         open={open}
         dialogLoading={false}
         component={{
@@ -38,49 +28,12 @@ const EditSurveyBlockDialog: React.FC<IEditBlockProps> = (props) => {
         }}
         dialogSaveButtonLabel="Save"
         onCancel={() => {
-          setBlockName('');
-          setIsSnackBarOpen(true);
           onClose();
         }}
         onSave={(formValues) => {
-          setBlockName(formValues.name);
-          setIsSnackBarOpen(true);
           onSave(formValues, initialData?.index);
         }}
       />
-
-      <Snackbar
-        open={isSnackBarOpen}
-        autoHideDuration={6000}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        onClose={() => {
-          setIsSnackBarOpen(false);
-          setBlockName('');
-        }}
-        message={
-          <>
-            <Typography variant="body2" component="div">
-              {initialData?.block.survey_block_id ? (
-                <>
-                  Block <strong>{blockName}</strong> has been updated.
-                </>
-              ) : (
-                <>
-                  Block <strong>{blockName}</strong> has been added.
-                </>
-              )}
-            </Typography>
-          </>
-        }
-        action={
-          <IconButton size="small" aria-label="close" color="inherit" onClick={() => setIsSnackBarOpen(false)}>
-            <CloseIcon fontSize="small" />
-          </IconButton>
-        }
-      />
     </>
   );
 };

diff --git a/app/src/features/surveys/components/SurveyBlockSection.tsx b/app/src/features/surveys/components/SurveyBlockSection.tsx
@@ -2,14 +2,16 @@
 import Icon from '@mdi/react';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ListItemIcon, Menu, MenuItem, MenuProps, Typography } from '@mui/material';
-import Box from '@mui/material/Box';
+// import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
+import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
 import { useFormikContext } from 'formik';
 import { ICreateSurveyRequest } from 'interfaces/useSurveyApi.interface';
 import React, { useState } from 'react';
+import { TransitionGroup } from 'react-transition-group';
 import yup from 'utils/YupSchema';
 import CreateSurveyBlockDialog from './CreateSurveyBlockDialog';
 import EditSurveyBlockDialog from './EditSurveyBlockDialog';
@@ -20,8 +22,8 @@
 
 // Form validation for Block Item
 export const BlockYupSchema = yup.object({
-  name: yup.string().required().max(50, 'Maximum 50 characters'),
-  description: yup.string().required().max(250, 'Maximum 250 characters')
+  name: yup.string().required('Name is required').max(50, 'Maximum 50 characters'),
+  description: yup.string().required('Description is required').max(250, 'Maximum 250 characters')
 });
 
 export const SurveyBlockYupSchema = yup.array(BlockYupSchema);
@@ -92,16 +94,19 @@
         sx={{
           marginBottom: '14px'
         }}>
-        Define Blocks
+        Define Blocks{' '}
+        <Typography component="span" color="textSecondary" fontWeight="inherit">
+          (optional)
+        </Typography>
       </Typography>
       <Typography
         variant="body1"
         color="textSecondary"
         sx={{
+          mb: 2,
           maxWidth: '90ch'
         }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec
-        placerat nisl magna, et faucibus arcu condimentum sed.
+        Enter a name and description for each block used in this survey.
       </Typography>
       <Menu
         open={Boolean(anchorEl)}
@@ -129,9 +134,41 @@
         </MenuItem>
       </Menu>
       <form onSubmit={handleSubmit}>
+        <TransitionGroup>
+          {values.blocks.map((item, index) => {
+            return (
+              <Collapse key={`${item.name}-${item.description}-${index}`}>
+                <Card
+                  variant="outlined"
+                  sx={{
+                    mt: 1,
+                    '& .MuiCardHeader-title': {
+                      mb: 0.5
+                    }
+                  }}>
+                  <CardHeader
+                    action={
+                      <IconButton
+                        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
+                          handleMenuClick(event, index)
+                        }
+                        aria-label="settings">
+                        <MoreVertIcon />
+                      </IconButton>
+                    }
+                    title={item.name}
+                    subheader={item.description}
+                  />
+                </Card>
+              </Collapse>
+            );
+          })}
+        </TransitionGroup>
         <Button
+          sx={{
+            mt: 1
+          }}
           data-testid="block-form-add-button"
-          sx={{ marginBottom: 2, marginTop: 2 }}
           variant="outlined"
           color="primary"
           title="Add Block"
@@ -140,27 +177,6 @@
           onClick={() => setIsCreateModalOpen(true)}>
           Add Block
         </Button>
-        <Box>
-          {values.blocks.map((item, index) => {
-            return (
-              <Card key={`${item.name}-${item.description}`} sx={{ marginTop: 1 }} variant="outlined">
-                <CardHeader
-                  action={
-                    <IconButton
-                      onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
-                        handleMenuClick(event, index)
-                      }
-                      aria-label="settings">
-                      <MoreVertIcon />
-                    </IconButton>
-                  }
-                  title={item.name}
-                  subheader={item.description}
-                />
-              </Card>
-            );
-          })}
-        </Box>
       </form>
     </>
   );

diff --git a/app/src/features/surveys/components/SurveyUserForm.tsx b/app/src/features/surveys/components/SurveyUserForm.tsx
@@ -146,7 +146,9 @@ const SurveyUserForm: React.FC<ISurveyUser> = (props) => {
         </Typography>
       </Box>
       {errors?.['participants'] && selectedUsers.length > 0 && (
-        <AlertBar severity="error" variant="standard" title={alertBarText().title} text={alertBarText().text} />
+        <Box mt={3}>
+          <AlertBar severity="error" variant="standard" title={alertBarText().title} text={alertBarText().text} />
+        </Box>
       )}
       <Box mt={3}>
         <Autocomplete

diff --git a/app/src/features/surveys/edit/EditSurveyForm.tsx b/app/src/features/surveys/edit/EditSurveyForm.tsx
@@ -236,8 +236,8 @@ const EditSurveyForm: React.FC<IEditSurveyForm> = (props) => {
           <Divider className={classes.sectionDivider} />
 
           <HorizontalSplitFormComponent
-            title="Block Data"
-            summary="Data for Blocks"
+            title="Sampling Methods"
+            summary="Specify site selection methods, stratums and optional sampling blocks for this survey."
             component={<SurveyBlockSection />}
           />
           <Divider className={classes.sectionDivider} />