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 · 65270ab · 65270ab
1 parent ee3bf3b
commit 65270ab
Showing 1 changed file with 12 additions and 2 deletions.
diff --git 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>