CEC-371 Update car ECUs display (#78)

* Clean up className styles
Update car status page to show update and ECUs

* Add update ecu version button
Show all ECUs on car status page
Only show car ecus for search

src/components/Manifest/Deploy/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
 import { Button, Grid, Typography } from "@material-ui/core";
+import clsx from "clsx";
 
 import {
   ManifestsProvider,
@@ -126,21 +127,21 @@ const MainForm = () => {
       <form className={classes.form} noValidate action="{onSubmit}">
         <Typography variant="body2">Created {createDate}.</Typography>
         <Grid container className={classes.root} spacing={2}>
-          <Grid item md={2}>
+          <Grid item md={4}>
             <div
               className={classes.labelInline}
             >{`${selected.length} Selected`}</div>
           </Grid>
-          <Grid item md={8} className={classes.textCenterAlign}>
+          <Grid item md={4} className={classes.textCenterAlign}>
             <SearchField classes={classes} onSearch={handleSearch} />
           </Grid>
-          <Grid item md={2} className={classes.textRightAlign}>
+          <Grid item md={4} className={classes.textRightAlign}>
             <Button
               type="submit"
               disabled={busy || selected.length === 0}
               variant="contained"
               color="primary"
-              className={classes.formControl}
+              className={clsx(classes.formControl, classes.textField)}
               onClick={onSubmit}
             >
               {busy ? "Deploying..." : "Deploy"}

src/components/Manifest/List/index.jsx

@@ -14,6 +14,7 @@ import AddCircleIcon from "@material-ui/icons/AddCircle";
 import SendIcon from "@material-ui/icons/Send";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import DeleteIcon from "@material-ui/icons/Delete";
+import clsx from "clsx";
 
 import {
   useManifestsContext,
@@ -184,7 +185,7 @@ const MainForm = () => {
   };
 
   return (
-    <div className={`${classes.paper} ${classes.tableSize}`}>
+    <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
           <Link to="/package-create" className={classes.labelInline}>
@@ -213,7 +214,11 @@ const MainForm = () => {
                 {row.ecu_list && (
                   <>
                     <br />
-                    <ECUList list={row.ecu_list} search={search} />
+                    <ECUList
+                      list={row.ecu_list}
+                      search={search}
+                      searchedOnly={true}
+                    />
                   </>
                 )}
               </TableCell>

src/components/Manifest/Status/index.jsx

@@ -11,6 +11,7 @@ import {
   TablePagination,
   TableRow,
 } from "@material-ui/core";
+import clsx from "clsx";
 
 import {
   ManifestsProvider,
@@ -119,7 +120,7 @@ const MainForm = () => {
   };
 
   return (
-    <div className={`${classes.paper} ${classes.tableSize}`}>
+    <div className={clsx(classes.paper, classes.tableSize)}>
       <Table>
         <TableHead>
           <TableRow>