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 11, 2024 · 50d39bc · 50d39bc
1 parent ee3bf3b
commit 50d39bc
Showing 1 changed file with 9 additions and 3 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,
@@ -194,7 +194,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 });
@@ -508,12 +508,18 @@ const SimpleTriggerForm = ({
                         required
                         readOnly={isReadOnly || isLoadingInterfaceMajors || isLoadingInterface}
                         value={_.get(simpleTrigger, 'matchPath') || ''}
-                        isInvalid={_.get(validationErrors, 'matchPath') != null}
+                        isInvalid={_.get(validationErrors, 'endpoint') != null}
                         onChange={handleTriggerInterfacePathChange}
+                        list="endpoints-list"
                       />
                       <Form.Control.Feedback type="invalid">
                         {_.get(validationErrors, 'matchPath')}
                       </Form.Control.Feedback>
+                      <datalist id="endpoints-list">
+                        {simpleTriggerInterface?.mappings
+                          ?.map((mapping: AstarteMapping) => mapping.endpoint)
+                          ?.map((endpoint, index) => <option key={index} value={endpoint} />)}
+                      </datalist>
                     </Form.Group>
                   </Col>
                 </Row>