CEC-4517 reset TBOX remote command (#369)

* CEC-4517 Diagnostic Commands tab

* snapshot

src/components/Cars/Status/RemoteDiagnosticCommands.jsx

@@ -0,0 +1,30 @@
+import useStyles from "../../useStyles";
+import clsx from "clsx";
+import Typography from "@material-ui/core/Typography";
+import SendDiagnosticCommand from "../../Controls/SendDiagnosticCommand";
+import { useParams } from "react-router";
+
+import { useUserContext } from "../../Contexts/UserContext";
+
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+
+const RemoteDiagnosticCommandsTab = (props) => {
+  const { vin } = useParams();
+  const classes = useStyles();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Vehicle Diagnostic Commands</Typography>
+      <VehicleProvider>
+        <SendDiagnosticCommand vin={vin} token={token} classes={classes}></SendDiagnosticCommand>
+      </VehicleProvider>
+    </div>
+  )
+}
+
+export default RemoteDiagnosticCommandsTab

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

@@ -189,7 +189,7 @@ exports[`CarStatus Render 1`] = `
                     <span
                       class="MuiTab-wrapper"
                     >
-                      Fleets
+                      Remote Diagnostic Commands
                     </span>
                     <span
                       class="MuiTouchRipple-root"
@@ -203,6 +203,24 @@ exports[`CarStatus Render 1`] = `
                     role="tab"
                     tabindex="-1"
                     type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Fleets
+                    </span>
+                    <span
+                      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"
@@ -480,6 +498,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-9"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-10"
+            class="makeStyles-tabContainer-0"
+            hidden=""
+            id="tabpanel-10"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -18,6 +18,7 @@ import DigitalTwinTab from "./DigitalTwinTab";
 import ECUsTab from "./ECUsTab";
 import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
+import RemoteDiagnosticCommandsTab from "./RemoteDiagnosticCommands";
 import TRexLogsTab from "./TRexLogsTab";
 
 const tabHashes = ["details", "updates", "filters"];
@@ -63,6 +64,11 @@ const TabViews = [
     component: RemoteCommandsTab,
     rolesPerProvider: Permissions.FiskerMagnaCreate,
   },
+  {
+    label: "Remote Diagnostic Commands",
+    component: RemoteDiagnosticCommandsTab,
+    rolesPerProvider: Permissions.FiskerMagnaCreate,
+  },
   {
     label: "Fleets",
     component: FleetsTab,