feat: CE-2144 Handle attachment uploads with duplicate names

frontend/src/app/common/methods.tsx

@@ -205,6 +205,32 @@ export const injectIdentifierToFilename = (
   return `${fileNameWithoutExtension}_${identifier}_${attachmentType}${fileExtension}`;
 };
 
+export const removeIdentifierFromFilename = (
+  formattedFilename: string,
+  identifier: string,
+  attachmentType: AttachmentEnum,
+): string => {
+  const suffix = `_${identifier}_${attachmentType}`;
+  const lastDotIndex = formattedFilename.lastIndexOf(".");
+
+  if (lastDotIndex === -1) {
+    if (formattedFilename.endsWith(suffix)) {
+      return formattedFilename.slice(0, -suffix.length);
+    }
+    return formattedFilename;
+  }
+
+  const fileNameWithoutExtension = formattedFilename.substring(0, lastDotIndex);
+  const fileExtension = formattedFilename.substring(lastDotIndex);
+
+  if (fileNameWithoutExtension.endsWith(suffix)) {
+    const cleanedName = fileNameWithoutExtension.slice(0, -suffix.length);
+    return `${cleanedName}${fileExtension}`;
+  }
+
+  return formattedFilename;
+};
+
 export const isImage = (filename: string): boolean => {
   return ["jpg", "jpeg", "png", "gif", "bmp", "webp", "abif", "svg"].includes(getFileExtension(filename));
 };

frontend/src/app/components/common/attachments-carousel.tsx

@@ -6,10 +6,12 @@ import { getAttachments } from "@store/reducers/attachments";
 import { AttachmentSlide } from "./attachment-slide";
 import { AttachmentUpload } from "./attachment-upload";
 import { COMSObject } from "@apptypes/coms/object";
-import { selectMaxFileSize } from "@store/reducers/app";
+import { openModal, selectMaxFileSize } from "@store/reducers/app";
 import { v4 as uuidv4 } from "uuid";
-import { getThumbnailDataURL, isImage } from "@common/methods";
+import { getThumbnailDataURL, isImage, removeIdentifierFromFilename } from "@common/methods";
 import AttachmentEnum from "@constants/attachment-enum";
