From b622e422861e0b1646df5dabaec814f5cb9393bf Mon Sep 17 00:00:00 2001 From: John Wu <76966357+jwu-fisker@users.noreply.github.com> Date: Tue, 27 Sep 2022 10:29:09 -0700 Subject: [PATCH] CEC-2601 (#204) --- .../App/__snapshots__/App.test.js.snap | 26 +++++++++++++- .../__snapshots__/CarUpdatesTab.test.jsx.snap | 6 +++- src/components/Contexts/CarUpdatesContext.jsx | 28 +++++++++++---- .../Controls/CarUpdatesTable/index.jsx | 29 +++++++++++++-- src/components/Manifest/List/index.jsx | 19 ++++++---- src/components/Manifest/Status/index.jsx | 26 ++++++++++++-- src/services/__mocks__/updatesAPI.js | 4 +++ src/services/updatesAPI.js | 35 +++++++++++++------ 8 files changed, 140 insertions(+), 33 deletions(-) diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap index 4b962b9..ad4b43a 100644 --- a/src/components/App/__snapshots__/App.test.js.snap +++ b/src/components/App/__snapshots__/App.test.js.snap @@ -2434,6 +2434,10 @@ exports[`App Route /package-status authenticated 1`] = ` > Updated + 7/12/2021 6:22:13 PM + + + + +
+
{ if (data === null) { throw new Error("No car update data"); @@ -20,17 +19,16 @@ const validateDeployClosure = (data, propertyName, errPfx) => { if (!value || value.length === 0) { throw new Error(`${errPfx} are required`); } -} +}; const validateDeployCarUpdates = (data) => { - return validateDeployClosure(data, 'vins', 'Cars') + return validateDeployClosure(data, "vins", "Cars"); }; const validateDeployFleetUpdates = (data) => { - return validateDeployClosure(data, 'fleet_names', 'Fleets') + return validateDeployClosure(data, "fleet_names", "Fleets"); }; - export const CarUpdatesProvider = ({ children }) => { const [busy, setBusy] = useState(false); const [carUpdates, setCarUpdates] = useState([]); @@ -61,14 +59,14 @@ export const CarUpdatesProvider = ({ children }) => { setBusy(true); validateDeployFleetUpdates(data); result = await api.createFleetUpdates(data, token); - if (result.error) + if (result.error) throw new Error(`Deploy fleet updates error. ${result.message}`); } finally { setBusy(false); } return result; - } + }; const getCarUpdates = async (search, token) => { let result; @@ -224,12 +222,28 @@ export const CarUpdatesProvider = ({ children }) => { return result; }; + const cancelUpdate = async (id, token) => { + let result; + + try { + setBusy(true); + result = await api.cancelCarUpdate(id, token); + if (result.error) + throw new Error(`Cancel car update error. ${result.message}`); + } finally { + setBusy(false); + } + + return result; + }; + return ( { const [pageIndex, setPageIndex] = useState(0); const [orderBy, setOrderBy] = useState("id"); const [order, setOrder] = useState("desc"); - const { getCarUpdates, carUpdates, totalCarUpdates } = useCarUpdatesContext(); + const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } = + useCarUpdatesContext(); const { setMessage } = useStatusContext(); useEffect(() => { @@ -107,6 +114,15 @@ const MainForm = ({ vin, token }) => { return "None"; }; + const sendCancel = async (row) => { + try { + await cancelUpdate(row.id, token); + setMessage(`Sent cancel for ${updateName(row)}`); + } catch (e) { + setMessage(e.message); + } + }; + return ( { {LocalDateTimeString(row.updated)} + + + sendCancel(row)}> + + + + ))} @@ -139,7 +162,7 @@ const MainForm = ({ vin, token }) => { { const [orderBy, setOrderBy] = useState("id"); const [order, setOrder] = useState("asc"); const [search, setSearch] = useState(""); - const [showDeleteModal, setShowDeleteModal] = useState(false) + const [showDeleteModal, setShowDeleteModal] = useState(false); const { getManifests, deleteManifest, manifests, totalManifests } = useManifestsContext(); const { setMessage, setTitle, setSitePath } = useStatusContext(); @@ -181,12 +181,17 @@ const MainForm = () => { } else { return (
- - onDelete(action.id)}> - {action.icon} - - - setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} /> + + onDelete(action.id)}> + {action.icon} + + + setShowDeleteModal(false)} + deleteFunction={() => onDelete(action.id)} + />
); } diff --git a/src/components/Manifest/Status/index.jsx b/src/components/Manifest/Status/index.jsx index cb6e865..b57686f 100644 --- a/src/components/Manifest/Status/index.jsx +++ b/src/components/Manifest/Status/index.jsx @@ -10,7 +10,9 @@ import { TableHead, TablePagination, TableRow, + Tooltip, } from "@material-ui/core"; +import CancelIcon from "@material-ui/icons/Cancel"; import clsx from "clsx"; import { @@ -27,9 +29,9 @@ import useStyles from "../../useStyles"; import { LocalDateTimeString } from "../../../utils/dates"; import { logger } from "../../../services/monitoring"; import ManifestDetails from "../Details"; -import {useLocalStorage} from "../../useLocalStorage"; +import { useLocalStorage } from "../../useLocalStorage"; -const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE"; +const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE"; const MainForm = () => { const { manifest_id } = useParams(); @@ -38,6 +40,7 @@ const MainForm = () => { const [pageIndex, setPageIndex] = useState(0); const { getManifests, manifests } = useManifestsContext(); const { + cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates, @@ -127,6 +130,15 @@ const MainForm = () => { setPageIndex(0); }; + const sendCancel = async ({ id, vin }) => { + try { + await cancelUpdate(id, token); + setMessage(`Sent cancel for ${vin}`); + } catch (e) { + setMessage(e.message); + } + }; + return (
@@ -137,6 +149,7 @@ const MainForm = () => { StatusCreatedUpdated + @@ -158,6 +171,13 @@ const MainForm = () => { {LocalDateTimeString(row.updated)} + + + sendCancel(row)}> + + + + ))} @@ -165,7 +185,7 @@ const MainForm = () => { { return { statuses: [] }; }, + + cancelCarUpdate: async (id, token) => { + return { message: "OK" }; + }, }; export default updatesAPI; diff --git a/src/services/updatesAPI.js b/src/services/updatesAPI.js index 42731a1..5e8dda9 100644 --- a/src/services/updatesAPI.js +++ b/src/services/updatesAPI.js @@ -8,17 +8,18 @@ import { const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL; const createDeployUpdatesClosure = (suffix) => { - return async (data, token) => fetch(`${API_ENDPOINT}/${suffix}`, { - method: "POST", - headers: Object.assign( - { "Content-Type": "application/json" }, - getAuthHeaderOptions(token) - ), - body: JSON.stringify(data), - }) - .then(fetchRespHandler) - .catch(errorHandler) -} + return async (data, token) => + fetch(`${API_ENDPOINT}/${suffix}`, { + method: "POST", + headers: Object.assign( + { "Content-Type": "application/json" }, + getAuthHeaderOptions(token) + ), + body: JSON.stringify(data), + }) + .then(fetchRespHandler) + .catch(errorHandler); +}; const updatesAPI = { createFleetUpdates: createDeployUpdatesClosure("fleetupdate"), @@ -76,6 +77,18 @@ const updatesAPI = { .then(fetchRespHandler) .catch(errorHandler); }, + + cancelCarUpdate: async (id, token) => { + return fetch(`${API_ENDPOINT}/carupdate/${id}/cancel`, { + method: "POST", + headers: Object.assign( + { "Content-Type": "application/json" }, + getAuthHeaderOptions(token) + ), + }) + .then(fetchRespHandler) + .catch(errorHandler); + }, }; export default updatesAPI;