farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-28 19:00:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

Feature/Add multi select option to composio (#4122)

Browse Source 
* add multi select option to composio

* Update pnpm-lock.yaml
This commit is contained in:
Henry Heng
2025-03-06 09:59:33 +00:00
committed by GitHub
parent fc9d6e7a16
commit 9c22bee991
6 changed files with 77 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx
+33 -8
View File
@@ -59,15 +59,27 @@ export const AsyncDropdown = ({
credentialNames = [],
disabled = false,
freeSolo = false,
disableClearable = false
disableClearable = false,
multiple = false
}) => {
const customization = useSelector((state) => state.customization)
const [open, setOpen] = useState(false)
const [options, setOptions] = useState([])
const [loading, setLoading] = useState(false)
const findMatchingOptions = (options = [], value) => options.find((option) => option.name === value)
const getDefaultOptionValue = () => ''
const findMatchingOptions = (options = [], value) => {
if (multiple) {
let values = []
if ('choose an option' !== value && value && typeof value === 'string') {
values = JSON.parse(value)
} else {
values = value
}
return options.filter((option) => values.includes(option.name))
}
return options.find((option) => option.name === value)
}
const getDefaultOptionValue = () => (multiple ? [] : '')
const addNewOption = [{ label: '- Create New -', name: '-create-' }]
let [internalValue, setInternalValue] = useState(value ?? 'choose an option')
@@ -118,6 +130,8 @@ export const AsyncDropdown = ({
freeSolo={freeSolo}
disabled={disabled}
disableClearable={disableClearable}
multiple={multiple}
filterSelectedOptions={multiple}
size='small'
sx={{ mt: 1, width: '100%' }}
open={open}
@@ -130,12 +144,22 @@ export const AsyncDropdown = ({
options={options}
value={findMatchingOptions(options, internalValue) || getDefaultOptionValue()}
onChange={(e, selection) => {
const value = selection ? selection.name : ''
if (isCreateNewOption && value === '-create-') {
onCreateNew()
} else {
if (multiple) {
let value = ''
if (selection.length) {
const selectionNames = selection.map((item) => item.name)
value = JSON.stringify(selectionNames)
}
setInternalValue(value)
onSelect(value)
} else {
const value = selection ? selection.name : ''
if (isCreateNewOption && value === '-create-') {
onCreateNew()
} else {
setInternalValue(value)
onSelect(value)
}
}
}}
PopperComponent={StyledPopper}
@@ -181,5 +205,6 @@ AsyncDropdown.propTypes = {
freeSolo: PropTypes.bool,
credentialNames: PropTypes.array,
disableClearable: PropTypes.bool,
isCreateNewOption: PropTypes.bool
isCreateNewOption: PropTypes.bool,
multiple: PropTypes.bool
}
packages/ui/src/utils/genericHelper.js
+1
View File
@@ -35,6 +35,7 @@ export const initNode = (nodeData, newNodeId) => {
const whitelistTypes = [
'asyncOptions',
'asyncMultiOptions',
'options',
'multiOptions',
'datagrid',
packages/ui/src/views/canvas/NodeInputHandler.jsx
+3 -2
View File
@@ -795,16 +795,17 @@ const NodeInputHandler = ({
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'choose an option'}
/>
)}
{inputParam.type === 'asyncOptions' && (
{(inputParam.type === 'asyncOptions' || inputParam.type === 'asyncMultiOptions') && (
<>
{data.inputParams.length === 1 && <div style={{ marginTop: 10 }} />}
<div key={reloadTimestamp} style={{ display: 'flex', flexDirection: 'row', alignContent: 'center' }}>
<div key={reloadTimestamp} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 1 }}>
<AsyncDropdown
disabled={disabled}
name={inputParam.name}
nodeData={data}
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'choose an option'}
freeSolo={inputParam.freeSolo}
multiple={inputParam.type === 'asyncMultiOptions'}
isCreateNewOption={EDITABLE_OPTIONS.includes(inputParam.name)}
onSelect={(newValue) => (data.inputs[inputParam.name] = newValue)}
onCreateNew={() => addAsyncOption(inputParam.name)}
packages/ui/src/views/docstore/DocStoreInputHandler.jsx
+26 -11
View File
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
// material-ui
import { Box, Typography, IconButton, Button } from '@mui/material'
import { IconArrowsMaximize, IconAlertTriangle } from '@tabler/icons-react'
import { IconRefresh, IconArrowsMaximize, IconAlertTriangle } from '@tabler/icons-react'
// project import
import { Dropdown } from '@/ui-component/dropdown/Dropdown'
@@ -33,6 +33,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
const [expandDialogProps, setExpandDialogProps] = useState({})
const [showManageScrapedLinksDialog, setShowManageScrapedLinksDialog] = useState(false)
const [manageScrapedLinksDialogProps, setManageScrapedLinksDialogProps] = useState({})
const [reloadTimestamp, setReloadTimestamp] = useState(Date.now().toString())
const onExpandDialogClicked = (value, inputParam) => {
const dialogProps = {
@@ -216,19 +217,33 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false }) => {
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'choose an option'}
/>
)}
{inputParam.type === 'asyncOptions' && (
{(inputParam.type === 'asyncOptions' || inputParam.type === 'asyncMultiOptions') && (
<>
{data.inputParams?.length === 1 && <div style={{ marginTop: 10 }} />}
<div style={{ display: 'flex', flexDirection: 'row' }}>
<AsyncDropdown
key={JSON.stringify(inputParam)}
disabled={disabled}
name={inputParam.name}
nodeData={data}
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'choose an option'}
onSelect={(newValue) => (data.inputs[inputParam.name] = newValue)}
onCreateNew={() => addAsyncOption(inputParam.name)}
/>
<div key={reloadTimestamp} style={{ flex: 1 }}>
<AsyncDropdown
key={JSON.stringify(inputParam)}
disabled={disabled}
name={inputParam.name}
nodeData={data}
freeSolo={inputParam.freeSolo}
multiple={inputParam.type === 'asyncMultiOptions'}
value={data.inputs[inputParam.name] ?? inputParam.default ?? 'choose an option'}
onSelect={(newValue) => (data.inputs[inputParam.name] = newValue)}
onCreateNew={() => addAsyncOption(inputParam.name)}
/>
</div>
{inputParam.refresh && (
<IconButton
title='Refresh'
color='primary'
size='small'
onClick={() => setReloadTimestamp(Date.now().toString())}
>
<IconRefresh />
</IconButton>
)}
</div>
</>
)}