+import { getDisplayFilename } from "@/app/common/attachment-utils";
+import { CANCEL_CONFIRM_FILE_UPDATE } from "@/app/types/modal/modal-types";
 
 type Props = {
   attachmentType: AttachmentEnum;
@@ -118,8 +120,48 @@ export const Attachments: FC<Props> = ({
     return copy;
   }
 
+  const confirmFileUpdate = async (newFiles: FileList) => {
+    let exisingFileNames: string[] = [];
+
+    if (attachmentType === AttachmentEnum.TASK_ATTACHMENT) {
+      exisingFileNames = slides.map((attachment) => {
+        return getDisplayFilename(attachment.name);
+      });
+    } else {
+      exisingFileNames = slides.map((attachment) => {
+        return removeIdentifierFromFilename(decodeURIComponent(attachment.name), identifier ?? "", attachmentType);
+      });
+    }
+
+    const exisingFileNamesSet = new Set(exisingFileNames);
+    const newFileNamesArray = Array.from(newFiles).map((file) => file.name);
+    const conflitingFileNames = newFileNamesArray.filter((item) => exisingFileNamesSet.has(item));
+    if (conflitingFileNames.length === 0) {
+      await stageFiles(newFiles);
+    } else {
+      document.body.click();
+      dispatch(
+        openModal({
+          modalSize: "md",
+          modalType: CANCEL_CONFIRM_FILE_UPDATE,
+          data: {
+            title: "File already exists",
+            fileNames: conflitingFileNames,
+            onUpdate: async () => {
+              await stageFiles(newFiles);
+            },
+          },
+        }),
+      );
+    }
+  };
+
   // when a user selects files (via the file browser that pops up when clicking the upload slide) then add them to the carousel
   const onFileSelect = async (newFiles: FileList) => {
+    await confirmFileUpdate(newFiles);
+  };
+
+  const stageFiles = async (newFiles: FileList) => {
     const selectedFilesArray = Array.from(newFiles);
     let newSlides: COMSObject[] = [];
     for (let selectedFile of selectedFilesArray) {

frontend/src/app/components/modal/instances/cancel-confirm-file-update-modal.tsx

@@ -0,0 +1,85 @@
+import { FC } from "react";
+import { Modal, Button } from "react-bootstrap";
+import { useAppSelector } from "@hooks/hooks";
+import { selectModalData } from "@store/reducers/app";
+
+type CancelConfirmFileUpdateModalProps = {
+  close: () => void;
+  onUpdate: () => void;
+};
+
+type ModalData = {
+  title: string;
+  fileNames: string[];
+};
+
+export const CancelConfirmFileUpdateModal: FC<CancelConfirmFileUpdateModalProps> = ({ close, onUpdate }) => {
+  const modalData = useAppSelector(selectModalData) as ModalData;
+  const { title, fileNames } = modalData;
+
+  if (fileNames?.length === 0) {
+    return null;
+  }
+
+  const isSingleFile = fileNames.length === 1;
+
+  const handleSubmit = () => {
+    onUpdate();
+    close();
+  };
+
+  const handleCancel = () => {
+    close();
+  };
+
+  return (
+    <>
+      {title && (
+        <Modal.Header closeButton>
+          <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+      )}
+
+      <Modal.Body>
+        <p>
+          {isSingleFile ? (
+            <>
+              An attachment with the name <strong>{fileNames[0]}</strong> already exists. If this is the latest version
+              of that document, please click <strong>“Update document”</strong>. If this is intended to be a new,
+              separate document, please click <strong>“Cancel”</strong> and rename the file before uploading it.
+            </>
+          ) : (
+            <>
+              <span>Attachments with the following names already exist.</span>
+              <ul className="mt-3 list-unstyled">
+                {fileNames.map((fileName) => (
+                  <li
+                    key={fileName}
+                    className="py-1 px-4"
+                  >
+                    {fileName}
+                  </li>
+                ))}
+              </ul>
+              <span>
+                If this is the latest version of the documents, please click <strong>“Update document”</strong>. If they
+                are intended to be new, separate documents, please click <strong>“Cancel”</strong> and rename the files
+                before uploading them.
+              </span>
+            </>
+          )}
+        </p>
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Button
+          variant="outline-primary"
+          onClick={handleCancel}
+        >
+          Cancel
+        </Button>
+        <Button onClick={handleSubmit}>Update document</Button>
+      </Modal.Footer>
+    </>
+  );
+};

frontend/src/app/components/modal/model-components.ts

@@ -17,6 +17,7 @@ import {
   ADD_PARTY,
   REMOVE_ACTIVITY_FROM_CASE,
   REMOVE_PARTY,
+  CANCEL_CONFIRM_FILE_UPDATE,
 } from "@apptypes/modal/modal-types";
 
 import {
@@ -39,6 +40,7 @@ import { AddComplaintToCaseModal } from "./instances/add-complaint-to-case";
 import { CreateAddCaseModal } from "@/app/components/modal/instances/create-add-case";
 import { RemoveActivityFromCaseModal } from "@/app/components/modal/instances/remove-activity-from-case";
 import { AddPartyModal } from "@/app/components/modal/instances/add-party";
+import { CancelConfirmFileUpdateModal } from "./instances/cancel-confirm-file-update-modal";
 
 export const MODAL_COMPONENTS: { [key: string]: React.ComponentType<any> } = {
   [Sample]: SampleModal,
@@ -59,4 +61,5 @@ export const MODAL_COMPONENTS: { [key: string]: React.ComponentType<any> } = {
   [REMOVE_ACTIVITY_FROM_CASE]: RemoveActivityFromCaseModal,
   [ADD_PARTY]: AddPartyModal,
   [REMOVE_PARTY]: RemovePartyModal,
+  [CANCEL_CONFIRM_FILE_UPDATE]: CancelConfirmFileUpdateModal,
 };

frontend/src/app/types/modal/modal-types.ts

@@ -18,6 +18,7 @@ export const CREATE_ADD_CASE = "CREATE_ADD_CASE";
 export const REMOVE_ACTIVITY_FROM_CASE = "REMOVE_ACTIVITY_FROM_CASE";
 export const ADD_PARTY = "ADD_PARTY";
 export const REMOVE_PARTY = "REMOVE_PARTY";
+export const CANCEL_CONFIRM_FILE_UPDATE = "CANCEL_CONFIRM_FILE_UPDATE";
 
 export interface ModalProps {
   modalType: string;