CEC-1235 Fix fleet name update (#196)

src/components/Fleets/Update/index.jsx

@@ -24,7 +24,6 @@ import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const queries = new URLSearchParams(useLocation().search);
-  const name = queries.get("name") ?? "";
 
   const { fleet, getFleet, updateFleet, busy } = useFleetContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -32,6 +31,8 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
 
+  const [name, setName] = useState(queries.get("name") ?? "");
+  const [oldName, ] = useState(name);
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -56,7 +57,7 @@ const MainForm = () => {
     (async () => {
       try {
         if (!name || !token) return;
-        await getFleet(name, token);
+        await getFleet(oldName, token);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -77,6 +78,10 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fleet]);
 
+  const onNameChange = (event) => {
+    setName(event.target.value);
+  }
+
   const onLogLevelChange = (event) => {
     setSelectedLogLevel(event.target.value);
   }
@@ -110,7 +115,10 @@ const MainForm = () => {
           max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
         }
       };
-      const result = await updateFleet(name, formData, token);
+
+      console.log(oldName);
+
+      const result = await updateFleet(oldName, formData, token);
       if (!result || result.error) return;
 
       setMessage(`Updated ${result.name}`);
@@ -136,12 +144,11 @@ const MainForm = () => {
           margin="normal"
           inputProps={{
             maxLength: "255",
-            readOnly: true,
           }}
-          disabled
           value={name}
           required
           fullWidth
+          onChange={onNameChange}
         />
         <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
         <RadioGroup