[PLU-304]: feat: Allow headers to be set using variables for Custom API (#793)

## Problem
Allow headers to be set using variables for Custom API.

## Solution
Add option to set custom headers in the "Set up step" with ability to
select variables.
- Default
<img width="853" alt="Screenshot 2024-11-08 at 5 31 09 PM"
src="https://github.com/user-attachments/assets/54d0d598-b063-43cc-b845-bc541a10496f">
- With custom headers
<img width="859" alt="Screenshot 2024-11-08 at 12 13 56 PM"
src="https://github.com/user-attachments/assets/56c3720e-2d88-432e-9505-24c144cc6919">

**Features**:
- Enable custom headers to be sent (on top of headers configured during
"Add new connection")
- Implement multi column input to adopt similar input style as
Postman/Bruno
<img width="851" alt="Screenshot 2024-11-08 at 1 33 24 PM"
src="https://github.com/user-attachments/assets/c2194022-4457-4676-ab0d-25a297f10c26">



## Before & After Screenshots

**BEFORE**:
- N/A. New feature

**AFTER**:
1. Custom Headers set on Plumber
<img width="850" alt="Screenshot 2024-11-08 at 1 41 21 PM"
src="https://github.com/user-attachments/assets/f1e97f81-2c85-4e5a-9273-51d2ab45b4cd">
2. Custom Headers received
<img width="855" alt="Screenshot 2024-11-08 at 1 42 22 PM"
src="https://github.com/user-attachments/assets/696e0305-aeeb-4183-bf93-eb43328a0120">


## Tests
- [x] Validate key-value pairs, i.e. key/value should not be null
- [x] Custom headers should not override headers set up during the "Add
new connection" stage
- [x] API calls still execute without custom headers


**New scripts**:
- `packages/backend/src/apps/custom-api/actions/http-request/schema.ts`
: validate custom headers
- `packages/frontend/src/components/MultiCol.tsx/index.tsx` : component
for multi column input
- `packages/frontend/src/components/MultiRow/RowDivider.tsx` : move
"And" divider to separate component

Author: kevinkim-ogp

packages/backend/src/apps/custom-api/__tests__/actions/http-request.test.ts

@@ -65,6 +65,30 @@ describe('make http request', () => {
     )
   })
 
