From 65270ab239d5a8e1fa703441ea41e0efa507e795 Mon Sep 17 00:00:00 2001
From: AmerMesanovic <amer.mesanovic@secomind.com>
Date: Wed, 11 Sep 2024 13:08:14 +0200
Subject: [PATCH] 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 <amer.mesanovic@secomind.com>
---
 src/components/TriggerEditor/SimpleTriggerForm.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/TriggerEditor/SimpleTriggerForm.tsx b/src/components/TriggerEditor/SimpleTriggerForm.tsx
index cc890c3c..d91e74ce 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,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>