PLU-309: [TILES-ATOMIC-INCREMENT-3] enhance multirow-multicol UI with custom styles and operators (#819)

## TLDR;
FRONTEND-ONLY
For update-row action, allow users to set increment or decrement existing value.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/ycT2Xb5nBEjN2kf2gy95/5d5fd96b-f1b2-48df-867d-6eabceb77ece.png)

## What changed
- Introduce 2 new attributes to dropdown fields, `isSearchable` and `subFields.customStyles`
- if `isSearchable` is set to false, it prevent users from typing to search and center aligns the content (this is an existing prop that is unused)
- `subFields.customStyles` allows users to override the container of the subfields in `multirow-multicol` fields 

## Why
This frontend change will allow users to change the way the value is modified, either set-as, add by or subtract by.

Author: pregnantboy

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

@@ -61,13 +61,15 @@ const action: IRawAction = {
           type: 'string' as const,
           required: true,
           variables: false,
+          customStyle: { flex: 2 },
         },
         {
           placeholder: 'Value',
           key: 'value',
           type: 'string' as const,
           required: true,
           variables: true,
+          customStyle: { flex: 3, minWidth: 0 },
         },
       ],
     },

packages/backend/src/apps/tiles/actions/update-row/index.ts

@@ -49,7 +49,7 @@ const action: IRawAction = {
     {
       label: 'Row data',
       key: 'rowData',
-      type: 'multirow' as const,
+      type: 'multirow-multicol' as const,
       description:
         'Enter the data to update the row with. Columns not specified will not be updated.',
       required: true,
@@ -79,13 +79,34 @@ const action: IRawAction = {
               },
             ],
           },
+          customStyle: { flex: 2, minWidth: 0 },
+        },
+        {
+          key: 'operator' as const,
+          type: 'dropdown' as const,
+          isSearchable: false,
+          required: true,
+          variables: false,
+          showOptionValue: false,
+          value: 'set',
+          options: [
+            { label: '=', value: 'set', description: 'Set as' },
+            { label: '+', value: 'add', description: 'Add by (numbers only)' },
+            {
+              label: '-',
+              value: 'subtract',
+              description: 'Subtract by (numbers only)',
+            },
+          ],
+          customStyle: { flexBasis: '71px' },
         },
         {
           placeholder: 'Value',
           key: 'cellValue',
           type: 'string' as const,
           required: false,
           variables: true,
+          customStyle: { flex: 3, minWidth: 0 },
         },
       ],
     },

packages/backend/src/graphql/schema.graphql

