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

CEC-425 Added Delete Verification Prompt (#198)

Browse Source 
Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>
This commit is contained in:
Alexander Andrews
2022-09-20 09:40:28 -04:00
committed by GitHub
parent 9c7a2b4577
commit 618cc68196
22 changed files with 692 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,6 +28,7 @@ exports[`FleetDetailsTab Render 1`] = `
Name
</b>
:
Test Fleet
</p>
<p>
<b>
@@ -91,13 +92,13 @@ exports[`FleetDetailsTab Render 1`] = `
>
<a
class=""
href="/fleet-update?name=undefined"
href="/fleet-update?name=Test Fleet"
style="margin: 5px;"
title="Update \\"undefined\\""
title="Update \\"Test Fleet\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"undefined\\""
aria-label="Update \\"Test Fleet\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -110,11 +111,11 @@ exports[`FleetDetailsTab Render 1`] = `
<a
class=""
href="/"
title="Delete \\"undefined\\""
title="Delete \\"Test Fleet\\""
>
<svg
aria-hidden="true"
aria-label="Delete \\"undefined\\""
aria-label="Delete \\"Test Fleet\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -126,6 +127,7 @@ exports[`FleetDetailsTab Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

5
src/components/Fleets/Status/Details/index.jsx
View File

@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
import useStyles from "../../../useStyles";
import { logger } from "../../../../services/monitoring";
import DeleteConfirmation from "../../../DeleteConfirmation";
const MainForm = ({ name }) => {
const classes = useStyles();
const { setMessage } = useStatusContext();
const { fleet, getFleet, deleteFleet } = useFleetContext();
const [redirect, setRedirect] = useState(null);
const [showDeleteModal, setShowDeleteModal] = useState(false)
const { token: { idToken: { jwtToken: token } } } = useUserContext();
useEffect(() => {
@@ -77,12 +79,13 @@ const MainForm = ({ name }) => {
</Link>
</Tooltip>
<Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
<Link to="#" onClick={onDelete}>
<Link to="#" onClick={() => setShowDeleteModal(true)}>
<DeleteIcon aria-label={`Delete "${name}"`} />
</Link>
</Tooltip>
</Grid>
</Grid>
<DeleteConfirmation message={name} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
</div >
);
};

8
src/components/Fleets/Status/Details/index.test.jsx
View File

@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import routeData from "react-router";
import { FleetProvider } from "../../../Contexts/FleetContext";
import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderFleetDetailsTab = async () => {
<StatusProvider>
<UserProvider>
<BrowserRouter>
<MainForm />
<MainForm name="Test Fleet"/>
</BrowserRouter>
</UserProvider>
</StatusProvider>
@@ -35,6 +36,11 @@ describe("FleetDetailsTab", () => {
addSnapshotSerializer(expect);
});
beforeEach(() => {
// Does not work if placed in beforeAll
jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Test Fleet" })
})
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderFleetDetailsTab();

105
src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
View File

@@ -153,23 +153,26 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345678\\""
>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345678"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
<div>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345678\\""
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345678"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
<tr
@@ -187,23 +190,26 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345679\\""
>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345679"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
<div>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345679\\""
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345679"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
<tr
@@ -221,23 +227,26 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345670\\""
>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345670"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
<div>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345670\\""
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345670"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
</tbody>

20
src/components/Fleets/Status/Vehicles/Table/index.jsx
View File

@@ -22,7 +22,8 @@ import useStyles from "../../../../useStyles";
import SearchField from "../../../../Controls/SearchField";
import { logger } from "../../../../../services/monitoring";
import { Roles, hasRole } from "../../../../../utils/roles";
import {useLocalStorage} from "../../../../useLocalStorage";
import { useLocalStorage } from "../../../../useLocalStorage";
import DeleteConfirmation from "../../../../DeleteConfirmation";
const tableColumns = [
{
@@ -43,6 +44,7 @@ const MainForm = ({ name }) => {
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("desc");
const [search, setSearch] = useState("");
const [showDeleteModal, setShowDeleteModal] = useState(false)
const classes = useStyles();
const { setMessage } = useStatusContext();
const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
@@ -132,11 +134,15 @@ const MainForm = ({ name }) => {
);
} else {
return (
<Tooltip key={`delete-${action.id}`} title={action.tip}>
<Link to="#" onClick={() => onDelete(action.id)}>
{action.icon}
</Link>
</Tooltip>
<div>
<Tooltip key={`delete-${action.id}`} title={action.tip}>
<Link to="#" onClick={() => onDelete(action.id)}>
{action.icon}
</Link>
</Tooltip>
<DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
</div>
);
}
});
@@ -151,7 +157,7 @@ const MainForm = ({ name }) => {
</Link>
</Grid>
<Grid item md={8} align="right" className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch}/>
<SearchField classes={classes} onSearch={handleSearch} />
</Grid>
</Grid>
<Table>

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

@@ -135,6 +135,7 @@ exports[`DetailsTab Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

105
src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
View File

@@ -152,23 +152,26 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345678\\""
>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345678"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
<div>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345678\\""
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345678"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
<tr
@@ -186,23 +189,26 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345679\\""
>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345679"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
<div>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345679\\""
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345679"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
<tr
@@ -220,23 +226,26 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345670\\""
>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345670"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
<div>
<a
class=""
href="/"
title="Delete \\"USWESTVIN12345670\\""
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<svg
aria-hidden="true"
aria-label="Delete USWESTVIN12345670"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
</tbody>

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

@@ -124,6 +124,7 @@ exports[`FleetStatus Render 1`] = `
Name
</b>
:
Fleet Name
</p>
<p>
<b>
@@ -187,13 +188,13 @@ exports[`FleetStatus Render 1`] = `
>
<a
class=""
href="/fleet-update?name=undefined"
href="/fleet-update?name=Fleet Name"
style="margin: 5px;"
title="Update \\"undefined\\""
title="Update \\"Fleet Name\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"undefined\\""
aria-label="Update \\"Fleet Name\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -206,11 +207,11 @@ exports[`FleetStatus Render 1`] = `
<a
class=""
href="/"
title="Delete \\"undefined\\""
title="Delete \\"Fleet Name\\""
>
<svg
aria-hidden="true"
aria-label="Delete \\"undefined\\""
aria-label="Delete \\"Fleet Name\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -222,6 +223,7 @@ exports[`FleetStatus Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

6
src/components/Fleets/Status/index.test.jsx
View File

@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import routeData from "react-router";
import { FleetProvider } from "../../Contexts/FleetContext";
import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("FleetStatus", () => {
addSnapshotSerializer(expect);
});
beforeEach(() => {
// Does not work if placed in beforeAll
jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Fleet Name" })
})
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderCarStatus();