chore: raise postman attachment size limit (#1227)

## Problem
Users are unable to upload attachments larger than 2 MB to send via
Email by Postman.
This was imposed as the following was mentioned in Postman's API
[docs](https://postman-v1.guides.gov.sg/email-api-guide/programmatic-email-api/send-email-api/attachments):
> - Each email can have up to 10 attachments.
> - Each attachment should not exceed 2MB in size.
> - The cumulative size of all attachments should not exceed 10MB.


## Solution
Following various tests, it was concluded that:
- The cumulative size of all attachments should not exceed 10MB.
- The maximum file size of a single attachment is 10MB.

With that we relax the limits on Plumber to the following:
-  Each attachment should not exceed 10MB ins size.
- The cumulative size of all attachments should not exceed 10MB.


## Bugfix
Discovered a bug that was not computing the cumulative size correctly,
allowing for files to still be selected even after exceeding the 10MB
limit.


## Tests
New limits
- [ ] Can upload and send attachments that are larger than 2MB but less
than 10MB.
- [ ] Can upload and send multiple attachments as long as cumulative
size is less than 10MB.

Bugfix
- [ ] Cannot select new file if the new file causes the cumulative size
to exceed 10MB

Existing Pipes
- [ ] Pipes with existing attachments work as per normal

Author: kevinkim-ogp

packages/backend/src/graphql/__tests__/mutations/generate-presigned-post.itest.ts

@@ -20,7 +20,7 @@ vi.mock('@/helpers/s3', () => ({
   COMMON_S3_BUCKET: 'test-bucket',
   COMMON_S3_MOCK_FOLDER_PREFIX: 's3:test-bucket:mock/',
   parseS3Id: vi.fn(),
-  MAX_FILE_SIZE: 1024 * 1024 * 2,
+  MAX_FILE_SIZE: 1024 * 1024 * 10,
   ACCEPTED_FILE_TYPES: ['text/plain'],
   validateObjectKey: vi.fn((objectKey) => {
     const invalidCharacters = /[\\{}^`%~#<>|[\]]/
@@ -88,10 +88,10 @@ describe('generatePresignedPost', () => {
       userId: context.currentUser.id,
     })
 
-    const tooLargeParams = { ...VALID_PARAMS, size: 2 * 1024 * 1024 + 1 }
+    const tooLargeParams = { ...VALID_PARAMS, size: 10 * 1024 * 1024 + 1 }
     await expect(
       generatePresignedPost(null, { input: tooLargeParams }, context),
-    ).rejects.toThrow('Size of attachment exceeds 2MB')
+    ).rejects.toThrow('Size of attachment exceeds 10MB')
   })
 
   it.each([

packages/backend/src/graphql/mutations/generate-presigned-post.ts

@@ -17,7 +17,7 @@ const generatePresignedPost: MutationResolvers['generatePresignedPost'] =
     const { flowId, filename, fileType, size, updatedAt } = params.input
 
     if (size > MAX_FILE_SIZE) {
-      throw new Error('Size of attachment exceeds 2MB')
+      throw new Error('Size of attachment exceeds 10MB')
     }
     if (!ACCEPTED_FILE_TYPES.includes(fileType)) {
       throw new Error('Unsupported file type')

packages/backend/src/helpers/s3.ts

@@ -72,7 +72,7 @@ export const ACCEPTED_FILE_TYPES = [
   'video/x-ms-wmv', // .wmv
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
 ]
-export const MAX_FILE_SIZE = 1024 * 1024 * 2 // 2 MB
+export const MAX_FILE_SIZE = 1024 * 1024 * 10 // 10MB
 
 function throwAttachmentError(
   errorType: string,

packages/frontend/src/components/AttachmentSuggestions/index.tsx

@@ -95,7 +95,11 @@ function AttachmentSuggestions(props: AttachmentSuggestionsProps) {
       if (!checked) {
         onChange?.(currentValues.filter((v: string) => v !== nameToCheck))
       } else {
-        const { isValid, error } = validateFiles(variable, currentValues)
+        const { isValid, error } = validateFiles(
+          variable,
+          options,
+          getValues(name),
+        )
         if (!isValid) {
           setError(name, { type: 'invalidFile', message: error })
         } else {
@@ -140,14 +144,14 @@ function AttachmentSuggestions(props: AttachmentSuggestionsProps) {
 
   const processFile = useCallback(
     async (file: File) => {
-      const { isValid, error } = validateFiles(file, getValues(name))
+      const { isValid, error } = validateFiles(file, options, getValues(name))
       if (!isValid) {
         setError(name, { type: 'invalidFile', message: error })
       } else {
         await uploadToS3(file, flowId)
       }
     },
-    [flowId, getValues, name, setError, uploadToS3],
+    [flowId, getValues, name, options, setError, uploadToS3],
   )
 
   return (

packages/frontend/src/components/AttachmentSuggestions/utils.ts

@@ -4,9 +4,11 @@ import { FieldValues } from 'react-hook-form'
 
 import { type CheckboxVariable } from './components/Checkbox'
 
+const KB = 1024
+const MB = KB * KB
 export const MAX_NUM_FILES = 10
-const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB in bytes
-const MAX_TOTAL_FILE_SIZE = 5 * MAX_FILE_SIZE // 10MB in bytes
+const MAX_FILE_SIZE = 10 * MB // 10MB
+const MAX_TOTAL_FILE_SIZE = 10 * MB // 10MB
 
 export const ACCEPTED_FILE_TYPES = [
   'text/plain', // .txt, .asc
@@ -54,13 +56,13 @@ type FileSizeValidationResult = {
 }
 
 export function formatFileSizeToStr(sizeInBytes: number): string {
-  if (sizeInBytes < 1024) {
+  if (sizeInBytes < KB) {
     return `${sizeInBytes} B` // Bytes
-  } else if (sizeInBytes < 1024 * 1024) {
-    const sizeInKB = (sizeInBytes / 1024).toFixed(2) // Kilobytes with 2 decimal places
+  } else if (sizeInBytes < MB) {
+    const sizeInKB = (sizeInBytes / KB).toFixed(2) // Kilobytes with 2 decimal places
     return `${sizeInKB} KB`
   } else {
-    const sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2) // Megabytes with 2 decimal places
+    const sizeInMB = (sizeInBytes / MB).toFixed(2) // Megabytes with 2 decimal places
     return `${sizeInMB} MB`
   }
 }
@@ -164,9 +166,13 @@ export function reformatToAttachmentConfig(
 
 export function validateFiles(
   file: File | CheckboxVariable,
-  selectedOptions: (AttachmentConfigInput | CheckboxVariable)[],
+  options: CheckboxVariable[],
+  currentSelection: string[],
 ): FileSizeValidationResult {
   const fileSize = file.size ?? 0
+  const selectedOptions = options.filter((o) =>
+    currentSelection.includes(o.name),
+  )
   const currentTotalSize = selectedOptions.reduce(
     (acc, curr) => acc + (curr?.size ?? 0),
     0,