Fixed FE-2739

CHANGELOG.md

@@ -1,3 +1,7 @@
+# TBD
+
+- [FP-2739](https://movai.atlassian.net/browse/FP-2739): Port properties of the node templates are turning to strings after editing them
+
 # v1.2.5
 
 - [FP-2879](https://movai.atlassian.net/browse/FP-2879): Closing last tab keeps bookmarks

src/editors/Node/view/Node.jsx

@@ -149,7 +149,16 @@ export const Node = (props, ref) => {
   );
 
   const updateIOPortInputs = useCallback(
-    (value, ioConfigName, direction, ioPortKey, paramName) => {
+    (target, ioConfigName, direction, ioPortKey, paramName) => {
+      // Can be either a checkbox event or a text/number change event
+      let value = target.type === "checkbox" ? target.checked : target.value;
+
+      // Make sure if the input is a number, we save a number to Redis
+      // TO improve: backend can do this type validation
+      if (target.type === "number") {
+        value = parseFloat(value);
+      }
+
       instance.current.setPortParameter(
         ioConfigName,
         direction,

src/editors/Node/view/components/IOConfig/IOPorts/components/Parameters.jsx

@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import Grid from "@material-ui/core/Grid";
 import Circle from "@material-ui/icons/FiberManualRecord";
 import TextField from "@material-ui/core/TextField";
+import Checkbox from "@material-ui/core/Checkbox";
 
 import { parametersStyles } from "./styles";
 
@@ -22,7 +23,7 @@ const Parameters = props => {
   const handleOnChange = useCallback(
     evt => {
       handleIOPortsInputs(
-        evt.target.value,
+        evt.target,
         rowDataName,
         direction,
         ioPort,
@@ -32,20 +33,37 @@ const Parameters = props => {
     [rowDataName, direction, ioPort, param, handleIOPortsInputs]
   );
 
+  const inputType = () => {
+  // TODO: Ports data should provide which type the frontend should render
+  // and not this harcoded string
+    if (["latch", "Oneshot"].includes(param)) {
+      return <Checkbox
+        type={"checkbox"}
+        defaultChecked={paramValue}
+        onChange={handleOnChange}
+      />;
+    }
+    else {
+      return <TextField
+        type={["Frequency", "queue_size"].includes(param) ? "number" : "text"}
+        inputProps={{ "data-testid": "input_parameter" }}
+        disabled={!editable}
+        defaultValue={paramValue}
+        className={classes.input}
+        onChange={handleOnChange}
+      />;
+    }
+
+  }
+
   return (
     <Grid className={classes.gridContainer}>
       <Grid item xs={3} className={classes.titleColumn}>
         <Circle className={classes.circle} />
         {`${param}:`}
       </Grid>
       <Grid item xs={9}>
-        <TextField
-          inputProps={{ "data-testid": "input_parameter" }}
-          disabled={!editable}
-          defaultValue={paramValue}
-          className={classes.input}
-          onChange={handleOnChange}
-        />
+        {inputType()}
       </Grid>
     </Grid>
   );