address PR comments

app/src/components/fields/HorizontalSplitFormComponent.tsx

@@ -1,7 +1,7 @@
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 
 export interface IHorizontalSplitFormComponentProps {
   /**
@@ -17,7 +17,7 @@ export interface IHorizontalSplitFormComponentProps {
    * @type {string}
    * @memberof IHorizontalSplitFormComponentProps
    */
-  summary?: string | ReactNode;
+  summary?: string | ReactElement;
   /**
    * The form component to render
    *

app/src/constants/errors.ts

@@ -0,0 +1,25 @@
+/**
+ * This is a substring of the database's foreign key constraint error message, used to catch
+ * foreign key constraint errors when trying to delete a record and displaying a more useful error message
+ *
+ * ie. While trying to delete a device:
+ *
+ * if (error.includes(FOREIGN_KEY_CONSTRAINT_ERROR)) {
+ *  return "Delete the associated deployment before deleting the device"
+ * }
+ *
+ */
+export const FOREIGN_KEY_CONSTRAINT_ERROR = 'foreign key constraint';
+
+/**
+ * This is a substring of the database's unique constraint error message, used to catch
+ * unique constraint errors when trying to insert a record
+ *
+ * ie. While trying to create a device:
+ *
+ * if (error.includes(UNIQUE_CONSTRAINT_ERROR)) {
+ *  return "That device already eixsts in the Survey"
+ * }
+ *
+ */
+export const UNIQUE_CONSTRAINT_ERROR = 'already exists';

app/src/features/surveys/telemetry/manage/deployments/form/timeline/DeploymentStartForm.tsx

@@ -57,7 +57,6 @@ export const DeploymentStartForm = (props: IDeploymentStartFormProps) => {
           onChange={(_: SyntheticEvent<Element, Event>, value: IAutocompleteFieldOption<string> | null) => {
             // Get date of the capture to set attachment_start_date
             if (value) {
-              console.log('date', value);
               const timestamp = dayjs(value.label);
               const date = timestamp.format(DATE_FORMAT.ShortDateFormat);
               const time = timestamp.format('HH:mm:ss');

app/src/features/surveys/telemetry/manage/deployments/table/DeploymentsContainer.tsx

@@ -14,6 +14,7 @@ import { GridRowSelectionModel } from '@mui/x-data-grid';
 import { LoadingGuard } from 'components/loading/LoadingGuard';
 import { SkeletonTable } from 'components/loading/SkeletonLoaders';
 import { NoDataOverlay } from 'components/overlay/NoDataOverlay';
+import { FOREIGN_KEY_CONSTRAINT_ERROR } from 'constants/errors';
 import { DeploymentsTable } from 'features/surveys/telemetry/manage/deployments/table/DeploymentsTable';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useDialogContext, useSurveyContext } from 'hooks/useContext';
@@ -63,7 +64,7 @@ export const DeploymentsContainer = () => {
             <Typography variant="body2" component="div">
               <strong>Error Deleting Deployments</strong>
             </Typography>
-            {String(error).includes('foreign key constraint') ? (
+            {String(error).includes(FOREIGN_KEY_CONSTRAINT_ERROR) ? (
               <Typography variant="body2" component="div">
                 You must delete telemetry data from these deployments before deleting the deployments.
               </Typography>

app/src/features/surveys/telemetry/manage/deployments/table/DeploymentsTable.tsx

@@ -15,6 +15,7 @@ import { GridColDef, GridRowSelectionModel } from '@mui/x-data-grid';
 import ColouredRectangleChip from 'components/chips/ColouredRectangleChip';
 import { StyledDataGrid } from 'components/data-grid/StyledDataGrid';
 import { DATE_FORMAT } from 'constants/dateTimeFormats';
+import { FOREIGN_KEY_CONSTRAINT_ERROR } from 'constants/errors';
 import dayjs from 'dayjs';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useCodesContext, useDialogContext, useSurveyContext } from 'hooks/useContext';
@@ -97,7 +98,7 @@ export const DeploymentsTable = (props: IDeploymentsTableProps) => {
               <Typography variant="body2" component="div">
                 <strong>Error Deleting Deployment</strong>
               </Typography>
-              {String(error).includes('foreign key constraint') ? (
+              {String(error).includes(FOREIGN_KEY_CONSTRAINT_ERROR) ? (
                 <Typography variant="body2" component="div">
                   You must delete telemetry data from this deployment before deleting the deployment.
                 </Typography>

app/src/features/surveys/telemetry/manage/devices/create/CreateDevicePage.tsx

@@ -1,6 +1,7 @@
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import FormikErrorSnackbar from 'components/alert/FormikErrorSnackbar';
+import { UNIQUE_CONSTRAINT_ERROR } from 'constants/errors';
 import { TelemetryDeviceI18N } from 'constants/i18n';
 import {
   DeviceForm,
@@ -58,7 +59,7 @@ export const CreateDevicePage = () => {
     } catch (error) {
       dialogContext.setErrorDialog({
         dialogTitle: TelemetryDeviceI18N.createErrorTitle,
-        dialogText: !(error as APIError).message.includes('already exists')
+        dialogText: !(error as APIError).message.includes(UNIQUE_CONSTRAINT_ERROR)
           ? TelemetryDeviceI18N.createErrorText
           : undefined,
         dialogError: (error as APIError).message,

app/src/features/surveys/telemetry/manage/devices/table/DevicesContainer.tsx

@@ -15,6 +15,7 @@ import { GridRowSelectionModel } from '@mui/x-data-grid';
 import { LoadingGuard } from 'components/loading/LoadingGuard';
 import { SkeletonTable } from 'components/loading/SkeletonLoaders';
 import { NoDataOverlay } from 'components/overlay/NoDataOverlay';
+import { FOREIGN_KEY_CONSTRAINT_ERROR } from 'constants/errors';
 import { DevicesTable } from 'features/surveys/telemetry/manage/devices/table/DevicesTable';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useDialogContext, useSurveyContext } from 'hooks/useContext';
@@ -65,7 +66,7 @@ export const DevicesContainer = () => {
             <Typography variant="body2" component="div">
               <strong>Error Deleting Devices</strong>
             </Typography>
-            {String(error).includes('foreign key constraint') ? (
+            {String(error).includes(FOREIGN_KEY_CONSTRAINT_ERROR) ? (
               <Typography variant="body2" component="div">
                 You must delete the deployments involving these devices before deleting the devices.
               </Typography>

app/src/features/surveys/telemetry/manage/devices/table/DevicesTable.tsx

@@ -11,6 +11,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { GridColDef, GridRowSelectionModel } from '@mui/x-data-grid';
 import { StyledDataGrid } from 'components/data-grid/StyledDataGrid';
+import { FOREIGN_KEY_CONSTRAINT_ERROR } from 'constants/errors';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useCodesContext, useDialogContext, useSurveyContext } from 'hooks/useContext';
 import { TelemetryDevice } from 'interfaces/useTelemetryDeviceApi.interface';
@@ -83,7 +84,7 @@ export const DevicesTable = (props: IDevicesTableProps) => {
               <Typography variant="body2" component="div">
                 <strong>Error Deleting Device</strong>
               </Typography>
-              {String(error).includes('foreign key constraint') ? (
+              {String(error).includes(FOREIGN_KEY_CONSTRAINT_ERROR) ? (
                 <Typography variant="body2" component="div">
                   You must delete the deployments involving this device before deleting the device.
                 </Typography>