admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CEC-4920: Add redeploy bulk-action (#420)

Browse Source 
* standardize bulk actions

* add redploy bulk-action

* add cases to disable redeploy

* update status check

* rename func
This commit is contained in:
Tristan Timblin
2023-09-18 13:59:45 -07:00
committed by GitHub
parent 9f16e1ebf5
commit 3177d65e3d
27 changed files with 215 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -5348,45 +5348,7 @@ exports[`App Route /package-status authenticated 1`] = `
</div>
<div
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
>
<div
aria-label="choose action"
class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
role="group"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
disabled=""
tabindex="-1"
type="button"
>
Cancel Updates
</button>
<button
aria-haspopup="menu"
aria-label="select action"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
data-testid="dropdown-button-expand"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m7 10 5 5 5-5z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
/>
</div>
<table
class="MuiTable-root"

8
src/components/BulkActions/actions/AddTags.jsx
View File

@@ -5,8 +5,8 @@ import TextInputList from "../../Controls/TextInputList";
import vehiclesAPI from "../../../services/vehiclesAPI";
export default forwardRef(({
vins,
vinCSV,
ids,
idCSV,
}, ref) => {
const { setMessage } = useStatusContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -16,7 +16,7 @@ export default forwardRef(({
useImperativeHandle(ref, () => ({
async submit() {
return vehiclesAPI
.addTags(vins, tags, token)
.addTags(ids, tags, token)
.then((data) => {
if (data.error) {
setMessage(`${data.error}: ${data.message}`);
@@ -32,7 +32,7 @@ export default forwardRef(({
return (
<div>
<p>
You are adding tags to the following VINs: {vinCSV}.
You are adding tags to the following VINs: {idCSV}.
</p>
<TextInputList
label="Tags"

4
src/components/BulkActions/actions/AddTags.test.jsx
View File

@@ -38,8 +38,8 @@ describe("BulkActions/AddTags", () => {
<UserProvider>
<AddTags
ref={ref}
vins={["TESTVIN123456789a"]}
vinCSV=""
ids={["TESTVIN123456789a"]}
idCSV=""
/>
</UserProvider>
</StatusProvider>

4
src/components/BulkActions/actions/AddToFleet.test.jsx
View File

@@ -40,8 +40,8 @@ describe("BulkActions/AddToFleet", () => {
<UserProvider>
<AddToFleet
ref={ref}
vins={["TESTVIN1234567890"]}
vinCSV=""
ids={["TESTVIN1234567890"]}
idCSV=""
/>
</UserProvider>
</StatusProvider>

8
src/components/Manifest/Toolbar/actions/Cancel.jsx → src/components/BulkActions/actions/Cancel.jsx
View File

@@ -1,8 +1,8 @@
import { forwardRef, useImperativeHandle } from "react";
import { useStatusContext } from "../../../Contexts/StatusContext";
import { useUserContext } from "../../../Contexts/UserContext";
import TaskRunner from "../../../../utils/taskRunner";
import updatesAPI from "../../../../services/updatesAPI";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import TaskRunner from "../../../utils/taskRunner";
import updatesAPI from "../../../services/updatesAPI";
export default forwardRef(({
ids,

14
src/components/Manifest/Toolbar/actions/Cancel.test.jsx → src/components/BulkActions/actions/Cancel.test.jsx
View File

@@ -1,17 +1,17 @@
jest.mock("../../../Contexts/UserContext");
jest.mock("../../../Contexts/StatusContext");
jest.mock("../../../../services/updatesAPI");
jest.mock("../../Contexts/UserContext");
jest.mock("../../Contexts/StatusContext");
jest.mock("../../../services/updatesAPI");
import React from "react";
import {
render,
act,
} from "@testing-library/react";
import { UserProvider, setToken } from "../../../Contexts/UserContext";
import { StatusProvider } from "../../../Contexts/StatusContext";
import { TEST_AUTH_OBJECT_FISKER } from "../../../../utils/testing";
import { UserProvider, setToken } from "../../Contexts/UserContext";
import { StatusProvider } from "../../Contexts/StatusContext";
import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
import Cancel from "./Cancel";
import updatesAPI from "../../../../services/updatesAPI";
import updatesAPI from "../../../services/updatesAPI";
describe("Manifest/Cancel", () => {
beforeAll(() => {

14
src/components/BulkActions/actions/DeleteVehicles.jsx
View File

@@ -5,8 +5,8 @@ import TaskRunner from "../../../utils/taskRunner";
import vehiclesAPI from "../../../services/vehiclesAPI";
export default forwardRef(({
vins,
vinCSV,
ids,
idCSV,
}, ref) => {
const { setMessage } = useStatusContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -14,11 +14,11 @@ export default forwardRef(({
useImperativeHandle(ref, () => ({
async submit() {
return new Promise((resolve, reject) => {
const taskRunner = new TaskRunner(5, vins.length);
const taskRunner = new TaskRunner(5, ids.length);
let errorCount = 0;
const task = (vin, index) => {
const progressMessage = `${index + 1}/${vins.length}`;
const progressMessage = `${index + 1}/${ids.length}`;
return async () => vehiclesAPI.deleteVehicle(vin, token)
.then((response) => {
if (response.error) {
@@ -32,12 +32,12 @@ export default forwardRef(({
.catch((error) => reject(error));
}
vins.forEach((vin, i) => {
ids.forEach((vin, i) => {
taskRunner.push(task(vin, i));
});
taskRunner.onComplete().then((responses) => {
const completeMessage = `${vins.length - errorCount}/${vins.length}`;
const completeMessage = `${ids.length - errorCount}/${ids.length}`;
setMessage(`Successfully deleted ${completeMessage} vehicles.`);
resolve(responses);
});
@@ -48,7 +48,7 @@ export default forwardRef(({
return (
<div>
<p>
You are about to delete the following VINs: {vinCSV}.
You are about to delete the following VINs: {idCSV}.
</p>
</div>
);

4
src/components/BulkActions/actions/DeleteVehicles.test.jsx
View File

@@ -27,8 +27,8 @@ describe("BulkActions/DeleteVehicles", () => {
<UserProvider>
<DeleteVehicles
ref={ref}
vins={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
vinCSV=""
ids={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
idCSV=""
/>
</UserProvider>
</StatusProvider>

55
src/components/BulkActions/actions/Redeploy.jsx Normal file
View File

@@ -0,0 +1,55 @@
import { forwardRef, useImperativeHandle } from "react";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import TaskRunner from "../../../utils/taskRunner";
import updatesAPI from "../../../services/updatesAPI";
export default forwardRef(({
ids,
idCSV,
}, ref) => {
const { setMessage } = useStatusContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
useImperativeHandle(ref, () => ({
async submit() {
return new Promise((resolve, reject) => {
const taskRunner = new TaskRunner(5, ids.length);
let errorCount = 0;
const task = (id, index) => {
const progressMessage = `${index + 1}/${ids.length}`;
return async () => updatesAPI.deployCarUpdate(id, token)
.then((response) => {
if (response.error) {
errorCount += 1;
setMessage(`${progressMessage} ${response.error}: ${response.message}`);
} else {
setMessage(`${progressMessage} Redeployed update ${id}`);
}
return response;
})
.catch((error) => reject(error));
}
ids.forEach((id, i) => {
taskRunner.push(task(id, i));
});
taskRunner.onComplete().then((responses) => {
const completeMessage = `${ids.length - errorCount}/${ids.length}`;
setMessage(`Successfully rededployed ${completeMessage} updates.`);
resolve(responses);
});
});
},
}));
return (
<div>
<p>
You are redeploying the following updates: {idCSV}.
</p>
</div>
);
});

40
src/components/BulkActions/actions/Redeploy.test.jsx Normal file
View File

@@ -0,0 +1,40 @@
jest.mock("../../Contexts/UserContext");
jest.mock("../../Contexts/StatusContext");
jest.mock("../../../services/updatesAPI");
import React from "react";
import {
render,
act,
} from "@testing-library/react";
import { UserProvider, setToken } from "../../Contexts/UserContext";
import { StatusProvider } from "../../Contexts/StatusContext";
import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
import Redeploy from "./Redeploy";
import updatesAPI from "../../../services/updatesAPI";
describe("Manifest/Redeploy", () => {
beforeAll(() => {
setToken(TEST_AUTH_OBJECT_FISKER);
});
it("makes request to redeploy an update", async () => {
const api = jest.spyOn(updatesAPI, "deployCarUpdate");
const ref = React.createRef();
render(
<StatusProvider>
<UserProvider>
<Redeploy
ref={ref}
ids={["1", "2", "3"]}
idCSV=""
/>
</UserProvider>
</StatusProvider>
);
await act(async () => ref.current.submit());
expect(api).toHaveBeenCalledTimes(3);
});
});

12
src/components/BulkActions/actions/SendSMS.jsx
View File

@@ -12,8 +12,8 @@ import smsAPI from "../../../services/smsAPI";
import { SMS } from "../../Contexts/SMSContext";
export default forwardRef(({
vins,
vinCSV,
ids,
idCSV,
}, ref) => {
const [shouldAwait, setShouldAwait] = useState(false);
const [smsMessage, setSmsMessage] = useState("");
@@ -23,9 +23,9 @@ export default forwardRef(({
useImperativeHandle(ref, () => ({
async submit() {
return new Promise((resolve) => {
const taskRunner = new TaskRunner(5, vins.length);
const taskRunner = new TaskRunner(5, ids.length);
vins.forEach((vin) => {
ids.forEach((vin) => {
taskRunner.push(async () => {
const { iccid } = await vehiclesAPI.getVehicle(vin, token);
@@ -47,7 +47,7 @@ export default forwardRef(({
taskRunner.onComplete()
.then((responses) => {
setMessage(`Sent ${vins.length} SMS messages`);
setMessage(`Sent ${ids.length} SMS messages`);
resolve(responses);
});
});
@@ -57,7 +57,7 @@ export default forwardRef(({
return (
<div>
<p>
You are about to send SMS to the following vins: {vinCSV}.
You are about to send SMS to the following vins: {idCSV}.
</p>
<TextField
fullWidth

4
src/components/BulkActions/actions/SendSMS.test.jsx
View File

@@ -53,8 +53,8 @@ describe("BulkActions/SendSMS", () => {
<UserProvider>
<SendSMS
ref={ref}
vins={["3C4PDCBG0ET127145"]}
vinCSV=""
ids={["3C4PDCBG0ET127145"]}
idCSV=""
/>
</UserProvider>
</StatusProvider>

14
src/components/BulkActions/actions/UpdateConfig.jsx
View File

@@ -9,8 +9,8 @@ import TaskRunner from "../../../utils/taskRunner";
import vehiclesAPI from "../../../services/vehiclesAPI";
export default forwardRef(({
vins,
vinCSV,
ids,
idCSV,
}, ref) => {
const { setMessage } = useStatusContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -20,11 +20,11 @@ export default forwardRef(({
useImperativeHandle(ref, () => ({
async submit() {
return new Promise((resolve, reject) => {
const taskRunner = new TaskRunner(5, vins.length);
const taskRunner = new TaskRunner(5, ids.length);
let errorCount = 0;
const task = (vin, index) => {
const progressMessage = `${index + 1}/${vins.length}`;
const progressMessage = `${index + 1}/${ids.length}`;
return async () => vehiclesAPI.updateConfig(vin, forcePush, token)
.then((response) => {
if (response.error) {
@@ -38,12 +38,12 @@ export default forwardRef(({
.catch((error) => reject(error));
}
vins.forEach((vin, i) => {
ids.forEach((vin, i) => {
taskRunner.push(task(vin, i));
});
taskRunner.onComplete().then((responses) => {
const completeMessage = `${vins.length - errorCount}/${vins.length}`;
const completeMessage = `${ids.length - errorCount}/${ids.length}`;
setMessage(`Successfully updated ${completeMessage} vehicles.`);
resolve(responses);
});
@@ -58,7 +58,7 @@ export default forwardRef(({
return (
<div>
<p>
You are updating the config for the following VINs: {vinCSV}.
You are updating the config for the following VINs: {idCSV}.
</p>
<FormControlLabel
label="Force Push"

4
src/components/BulkActions/actions/UpdateConfig.test.jsx
View File

@@ -27,8 +27,8 @@ describe("BulkActions/UpdateConfig", () => {
<UserProvider>
<UpdateConfig
ref={ref}
vins={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
vinCSV=""
ids={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
idCSV=""
/>
</UserProvider>
</StatusProvider>

31
src/components/BulkActions/index.jsx
View File

@@ -11,11 +11,14 @@ const AddToFleet = lazy(() => import("./actions/AddToFleet"));
const DeleteVehicles = lazy(() => import("./actions/DeleteVehicles"));
const UpdateConfig = lazy(() => import("./actions/UpdateConfig"));
const SendSMS = lazy(() => import("./actions/SendSMS"));
const Cancel = lazy(() => import("./actions/Cancel"));
const Redeploy = lazy(() => import("./actions/Redeploy"));
export default function BulkActions({
vins = [],
ids = [],
actions = [],
}) {
const [open, setOpen] = useState(false);
const [title, setTitle] = useState("Action");
const [active, setActive] = useState(null);
const activeRef = useRef();
@@ -52,16 +55,28 @@ export default function BulkActions({
disabled: !hasRole(groups, Permissions.FiskerCreate, providers),
trigger: () => setActive("sms"),
},
{
id: "cancel",
name: "Cancel Updates",
disabled: false,
trigger: () => setActive("cancel"),
},
{
id: "redeploy",
name: "Redploy Updates",
disabled: false,
trigger: () => setActive("redeploy"),
}
].filter((action) => actions.includes(action.id));
const payload = {
vins,
vinCSV: (vins && vins.length > 0) ? vins.join(", ") : "N/A",
ids,
idCSV: (ids && ids.length > 0) ? ids.join(", ") : "N/A",
ref: activeRef
};
const handleClose = () => {
setActive(null);
setOpen(false).then(() => setActive(null));
}
const handleSubmit = () => {
@@ -73,14 +88,14 @@ export default function BulkActions({
setTitle(filteredActions.find((action) => active === action.id)?.name || "Action");
}, [active, filteredActions]);
if (!vins || vins.length === 0) return <></>;
if (!ids || ids.length === 0) return <></>;
return (
<>
<DropDownButton actions={filteredActions} />
<DropDownButton actions={filteredActions} onClick={() => setOpen(true)} />
<Modal
title={title}
open={!!active}
open={open}
close={handleClose}
submit={handleSubmit}
>
@@ -91,6 +106,8 @@ export default function BulkActions({
{active === "deleteVehicles" && <DeleteVehicles {...payload} />}
{active === "updateConfig" && <UpdateConfig {...payload} />}
{active === "sms" && <SendSMS {...payload} />}
{active === "cancel" && <Cancel {...payload} />}
{active === "redeploy" && <Redeploy {...payload} />}
</section>
</Suspense>
</Modal>

6
src/components/BulkActions/index.test.jsx
View File

@@ -28,7 +28,7 @@ describe("BulkActions", () => {
<UserProvider>
<BulkActions
actions={["addTags"]}
vins={["TESTVIN1234567890"]}
ids={["TESTVIN1234567890"]}
/>
</UserProvider>
</StatusProvider>
@@ -45,7 +45,7 @@ describe("BulkActions", () => {
<UserProvider>
<BulkActions
actions={["addTags"]}
vins={["TESTVIN1234567890"]}
ids={["TESTVIN1234567890"]}
/>
</UserProvider>
</StatusProvider>
@@ -63,7 +63,7 @@ describe("BulkActions", () => {
<UserProvider>
<BulkActions
actions={["addTags", "someInvalidAction", "updateConfig"]}
vins={["TESTVIN1234567890"]}
ids={["TESTVIN1234567890"]}
/>
</UserProvider>
</StatusProvider>

2
src/components/Contexts/CarUpdatesContext.jsx
View File

@@ -62,7 +62,7 @@ export const CarUpdatesProvider = ({ children }) => {
setBusy(true);
result = await api.deployCarUpdate(id, token);
if (result.error)
throw new Error(`Cancel car update error. ${result.message}`);
throw new Error(`Retry car update error. ${result.message}`);
} finally {
setBusy(false);
}

35
src/components/Controls/CarUpdatesTable/index.jsx
View File

@@ -9,6 +9,7 @@ import {
TableRow,
} from "@material-ui/core";
import CancelIcon from "@material-ui/icons/Cancel";
import ReplayIcon from "@material-ui/icons/Replay";
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
@@ -71,6 +72,7 @@ const MainForm = ({ vin, token }) => {
const [order, setOrder] = useState("desc");
const {
cancelUpdate,
deployUpdate,
getCarUpdates,
carUpdates,
totalCarUpdates,
@@ -158,6 +160,31 @@ const MainForm = ({ vin, token }) => {
}
};
const sendDeploy = async (row) => {
try {
await deployUpdate(row.id, token);
setMessage(`Sent deploy for ${updateName(row)}`);
} catch (e) {
setMessage(e.message);
}
};
const isRedeployAvailable = (status) => {
switch (status) {
case "manifest_succeeded":
case "manifest_canceled":
case "manifest_error":
case "manifest_cancel_pending":
case "rollback_succeeded":
case "manifest_rejected":
case "rollback_failed":
case "cleanup_succeeded":
return true;
default:
return false;
}
}
return (
<Table>
<TableHeaderSortable
@@ -208,6 +235,14 @@ const MainForm = ({ vin, token }) => {
>
<CancelIcon fontSize="inherit" />
</IconButton>
<IconButton
onClick={() => sendDeploy(row)}
aria-label={`Send deploy for ${row.vin}`}
size="small"
disabled={!isRedeployAvailable(row.status)}
>
<ReplayIcon fontSize="inherit" />
</IconButton>
</RoleWrap>
</TableCell>
</TableRow>

3
src/components/Controls/DropDownButton/index.jsx
View File

@@ -11,12 +11,13 @@ import {
} from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
const DropDownButton = ({ actions = [], payload = [] }) => {
const DropDownButton = ({ actions = [], payload = [], onClick = () => { } }) => {
const [open, setOpen] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(0);
const anchorRef = useRef(null);
const handleClick = () => {
onClick()
actions[selectedIndex].trigger(...payload);
};

42
src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
View File

@@ -145,47 +145,7 @@ exports[`FleetDetailsTab Render 1`] = `
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<div
aria-label="choose action"
class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
role="group"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Add Tags
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<button
aria-haspopup="menu"
aria-label="select action"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
data-testid="dropdown-button-expand"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m7 10 5 5 5-5z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
/>
</div>
<div />
</div>

42
src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
View File

@@ -153,47 +153,7 @@ exports[`DetailsTab Render 1`] = `
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<div
aria-label="choose action"
class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
role="group"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Add Tags
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<button
aria-haspopup="menu"
aria-label="select action"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
data-testid="dropdown-button-expand"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m7 10 5 5 5-5z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
/>
</div>
<div />
</div>

42
src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
View File

@@ -241,47 +241,7 @@ exports[`FleetStatus Render 1`] = `
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<div
aria-label="choose action"
class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
role="group"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Add Tags
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<button
aria-haspopup="menu"
aria-label="select action"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
data-testid="dropdown-button-expand"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m7 10 5 5 5-5z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
/>
</div>
<div />
</div>

4
src/components/Manifest/Status/index.jsx
View File

@@ -30,7 +30,7 @@ import { useLocalStorage } from "../../useLocalStorage";
import useStyles from "../../useStyles";
import ManifestDetails from "../Details";
import TableHeaderSortable from "../../Table/HeaderSortable";
import Toolbar from "../Toolbar";
import BulkActions from "../../BulkActions";
const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
@@ -191,7 +191,7 @@ const MainForm = () => {
<ManifestDetails />
</Grid>
<Grid item md={4} className={classes.textRightAlign}>
<Toolbar ids={ids} actions={["cancel"]} />
<BulkActions ids={ids} actions={["cancel", "redeploy"]} />
</Grid>
</Grid>
<Table>

53
src/components/Manifest/Toolbar/__snapshots__/index.test.jsx.snap
View File

@@ -1,53 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Toolbar Render 1`] = `
<div>
<div
data-testid="mocked-statusprovider"
>
<div
data-testid="mocked-userprovider"
>
<div
aria-label="choose action"
class="MuiButtonGroup-root MuiButtonGroup-contained css-zqcytf-MuiButtonGroup-root"
role="group"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Cancel Updates
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<button
aria-haspopup="menu"
aria-label="select action"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedContained MuiButtonGroup-groupedContainedHorizontal MuiButtonGroup-groupedContainedPrimary css-11qr2p8-MuiButtonBase-root-MuiButton-root"
data-testid="dropdown-button-expand"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m7 10 5 5 5-5z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
`;

71
src/components/Manifest/Toolbar/index.jsx
View File

@@ -1,71 +0,0 @@
import { useEffect, useState, useRef, Suspense, lazy } from "react";
import DropDownButton from "../../Controls/DropDownButton";
import { Modal } from "../../BulkActions/Modal";
import { useUserContext } from "../../Contexts/UserContext";
import { Permissions, hasRole } from "../../../utils/roles";
// Code-splitting individual actions
// https://react.dev/reference/react/lazy
const Cancel = lazy(() => import("./actions/Cancel"));
export default function Toolbar({
ids = [],
actions = [],
}) {
const [title, setTitle] = useState("Action");
const [open, setOpen] = useState(false);
const [active, setActive] = useState(null);
const activeRef = useRef();
const { groups, providers } = useUserContext();
const hasAccess = hasRole(groups, Permissions.FiskerMagnaCreate, providers);
const filteredActions = [
{
id: "cancel",
name: "Cancel Updates",
disabled: !hasAccess || ids.length <= 0,
trigger: () => {
setOpen(true);
setActive("cancel");
},
},
].filter((action) => actions.includes(action.id));
const payload = {
ids,
idCSV: ids.join(", "),
ref: activeRef
};
const handleClose = () => {
setOpen(false).then(() => setActive(null));
}
const handleSubmit = () => {
activeRef.current.submit();
handleClose();
}
useEffect(() => {
setTitle(filteredActions.find((action) => active === action.id)?.name || "Action");
}, [active, filteredActions]);
return (
<>
<DropDownButton actions={filteredActions} />
<Modal
title={title}
open={open}
close={handleClose}
submit={handleSubmit}
>
<Suspense fallback={<div>Loading...</div>}>
<section>
{active === "cancel" && <Cancel {...payload} />}
</section>
</Suspense>
</Modal>
</>
)
}

77
src/components/Manifest/Toolbar/index.test.jsx
View File

@@ -1,77 +0,0 @@
jest.mock("../../Contexts/UserContext");
jest.mock("../../Contexts/StatusContext");
import React from "react";
import {
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import { UserProvider, setToken } from "../../Contexts/UserContext";
import { StatusProvider } from "../../Contexts/StatusContext";
import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
import Toolbar from ".";
import addSnapshotSerializer from "../../../utils/snapshot";
describe("Toolbar", () => {
beforeAll(() => {
setToken(TEST_AUTH_OBJECT_FISKER);
global.URL.createObjectURL = jest.fn();
global.URL.revokeObjectURL = jest.fn();
addSnapshotSerializer(expect);
});
it("Render", async () => {
const { container } = render(
<StatusProvider>
<UserProvider>
<Toolbar
actions={["cancel"]}
ids={[1]}
/>
</UserProvider>
</StatusProvider>
);
await waitFor(() => {
/* render */
});
expect(container).toMatchSnapshot();
});
it("opens a modal", async () => {
render(
<StatusProvider>
<UserProvider>
<Toolbar
actions={["cancel"]}
ids={[1]}
/>
</UserProvider>
</StatusProvider>
);
const buttonEl = screen.getByText("Cancel Updates");
fireEvent.click(buttonEl);
const submitEl = screen.getByText("Submit");
expect(submitEl).toBeTruthy();
});
it("filters valid actions", async () => {
render(
<StatusProvider>
<UserProvider>
<Toolbar
actions={["cancel", "someInvalidAction"]}
ids={[1]}
/>
</UserProvider>
</StatusProvider>
);
const dropdownBtn = screen.getByTestId("dropdown-button-expand");
fireEvent.click(dropdownBtn);
const dropdownOptions = screen.getAllByRole("menuitem");
expect(dropdownOptions.length).toBe(1);
});
});

4
src/services/__mocks__/updatesAPI.js
View File

@@ -27,6 +27,10 @@ const updatesAPI = {
return { message: "OK" };
},
deployCarUpdate: async (id, token) => {
return { message: "OK" };
},
getSUMSVersions: async (token) => {
return {
"data": ["2023.02.01.0.0.A", "2023.02.01.0.0.B"]