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 index 90c967e8a..21e04dc18 100644 --- 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,6 +61,7 @@ const action: IRawAction = { type: 'string' as const, required: true, variables: false, + customStyle: { flex: 2 }, }, { placeholder: 'Value', @@ -68,6 +69,7 @@ const action: IRawAction = { 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 index dab2400c7..01c514930 100644 --- 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,6 +79,22 @@ const action: IRawAction = { }, ], }, + customStyle: { flex: 2 }, + }, + { + 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' }, + { label: '-', value: 'subtract', description: 'Subtract by' }, + ], + customStyle: { flexBasis: '44px' }, }, { placeholder: 'Value', @@ -86,6 +102,7 @@ const action: IRawAction = { 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 index 7df812f2f..c86f43753 100644 --- 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 + isSearchable: 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 index 09cf84c12..77cad83fb 100644 --- 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'] + 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,14 +149,14 @@ function ControlledAutocomplete( )} {/* Dropdown row option content */} - + ) @@ -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 index ab318aec4..804e6fdb8 100644 --- 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) { {subFields.map((subF) => { return ( - +
+ +
) })} {canRemoveRow && ( diff --git a/packages/frontend/src/components/MultiRow/index.tsx b/packages/frontend/src/components/MultiRow/index.tsx index 5fb09effe..724cd7ee5 100644 --- 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 index 8df62e52c..92e417cd2 100644 --- 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,7 +272,6 @@ const RichTextEditor = ({ description, disabled, placeholder, - customStyle, variablesEnabled, isRich, isSingleLine, @@ -281,7 +279,7 @@ const RichTextEditor = ({ const { control } = useFormContext() return ( - + {label && ( void isCreating: boolean } + isSearchable?: boolean } function constructFreeSoloItem(freeSoloValue: string) { @@ -371,6 +372,7 @@ export const SingleSelectProvider = ({ return ( ( direction="row" spacing="1rem" aria-disabled={isDisabled} - sx={styles.selected} + sx={{ + ...styles.selected, + ...(!isSearchable && { + margin: 'auto', + pr: 0, + pl: 0, + }), + }} aria-hidden > {selectedItemMeta.icon ? ( @@ -112,22 +119,23 @@ export const SelectCombobox = forwardRef( {textToDisplay} !isOpen && resetInputValue(), ref: mergedInputRef, disabled: isDisabled, - readOnly: isReadOnly, + readOnly: !isSearchable || isReadOnly, required: isRequired, 'aria-expanded': !!isOpen, })} /> - + {isSearchable && }
diff --git a/packages/frontend/src/components/SingleSelect/components/SelectMenu.tsx b/packages/frontend/src/components/SingleSelect/components/SelectMenu.tsx index 6c211078c..7419ec0f2 100644 --- 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 index 3dae563a1..73b84dbe4 100644 --- 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 }, }) => ( - + {label && ( +} + export interface IFieldMultiRowMultiCol extends IBaseField { type: 'multirow-multicol' value?: string addRowButtonText?: string - - subFields: IField[] + subFields: IFieldMultiRowMultiColSubField[] } export interface IFieldMultiRow extends IBaseField {