CEC-377 Create multi-file updates (#71)

* Replace Deploy Package with Deploy Manifest page
Stub new controls for package files

* Add Release notes and ECU FIles to Create Manifest

* Add Release notes and ECU FIles to Create Manifest

* Oops

* Replace multi release notes with single url

* Implement multiple file uploads and progress

* Update snapshots

* Unused import

* Move file to end of form
Update progress layout

src/components/Controls/SubList/index.jsx

@@ -0,0 +1,45 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@material-ui/core";
+import React from "react";
+import SubListItem from "../SubListItem";
+
+const SubList = ({ data, options, onChange }) => {
+  const onDelete = (id) => {
+    if (!onChange) return;
+    data.some((item, index) => {
+      if (item.data_id !== id) return false;
+      data.splice(index, 1);
+      onChange(data);
+      return true;
+    });
+  };
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          {options.map((option) => (
+            <TableCell key={option.label || "none"}>{option.label}</TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.map((item) => (
+          <SubListItem
+            key={item.data_id}
+            data={item}
+            options={options}
+            onDelete={onDelete}
+          />
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default SubList;

src/components/Controls/SubListItem/index.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { TableCell, TableRow, TextField } from "@material-ui/core";
+import { Link } from "react-router-dom";
+import DeleteIcon from "@material-ui/icons/Delete";
+import { useState } from "react";
+
+const DataDisplay = ({ data, option, onDelete }) => {
+  const [text, setText] = useState(data[option.field]);
+  const onChange = (e) => {
+    data[e.target.id] = e.target.value;
+    setText(e.target.value);
+  };
+  const deleteHandler = (id) => {
+    if (onDelete) onDelete(id);
+  };
+
+  if (option.readonly) {
+    return `${data[option.field]}`;
+  } else if (option.delete) {
+    return (
+      <Link
+        to="#"
+        onClick={() => {
+          deleteHandler(data.data_id);
+        }}
+      >
+        <DeleteIcon />
+      </Link>
+    );
+  }
+
+  return (
+    <TextField
+      id={option.field}
+      name={option.field}
+      placeholder={option.label}
+      inputProps={option.inputProps}
+      requried={option.required}
+      fullWidth
+      onChange={onChange}
+      value={text}
+    ></TextField>
+  );
+};
+
+const SubListItem = ({ data, options, onDelete }) => {
+  return (
+    <TableRow>
+      {options.map((item) => (
+        <TableCell key={item.label} width={item.delete ? 25 : null}>
+          <DataDisplay data={data} option={item} onDelete={onDelete} />
+        </TableCell>
+      ))}
+    </TableRow>
+  );
+};
+
+export default SubListItem;