PLU-337: Allow attachments in postman (#821)

## Problem
Users want to upload a fixed file when sending email via Postman.

## Solution
Allow uploads at Postman step for users to send a fixed file with every
email.
Note: attachments are available for use in all Postman steps of the same
Pipe

**Features**:
- Upload fixed file when sending email via Postman

**Improvements**:
- Improve attachment selector to be consistent with other variable
selectors
- Improve `toPrettyDateString` function to convert `iso` and `ms` inputs
to date strings
- Improve `FileUpload` component to show as an IconButton or with text

## Before & After Screenshots

**BEFORE**:
<img width="858" alt="Screenshot 2024-12-16 at 1 43 29 PM"
src="https://github.com/user-attachments/assets/292a5a27-69b2-4058-8c92-5f186f7bc5d3"
/>

**AFTER**:
<img width="862" alt="Screenshot 2025-03-11 at 10 13 49 PM"
src="https://github.com/user-attachments/assets/82fc5f68-5b9b-4ac2-aaa9-ebf777f3bc00"
/>
<img width="862" alt="Screenshot 2025-03-11 at 10 14 02 PM"
src="https://github.com/user-attachments/assets/8d5cc665-7ddb-4a0a-8e75-d29e19ff1044"
/>
<img width="959" alt="Screenshot 2025-03-11 at 10 14 29 PM"
src="https://github.com/user-attachments/assets/a8a4b1d5-4195-4e5f-9b10-c7d5dc747674"
/>


## Tests
- [x] Existing Pipes with variable attachments are populated and checked
correctly
- [x] Existing Pipes can handle uploaded attachments and send emails
correctly with existing variable attachments
- [x] New Pipes can handle both FormSG, LetterSG and uploaded
attachments
- [x] When deleting a file in a Pipe, file should be deleted from all
Steps in the Pipe (ensures that Pipe does not fail)
- [x] When deleting a Pipe, files uploaded to the Pipe should be deleted
from S3

## Deploy Notes
- Note: infra updates required to add permissions for Malware Protection
and `GetObjectTagging`


**New scripts**:
-
`packages/backend/src/graphql/__tests__/mutations/delete-from-s3.itest.ts`
: tests for functions to delete from s3
- `packages/backend/src/graphql/__tests__/mutations/flow.mock.ts` :
mocks to create mock flow and step
-
`packages/backend/src/graphql/__tests__/mutations/generate-presigned-url.itest.ts`
: tests for function to generate pre-signed URL to upload files to S3
- `packages/backend/src/graphql/mutations/delete-from-s3.ts`: function
to delete files from S3 and corresponding steps
- `packages/backend/src/graphql/mutations/generate-presigned-url.ts`:
function to generate pre-signed URL for uploading file to S3
-
`packages/frontend/src/components/AttachmentSuggestions/components/Checkbox.tsx`:
component to display attachments as checkboxes
-
`packages/frontend/src/components/AttachmentSuggestions/components/Suggestions.tsx`:
component to display attachments in same format as variables
-
`packages/frontend/src/components/AttachmentSuggestions/components/TagList.tsx`:
component to display selected files as a Tag, with close button to
remove
-
`packages/frontend/src/components/AttachmentSuggestions/hooks/useAttachmentSelection.ts`:
hook to manage attachment selection
- `packages/frontend/src/components/AttachmentSuggestions/index.tsx`:
component for suggesting attachment variables or upload fixed
attachments
- `packages/frontend/src/components/AttachmentSuggestions/style.ts`: to
manage styles for AttachmentSuggestions
-`packages/frontend/src/components/AttachmentSuggestions/utils.ts`:
helpers for attachments including file type and size validation,
formatters to file size display, reformatting files to correct format
for saving
- `packages/frontend/src/components/SuggestionsWrapper/index.tsx`:
generic wrapper for suggestions panel
- `packages/frontend/src/graphql/mutations/delete-from-s3.ts`: to invoke
DeleteFromS3
- `packages/frontend/src/graphql/mutations/generate-presigned-url.ts`:
to call
- `packages/frontend/src/hooks/useS3Operations.ts`: hook to perform
upload and delete from S3
- `packages/frontend/src/theme/components/Checkbox.ts`: set style for
Checkbox

**New dependencies**:
- `@aws-sdk/s3-request-presigner` : to generate pre-signed URL for
uploading attachments to S3

Author: kevinkim-ogp

package-lock.json

@@ -31,6 +31,7 @@
     "@apollo/server": "4.9.4",
     "@aws-sdk/client-dynamodb": "3.460.0",
     "@aws-sdk/client-s3": "3.369.0",
+    "@aws-sdk/s3-request-presigner": "3.369.0",
     "@bull-board/express": "5.17.0",
     "@graphql-tools/schema": "10.0.0",
     "@launchdarkly/node-server-sdk": "9.0.4",

packages/backend/package.json

@@ -75,7 +75,11 @@ const action: IRawAction = {
       result.data.attachments?.map(async (attachment) => {
         // We verify the flowId here to ensure that the attachment is from the same flow and not
         // maliciously/ manually injected by another user who does not have access to this attachment
-        const obj = await getObjectFromS3Id(attachment, { flowId: $.flow.id })
+        const obj = await getObjectFromS3Id(
+          attachment,
+          { flowId: $.flow.id },
+          $,
+        )
         return { fileName: obj.name, data: obj.data }
       }),
     )

packages/backend/src/apps/postman/actions/send-transactional-email/index.ts

@@ -80,8 +80,8 @@ export const transactionalEmailFields: IField[] = [
     label: 'Attachments',
     key: 'attachments',
     description:
-      'Check supported file types [here](https://guide.postman.gov.sg/email-api-guide/programmatic-email-api/send-email-api/attachments#list-of-supported-attachment-file-types).',
-    type: 'multiselect' as const,
+      'Check supported file types [here](https://guide.postman.gov.sg/email-api-guide/programmatic-email-api/send-email-api/attachments#list-of-supported-attachment-file-types).\nPlease note that the maximum file size for each file is 2MB, and the total size of all attachments cannot exceed 10MB.',
+    type: 'attachment' as const,
     required: false,
     variables: true,
     variableTypes: ['file'],

packages/backend/src/apps/postman/common/parameters.ts

@@ -0,0 +1,114 @@
+import { randomUUID } from 'crypto'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ForbiddenError } from '@/errors/graphql-errors'
+import deleteUploadedFile from '@/graphql/mutations/delete-uploaded-file'
+import Flow from '@/models/flow'
+import Context from '@/types/express/context'
+
+import { generateMockContext } from './tiles/table.mock'
+import { generateMockFlow, generateMockStep } from './flow.mock'
+
+const mockFlowId = '8c2a70d1-e78b-431e-9069-a4d8f97883f6'
+const mockBucket = 'test-bucket'
+const mockObjectName = 'some-file.jpg'
+const mockObjectKey = `${mockFlowId}s/${mockObjectName}`
+const mockS3Id = `s3:${mockBucket}:${mockFlowId}/${randomUUID()}/${mockObjectName}`
+
+const mocks = vi.hoisted(() => ({
+  s3Client: {
+    send: vi.fn(() => ({
+      $metadata: {
+        httpStatusCode: 200,
+      },
+    })),
+  },
+  parseS3Id: vi.fn(() => ({
+    bucket: mockBucket,
+    objectKey: mockObjectKey,
+    objectName: mockObjectName,
+  })),
+  PutObjectCommand: vi.fn().mockImplementation((input) => ({ input })),
+}))
+
+vi.mock('@aws-sdk/client-s3', () => ({
+  S3Client: function () {
+    return mocks.s3Client
+  },
+  PutObjectCommand: mocks.PutObjectCommand,
+  GetObjectCommand: vi.fn(),
+  DeleteObjectsCommand: vi.fn(),
+}))
+
+function createMockS3Id(mockFileName: string) {
+  return `s3:${mockBucket}:${mockFlowId}/${randomUUID()}/${mockFileName}.txt`
+}
+
+async function createMockStep(
+  context: Context,
+  flowId: string,
+  position: number,
+  params: Record<string, any>,
+  config: Record<string, any> = {},
+) {
+  return generateMockStep(
+    context,
+    'sendTransactionalEmail',
+    'postman',
+    'action',
+    flowId,
+    position,
+    params,
+    config,
+  )
+}
+
+describe('deleteFromS3', () => {
+  let context: Context
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    context = await generateMockContext()
+  })
+
+  it('should successfully delete an object when user owns the flow', async () => {
+    await generateMockFlow(context, mockFlowId)
+
+    await expect(
+      deleteUploadedFile(null, { id: mockS3Id }, context),
+    ).resolves.toBe(true)
+  })
+
+  it('should delete object from all other steps within a flow', async () => {
+    const fileToDelete = createMockS3Id('test_1')
+    await generateMockFlow(context, mockFlowId)
+    await createMockStep(context, mockFlowId, 2, {
+      body: 'Test body',
+      attachments: [fileToDelete],
+    })
+    await createMockStep(context, mockFlowId, 2, {
+      body: 'Test body',
+      attachments: [fileToDelete, createMockS3Id('test_2')],
+    })
+
+    await deleteUploadedFile(null, { id: fileToDelete }, context)
+    const postDeleteSteps = await context.currentUser
+      .$relatedQuery('steps')
+      .where({ flow_id: mockFlowId })
+
+    postDeleteSteps.forEach((step) => {
+      expect(step.parameters.attachments).not.toContain(fileToDelete)
+    })
+  })
+
+  it('should throw an error if user does not have access to the flow', async () => {
+    vi.fn()
+      .mockRejectedValue(Flow.hasAccess)
+      .mockRejectedValue(
+        new ForbiddenError('You do not have access to this flow'),
+      )
+
+    await expect(
+      deleteUploadedFile(null, { id: mockS3Id }, context),
+    ).rejects.toThrow(ForbiddenError)
+  })
+})

