diff --git a/src/components/TriggerEditor/SimpleTriggerForm.tsx b/src/components/TriggerEditor/SimpleTriggerForm.tsx index cc890c3c..f9964a01 100644 --- a/src/components/TriggerEditor/SimpleTriggerForm.tsx +++ b/src/components/TriggerEditor/SimpleTriggerForm.tsx @@ -16,7 +16,7 @@ limitations under the License. */ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import { Col, Form, Row, Stack } from 'react-bootstrap'; import { AstarteInterface, @@ -97,6 +97,9 @@ const SimpleTriggerForm = ({ simpleTriggerInterface, validationErrors = {}, }: SimpleTriggerFormProps): React.ReactElement => { + const [endpoints, setEndpoints] = useState([]); + const [filteredEndpoints, setFilteredEndpoints] = useState([]); + const [inputValue, setInputValue] = useState('/*'); const isDeviceTrigger = _.get(simpleTrigger, 'type') === 'device_trigger'; const isDataTrigger = _.get(simpleTrigger, 'type') === 'data_trigger'; const hasTargetDevice = _.get(simpleTrigger, 'deviceId') != null; @@ -193,12 +196,22 @@ const SimpleTriggerForm = ({ knownValue: undefined, } as AstarteSimpleDataTrigger; onChange(newSimpleTrigger); + setInputValue('/*'); if (interfaceName !== '*') { - fetchInterfaceMajors(interfaceName).then((majors) => { + fetchInterfaceMajors(interfaceName).then(async (majors) => { + const interfaceMajor = Math.max(...majors); + const data = await fetchInterface({ interfaceName, interfaceMajor }); if (majors.length > 0) { - const interfaceMajor = Math.max(...majors); onChange({ ...newSimpleTrigger, interfaceMajor }); - fetchInterface({ interfaceName, interfaceMajor }); + } + if (data?.aggregation !== 'object') { + const endpointList = + data?.mappings.map((mapping: AstarteMapping) => mapping.endpoint) || []; + setEndpoints(endpointList); + setInputValue('/*'); + } else { + setEndpoints([]); + setInputValue('/*'); } }); } @@ -233,8 +246,11 @@ const SimpleTriggerForm = ({ valueMatchOperator: '*', knownValue: undefined, } as AstarteSimpleDataTrigger); + const filtered = endpoints.filter((endpoint) => endpoint.includes(value)); + setFilteredEndpoints(filtered); + setInputValue(matchPath); }, - [simpleTrigger, onChange], + [endpoints, simpleTrigger, onChange], ); const handleTriggerInterfaceOperatorChange = useCallback( @@ -507,13 +523,19 @@ const SimpleTriggerForm = ({ autoComplete="off" required readOnly={isReadOnly || isLoadingInterfaceMajors || isLoadingInterface} - value={_.get(simpleTrigger, 'matchPath') || ''} + value={inputValue} isInvalid={_.get(validationErrors, 'matchPath') != null} onChange={handleTriggerInterfacePathChange} + list="endpoints-list" /> {_.get(validationErrors, 'matchPath')} + + {filteredEndpoints.map((endpoint, index) => ( +