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 · 8b3ff8a · 8b3ff8a
1 parent ee3bf3b
commit 8b3ff8a
Showing 1 changed file with 28 additions and 6 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,9 @@ const SimpleTriggerForm = ({
   simpleTriggerInterface,
   validationErrors = {},
 }: SimpleTriggerFormProps): React.ReactElement => {
+  const [endpoints, setEndpoints] = useState<string[]>([]);
+  const [filteredEndpoints, setFilteredEndpoints] = useState<string[]>([]);
+  const [inputValue, setInputValue] = useState<string>('/*');
   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"
                       />
                       <Form.Control.Feedback type="invalid">
                         {_.get(validationErrors, 'matchPath')}
                       </Form.Control.Feedback>
+                      <datalist id="endpoints-list">
+                        {filteredEndpoints.map((endpoint, index) => (
+                          <option key={index} value={endpoint} />
+                        ))}
+                      </datalist>
                     </Form.Group>
                   </Col>
                 </Row>