CEC-4100: Added push config changes to vin (#338)

package.json

@@ -6,13 +6,14 @@
     "@datadog/browser-logs": "^3.11.0",
     "@date-io/date-fns": "1.x",
     "@date-io/moment": "1.x",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/pickers": "^3.3.10",
-    "@mui/material": "^5.10.14",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.1",
     "@superset-ui/embedded-sdk": "^0.1.0-alpha.8",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
@@ -83,7 +84,7 @@
     "coverageThreshold": {
       "global": {
         "branches": 39,
-        "functions": 47,
+        "functions": 46,
         "lines": 55,
         "statements": 55
       }

src/components/App/__snapshots__/App.test.js.snap

@@ -11428,9 +11428,28 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                               />
                             </svg>
                           </a>
+                          <a
+                            class=""
+                            href="/vehicle-status/FISKER123"
+                            title="Push Config \\"FISKER123\\""
+                          >
+                            <svg
+                              aria-hidden="true"
+                              aria-label="Push Config \\"FISKER123\\""
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                              data-testid="UploadIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M5 20h14v-2H5v2zm0-10h4v6h6v-6h4l-7-7-7 7z"
+                              />
+                            </svg>
+                          </a>
                         </div>
                       </div>
                       <div />
+                      <div />
                     </div>
                   </div>
                 </div>

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

@@ -168,9 +168,28 @@ exports[`VehicleDetailsTab Render 1`] = `
                     />
                   </svg>
                 </a>
+                <a
+                  class=""
+                  href="/"
+                  title="Push Config \\"TESTVIN1234567890\\""
+                >
+                  <svg
+                    aria-hidden="true"
+                    aria-label="Push Config \\"TESTVIN1234567890\\""
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                    data-testid="UploadIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 20h14v-2H5v2zm0-10h4v6h6v-6h4l-7-7-7 7z"
+                    />
+                  </svg>
+                </a>
               </div>
             </div>
             <div />
+            <div />
           </div>
         </div>
       </div>

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

@@ -1,6 +1,7 @@
 import { Grid, Tooltip } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
+import UploadIcon from '@mui/icons-material/Upload';
 import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { Redirect } from "react-router";
@@ -16,14 +17,16 @@ import {
 } from "../../../Contexts/VehicleContext";
 import { RoleWrap } from "../../../Controls/RoleWrap";
 import DeleteConfirmation from "../../../DeleteConfirmation";
+import GeneralConfirmation from "../../../GeneralConfirmation";
 import useStyles from "../../../useStyles";
 
 const MainForm = ({ vin }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
-  const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
+  const { vehicle, getVehicle, deleteVehicle, uploadConfig } = useVehicleContext();
   const [redirect, setRedirect] = useState(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showUploadConfigModal, setShowUploadConfigModal] = useState(false);
   const {
     token: {
       idToken: { jwtToken: token },
@@ -59,6 +62,16 @@ const MainForm = ({ vin }) => {
     }
   };
 
+  const onUploadConfig = async () => {
+    try {
+      await uploadConfig(vin, token);
+      setMessage(`Config Uploaded ${vin}`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  }
+
   if (redirect && redirect.length > 0) {
     return <Redirect to={redirect} />;
   }
@@ -142,6 +155,18 @@ const MainForm = ({ vin }) => {
               </Link>
             </Tooltip>
           </RoleWrap>
+          <RoleWrap
+            groups={groups}
+            providers={providers}
+            rolesPerProvider={Permissions.FiskerCreate}
+          >
+            <Tooltip key={`push-config-${vin}`} title={`Push Config "${vin}"`}>
+              <Link to="#" onClick={() => setShowUploadConfigModal(true)}>
+                <UploadIcon aria-label={`Push Config "${vin}"`} />
+              </Link>
+            </Tooltip>
+          </RoleWrap>
+
           <RoleWrap
             groups={groups}
             providers={providers}
@@ -161,6 +186,13 @@ const MainForm = ({ vin }) => {
         close={() => setShowDeleteModal(false)}
         deleteFunction={onDelete}
       />
+      <GeneralConfirmation
+        message={"push config update to:" + vin}
+        open={showUploadConfigModal}
+        close={() => setShowUploadConfigModal(false)}
+        actionFunction={onUploadConfig}
+        title="Send Update"
+      />
     </div>
   );
 };

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

@@ -176,9 +176,28 @@ exports[`DetailsTab Render 1`] = `
                       />
                     </svg>
                   </a>
+                  <a
+                    class=""
+                    href="/testroute/TESTVIN1234567890"
+                    title="Push Config \\"TESTVIN1234567890\\""
+                  >
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Push Config \\"TESTVIN1234567890\\""
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="UploadIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M5 20h14v-2H5v2zm0-10h4v6h6v-6h4l-7-7-7 7z"
+                      />
+                    </svg>
+                  </a>
                 </div>
               </div>
               <div />
+              <div />
             </div>
           </div>
         </div>

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

@@ -357,9 +357,28 @@ exports[`CarStatus Render 1`] = `
                           />
                         </svg>
                       </a>
+                      <a
+                        class=""
+                        href="/"
+                        title="Push Config \\"TESTVIN1234567890\\""
+                      >
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Push Config \\"TESTVIN1234567890\\""
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                          data-testid="UploadIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M5 20h14v-2H5v2zm0-10h4v6h6v-6h4l-7-7-7 7z"
+                          />
+                        </svg>
+                      </a>
                     </div>
                   </div>
                   <div />
+                  <div />
                 </div>
               </div>
             </div>

src/components/Contexts/VehicleContext.jsx

@@ -200,6 +200,20 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
+  const uploadConfig = async (vin, token) => {
+    try {
+      setBusy(true);
+      validateVIN(vin);
+
+      const result = await api.updateConfig(vin, token);
+      if (result.error)
+        throw new Error(`Update vehicle error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
   const deleteVehicle = async (vin, token) => {
     try {
       setBusy(true);
@@ -285,6 +299,7 @@ export const VehicleProvider = ({ children }) => {
         updateVehicle,
         getFleets,
         getVersionLog,
+        uploadConfig
       }}
     >
       {children}

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`General Confirmation Modal Should render 1`] = `
+<div
+  aria-hidden="true"
+>
+  <div />
+</div>
+`;

src/components/GeneralConfirmation/index.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {Dialog, DialogTitle, DialogContentText, Button, DialogActions, DialogContent} from '@material-ui/core';
+
+const GeneralConfirmation = (props) => {
+    return (
+      <div>
+      <Dialog open={props.open}
+      onClose={props.close}>
+        <DialogTitle id="alert-dialog-title">
+          {props.title}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {"Are you sure you want to : " + props.message}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.close}>Cancel</Button>
+          <Button variant="contained" color="secondary" onClick={() => { props.close(); props.actionFunction()}} autoFocus>
+            Go
+          </Button>
+        </DialogActions>
+      </Dialog>
+      </div>
+    )
+}
+
+GeneralConfirmation.propTypes={
+  open: PropTypes.bool.isRequired, // Boolean that determines if the modal should be open
+  close: PropTypes.func.isRequired, // Function that sets the open state to false i.e. () => setOpen(false)
+  message: PropTypes.any.isRequired, // What the user will see if being confirmed for the function to run
+  actionFunction: PropTypes.func.isRequired, // Function that runs when user clicks Go
+  title: PropTypes.any.isRequired, // The title of the modal that is opened
+}
+
+export default GeneralConfirmation;

src/components/GeneralConfirmation/index.test.jsx

@@ -0,0 +1,20 @@
+jest.mock("../Contexts/UserContext");
+
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import GeneralConfirmation from "./index";
+import addSnapshotSerializer from "../../utils/snapshot";
+
+describe("General Confirmation Modal", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Should render", () => {
+    const { container } = render(
+      <GeneralConfirmation open={true} close={()=>{}} message="Test Message" title="hello" actionFunction={()=>{}}/>
+    );
+    expect(container).toMatchSnapshot();
+    cleanup();
+  });
+});

src/services/vehiclesAPI.js

@@ -173,6 +173,17 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
+  updateConfig: async (vin, token) =>
+    fetch(`${API_ENDPOINT}/car_config/${vin}`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      )
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+
   getCANSignals: async (vin, token) =>
     fetch(`${API_ENDPOINT}/cansignals/${vin}`, {
       method: "GET",
@@ -209,15 +220,15 @@ const vehiclesAPI = {
       .catch(errorHandler)
   },
 
-  getLogFileLink: async ({vin, year, month, day}, token) => {
-      const u = `${API_ENDPOINT}/vehicle/${vin}/trex-logs-link?year=${year}&month=${month}&day=${day}`
-      return fetch(u, {
-        method: "GET",
-        headers: Object.assign(
-          { "Content-Type": "application/json" },
-          getAuthHeaderOptions(token)
-        ),
-      }).then(fetchRespHandler)
+  getLogFileLink: async ({ vin, year, month, day }, token) => {
+    const u = `${API_ENDPOINT}/vehicle/${vin}/trex-logs-link?year=${year}&month=${month}&day=${day}`
+    return fetch(u, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    }).then(fetchRespHandler)
       .catch(errorHandler)
   },
 };