add custom header with variables

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]
@@ -23,6 +28,7 @@ const action: IRawAction = {
       required: true,
       description: `The HTTP method we'll use to perform the request.`,
       value: 'GET',
+      showOptionValue: false,
       options: [
         { label: 'DELETE', value: 'DELETE' },
         { label: 'GET', value: 'GET' },
@@ -40,6 +46,35 @@ 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,
+      customButtonText: 'Add',
+      showDivider: false,
+      subFields: [
+        {
+          placeholder: 'Key',
+          key: 'key',
+          type: 'string' as const,
+          required: true,
+          variables: false,
+          customStyle: { flex: 0.5 },
+        },
+        {
+          placeholder: 'Value',
+          key: 'value',
+          type: 'string' as const,
+          required: true,
+          variables: true,
+          isSingleLine: true,
+          customStyle: { flex: 1, minWidth: 0 },
+        },
+      ],
+    },
     {
       label: 'Data',
       key: 'data',
@@ -56,11 +91,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) ||
@@ -97,6 +136,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,49 @@
+import { z } from 'zod'
+
+import { sanitizeMarkdown } from '@/apps/telegram-bot/common/markdown-v1'
+
+export const requestSchema = z.object({
+  customHeaders: z
+    .array(
+      z.object({
+        key: z.string().trim().min(1, 'Key empty').nullish(),
+        value: z.string().trim().min(1, 'Value empty').nullish(),
+      }),
+    )
+    .transform((params, context) => {
+      const result = Object.create(null)
+      const seenFields = new Set<string>()
+      for (const { key, value } of params) {
+        // no null fields or values are allowed
+        if (!key) {
+          context.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'Key empty',
+          })
+          return z.NEVER
+        }
+        if (!value) {
+          context.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'Value 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/graphql/schema.graphql

@@ -188,6 +188,10 @@ type ActionSubstepArgument {
   value: JSONObject
   source: ActionSubstepArgumentSource
   hiddenIf: FieldVisibilityCondition
+  customButtonText: String
+  customStyle: JSONObject
+  showDivider: Boolean
+  isSingleLine: Boolean
 
   # Only for dropdown
   addNewOption: DropdownAddNewOption

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

@@ -114,6 +114,8 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           description={description}
           disabled={disabled}
           placeholder={placeholder}
+          isSingleLine={schema.isSingleLine}
+          customStyle={schema.customStyle}
           variablesEnabled
         />
       )
@@ -133,6 +135,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         description={description}
         clickToCopy={clickToCopy}
         autoComplete={schema.autoComplete}
+        customStyle={schema.customStyle}
       />
     )
   }
@@ -149,14 +152,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}
+        customButtonText={schema.customButtonText}
+        showDivider={schema.showDivider}
+        type={type}
         // These are InputCreatorProps which MultiRow will forward.
         stepId={stepId}
         disabled={disabled}

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

@@ -0,0 +1,51 @@
+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}
+            {...forwardedInputCreatorProps}
+          />
+        )
+      })}
+      {canRemoveRow && (
+        <IconButton
+          variant="clear"
+          aria-label="Remove"
+          icon={<BiTrash />}
+          isDisabled={isEditorReadOnly}
+          onClick={() => remove && 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>
+  )
+}