From 1b9f63b3ad89747f016fb9b30ffcc7e383dd5415 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Wed, 7 Aug 2024 19:34:57 +0200
Subject: [PATCH] fix attachment upload (#6574)

## Context
UploadFile now returns the file token which we don't want when we save
the attachment in the DB due to its non-persistence so now the FE
removes the token query param before saving the attachment. This is most
likely not the right way to do it, we will need to refactor this part
before.

Also made sure we don't save the token in the DB for rich_text as well
and remove it before saving.
---
 .../activities/components/RichTextEditor.tsx  | 28 ++++++++++++++++++-
 .../useUploadAttachmentFile.test.tsx          | 14 ++++++++++
 .../files/hooks/useUploadAttachmentFile.tsx   | 11 ++++++--
 3 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/activities/files/hooks/__tests__/useUploadAttachmentFile.test.tsx

diff --git a/packages/twenty-front/src/modules/activities/components/RichTextEditor.tsx b/packages/twenty-front/src/modules/activities/components/RichTextEditor.tsx
index 8a546e0bf82c..32c344988140 100644
--- a/packages/twenty-front/src/modules/activities/components/RichTextEditor.tsx
+++ b/packages/twenty-front/src/modules/activities/components/RichTextEditor.tsx
@@ -139,6 +139,32 @@ export const RichTextEditor = ({
     return getFileAbsoluteURI(result.data.uploadFile);
   };
 
+  const prepareBody = (newStringifiedBody: string) => {
+    if (!newStringifiedBody) return newStringifiedBody;
+
+    const body = JSON.parse(newStringifiedBody);
+
+    const bodyWithSignedPayload = body.map((block: any) => {
+      if (block.type !== 'image' || !block.props.url) {
+        return block;
+      }
+
+      const imageProps = block.props;
+      const imageUrl = new URL(imageProps.url);
+
+      imageUrl.searchParams.delete('token');
+
+      return {
+        ...block,
+        props: {
+          ...imageProps,
+          url: `${imageUrl.toString()}`,
+        },
+      };
+    });
+    return JSON.stringify(bodyWithSignedPayload);
+  };
+
   const handlePersistBody = useCallback(
     (activityBody: string) => {
       if (!canCreateActivity) {
@@ -148,7 +174,7 @@ export const RichTextEditor = ({
       if (!activityTitleHasBeenSet && fillTitleFromBody) {
         updateTitleAndBody(activityBody);
       } else {
-        persistBodyDebounced(activityBody);
+        persistBodyDebounced(prepareBody(activityBody));
       }
     },
     [
diff --git a/packages/twenty-front/src/modules/activities/files/hooks/__tests__/useUploadAttachmentFile.test.tsx b/packages/twenty-front/src/modules/activities/files/hooks/__tests__/useUploadAttachmentFile.test.tsx
new file mode 100644
index 000000000000..00bcb29ccbd1
--- /dev/null
+++ b/packages/twenty-front/src/modules/activities/files/hooks/__tests__/useUploadAttachmentFile.test.tsx
@@ -0,0 +1,14 @@
+import { computePathWithoutToken } from '../useUploadAttachmentFile';
+
+describe('computePathWithoutToken', () => {
+  it('should remove token from path', () => {
+    const input = 'https://example.com/image.jpg?token=abc123';
+    const expected = 'https://example.com/image.jpg';
+    expect(computePathWithoutToken(input)).toBe(expected);
+  });
+
+  it('should handle path without token', () => {
+    const input = 'https://example.com/image.jpg?size=large';
+    expect(computePathWithoutToken(input)).toBe(input);
+  });
+});
diff --git a/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx b/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx
index 0fa258f56eea..301a324668a7 100644
--- a/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx
+++ b/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx
@@ -9,6 +9,11 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
 
+// Note: This is probably not the right way to do this.
+export const computePathWithoutToken = (attachmentPath: string): string => {
+  return attachmentPath.replace(/\?token=[^&]*$/, '');
+};
+
 export const useUploadAttachmentFile = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const [uploadFile] = useUploadFileMutation();
@@ -29,9 +34,9 @@ export const useUploadAttachmentFile = () => {
       },
     });
 
-    const attachmentUrl = result?.data?.uploadFile;
+    const attachmentPath = result?.data?.uploadFile;
 
-    if (!attachmentUrl) {
+    if (!attachmentPath) {
       return;
     }
 
@@ -42,7 +47,7 @@ export const useUploadAttachmentFile = () => {
     const attachmentToCreate = {
       authorId: currentWorkspaceMember?.id,
       name: file.name,
-      fullPath: attachmentUrl,
+      fullPath: computePathWithoutToken(attachmentPath),
       type: getFileType(file.name),
       [targetableObjectFieldIdName]: targetableObject.id,
       createdAt: new Date().toISOString(),