CEC-4248 - Fixes to DTC tab (#350)

* CEC-4248 - Add time settings to DTC timeline page

* CEC-4248 - fixes to DTC tab

src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap

@@ -342,53 +342,39 @@ exports[`Render Render 1`] = `
               style="margin-bottom: 8px;"
             >
               <div
-                class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
-                  data-shrink="false"
+                  data-shrink="true"
-                  for="search"
+                  for="ecu_field"
+                  id="ecu_field-label"
                 >
-                  Search
+                  ECU
                 </label>
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="search"
+                    id="ecu_field"
+                    name="ecu_field"
                     type="text"
                     value=""
                   />
-                  <div
+                  <fieldset
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
-                    <button
+                    <legend
-                      aria-label="search"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
-                      class="MuiButtonBase-root MuiIconButton-root"
-                      tabindex="0"
-                      type="button"
                     >
-                      <span
+                      <span>
-                        class="MuiIconButton-label"
+                        ECU
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                          />
-                        </svg>
                       </span>
-                      <span
+                    </legend>
-                        class="MuiTouchRipple-root"
+                  </fieldset>
-                      />
-                    </button>
-                  </div>
                 </div>
               </div>
             </div>

src/components/DTCTimeline/DTCTimeline/index.jsx

@@ -1,5 +1,5 @@
 import DateFnsUtils from '@date-io/date-fns';
-import { Button, Checkbox, CircularProgress, FormControlLabel, Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow } from "@material-ui/core";
+import { Button, Checkbox, CircularProgress, FormControlLabel, Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow, TextField } from "@material-ui/core";
 import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import clsx from "clsx";
 import React, { useEffect, useState } from "react";
@@ -7,7 +7,6 @@ import { logger } from "../../../services/monitoring";
 import { DTCTimelineProvider, useDTCTimelineContext } from '../../Contexts/DTCTimelineContext';
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import SearchField from '../../Controls/SearchField';
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
@@ -92,11 +91,9 @@ const MainForm = ({ vin }) => {
     setLoading(true);
     try {
       let start_date = new Date(selectedStartDate);
-      start_date.setHours(0, 0, 0, 0);
       start_date = start_date.toISOString();
 
       let end_date = new Date(selectedEndDate);
-      end_date.setHours(23, 59, 59, 999);
       end_date = end_date.toISOString();
 
       const search = {
@@ -232,10 +229,19 @@ const MainForm = ({ vin }) => {
         </Grid>
         <Grid item xs={12}>
           <div style={{ marginBottom: '8px' }}>
-            <SearchField
+            <TextField
-              classes={classes}
+              id="ecu_field"
-              onSearch={(searchValue) => {
+              name="ecu_field"
-                setSelectedECU(searchValue);
+              label="ECU"
+              InputLabelProps={{
+                shrink: true
+              }}
+              defaultValue=""
+              variant="outlined"
+              margin="normal"
+              fullWidth
+              onChange={(e) => {
+                setSelectedECU(e.target.value);
               }}
             />
           </div>