feat: frontend change to allow non-searchable dropdown

opengovsg · Dec 16, 2024 · 28f2d0b · 28f2d0b
1 parent dcb0f39
commit 28f2d0b
Showing 15 changed files with 73 additions and 31 deletions.
diff --git a/packages/backend/src/apps/custom-api/actions/http-request/index.ts b/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 },
         },
       ],
     },

diff --git a/packages/backend/src/apps/tiles/actions/update-row/index.ts b/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,30 @@ const action: IRawAction = {
               },
             ],
           },
+          customStyle: { flex: 2 },
+        },
+        {
+          key: 'operator' as const,
+          type: 'dropdown' as const,
+          allowSearch: false,
+          required: true,
+          variables: false,
+          showOptionValue: false,
+          value: 'set',
+          options: [
+            { label: '=', value: 'set', description: 'Set as' },
+            { label: '+', value: 'add', description: 'Add by' },
+            { label: '-', value: 'subtract', description: 'Subtract by' },
+          ],
+          customStyle: { flexBasis: '44px' },
         },
         {
           placeholder: 'Value',
           key: 'cellValue',
           type: 'string' as const,
           required: false,
           variables: true,
+          customStyle: { flex: 3 },
         },
       ],
     },

diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql
@@ -179,8 +179,10 @@ type ActionSubstepArgument {
   variables: Boolean
   variableTypes: [String]
   allowArbitrary: Boolean
+  allowSearch: Boolean
   placeholder: String
   showOptionValue: Boolean
+  customStyle: JSONObject
   options: [ArgumentOption]
   value: JSONObject
   source: ActionSubstepArgumentSource

diff --git a/packages/frontend/src/components/ControlledAutocomplete/index.tsx b/packages/frontend/src/components/ControlledAutocomplete/index.tsx
@@ -23,6 +23,7 @@ export interface ControlledAutocompleteProps {
   required?: boolean
   placeholder?: string
   addNewOption?: IFieldDropdown['addNewOption']
+  allowSearch?: boolean
 }
 
 const formComboboxOptions = (
@@ -62,6 +63,7 @@ function ControlledAutocomplete(
     required,
     placeholder,
     addNewOption,
+    allowSearch,
   } = 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}
+            allowSearch={allowSearch}
             addNew={
               addNewOption
                 ? {

diff --git a/packages/frontend/src/components/InputCreator/index.tsx b/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
+        allowSearch={schema.allowSearch ?? true}
         name={computedName}
         required={required}
         freeSolo={schema.allowArbitrary}
@@ -130,9 +131,6 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
           disabled={disabled}
           placeholder={placeholder}
           isSingleLine={parentType === 'multicol'}
-          customStyle={
-            parentType === 'multicol' ? { flex: 1, minWidth: 0 } : {}
-          }
           variablesEnabled
         />
       )
@@ -152,7 +150,6 @@ export default function InputCreator(props: InputCreatorProps): JSX.Element {
         description={description}
         clickToCopy={clickToCopy}
         autoComplete={schema.autoComplete}
-        customStyle={parentType === 'multicol' ? { flex: 0.5 } : {}}
       />
     )
   }

diff --git a/packages/frontend/src/components/MultiCol.tsx/index.tsx b/packages/frontend/src/components/MultiCol.tsx/index.tsx
@@ -1,4 +1,4 @@
-import type { IField } from '@plumber/types'
+import type { IFieldMultiRowMultiColSubField } from '@plumber/types'
 
 import { BiTrash } from 'react-icons/bi'
 import { Flex } from '@chakra-ui/react'
@@ -8,7 +8,7 @@ import InputCreator from '@/components/InputCreator'
 
 type MultiColProps = {
   name: string
-  subFields: IField[]
+  subFields: IFieldMultiRowMultiColSubField[]
   canRemoveRow?: boolean
   isEditorReadOnly?: boolean
   remove?: (index?: number | number[]) => void
@@ -29,13 +29,14 @@ export default function MultiCol(props: MultiColProps) {
     <Flex flexDir="row" gap={2}>
       {subFields.map((subF) => {
         return (
-          <InputCreator
-            key={`${name}.${subF.key}`}
-            schema={subF}
-            namePrefix={name}
-            parentType="multicol"
-            {...forwardedInputCreatorProps}
-          />
+          <div key={`${name}.${subF.key}`} style={subF.customStyle}>
+            <InputCreator
+              schema={subF}
+              namePrefix={name}
+              parentType="multicol"
+              {...forwardedInputCreatorProps}
+            />
+          </div>
         )
       })}
       {canRemoveRow && (

diff --git a/packages/frontend/src/components/MultiRow/index.tsx b/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

diff --git a/packages/frontend/src/components/RichTextEditor/index.tsx b/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}

diff --git a/packages/frontend/src/components/SingleSelect/SelectContext.tsx b/packages/frontend/src/components/SingleSelect/SelectContext.tsx
@@ -35,6 +35,7 @@ export interface SharedSelectContextReturnProps<
   isRefreshLoading?: boolean
   /** Controls if user can add one arbitrary item of their choosing. */
   freeSolo?: boolean
+  allowSearch?: boolean
 }
 
 interface SelectContextReturn<Item extends ComboboxItem = ComboboxItem>

diff --git a/packages/frontend/src/components/SingleSelect/SingleSelectProvider.tsx b/packages/frontend/src/components/SingleSelect/SingleSelectProvider.tsx
@@ -61,6 +61,7 @@ export interface SingleSelectProviderProps<
     onSelected: (value: string) => void
     isCreating: boolean
   }
+  allowSearch?: boolean
 }
 
 function constructFreeSoloItem(freeSoloValue: string) {
@@ -96,6 +97,7 @@ export const SingleSelectProvider = ({
   onRefresh = null,
   isRefreshLoading = false,
   freeSolo = false,
+  allowSearch = true,
   addNew,
 }: SingleSelectProviderProps): JSX.Element => {
   const theme = useTheme()
@@ -371,6 +373,7 @@ export const SingleSelectProvider = ({
   return (
     <SelectContext.Provider
       value={{
+        allowSearch,
         size,
         isOpen,
         selectedItem,

diff --git a/packages/frontend/src/components/SingleSelect/components/SelectCombobox/SelectCombobox.tsx b/packages/frontend/src/components/SingleSelect/components/SelectCombobox/SelectCombobox.tsx
@@ -36,6 +36,7 @@ export const SelectCombobox = forwardRef<HTMLInputElement>(
       inputRef,
       isClearable,
       size,
+      allowSearch,
     } = useSelectContext()
 
     const mergedInputRef = useMergeRefs(inputRef, ref)
@@ -99,7 +100,14 @@ export const SelectCombobox = forwardRef<HTMLInputElement>(
             direction="row"
             spacing="1rem"
             aria-disabled={isDisabled}
-            sx={styles.selected}
+            sx={{
+              ...styles.selected,
+              ...(!allowSearch && {
+                margin: 'auto',
+                pr: 0,
+                pl: 0,
+              }),
+            }}
             aria-hidden
           >
             {selectedItemMeta.icon ? (
@@ -112,22 +120,23 @@ export const SelectCombobox = forwardRef<HTMLInputElement>(
             <Text noOfLines={1}>{textToDisplay}</Text>
           </Stack>
           <Input
-            isReadOnly={!isSearchable || isReadOnly}
             isInvalid={isInvalid}
-            isDisabled={isDisabled}
             placeholder={textToDisplay ? '' : placeholder}
-            sx={styles.field}
+            sx={{
+              ...styles.field,
+              cursor: allowSearch ? 'text' : 'pointer',
+            }}
             {...getInputProps({
               onClick: handleToggleMenu,
               onBlur: () => !isOpen && resetInputValue(),
               ref: mergedInputRef,
               disabled: isDisabled,
-              readOnly: isReadOnly,
+              readOnly: !isSearchable || isReadOnly || !allowSearch,
               required: isRequired,
               'aria-expanded': !!isOpen,
             })}
           />
-          <ToggleChevron />
+          {allowSearch && <ToggleChevron />}
         </InputGroup>
         <ComboboxClearButton />
       </Flex>

diff --git a/packages/frontend/src/components/SingleSelect/components/SelectMenu.tsx b/packages/frontend/src/components/SingleSelect/components/SelectMenu.tsx
@@ -37,7 +37,7 @@ export const SelectMenu = (): JSX.Element => {
           { suppressRefError: true },
         )}
         style={floatingStyles}
-        sx={styles.list}
+        sx={{ ...styles.list, minWidth: '150px' }}
         zIndex="dropdown"
       >
         {isOpen && items.length > 0 && (

diff --git a/packages/frontend/src/components/TextField/index.tsx b/packages/frontend/src/components/TextField/index.tsx
@@ -19,7 +19,6 @@ type TextFieldProps = {
   clickToCopy?: boolean
   readOnly?: boolean
   description?: string
-  customStyle?: React.CSSProperties
 } & MuiTextFieldProps
 
 const createCopyAdornment = (
@@ -51,7 +50,6 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
     readOnly,
     onBlur,
     onChange,
-    customStyle,
     ...textFieldProps
   } = props
 
@@ -70,7 +68,7 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
           ...field
         },
       }) => (
-        <FormControl style={customStyle}>
+        <FormControl>
           {label && (
             <FormLabel
               isRequired={required}

diff --git a/packages/frontend/src/graphql/queries/get-apps.ts b/packages/frontend/src/graphql/queries/get-apps.ts
@@ -188,8 +188,10 @@ export const GET_APPS = gql`
             variables
             variableTypes
             allowArbitrary
+            allowSearch
             addRowButtonText
             showOptionValue
+            customStyle
             value
             options {
               label
@@ -225,7 +227,10 @@ export const GET_APPS = gql`
               variables
               variableTypes
               allowArbitrary
+              allowSearch
               showOptionValue
+              customStyle
+              value
               hiddenIf {
                 fieldKey
                 fieldValue

diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
@@ -286,6 +286,7 @@ export interface IFieldDropdown extends IBaseField {
   type: 'dropdown'
   showOptionValue?: boolean
   allowArbitrary?: boolean
+  allowSearch?: boolean
   addNewOption?: {
     id: DropdownAddNewId // identifier when add new option is selected
     type: DropdownAddNewType
@@ -350,12 +351,15 @@ export interface IFieldMultiSelect extends IBaseField {
   variableTypes?: TDataOutMetadatumType[]
 }
 
+type IFieldMultiRowMultiColSubField = IField & {
+  customStyle?: Record<string, string | number>
+}
+
 export interface IFieldMultiRowMultiCol extends IBaseField {
   type: 'multirow-multicol'
   value?: string
   addRowButtonText?: string
-
-  subFields: IField[]
+  subFields: IFieldMultiRowMultiColSubField[]
 }
 
 export interface IFieldMultiRow extends IBaseField {