CEC-3943-display-ecu-vin-timeline (#303)

* first push

* fix test

* Fix test

* resolve comments

* fix undefined

* align items and change search field

* fix dates

* resolve comments

* fix lint

* fix test

---------

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>

src/components/Cars/Status/__snapshots__/index.test.jsx.snap

@@ -213,6 +213,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-10"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-10"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      DTC Timeline
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -400,6 +418,12 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-9"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-10"
+            hidden=""
+            id="tabpanel-10"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -19,6 +19,7 @@ import ECUsTab from "./ECUsTab";
 import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
 import TRexLogsTab from "./TRexLogsTab";
+import DTCTimeline from "../../DTCTimeline/DTCTimeline";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -72,7 +73,13 @@ const TabViews = [
     label: "CAN Signal Export",
     component: SelfServeTab,
     rolesPerProvider: Permissions.FiskerRead,
+  },
+  {
+    label: "DTC Timeline",
+    component: DTCTimeline,
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   }
+
 ];
 
 const filterTabs = (data, groups, providers) => {