hide default blank row for custom headers

Author: kevinkim-ogp

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

@@ -54,6 +54,7 @@ const action: IRawAction = {
       description: 'Add custom headers here.',
       variables: true,
       customButtonText: 'Add',
+      hideBlankRow: true,
       showDivider: false,
       subFields: [
         {

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

@@ -6,8 +6,8 @@ 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(),
+        key: z.string().trim().min(1, 'Key empty'),
+        value: z.string().trim().min(1, 'Value empty'),
       }),
     )
     .transform((params, context) => {

packages/backend/src/graphql/schema.graphql

@@ -190,6 +190,7 @@ type ActionSubstepArgument {
   hiddenIf: FieldVisibilityCondition
   customButtonText: String
   customStyle: JSONObject
+  hideBlankRow: Boolean
   showDivider: Boolean
   isSingleLine: Boolean
 

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

@@ -161,6 +161,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         subFields={schema.subFields}
         required={required}
         customButtonText={schema.customButtonText}
+        hideBlankRow={schema.hideBlankRow}
         showDivider={schema.showDivider}
         type={type}
         // These are InputCreatorProps which MultiRow will forward.

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

@@ -21,6 +21,7 @@ export type MultiRowProps = {
   label?: string
   description?: string
   flexDir?: string
+  hideBlankRow?: boolean
   showDivider?: boolean
   customButtonText?: string
   type?: string
@@ -34,6 +35,7 @@ function MultiRow(props: MultiRowProps): JSX.Element {
     required,
     description,
     customButtonText,
+    hideBlankRow,
     showDivider,
     type,
     ...forwardedInputCreatorProps
@@ -72,7 +74,7 @@ function MultiRow(props: MultiRowProps): JSX.Element {
     <Controller
       name={name}
       control={control}
-      defaultValue={[{ ...newRowDefaultValue }]}
+      defaultValue={hideBlankRow ? [] : [{ ...newRowDefaultValue }]}
       render={({ field: { value: fallbackRows } }): JSX.Element => {
         // HACKFIX (ogp-weeloong): I don't know why `rows` lags behind
         // `fallbackRows` on the 1st render.

packages/frontend/src/graphql/queries/get-apps.ts

@@ -190,6 +190,7 @@ export const GET_APPS = gql`
             allowArbitrary
             customButtonText
             customStyle
+            hideBlankRow
             showDivider
             showOptionValue
             isSingleLine

packages/types/index.d.ts

@@ -358,6 +358,7 @@ export interface IFieldMultiRowMultiCol extends IBaseField {
   type: 'multirow-multicol'
   value?: string
   customButtonText?: string
+  hideBlankRow?: boolean
   showDivider?: boolean
 
   subFields: IField[]
@@ -367,6 +368,7 @@ export interface IFieldMultiRow extends IBaseField {
   type: 'multirow'
   value?: string
   customButtonText?: string
+  hideBlankRow?: boolean
   showDivider?: boolean
 
   subFields: IField[]