Add autosuggest for path field when select

interface name in Trigger Editor Implement autosuggest feature for interface mappings in the Trigger Editor Signed-off-by: AmerMesanovic <[email protected]>
astarte-platform · Sep 12, 2024 · 763a1ee · 763a1ee
1 parent ee3bf3b
commit 763a1ee
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/src/components/TriggerEditor/SimpleTriggerForm.tsx b/src/components/TriggerEditor/SimpleTriggerForm.tsx
@@ -97,6 +97,8 @@ const SimpleTriggerForm = ({
   simpleTriggerInterface,
   validationErrors = {},
 }: SimpleTriggerFormProps): React.ReactElement => {
+  const endpointList =
+    simpleTriggerInterface?.mappings.map((mapping: AstarteMapping) => mapping.endpoint) || [];
   const isDeviceTrigger = _.get(simpleTrigger, 'type') === 'device_trigger';
   const isDataTrigger = _.get(simpleTrigger, 'type') === 'data_trigger';
   const hasTargetDevice = _.get(simpleTrigger, 'deviceId') != null;
@@ -194,7 +196,7 @@ const SimpleTriggerForm = ({
       } as AstarteSimpleDataTrigger;
       onChange(newSimpleTrigger);
       if (interfaceName !== '*') {
-        fetchInterfaceMajors(interfaceName).then((majors) => {
+        fetchInterfaceMajors(interfaceName).then(async (majors) => {
           if (majors.length > 0) {
             const interfaceMajor = Math.max(...majors);
             onChange({ ...newSimpleTrigger, interfaceMajor });
@@ -510,10 +512,18 @@ const SimpleTriggerForm = ({
                         value={_.get(simpleTrigger, 'matchPath') || ''}
                         isInvalid={_.get(validationErrors, 'matchPath') != null}
                         onChange={handleTriggerInterfacePathChange}
+                        list="endpoints-list"
                       />
                       <Form.Control.Feedback type="invalid">
                         {_.get(validationErrors, 'matchPath')}
                       </Form.Control.Feedback>
+                      <datalist id="endpoints-list">
+                        {endpointList.map((endpoint, index) => (
+                          <option key={index} value={endpoint}>
+                            {endpoint}
+                          </option>
+                        ))}
+                      </datalist>
                     </Form.Group>
                   </Col>
                 </Row>