CEC-3514 create can self serve page (#288)

* first push

* fix snapshot

* remove unused vars

* update snap

* remove some console logs

* Remove snapshot

* Update

* CEC-3770 Update cert expire text (#282)

* CEC-3577: fetch T.Rex log from the cloud (#283)

* CEC-3577: fetch T.Rex log from the cloud

* tabs?

* CSS

* smells

* fix smells and warnings

* suggestions

* CEC-3577 Style tweak (#284)

* CEC-3577: trex logs (#285)

* CEC-3577: trex logs

add filtering
add progress bar for log fetching
always fetch all the logs
request canceling

* don't hide progress

* CEC-3751, CEC-3478 misc window status and invalid location value (#287)

* CEC-3751 misc window status
CEC-3478 invalid location value

* Fix snapshot
Update browser list

* merge develop update snap

* resolve comments

* add date and time picker seperately, use checkbox for dropdown

* added verification for date and fixed time picker

* fix snap

* resolve comments

* removed small bug

* tweak layout

* added snap shot test for can signals

* small change

* Fix test

* fix sms snap

* change function name

* mock can signals api

* resolved comments

* fix ci

* Clean up

---------

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>
Co-authored-by: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Co-authored-by: Eduard Voronkin <116690094+eduardvoronkin@users.noreply.github.com>

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

@@ -195,6 +195,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-9"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-9"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      CAN Signal Export
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -376,6 +394,12 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-8"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-9"
+            hidden=""
+            id="tabpanel-9"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -5,6 +5,7 @@ import { useParams } from "react-router";
 import { useLocation } from "react-router-dom";
 
 import { hasRole, Permissions } from "../../../utils/roles";
+import SelfServeTab from "../../CANSelfServe/SelfServeTab";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import TabPanel from "../../Controls/TabPanel";
@@ -17,7 +18,7 @@ import DigitalTwinTab from "./DigitalTwinTab";
 import ECUsTab from "./ECUsTab";
 import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
-import TRexLogsTab from "./TRexLogsTab"
+import TRexLogsTab from "./TRexLogsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -60,6 +61,10 @@ const TabViews = [
     component: FleetsTab,
     rolesPerProvider: Permissions.FiskerRead,
   },
+  {
+    label: "CAN Signal Export",
+    component: SelfServeTab
+  }
 ];
 
 const filterTabs = (data, groups, providers) => {

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

@@ -6,15 +6,15 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 );
 
 import { render, waitFor } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
 import routeData from "react-router";
+import { BrowserRouter } from "react-router-dom";
 
+import addSnapshotSerializer from "../../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
-import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import { setToken, UserProvider } from "../../Contexts/UserContext";
 import CarStatus from "./index";
-import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarStatus = async () => {
   const { container } = render(