CEC-5751 - Flashpack UI: Make a picklist for the ECU names

src/components/Flashpack/Add/index.jsx

@@ -3,6 +3,7 @@ import {
   IconButton,
   TextField
 } from "@material-ui/core";
+import ECUDropDown from "../../Controls/ECUDropDown";
 import React, { useEffect, useState } from "react";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -181,19 +182,13 @@ const MainForm = () => {
           <div className="container">
             {mappingInputs.map((item, index) => (
               <div className="input_container" key={index}>
-                <TextField
+                <ECUDropDown
                   id="ecuName"
                   name="ecuName"
                   label="ECU Name"
-                  variant="outlined"
-                  margin="normal"
-                  inputProps={{
-                    maxLength: "255",
-                  }}
-                  required
                   value={item.ecuName}
-                  onChange={(event) => handleChange(event, index)}
-                  type="text"
+                  changeHandler={(event) => handleChange(event, index)}
+                  required
                 />
                 <TextField
                   id="ecuVersion"