CEC-1235 Fix fleet name update (#196)

src/components/Fleets/Update/__snapshots__/index.test.jsx.snap

@@ -26,7 +26,7 @@ exports[`FleetUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                   data-shrink="false"
                   for="name"
                   id="name-label"
@@ -41,16 +41,14 @@ exports[`FleetUpdate Render 1`] = `
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    disabled=""
                     id="name"
                     maxlength="255"
                     name="name"
-                    readonly=""
                     required=""
                     type="text"
                     value=""

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