Allow users to delete jobs (actually just hidden, they still appear i…

…n statistics, and can be recovered by an admin if necessary).

src/components/ConfirmationDialog.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+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";
+
+export default function AlertDialog(props) {
+  return (
+    <React.Fragment>
+      <Dialog open={props.open} onClose={() => props.onClose(false)}>
+        <DialogContent>
+          <DialogContentText>{props.content}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" color="error" onClick={() => props.onClose(false)}>
+            No
+          </Button>
+          <Button variant="contained" color="primary" onClick={() => props.onClose(true)} autoFocus>
+            Yes
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </React.Fragment>
+  );
+}

src/components/JobDetail.jsx

@@ -1,17 +1,18 @@
-import { useContext, useEffect } from "react";
-import { Link as RouterLink, useRevalidator } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
+import { Link as RouterLink, useRevalidator, useNavigate } from "react-router-dom";
 
 import { Box, IconButton, Tooltip, Typography } from "@mui/material";
 import {
   ArrowBack,
+  Delete as DeleteIcon,
   Launch as LaunchIcon,
   LocationOn as LocationOnIcon,
   DeveloperBoard as DeveloperBoardIcon,
   RestartAlt as RestartIcon,
 } from "@mui/icons-material";
 
 import { timeFormat, isEmpty, jobIsIncomplete } from "../utils";
-import { addTag, deleteTag } from "../datastore";
+import { addTag, deleteTag, hideJob } from "../datastore";
 import { AuthContext } from "../context";
 import StatusChip from "./StatusChip";
 import Panel from "./Panel";
@@ -21,11 +22,14 @@ import LogPanel from "./LogPanel";
 import CommentsPanel from "./CommentsPanel";
 import KeyValueTable from "./KeyValueTable";
 import TagDisplay from "./TagDisplay";
+import ConfirmationDialog from "./ConfirmationDialog";
 
 function JobDetail(props) {
   const { job, collab } = props;
   const revalidator = useRevalidator();
   const auth = useContext(AuthContext);
+  const navigate = useNavigate();
+  const [dialogOpen, setDialogOpen] = useState(false);
 
   useEffect(() => {
     if (jobIsIncomplete(job) && revalidator.state === "idle") {
@@ -57,18 +61,36 @@ function JobDetail(props) {
     }
   };
 
+  const handleRequestHideJob = () => {
+    setDialogOpen(true);
+  };
+
+  const handleConfirmHideJob = async (confirmed) => {
+    setDialogOpen(false);
+    if (confirmed) {
+      await hideJob(collab, job.id, auth);
+      navigate(`/${collab}/jobs/`);
+    }
+  };
+
   return (
     <Box sx={{ marginBottom: 6 }}>
       <Typography variant="h2" sx={{ mt: 3 }}>
         <IconButton component={RouterLink} to={`/${collab}/jobs/`} sx={{ mr: 1 }}>
           <ArrowBack />
         </IconButton>
         Job #{job.id} <StatusChip status={job.status} />
+        &nbsp;
         <Tooltip title="Create a new job based on this one">
           <IconButton component={RouterLink} to={`/${collab}/jobs/${job.id}/new`}>
             <RestartIcon />
           </IconButton>
         </Tooltip>
+        <Tooltip title="Delete this job">
+          <IconButton onClick={handleRequestHideJob}>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
       </Typography>
 
       <Typography variant="body2" sx={{ marginBottom: 3 }}>
@@ -124,6 +146,12 @@ function JobDetail(props) {
       <LogPanel jobId={job.id} />
 
       <CommentsPanel jobId={job.id} collab={collab} />
+
+      <ConfirmationDialog
+        open={dialogOpen}
+        onClose={handleConfirmHideJob}
+        content="Are you sure you wish to delete this job?"
+      />
     </Box>
   );
 }

src/datastore.js

@@ -127,6 +127,20 @@ async function createJob(collabId, jobData, auth) {
   }
 }
 
+async function hideJob(collabId, jobId, auth) {
+  const url = jobQueueServer + "/jobs/" + jobId;
+  let config = getRequestConfig(auth);
+  config.method = "DELETE";
+  const response = await fetch(url, config);
+  if (response.ok) {
+    // remove from cache
+    delete cache.jobs[collabId][jobId];
+    return "success";
+  } else {
+    throw new Error("hiding job was not successful");
+  }
+}
+
 async function getLog(jobId, auth) {
   if (!(jobId in cache.logs)) {
     let url = jobQueueServer + "/jobs/" + jobId + "/log";
@@ -309,6 +323,7 @@ export {
   queryTags,
   getJob,
   createJob,
+  hideJob,
   getLog,
   getComments,
   createComment,