Stable Modification Point

src/views/Jobs.jsx

@@ -1,6 +1,15 @@
-import { useState, useContext } from "react";
+import { useState, useContext, useEffect } from "react";
 import StoreContext from "../ctx/StoreContext.jsx";
 import JobContext from "../ctx/JobContext.jsx";
+import JobBox from "./components/JobBox.jsx";
+import JobTestSelector from "./components/JobTestSelector.jsx";
+
+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 DialogTitle from "@mui/material/DialogTitle";
 
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import SpeedDial from "@mui/material/SpeedDial";
@@ -20,20 +29,50 @@ export default function Jobs() {
   } = useContext(JobContext);
 
   const { state: store, updateStore } = useContext(StoreContext);
-
   const [quickOpen, setQuickOpen] = useState(false);
-
-  const quickOpenClick = () => setQuickOpen(!quickOpen);
-  const quickOpenClose = () => setQuickOpen(false);
+  const [jobDialogOpen, setJobDialogOpen] = useState(false);
 
   const actions = [
     { name: "Suite", icon: <ViewCarouselIcon /> },
     { name: "Compound", icon: <ViewColumnIcon /> },
     { name: "Manual", icon: <PageviewIcon /> },
   ];
+  
+  const quickOpenClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if(!store.simplifiedControls) return setQuickOpen(!quickOpen);
+    setJobDialogOpen(true);
+  }
+  const quickOpenClose = () => setQuickOpen(false);
+
+
+  const handleClickOpen = () => setJobDialogOpen(true);
+  const handleClose = () => setJobDialogOpen(false);
+  const [queued, setQueued] = useState([]);
+  useEffect(() => {
+  }, [jobState.jobs]);
 
   return (
     <div className="jobs">
+      {jobState.jobs.map((v, i) => (
+        <JobBox key={i} job={v} />
+      ))}
+
+      <Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
+        <DialogTitle>New Job</DialogTitle>
+        <DialogContent>
+          <span>Some Selectors</span>
+          <JobTestSelector queued={queued} availableTests={store.catalog} setQueued={setQueued} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleClose} autoFocus>
+            Start
+          </Button>
+        </DialogActions>
+      </Dialog>
+
       <ClickAwayListener onClickAway={quickOpenClose}>
         <SpeedDial
           ariaLabel="New Job"
@@ -47,6 +86,7 @@ export default function Jobs() {
               key={action.name}
               icon={action.icon}
               tooltipTitle={action.name}
+              onClick={handleClickOpen}
             />
           ))}
         </SpeedDial>