@@ -183,8 +183,10 @@ type ActionSubstepArgument {
   variables: Boolean
   variableTypes: [String]
   allowArbitrary: Boolean
+  isSearchable: Boolean
   placeholder: String
   showOptionValue: Boolean
+  customStyle: JSONObject
   options: [ArgumentOption]
   value: JSONObject
   source: ActionSubstepArgumentSource

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

@@ -23,6 +23,7 @@ export interface ControlledAutocompleteProps {
   required?: boolean
   placeholder?: string
   addNewOption?: IFieldDropdown['addNewOption']
+  isSearchable?: boolean
 }
 
 const formComboboxOptions = (
@@ -62,6 +63,7 @@ function ControlledAutocomplete(
     required,
     placeholder,
     addNewOption,
+    isSearchable,
   } = props
 
   const items = useMemo(
@@ -92,6 +94,7 @@ function ControlledAutocomplete(
     name,
     control,
     rules: { required },
+    // fixme: this default value is not working as expected
     defaultValue: defaultValue ?? '',
   })
 
@@ -146,21 +149,22 @@ function ControlledAutocomplete(
       )}
       {/* Dropdown row option content */}
       <Flex>
-        <Box flexGrow={1}>
+        <Box flex={1}>
           <SingleSelect
             name="choose-dropdown-option"
             colorScheme="secondary"
             isClearable={!required}
             items={items}
             onChange={fieldOnChange}
-            value={fieldValue}
+            value={fieldValue ?? defaultValue}
             placeholder={placeholder}
             ref={ref}
             data-test={`${name}-autocomplete`}
             onRefresh={onRefresh}
             isRefreshLoading={loading}
             freeSolo={freeSolo}
             isReadOnly={isCreatingNewOption}
+            isSearchable={isSearchable}
             addNew={
               addNewOption
                 ? {

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

@@ -87,6 +87,7 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
     const preparedOptions = schema.options || optionGenerator(data)
     return (
       <ControlledAutocomplete
+        isSearchable={schema.isSearchable ?? true}
         name={computedName}
         required={required}
         freeSolo={schema.allowArbitrary}
@@ -130,29 +131,21 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           disabled={disabled}
           placeholder={placeholder}
           isSingleLine={parentType === 'multicol'}
-          customStyle={
-            parentType === 'multicol' ? { flex: 1, minWidth: 0 } : {}
-          }
           variablesEnabled
         />
       )
     }
 
     return (
       <TextField
-        defaultValue={value}
         required={required}
         placeholder={placeholder}
         readOnly={readOnly || disabled}
         name={computedName}
-        size="small"
         label={label}
-        fullWidth
         multiline={type === 'multiline'}
         description={description}
         clickToCopy={clickToCopy}
-        autoComplete={schema.autoComplete}
-        customStyle={parentType === 'multicol' ? { flex: 0.5 } : {}}
       />
     )
   }

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

@@ -1,14 +1,14 @@
-import type { IField } from '@plumber/types'
+import type { IFieldMultiRowMultiColSubField } from '@plumber/types'
 
 import { BiTrash } from 'react-icons/bi'
-import { Flex } from '@chakra-ui/react'
+import { Flex, useBreakpointValue } from '@chakra-ui/react'
 import { IconButton } from '@opengovsg/design-system-react'
 
 import InputCreator from '@/components/InputCreator'
 
 type MultiColProps = {
   name: string
-  subFields: IField[]
+  subFields: IFieldMultiRowMultiColSubField[]
   canRemoveRow?: boolean
   isEditorReadOnly?: boolean
   remove?: (index?: number | number[]) => void
@@ -25,17 +25,23 @@ export default function MultiCol(props: MultiColProps) {
     index,
     ...forwardedInputCreatorProps
   } = props
+
+  const isMobile = useBreakpointValue({ base: true, sm: false })
   return (
-    <Flex flexDir="row" gap={2}>
+    <Flex flexDir={isMobile ? 'column' : 'row'} gap={2}>
       {subFields.map((subF) => {
         return (
-          <InputCreator
+          <div
             key={`${name}.${subF.key}`}
-            schema={subF}
-            namePrefix={name}
-            parentType="multicol"
-            {...forwardedInputCreatorProps}
-          />
+            style={isMobile ? { flex: 1 } : subF.customStyle}
+          >
+            <InputCreator
+              schema={subF}
+              namePrefix={name}
+              parentType="multicol"
+              {...forwardedInputCreatorProps}
+            />
+          </div>
         )
       })}
       {canRemoveRow && (

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

@@ -108,6 +108,7 @@ function MultiRow(props: MultiRowProps): JSX.Element {
                         isEditorReadOnly={isEditorReadOnly}
                         remove={remove}
                         index={index}
+                        {...forwardedInputCreatorProps}
                       />
                       {/*
                        * "And" divider

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

@@ -203,6 +203,11 @@
   height: 100%;
   justify-content: center;
 
+  &:focus-within {
+    border-color: var(--chakra-colors-primary-500);
+    box-shadow: 0 0 0 1px var(--chakra-colors-primary-500);
+  }
+
   .tiptap p.is-editor-empty:first-child::before {
     color: #adb5bd;
     content: attr(data-placeholder);

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

@@ -260,7 +260,6 @@ interface RichTextEditorProps {
   description?: string
   disabled?: boolean
   placeholder?: string
-  customStyle?: React.CSSProperties
   variablesEnabled?: boolean
   isRich?: boolean
   isSingleLine?: boolean
@@ -273,15 +272,14 @@ const RichTextEditor = ({
   description,
   disabled,
   placeholder,
-  customStyle,
   variablesEnabled,
   isRich,
   isSingleLine,
 }: RichTextEditorProps) => {
   const { control } = useFormContext()
 
   return (
-    <FormControl flex={1} style={customStyle} data-test="text-input-group">
+    <FormControl flex={1} data-test="text-input-group">
       {label && (
         <FormLabel
           isRequired={required}

packages/frontend/src/components/SingleSelect/SingleSelectProvider.tsx

@@ -61,6 +61,7 @@ export interface SingleSelectProviderProps<
     onSelected: (value: string) => void
     isCreating: boolean
   }
+  isSearchable?: boolean
 }
 
 function constructFreeSoloItem(freeSoloValue: string) {
@@ -371,6 +372,7 @@ export const SingleSelectProvider = ({
   return (
     <SelectContext.Provider
       value={{
+        isSearchable,
         size,
         isOpen,
         selectedItem,
@@ -387,7 +389,6 @@ export const SingleSelectProvider = ({
         items: filteredItems,
         nothingFoundLabel,
         inputValue,
-        isSearchable,
         isClearable,
         isInvalid,
         isDisabled,