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

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>
`;

55
src/components/Manifest/Toolbar/actions/Cancel.jsx
View File

@@ -1,55 +0,0 @@
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.cancelCarUpdate(id, token)
.then((response) => {
if (response.error) {
errorCount += 1;
setMessage(`${progressMessage} ${response.error}: ${response.message}`);
} else {
setMessage(`${progressMessage} Canceled 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 canceled ${completeMessage} updates.`);
resolve(responses);
});
});
},
}));
return (
<div>
<p>
You are canceling the following updates: {idCSV}.
</p>
</div>
);
});

40
src/components/Manifest/Toolbar/actions/Cancel.test.jsx
View File

@@ -1,40 +0,0 @@
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 Cancel from "./Cancel";
import updatesAPI from "../../../../services/updatesAPI";
describe("Manifest/Cancel", () => {
beforeAll(() => {
setToken(TEST_AUTH_OBJECT_FISKER);
});
it("makes request to cancel an update", async () => {
const api = jest.spyOn(updatesAPI, "cancelCarUpdate");
const ref = React.createRef();
render(
<StatusProvider>
<UserProvider>
<Cancel
ref={ref}
ids={["1", "2", "3"]}
idCSV=""
/>
</UserProvider>
</StatusProvider>
);
await act(async () => ref.current.submit());
expect(api).toHaveBeenCalledTimes(3);
});
});

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);
});
});