feat: modified frontend to render CSVErrorsTable

app/src/components/dialog/attachments/FileUploadSingleItemDialog.tsx

@@ -10,7 +10,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { IDropZoneConfigProps } from 'components/file-upload/DropZone';
 import { UploadFileStatus } from 'components/file-upload/FileUploadItem';
 import { FileUploadSingleItem } from 'components/file-upload/FileUploadSingleItem';
-import { useEffect, useState } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 
 interface IFileUploadSingleItemDialog {
   open: boolean;
@@ -27,7 +27,7 @@ interface IFileUploadSingleItemDialog {
  * @param {IFileUploadSingleItemDialog} props
  * @return {*}
  */
-export const FileUploadSingleItemDialog = (props: IFileUploadSingleItemDialog) => {
+export const FileUploadSingleItemDialog = (props: PropsWithChildren<IFileUploadSingleItemDialog>) => {
   const { open, dialogTitle, uploadButtonLabel, onUpload, onClose, dropZoneProps } = props;
 
   const theme = useTheme();
@@ -81,6 +81,7 @@ export const FileUploadSingleItemDialog = (props: IFileUploadSingleItemDialog) =
         <Typography variant="body2" color="error">
           {error}
         </Typography>
+        {props.children}
       </DialogContent>
       <DialogActions>
         <LoadingButton

app/src/features/surveys/telemetry/table/TelemetryTableContainer.tsx

@@ -15,6 +15,7 @@ import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import { CSVErrorsTableContainer } from 'components/csv/CSVErrorsTableContainer';
 import DataGridValidationAlert from 'components/data-grid/DataGridValidationAlert';
 import { FileUploadSingleItemDialog } from 'components/dialog/attachments/FileUploadSingleItemDialog';
 import YesNoDialog from 'components/dialog/YesNoDialog';
@@ -27,6 +28,7 @@ import { APIError } from 'hooks/api/useAxios';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useTelemetryTableContext } from 'hooks/useContext';
 import { useContext, useDeferredValue, useState } from 'react';
+import { CSVError, isCSVValidationError } from 'utils/file-utils';
 
 export const TelemetryTableContainer = () => {
   const biohubApi = useBiohubApi();
@@ -40,6 +42,7 @@ export const TelemetryTableContainer = () => {
   const [showConfirmRemoveAllDialog, setShowConfirmRemoveAllDialog] = useState(false);
   const [contextMenuAnchorEl, setContextMenuAnchorEl] = useState<Element | null>(null);
   const [columnVisibilityMenuAnchorEl, setColumnVisibilityMenuAnchorEl] = useState<Element | null>(null);
+  const [importCSVErrors, setImportCSVErrors] = useState<CSVError[]>([]);
 
   const deferredUnsavedChanges = useDeferredValue(telemetryTableContext.hasUnsavedChanges);
 
@@ -57,6 +60,23 @@ export const TelemetryTableContainer = () => {
     setColumnVisibilityMenuAnchorEl(null);
   };
 
+  /**
+   * Handle the close of the import dialog.
+   *
+   * @returns {*} {void}
+   */
+  const handleCloseImportDialog = () => {
+    setImportCSVErrors([]);
+    setShowImportDialog(false);
+  };
+
+  /**
+   * Handle the import of telemetry data.
+   *
+   * Note: This will render a table in the dialog if CSVErrors are present
+   * @param {File} file
+   * @returns {*} {void}
+   */
   const handleImportTelemetry = async (file: File) => {
     try {
       const uploadResponse = await biohubApi.telemetry.uploadCsvForImport(
@@ -83,6 +103,11 @@ export const TelemetryTableContainer = () => {
         setProcessingRecords(false);
       });
     } catch (error) {
+      if (isCSVValidationError(error)) {
+        setImportCSVErrors(error.errors);
+        return;
+      }
+
       const apiError = error as APIError;
 
       dialogContext.setErrorDialog({
@@ -108,11 +133,16 @@ export const TelemetryTableContainer = () => {
       <FileUploadSingleItemDialog
         open={showImportDialog}
         dialogTitle="Import Telemetry CSV"
-        onClose={() => setShowImportDialog(false)}
+        onClose={handleCloseImportDialog}
         onUpload={handleImportTelemetry}
         uploadButtonLabel="Import"
-        dropZoneProps={{ acceptedFileExtensions: '.csv' }}
-      />
+        dropZoneProps={{ acceptedFileExtensions: '.csv' }}>
+        {importCSVErrors.length > 0 ? (
+          <Box sx={{ mt: 2 }}>
+            <CSVErrorsTableContainer errors={importCSVErrors} />
+          </Box>
+        ) : null}
+      </FileUploadSingleItemDialog>
       <YesNoDialog
         dialogTitle={TelemetryTableI18N.removeAllDialogTitle}
         dialogText={TelemetryTableI18N.removeAllDialogText}
@@ -149,8 +179,8 @@ export const TelemetryTableContainer = () => {
               variant="contained"
               color="primary"
               startIcon={<Icon path={mdiImport} size={1} />}
-              // TODO: Disabled while the backend CSV Import code is being refactored (https://apps.nrs.gov.bc.ca/int/jira/browse/SIMSBIOHUB-652)
-              disabled={true}
+              //// TODO: Disabled while the backend CSV Import code is being refactored (https://apps.nrs.gov.bc.ca/int/jira/browse/SIMSBIOHUB-652)
+              //disabled={true}
               onClick={() => setShowImportDialog(true)}>
               Import
             </Button>

app/src/hooks/api/useTelemetryApi.ts

@@ -177,7 +177,7 @@ const useTelemetryApi = (axios: AxiosInstance) => {
     formData.append('media', file);
 
     const { data } = await axios.post<{ submission_id: number }>(
-      `/api/project/${projectId}/survey/${surveyId}/telemetry/upload`,
+      `/api/project/${projectId}/survey/${surveyId}/telemetry/import`,
       formData,
       {
         cancelToken: cancelTokenSource?.token,