packages/backend/src/graphql/__tests__/mutations/delete-uploaded-file.itest.ts

@@ -0,0 +1,72 @@
+import Flow from '@/models/flow'
+import Step from '@/models/step'
+import Context from '@/types/express/context'
+
+export async function generateMockFlow(
+  context: Context,
+  id: string,
+  config?: Record<string, any>,
+) {
+  await Flow.query().insert({
+    id,
+    name: 'Test Flow',
+    userId: context.currentUser.id,
+    config: config ?? {},
+  })
+}
+
+export async function generateMockStep(
+  context: Context,
+  key:
+    | 'delayFor'
+    | 'everyHour'
+    | 'getCellValues'
+    | 'NULL'
+    | 'findMessage'
+    | 'ifThen'
+    | 'everyDay'
+    | 'getTableRow'
+    | 'createTableRow'
+    | 'sendTransactionalEmail'
+    | 'onlyContinueIf'
+    | 'createTileRow'
+    | 'dateTime'
+    | 'httpRequest'
+    | 'everyMonth'
+    | 'createLetter'
+    | 'updateSingleRow'
+    | 'catchRawWebhook'
+    | 'newSubmission'
+    | 'findSingleRow'
+    | 'performCalculation',
+  appKey:
+    | null
+    | 'slack'
+    | 'm365-excel'
+    | 'custom-api'
+    | 'webhook'
+    | 'delay'
+    | 'lettersg'
+    | 'formatter'
+    | 'tiles'
+    | 'scheduler'
+    | 'postman'
+    | 'formsg'
+    | 'calculator'
+    | 'toolbox',
+  type: 'action' | 'trigger',
+  flowId: string,
+  position: number,
+  parameters?: Record<string, any>,
+  config?: Record<string, any>,
+) {
+  await Step.query().insert({
+    key,
+    appKey,
+    type,
+    flowId,
+    position,
+    parameters: parameters ?? {},
+    config: config ?? {},
+  })
+}

