Prepared for Vite Migration

src/views/components/FailingBox.jsx

@@ -7,6 +7,13 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import Typography from "@mui/material/Typography";
 
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+
 import IconButton from "@mui/material/IconButton";
 import DeleteIcon from "@mui/icons-material/Delete";
 import NotificationsIcon from "@mui/icons-material/Notifications";
@@ -43,14 +50,23 @@ export default function FailingBox(props) {
     jobStatus: testJobStatus,
   } = failingTest;
 
-  const { state: jobState, retryTest, retryJobStatus } = useContext(JobContext);
+  const { state: jobState, retrySingle } = useContext(JobContext);
 
-  const { state: store, updateStore } = useContext(StoreContext);
+  const { state: store, updateStore, removeFailure } = useContext(StoreContext);
 
   const [open, setOpen] = useState(false);
-
   const toggleOpen = () => setOpen(!open);
 
+  const [removeOpen, setRemoveOpen] = useState(false);
+  const removeClick = () => setRemoveOpen(!removeOpen);
+
+  const handleRemoveClose = (confirmed) => (e) => {
+    stopPropagation(e);
+    setRemoveOpen(false);
+    if (!confirmed) return;
+    removeFailure(failingTest);
+  };
+
   function badgeColor() {
     if (dailyFails === 1) return "primary";
     else if (dailyFails === 2) return "secondary";
@@ -80,9 +96,11 @@ export default function FailingBox(props) {
   function Actions() {
     return (
       <React.Fragment>
-        <IconButton aria-label="photo" component="span">
-          <PhotoCameraIcon />
-        </IconButton>
+        <a href={screenshotUrl}>
+          <IconButton aria-label="photo" component="span">
+            <PhotoCameraIcon />
+          </IconButton>
+        </a>
 
         <IconButton aria-label="retry" component="span">
           {jobIcon()}
@@ -96,7 +114,12 @@ export default function FailingBox(props) {
         >
           <NotificationsIcon />
         </IconButton>
-        <IconButton color="error" aria-label="delete" component="span">
+        <IconButton
+          color="error"
+          aria-label="delete"
+          component="span"
+          onClick={removeClick}
+        >
           <DeleteIcon />
         </IconButton>
       </React.Fragment>
@@ -125,21 +148,52 @@ export default function FailingBox(props) {
             horizontal: "left",
           }}
         ></Badge>
+        <Badge
+          sx={{ mr: 2 }}
+          style={{ whiteSpace: "nowrap", left: "3.125rem" }}
+          badgeContent={new Date(timestamp).toLocaleTimeString("en-US")}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+          }}
+        ></Badge>
+        <Dialog
+          open={removeOpen}
+          onClose={handleRemoveClose()}
+          sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
+          maxWidth="xs"
+        >
+          <DialogTitle>Remove failure?</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              This will remove 1 test from the database
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleRemoveClose()}>Cancel</Button>
+            <Button onClick={handleRemoveClose(true)} autoFocus>
+              Yes
+            </Button>
+          </DialogActions>
+        </Dialog>
+
         <Typography component={"span"} style={{ wordBreak: "break-word" }}>
           {`${testClass}#`}
           <Box fontWeight="bold" display="inline">
             {testName}{" "}
           </Box>
           <br />
-          <span className="recent-results">
-            {recentResults.map(
-              (v, i) =>
-                (v && <CheckIcon key={i} color="success" />) || (
-                  <ClearIcon key={i} color="error" />
-                )
-            )}
-          </span>
-          {isCompound && <ViewColumnIcon />}
+          <div>
+            <span className="recent-results">
+              {recentResults.map(
+                (v, i) =>
+                  (v && <CheckIcon key={i} color="success" />) || (
+                    <ClearIcon key={i} color="error" />
+                  )
+              )}
+            </span>
+            {isCompound && <ViewColumnIcon />}
+          </div>
         </Typography>
 
         <Stack
@@ -153,8 +207,9 @@ export default function FailingBox(props) {
           direction="row"
           sx={{
             ml: "auto",
-                        mb: "auto",
+            mb: "auto",
             mt: "auto",
+            whiteSpace: "nowrap",
             display: { xs: "none", sm: "none", md: "block", lg: "block" },
           }}
         >