diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap index 08771e4..d5f2921 100644 --- a/src/components/App/__snapshots__/App.test.js.snap +++ b/src/components/App/__snapshots__/App.test.js.snap @@ -11444,6 +11444,16 @@ exports[`App Route /vehicle-status authenticated 1`] = ` :

+
+

+ + Tags + + : +

+
@@ -12198,7 +12208,7 @@ exports[`App Route /vehicles authenticated 1`] = ` class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2" >
+
+ + +
+ +
+
+

+ + Tags + + : +

+
diff --git a/src/components/Cars/Status/Details/index.jsx b/src/components/Cars/Status/Details/index.jsx index bb7d5d9..0f800a1 100644 --- a/src/components/Cars/Status/Details/index.jsx +++ b/src/components/Cars/Status/Details/index.jsx @@ -147,6 +147,11 @@ const MainForm = ({ vin }) => {

)} + +

+ Tags: {vehicle.tags} +

+
+
+

+ + Tags + + : +

+
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap index d28dffc..a4a0c43 100644 --- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap +++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap @@ -336,6 +336,16 @@ exports[`CarStatus Render 1`] = ` :

+
+

+ + Tags + + : +

+
diff --git a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap index 91efa90..ee2b41a 100644 --- a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap +++ b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap @@ -1006,6 +1006,43 @@ exports[`VehicleUpdate Render 1`] = `
+
+ +
+ + +
+
+ +
+ +`; diff --git a/src/components/Controls/DropDownButton/index.jsx b/src/components/Controls/DropDownButton/index.jsx new file mode 100644 index 0000000..77a5562 --- /dev/null +++ b/src/components/Controls/DropDownButton/index.jsx @@ -0,0 +1,109 @@ +import { useRef, useState } from "react"; +import { + Button, + ButtonGroup, + ClickAwayListener, + Grow, + MenuItem, + MenuList, + Paper, + Popper, +} from "@mui/material"; +import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; + +const DropDownButton = ({ actions = [], payload = [] }) => { + const [open, setOpen] = useState(false); + const [selectedIndex, setSelectedIndex] = useState(0); + const anchorRef = useRef(null); + + const handleClick = () => { + actions[selectedIndex].trigger(...payload); + }; + + const handleMenuItemClick = (event, index) => { + setSelectedIndex(index); + setOpen(false); + } + + const handleToggle = () => { + setOpen(open => !open); + }; + + const handleClose = (event) => { + if ( + anchorRef.current && + anchorRef.current.contains(event.target) + ) { + return; + } + + setOpen(false); + }; + + return ( + <> + + + + + + {({ TransitionProps, placement }) => ( + + + + + {actions.map((action, index) => ( + handleMenuItemClick(event, index)} + > + {action.name} + + ))} + + + + + )} + + + ) +} + +export default DropDownButton; \ No newline at end of file diff --git a/src/components/Controls/DropDownButton/index.test.jsx b/src/components/Controls/DropDownButton/index.test.jsx new file mode 100644 index 0000000..32de737 --- /dev/null +++ b/src/components/Controls/DropDownButton/index.test.jsx @@ -0,0 +1,80 @@ +import React from "react"; +import { fireEvent, render, waitFor, screen } from "@testing-library/react"; + +import DropDownButton from "."; +import addSnapshotSerializer from "../../../utils/snapshot"; + +describe("DropDownButton", () => { + beforeAll(() => { + addSnapshotSerializer(expect); + }); + + it("Render", async () => { + const actions = [ + { + name: "Action One", + disabled: false, + trigger: (paramOne, paramTwo) => {} + }, + { + name: "Action Two", + disabled: false, + trigger: (paramOne, paramTwo) => {} + }, + ]; + + const { container } = render( + + ); + await waitFor(() => { + /* render */ + }); + expect(container).toMatchSnapshot(); + }); + + it("properly disables an action", async () => { + const actions = [ + { + name: "Disabled Action", + disabled: true, + trigger: () => {} + }, + ]; + + const { getByText } = render( + + ); + await waitFor(() => { + /* render */ + }); + const buttonEl = getByText("Disabled Action"); + expect(buttonEl).toHaveProperty("disabled", true); + }); + + it("properly passes payload to callback", async () => { + const actions = [ + { + name: "Action One", + disabled: false, + trigger: jest.fn(), + }, + ]; + + render( + + ); + + const buttonEl = screen.getByText("Action One"); + fireEvent.click(buttonEl); + expect(actions[0].trigger).toHaveBeenCalledWith("somePayload", "somePayload2"); + }); +}); diff --git a/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap b/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap index 3cde435..156a9b6 100644 --- a/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap +++ b/src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap @@ -377,6 +377,42 @@ exports[`Render Render 1`] = ` +
+ +
+ + +
+
{ const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000)); const [selectedEndDate, setSelectedEndDate] = useState(new Date()); const [selectedECU, setSelectedECU] = useState(""); + const [selectedTroubleCode, setSelectedTroubleCode] = useState(""); const [gmtTimezone, setGmtTimezone] = useState(false); const [loading, setLoading] = useState(false); const { setMessage } = useStatusContext(); @@ -101,7 +102,7 @@ const MainForm = ({ vin }) => { offset: pageSize * pageIndex, order: `${orderBy} ${order}`, } - await getDTCData(vin, selectedECU, start_date, end_date, search, token); + await getDTCData(vin, selectedECU, selectedTroubleCode, start_date, end_date, search, token); // setDTCData(data); } catch (e) { setMessage(e.message); @@ -244,6 +245,21 @@ const MainForm = ({ vin }) => { setSelectedECU(e.target.value); }} /> + { + setSelectedTroubleCode(e.target.value); + }} + />
diff --git a/src/components/TransformModal/__snapshots__/index.test.jsx.snap b/src/components/TransformModal/__snapshots__/index.test.jsx.snap new file mode 100644 index 0000000..c2a5f3f --- /dev/null +++ b/src/components/TransformModal/__snapshots__/index.test.jsx.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TransformModal Render 1`] = ` +