packages/backend/src/graphql/__tests__/mutations/flow.mock.ts

@@ -0,0 +1,107 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ForbiddenError } from '@/errors/graphql-errors'
+import { generateMockContext } from '@/graphql/__tests__/mutations/tiles/table.mock'
+import generatePresignedUrl from '@/graphql/mutations/generate-presigned-url'
+import Flow from '@/models/flow'
+import Context from '@/types/express/context'
+
+const VALID_PARAMS = {
+  flowId: '193040de-c818-4a0c-90f9-1dcfb1963f53',
+  filename: 'test.txt',
+  fileType: 'text/plain',
+  size: 100,
+  updatedAt: new Date().toISOString(),
+  manualUpload: true,
+}
+
+const mocks = vi.hoisted(() => ({
+  getSignedUrl: vi.fn(),
+}))
+
+vi.mock('@aws-sdk/s3-request-presigner', () => ({
+  getSignedUrl: mocks.getSignedUrl,
+}))
+
+describe('generatePresignedUrl', () => {
+  let context: Context
+  beforeEach(async () => {
+    context = await generateMockContext()
+  })
+
+  it('should generate a presigned url', async () => {
+    const expectedUrl = 'https://presigned-url.example.com'
+    mocks.getSignedUrl.mockResolvedValueOnce(expectedUrl)
+
+    await Flow.query().insert({
+      id: VALID_PARAMS.flowId,
+      name: 'Test Flow',
+      userId: context.currentUser.id,
+    })
+
+    const result = await generatePresignedUrl(
+      null,
+      { input: VALID_PARAMS },
+      context,
+    )
+    const expectedKeys = ['url', 's3Id']
+    expect(Object.keys(result)).toEqual(expectedKeys)
+    expect(result.s3Id).toContain(VALID_PARAMS.flowId)
+  })
+
+  it('should throw an error if the user does not have access to the flow', async () => {
+    vi.fn()
+      .mockRejectedValue(Flow.hasAccess)
+      .mockRejectedValue(
+        new ForbiddenError('You do not have access to this flow'),
+      )
+
+    await expect(
+      generatePresignedUrl(null, { input: VALID_PARAMS }, context),
+    ).rejects.toThrow(ForbiddenError)
+  })
+
+  it('should throw an error if the file size is too large', async () => {
+    const expectedUrl = 'https://presigned-url.example.com'
+    mocks.getSignedUrl.mockResolvedValueOnce(expectedUrl)
+
+    await Flow.query().insert({
+      id: VALID_PARAMS.flowId,
+      name: 'Test Flow',
+      userId: context.currentUser.id,
+    })
+
+    const tooLargeParams = { ...VALID_PARAMS, size: 2 * 1024 * 1024 + 1 }
+    await expect(
+      generatePresignedUrl(null, { input: tooLargeParams }, context),
+    ).rejects.toThrow('Size of attachment exceeds 2MB')
+  })
+
+  it.each([
+    'application/octet-stream',
+    'application/x-executable',
+    'application/x-shockwave-flash',
+    'application/x-msdownload',
+  ])(
+    'should throw an error if the file type is not supported: %s',
+    async (fileType) => {
+      const expectedUrl = 'https://presigned-url.example.com'
+      mocks.getSignedUrl.mockResolvedValueOnce(expectedUrl)
+
+      await Flow.query().insert({
+        id: VALID_PARAMS.flowId,
+        name: 'Test Flow',
+        userId: context.currentUser.id,
+      })
+
+      const unsupportedParams = {
+        ...VALID_PARAMS,
+        fileType,
+      }
+
+      await expect(
+        generatePresignedUrl(null, { input: unsupportedParams }, context),
+      ).rejects.toThrow('Unsupported file type')
+    },
+  )
+})