code smells

app/src/components/fields/AnimalAutocompleteField.tsx

@@ -168,7 +168,7 @@ export const AnimalAutocompleteField = <T extends string | number>(props: IAnima
           error={get(touched, formikFieldName) && Boolean(get(errors, formikFieldName))}
           helperText={get(touched, formikFieldName) && get(errors, formikFieldName)}
           fullWidth
-          placeholder={placeholder || 'Search for an animal in the Survey'}
+          placeholder={placeholder ?? 'Search for an animal in the Survey'}
           InputProps={{
             ...params.InputProps,
             endAdornment: (

app/src/components/fields/DeviceAutocompleteField.tsx

@@ -177,7 +177,7 @@ export const DeviceAutocompleteField = <T extends string | number>(props: IDevic
           error={get(touched, formikFieldName) && Boolean(get(errors, formikFieldName))}
           helperText={get(touched, formikFieldName) && get(errors, formikFieldName)}
           fullWidth
-          placeholder={placeholder || 'Search for a device in the Survey'}
+          placeholder={placeholder ?? 'Search for a device in the Survey'}
           InputProps={{
             ...params.InputProps,
             endAdornment: <>{params.InputProps.endAdornment}</>

app/src/components/fields/SystemUserAutocompleteField.tsx

@@ -199,7 +199,7 @@ export const SystemUserAutocompleteField = (props: ISystemUserAutocompleteFieldP
           {...params}
           variant="outlined"
           label={label}
-          placeholder={placeholder || 'Search by user'}
+          placeholder={placeholder ?? 'Search by user'}
           fullWidth
           InputProps={{
             ...params.InputProps,

app/src/components/species/components/SpeciesAutocompleteField.tsx

@@ -285,7 +285,7 @@ const SpeciesAutocompleteField = (props: ISpeciesAutocompleteFieldProps) => {
           label={label}
           variant="outlined"
           fullWidth
-          placeholder={placeholder || 'Enter a species or taxon'}
+          placeholder={placeholder ?? 'Enter a species or taxon'}
           InputProps={{
             ...params.InputProps,
             startAdornment: showStartAdornment && (

app/src/features/surveys/sampling-information/SamplingRouter.tsx

@@ -23,10 +23,7 @@ export const SamplingRouter = () => {
         path="/admin/projects/:id/surveys/:survey_id/sampling"
         title={getTitle('Manage Sampling Information')}>
         <ProjectRoleRouteGuard
-          validProjectPermissions={[
-            PROJECT_PERMISSION.COORDINATOR,
-            PROJECT_PERMISSION.COLLABORATOR,
-          ]}
+          validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
           <DialogContextProvider>
             <SamplingSiteManagePage />

app/src/features/surveys/telemetry/TelemetryRouter.tsx

@@ -30,10 +30,7 @@ export const TelemetryRouter = () => {
         path="/admin/projects/:id/surveys/:survey_id/telemetry/details"
         title={getTitle('Telemetry')}>
         <ProjectRoleRouteGuard
-          validProjectPermissions={[
-            PROJECT_PERMISSION.COORDINATOR,
-            PROJECT_PERMISSION.COLLABORATOR,
-          ]}
+          validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
           <DialogContextProvider>
             <TelemetryPage />

app/src/features/surveys/telemetry/manage/deployments/form/DeploymentForm.tsx

@@ -39,7 +39,6 @@ export const DeploymentFormYupSchema =
 
 interface IDeploymentFormProps {
   isSubmitting: boolean;
-  isEdit?: boolean;
 }
 
 /**

app/src/features/surveys/telemetry/manage/deployments/form/DeploymentFormHeader.tsx

@@ -35,78 +35,76 @@ export const DeploymentFormHeader = (props: IDeploymentFormHeaderProps) => {
   const { project_id, survey_id, survey_name, project_name, is_submitting, title, breadcrumb } = props;
 
   return (
-    <>
-      <Paper
-        square
-        sx={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 1002,
-          borderBottom: '1px solid' + grey[300]
-        }}>
-        <Container maxWidth="xl" sx={{ py: { xs: 2, sm: 3 } }}>
-          <Breadcrumbs
-            aria-label="breadcrumb"
-            separator=">"
-            sx={{
-              typography: 'body2'
-            }}>
-            <Link component={RouterLink} to={`/admin/projects/${project_id}`} underline="none">
-              {project_name}
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/details`}
-              underline="none">
-              {survey_name}
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry`}
-              underline="none">
-              Manage Telemetry
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`}
-              underline="none">
-              Manage Devices and Deployments
-            </Link>
-            <Typography component="span" variant="body2" color="textSecondary">
-              {breadcrumb}
-            </Typography>
-          </Breadcrumbs>
-          <Stack
-            alignItems="flex-start"
-            flexDirection={{ xs: 'column', lg: 'row' }}
-            justifyContent="space-between"
-            gap={3}>
-            <Typography variant="h1" sx={{ ml: '-2px' }}>
-              {title}
-            </Typography>
-            <Stack flexDirection="row" alignItems="center" gap={1}>
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                loading={is_submitting}
-                onClick={() => {
-                  formikProps.submitForm();
-                }}>
-                Save and Exit
-              </LoadingButton>
-              <Button
-                variant="outlined"
-                color="primary"
-                onClick={() => {
-                  history.push(`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`);
-                }}>
-                Cancel
-              </Button>
-            </Stack>
+    <Paper
+      square
+      sx={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 1002,
+        borderBottom: '1px solid' + grey[300]
+      }}>
+      <Container maxWidth="xl" sx={{ py: { xs: 2, sm: 3 } }}>
+        <Breadcrumbs
+          aria-label="breadcrumb"
+          separator=">"
+          sx={{
+            typography: 'body2'
+          }}>
+          <Link component={RouterLink} to={`/admin/projects/${project_id}`} underline="none">
+            {project_name}
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/details`}
+            underline="none">
+            {survey_name}
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry`}
+            underline="none">
+            Manage Telemetry
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`}
+            underline="none">
+            Manage Devices and Deployments
+          </Link>
+          <Typography component="span" variant="body2" color="textSecondary">
+            {breadcrumb}
+          </Typography>
+        </Breadcrumbs>
+        <Stack
+          alignItems="flex-start"
+          flexDirection={{ xs: 'column', lg: 'row' }}
+          justifyContent="space-between"
+          gap={3}>
+          <Typography variant="h1" sx={{ ml: '-2px' }}>
+            {title}
+          </Typography>
+          <Stack flexDirection="row" alignItems="center" gap={1}>
+            <LoadingButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              loading={is_submitting}
+              onClick={() => {
+                formikProps.submitForm();
+              }}>
+              Save and Exit
+            </LoadingButton>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={() => {
+                history.push(`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`);
+              }}>
+              Cancel
+            </Button>
           </Stack>
-        </Container>
-      </Paper>
-    </>
+        </Stack>
+      </Container>
+    </Paper>
   );
 };

app/src/features/surveys/telemetry/manage/deployments/form/deployment-details/DeploymentDetailsForm.tsx

@@ -68,94 +68,92 @@ export const DeploymentDetailsForm = (props: IDeploymentDetailsFormProps) => {
   const surveyContext = useSurveyContext();
 
   return (
-    <>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <Typography color="textSecondary">
-            You must&nbsp;
-            <Typography
-              sx={{
-                textDecoration: 'none'
-              }}
-              component={RouterLink}
-              to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/telemetry/manage/device/create`}>
-              add the device
-            </Typography>
-            &nbsp;and&nbsp;
-            <Typography
-              sx={{
-                textDecoration: 'none'
-              }}
-              component={RouterLink}
-              to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/animals/create`}>
-              animal
-            </Typography>
-            &nbsp;to your Survey before associating the two in a deployment.
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+        <Typography color="textSecondary">
+          You must&nbsp;
+          <Typography
+            sx={{
+              textDecoration: 'none'
+            }}
+            component={RouterLink}
+            to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/telemetry/manage/device/create`}>
+            add the device
+          </Typography>
+          &nbsp;and&nbsp;
+          <Typography
+            sx={{
+              textDecoration: 'none'
+            }}
+            component={RouterLink}
+            to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/animals/create`}>
+            animal
           </Typography>
-        </Grid>
-        <Grid item xs={12}>
-          <DeviceAutocompleteField
-            formikFieldName="device_id"
-            label="Device"
-            options={surveyDevices}
-            defaultDevice={surveyDevices.find((device) => device.device_id === values.device_id)}
-            required
-            clearOnSelect
-            onSelect={(device: TelemetryDevice) => {
-              if (device) {
-                setFieldValue('device_id', device.device_id);
-              }
+          &nbsp;to your Survey before associating the two in a deployment.
+        </Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <DeviceAutocompleteField
+          formikFieldName="device_id"
+          label="Device"
+          options={surveyDevices}
+          defaultDevice={surveyDevices.find((device) => device.device_id === values.device_id)}
+          required
+          clearOnSelect
+          onSelect={(device: TelemetryDevice) => {
+            if (device) {
+              setFieldValue('device_id', device.device_id);
+            }
+          }}
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <AnimalAutocompleteField
+          formikFieldName="critter_id"
+          label="Animal"
+          defaultAnimal={surveyAnimals.find((animal) => animal.critter_id === values.critter_id)}
+          required
+          clearOnSelect
+          onSelect={(animal: ICritterSimpleResponse) => {
+            if (animal) {
+              setFieldValue('critter_id', animal.critter_id);
+            }
+          }}
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <Stack direction="row" flex={1}>
+          <TextField
+            name="frequency"
+            label="Device frequency"
+            inputProps={{ 'data-testid': 'frequency' }}
+            onChange={(event) => {
+              // Ensure that the formik value is set to null if the input is empty, and not empty-string
+              setFieldValue('frequency', numberOrNull(event.target.value));
+            }}
+            onBlur={handleBlur}
+            variant="outlined"
+            value={get(values, 'frequency') || ''} // Ensure that the value is an empty string if it is null (controlled component)
+            error={get(touched, 'frequency') && Boolean(get(errors, 'frequency'))}
+            helperText={get(touched, 'frequency') && get(errors, 'frequency')}
+            sx={{
+              flex: 0.8,
+              '& .MuiOutlinedInput-root': { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
             }}
           />
-        </Grid>
-        <Grid item xs={12}>
-          <AnimalAutocompleteField
-            formikFieldName="critter_id"
-            label="Animal"
-            defaultAnimal={surveyAnimals.find((animal) => animal.critter_id === values.critter_id)}
-            required
-            clearOnSelect
-            onSelect={(animal: ICritterSimpleResponse) => {
-              if (animal) {
-                setFieldValue('critter_id', animal.critter_id);
-              }
+          <AutocompleteField
+            name="frequency_unit_id"
+            id="frequency_unit_id"
+            label={'Unit'}
+            options={frequencyUnits}
+            required={!!(values.frequency || values.frequency_unit_id)}
+            sx={{
+              flex: 0.2,
+              '& .MuiOutlinedInput-root': { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }
             }}
           />
-        </Grid>
-        <Grid item xs={12}>
-          <Stack direction="row" flex={1}>
-            <TextField
-              name="frequency"
-              label="Device frequency"
-              inputProps={{ 'data-testid': 'frequency' }}
-              onChange={(event) => {
-                // Ensure that the formik value is set to null if the input is empty, and not empty-string
-                setFieldValue('frequency', numberOrNull(event.target.value));
-              }}
-              onBlur={handleBlur}
-              variant="outlined"
-              value={get(values, 'frequency') || ''} // Ensure that the value is an empty string if it is null (controlled component)
-              error={get(touched, 'frequency') && Boolean(get(errors, 'frequency'))}
-              helperText={get(touched, 'frequency') && get(errors, 'frequency')}
-              sx={{
-                flex: 0.8,
-                '& .MuiOutlinedInput-root': { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
-              }}
-            />
-            <AutocompleteField
-              name="frequency_unit_id"
-              id="frequency_unit_id"
-              label={'Unit'}
-              options={frequencyUnits}
-              required={!!(values.frequency || values.frequency_unit_id)}
-              sx={{
-                flex: 0.2,
-                '& .MuiOutlinedInput-root': { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }
-              }}
-            />
-          </Stack>
-        </Grid>
+        </Stack>
       </Grid>
-    </>
+    </Grid>
   );
 };