fix bug in multirow delete, refactor based on comments

Author: kevinkim-ogp

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

@@ -53,26 +53,22 @@ const action: IRawAction = {
       required: false,
       description: 'Add custom headers here.',
       variables: true,
-      customButtonText: 'Add',
+      addRowButtonText: 'Add',
       hideBlankRow: true,
-      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 },
         },
       ],
     },

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

@@ -6,29 +6,30 @@ export const requestSchema = z.object({
   customHeaders: z
     .array(
       z.object({
-        key: z.string().trim().min(1, 'Key empty'),
-        value: z.string().trim().min(1, 'Value empty'),
+        // 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 fields or values are allowed
+        // no null keys 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({
@@ -40,7 +41,7 @@ export const requestSchema = z.object({
         }
         seenFields.add(key)
 
-        const cleanV = value.replaceAll(/\r?\n|\r/g, ' ')
+        const cleanV = value?.replaceAll(/\r?\n|\r/g, ' ') || ''
         result[key] = sanitizeMarkdown(cleanV)
       }
       return result

packages/backend/src/graphql/schema.graphql

@@ -188,11 +188,8 @@ type ActionSubstepArgument {
   value: JSONObject
   source: ActionSubstepArgumentSource
   hiddenIf: FieldVisibilityCondition
-  customButtonText: String
-  customStyle: JSONObject
+  addRowButtonText: String
   hideBlankRow: Boolean
-  showDivider: Boolean
-  isSingleLine: Boolean
 
   # 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,8 +115,10 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           description={description}
           disabled={disabled}
           placeholder={placeholder}
-          isSingleLine={schema.isSingleLine}
-          customStyle={schema.customStyle}
+          isSingleLine={parentType === 'multicol'}
+          customStyle={
+            parentType === 'multicol' ? { flex: 1, minWidth: 0 } : {}
+          }
           variablesEnabled
         />
       )
@@ -135,7 +138,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         description={description}
         clickToCopy={clickToCopy}
         autoComplete={schema.autoComplete}
-        customStyle={schema.customStyle}
+        customStyle={parentType === 'multicol' ? { flex: 0.5 } : {}}
       />
     )
   }
@@ -160,9 +163,9 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         description={description}
         subFields={schema.subFields}
         required={required}
-        customButtonText={schema.customButtonText}
+        addRowButtonText={schema.addRowButtonText}
         hideBlankRow={schema.hideBlankRow}
-        showDivider={schema.showDivider}
+        showDivider={type !== 'multirow-multicol'}
         type={type}
         // These are InputCreatorProps which MultiRow will forward.
         stepId={stepId}

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

@@ -33,6 +33,7 @@ export default function MultiCol(props: MultiColProps) {
             key={`${name}.${subF.key}`}
             schema={subF}
             namePrefix={name}
+            parentType="multicol"
             {...forwardedInputCreatorProps}
           />
         )
@@ -43,7 +44,7 @@ export default function MultiCol(props: MultiColProps) {
           aria-label="Remove"
           icon={<BiTrash />}
           isDisabled={isEditorReadOnly}
-          onClick={() => remove && remove(index)}
+          onClick={() => remove?.(index)}
         />
       )}
     </Flex>

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

@@ -23,7 +23,7 @@ export type MultiRowProps = {
   flexDir?: string
   hideBlankRow?: boolean
   showDivider?: boolean
-  customButtonText?: string
+  addRowButtonText?: string
   type?: string
 } & Omit<InputCreatorProps, 'schema' | 'namePrefix'>
 
@@ -34,7 +34,7 @@ function MultiRow(props: MultiRowProps): JSX.Element {
     label,
     required,
     description,
-    customButtonText,
+    addRowButtonText,
     hideBlankRow,
     showDivider,
     type,
@@ -100,7 +100,7 @@ function MultiRow(props: MultiRowProps): JSX.Element {
             {actualRows.map((row, index) => {
               const namePrefix = `${name}.${index}`
               return (
-                <Flex key={`${name}.${index}`} flexDir="column" gap={4} mb={4}>
+                <Flex key={row.id} flexDir="column" gap={4} mb={4}>
                   {type === 'multirow-multicol' ? (
                     <>
                       <MultiCol
@@ -168,7 +168,7 @@ function MultiRow(props: MultiRowProps): JSX.Element {
               isDisabled={isEditorReadOnly}
               maxW="fit-content"
             >
-              {customButtonText ?? 'And'}
+              {addRowButtonText ?? 'And'}
             </Button>
           </Flex>
         )

packages/frontend/src/components/RichTextEditor/RichTextEditor.scss

@@ -200,6 +200,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  justify-content: center;
 
   .tiptap p.is-editor-empty:first-child::before {
     color: #adb5bd;

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

@@ -1,6 +1,6 @@
 import './RichTextEditor.scss'
 
-import React, { useCallback, useContext, useEffect, useMemo } from 'react'
+import { useCallback, useContext, useEffect, useMemo } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import {
   Box,

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

@@ -188,12 +188,9 @@ export const GET_APPS = gql`
             variables
             variableTypes
             allowArbitrary
-            customButtonText
-            customStyle
+            addRowButtonText
             hideBlankRow
-            showDivider
             showOptionValue
-            isSingleLine
             value
             options {
               label
@@ -229,9 +226,7 @@ export const GET_APPS = gql`
               variables
               variableTypes
               allowArbitrary
-              customStyle
               showOptionValue
-              isSingleLine
               hiddenIf {
                 fieldKey
                 fieldValue

packages/types/index.d.ts

@@ -330,8 +330,6 @@ export interface IFieldDropdownOption {
 export interface IFieldText extends IBaseField {
   type: 'string'
   value?: string
-  customStyle?: React.CSSProperties
-  isSingleLine?: boolean
 
   // Not applicable if field has variables.
   autoComplete?: AutoCompleteValue
@@ -340,8 +338,6 @@ export interface IFieldText extends IBaseField {
 export interface IFieldMultiline extends IBaseField {
   type: 'multiline'
   value?: string
-  customStyle?: React.CSSProperties
-  isSingleLine?: boolean
 
   // Not applicable if field has variables.
   autoComplete?: AutoCompleteValue
@@ -357,19 +353,17 @@ export interface IFieldMultiSelect extends IBaseField {
 export interface IFieldMultiRowMultiCol extends IBaseField {
   type: 'multirow-multicol'
   value?: string
-  customButtonText?: string
+  addRowButtonText?: string
   hideBlankRow?: boolean
-  showDivider?: boolean
 
   subFields: IField[]
 }
 
 export interface IFieldMultiRow extends IBaseField {
   type: 'multirow'
   value?: string
-  customButtonText?: string
+  addRowButtonText?: string
   hideBlankRow?: boolean
-  showDivider?: boolean
 
   subFields: IField[]
 }