+  it('invokes the webhook with custom headers', async () => {
+    $.step.parameters.method = 'POST'
+    $.step.parameters.data = 'meep meep'
+    $.step.parameters.url = 'http://test.local/endpoint?1234'
+    $.step.parameters.customHeaders = [
+      { key: 'Key1', value: 'Value1' },
+      { key: 'Key2', value: 'Value2' },
+    ]
+    mocks.httpRequest.mockReturnValue('mock response')
+
+    await makeRequestAction.run($).catch(() => null)
+    expect(mocks.httpRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        url: $.step.parameters.url,
+        method: $.step.parameters.method,
+        data: $.step.parameters.data,
+        headers: {
+          Key1: 'Value1',
+          Key2: 'Value2',
+        },
+      }),
+    )
+  })
+
   it('should throw an error for error with http request', async () => {
     $.step.parameters.method = 'POST'
     $.step.parameters.data = 'meep meep'
@@ -84,6 +108,22 @@ describe('make http request', () => {
     )
   })
 
+  it.each([[{ value: 'test' }], [{ key: 'test' }]])(
+    'should throw error for invalid custom headers (no field)',
+    async () => {
+      $.step.parameters.customHeaders = [{ value: 'test' }]
+      await expect(makeRequestAction.run($)).rejects.toThrowError()
+    },
+  )
+
+  it('should throw error for invalid custom headers (duplicate keys)', async () => {
+    $.step.parameters.customHeaders = [
+      { key: 'test', value: 'value1' },
+      { key: 'test', value: 'value2' },
+    ]
+    await expect(makeRequestAction.run($)).rejects.toThrowError()
+  })
+
   it('should follow redirect once', async () => {
     mocks.isUrlAllowed.mockResolvedValueOnce(false)
     $.step.parameters.method = 'POST'

packages/backend/src/apps/custom-api/actions/http-request/index.ts

@@ -1,12 +1,17 @@
 import { IRawAction } from '@plumber/types'
 
-import StepError from '@/errors/step'
+import { ZodError } from 'zod'
+import { fromZodError } from 'zod-validation-error'
+
+import StepError, { GenericSolution } from '@/errors/step'
 
 import {
   DISALLOWED_IP_RESOLVED_ERROR,
   RECURSIVE_WEBHOOK_ERROR_NAME,
 } from '../../common/check-urls'
 
+import { requestSchema } from './schema'
+
 type TMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE'
 
 const REDIRECT_STATUS_CODES = [301, 302, 307, 308]
@@ -41,6 +46,31 @@ const action: IRawAction = {
         'Any URL with a querystring will be re-encoded properly. Plumber URLs (e.g. https://plumber.gov.sg/webhooks/...) are prohibited.',
       variables: true,
     },
+    {
+      label: 'Custom Headers',
+      key: 'customHeaders',
+      type: 'multirow-multicol' as const,
+      required: false,
+      description: 'Add custom headers here.',
+      variables: true,
+      addRowButtonText: 'Add',
+      subFields: [
+        {
+          placeholder: 'Key',
+          key: 'key',
+          type: 'string' as const,
+          required: true,
+          variables: false,
+        },
+        {
+          placeholder: 'Value',
+          key: 'value',
+          type: 'string' as const,
+          required: true,
+          variables: true,
+        },
+      ],
+    },
     {
       label: 'Data',
       key: 'data',
@@ -57,11 +87,15 @@ const action: IRawAction = {
     const url = $.step.parameters.url as string
 
     try {
+      const parsedS = requestSchema.parse($.step.parameters)
+      const { customHeaders } = parsedS
+
       let response = await $.http.request({
         url,
         method,
         data,
         maxRedirects: 0,
+        headers: customHeaders,
         //  overwriting this to allow redirects to resolve
         validateStatus: (status) =>
           (status >= 200 && status < 300) ||
@@ -98,6 +132,16 @@ const action: IRawAction = {
 
       $.setActionItem({ raw: { data: responseData } })
     } catch (err) {
+      if (err instanceof ZodError) {
+        const firstError = fromZodError(err).details[0]
+        throw new StepError(
+          `${firstError.message} under set up action`,
+          GenericSolution.ReconfigureInvalidField,
+          $.step.position,
+          $.app.name,
+        )
+      }
+
       if (err.message === RECURSIVE_WEBHOOK_ERROR_NAME) {
         throw new StepError(
           RECURSIVE_WEBHOOK_ERROR_NAME,

packages/backend/src/apps/custom-api/actions/http-request/schema.ts

@@ -0,0 +1,50 @@
+import { z } from 'zod'
+
+import { sanitizeMarkdown } from '@/apps/telegram-bot/common/markdown-v1'
+
+export const requestSchema = z.object({
+  customHeaders: z
+    .array(
+      z.object({
+        // key cannot be null or empty
+        key: z
+          .string({
+            required_error: 'Key empty',
+            invalid_type_error: 'Key empty',
+          })
+          .trim()
+          .min(1, 'Key empty'),
+        // value optional in the event the substituted variable is empty
+        value: z.string().trim().nullish().optional(),
+      }),
+    )
+    .transform((params, context) => {
+      const result = Object.create(null)
+      const seenFields = new Set<string>()
+      for (const { key, value } of params) {
+        // no null keys are allowed
+        if (!key) {
+          context.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'Key empty',
+          })
+          return z.NEVER
+        }
+        // catch duplicate fields
+        if (seenFields.has(key)) {
+          context.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `${key} key is repeated`,
+            fatal: true,
+          })
+          return z.NEVER
+        }
+        seenFields.add(key)
+
+        const cleanV = value?.replaceAll(/\r?\n|\r/g, ' ') || ''
+        result[key] = sanitizeMarkdown(cleanV)
+      }
+      return result
+    })
+    .nullish(),
+})

packages/backend/src/apps/lettersg/actions/create-letter/index.ts

@@ -69,7 +69,7 @@ const action: IRawAction = {
       label: 'Personalised fields',
       key: 'letterParams',
       type: 'multirow' as const,
-      required: false,
+      required: true,
       description:
         'Specify values for each personalised field in your template.',
 

packages/backend/src/graphql/schema.graphql

@@ -188,6 +188,7 @@ type ActionSubstepArgument {
   value: JSONObject
   source: ActionSubstepArgumentSource
   hiddenIf: FieldVisibilityCondition
+  addRowButtonText: String
 
   # Only for dropdown
   addNewOption: DropdownAddNewOption

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

@@ -15,6 +15,7 @@ export type InputCreatorProps = {
   namePrefix?: string
   stepId?: string
   disabled?: boolean
+  parentType?: string
 }
 
 type RawOption = {
@@ -26,7 +27,7 @@ const optionGenerator = (options: RawOption[]): IFieldDropdownOption[] =>
   options?.map(({ name, value }) => ({ label: name as string, value: value }))
 
 export default function InputCreator(props: InputCreatorProps): JSX.Element {
-  const { schema, namePrefix, stepId, disabled } = props
+  const { schema, namePrefix, stepId, disabled, parentType } = props
 
   const {
     key: name,
@@ -114,6 +115,10 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           description={description}
           disabled={disabled}
           placeholder={placeholder}
+          isSingleLine={parentType === 'multicol'}
+          customStyle={
+            parentType === 'multicol' ? { flex: 1, minWidth: 0 } : {}
+          }
           variablesEnabled
         />
       )
@@ -133,6 +138,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         description={description}
         clickToCopy={clickToCopy}
         autoComplete={schema.autoComplete}
+        customStyle={parentType === 'multicol' ? { flex: 0.5 } : {}}
       />
     )
   }
@@ -149,14 +155,17 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
     )
   }
 
-  if (type === 'multirow') {
+  if (type === 'multirow' || type === 'multirow-multicol') {
     return (
       <MultiRow
         name={computedName}
         label={label}
         description={description}
         subFields={schema.subFields}
         required={required}
+        addRowButtonText={schema.addRowButtonText}
+        showDivider={type !== 'multirow-multicol'}
+        type={type}
         // These are InputCreatorProps which MultiRow will forward.
         stepId={stepId}
         disabled={disabled}

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

@@ -0,0 +1,52 @@
+import type { IField } from '@plumber/types'
+
+import { BiTrash } from 'react-icons/bi'
+import { Flex } from '@chakra-ui/react'
+import { IconButton } from '@opengovsg/design-system-react'
+
+import InputCreator from '@/components/InputCreator'
+
+type MultiColProps = {
+  name: string
+  subFields: IField[]
+  canRemoveRow?: boolean
+  isEditorReadOnly?: boolean
+  remove?: (index?: number | number[]) => void
+  index?: number
+}
+
+export default function MultiCol(props: MultiColProps) {
+  const {
+    name,
+    subFields,
+    canRemoveRow,
+    isEditorReadOnly,
+    remove,
+    index,
+    ...forwardedInputCreatorProps
+  } = props
+  return (
+    <Flex flexDir="row" gap={2}>
+      {subFields.map((subF) => {
+        return (
+          <InputCreator
+            key={`${name}.${subF.key}`}
+            schema={subF}
+            namePrefix={name}
+            parentType="multicol"
+            {...forwardedInputCreatorProps}
+          />
+        )
+      })}
+      {canRemoveRow && (
+        <IconButton
+          variant="clear"
+          aria-label="Remove"
+          icon={<BiTrash />}
+          isDisabled={isEditorReadOnly}
+          onClick={() => remove?.(index)}
+        />
+      )}
+    </Flex>
+  )
+}

packages/frontend/src/components/MultiRow/RowDivider.tsx

@@ -0,0 +1,13 @@
+import { Divider, Flex, Text } from '@chakra-ui/react'
+
+export default function RowDivider() {
+  return (
+    <Flex alignItems="center">
+      <Divider />
+      <Text textStyle="subhead-3" mx={2.5}>
+        And
+      </Text>
+      <Divider />
+    </Flex>
+  )
+}