Updated things for compound testing

src/Views.jsx

@@ -3,11 +3,7 @@ import StoreContext from "./ctx/StoreContext.jsx";
 import JobContext from "./ctx/JobContext.jsx";
 import Navbar from "./Navbar.jsx";
 
-import {
-  Routes,
-  Route,
-  Navigate,
-} from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";

src/views/Jobs.jsx

@@ -51,7 +51,7 @@ export default function Jobs() {
   const handleClickOpen = () => setJobDialogOpen(true);
 
   const [queued, setQueued] = useState([]);
-  useEffect(() => { }, [jobState.jobs, location]);
+  useEffect(() => {}, [jobState.jobs, location]);
 
   const handleClose = (confirmed) => () => {
     setJobDialogOpen(false);
@@ -61,11 +61,20 @@ export default function Jobs() {
 
   return (
     <div className="jobs">
-      {location.hash === "" && jobState.jobs.map((v, i) => (
-        <a key={i} href={`/jobs#${v.name}`} style={{ textDecoration: 'none' }}><JobBox job={v} /></a>
-      ))}
-      {jobState.jobs.find((job)=>job.name===location.hash.slice(1)) && (
-      <JobView job={jobState.jobs.find((job)=>job.name===location.hash.slice(1))}/>
+      {location.hash === "" &&
+        jobState.jobs.map((v, i) => (
+          <a
+            key={i}
+            href={`/jobs#${v.name}`}
+            style={{ textDecoration: "none" }}
+          >
+            <JobBox job={v} />
+          </a>
+        ))}
+      {jobState.jobs.find((job) => job.name === location.hash.slice(1)) && (
+        <JobView
+          job={jobState.jobs.find((job) => job.name === location.hash.slice(1))}
+        />
       )}
 
       <Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>

src/views/components/JobLogView.jsx

@@ -9,8 +9,15 @@ import Stack from "@mui/material/Stack";
 export default function JobLogView(props) {
   const { log } = props;
 
-  const LoadingDot = () => (<Skeleton variant="circular" width={16} height={16} sx={{backgroundColor:"rgb(240,240,240)"}}/>)
-  
+  const LoadingDot = () => (
+    <Skeleton
+      variant="circular"
+      width={16}
+      height={16}
+      sx={{ backgroundColor: "rgb(240,240,240)" }}
+    />
+  );
+
   return (
     <Box
       style={{
@@ -21,7 +28,7 @@ export default function JobLogView(props) {
       }}
     >
       {log.map((l, i) => (
-        <Box className="line" key={i} sx={{margin: ".25rem 0px"}}>
+        <Box className="line" key={i} sx={{ margin: ".25rem 0px" }}>
           <Typography
             variant="body2"
             component="div"
@@ -34,8 +41,8 @@ export default function JobLogView(props) {
                 margin: "0px 0.5rem",
                 color: "rgb(210,210,210)",
 
-                justifyContent:"center",
-                minWidth:"2rem"
+                justifyContent: "center",
+                minWidth: "2rem",
               }}
             >
               {i + 1}
@@ -50,10 +57,10 @@ export default function JobLogView(props) {
           </Typography>
         </Box>
       ))}
-      <Stack direction="row" spacing={1} sx={{mt:".5rem", ml:"0.75rem"}}>
-        <LoadingDot/>
-        <LoadingDot/>
-        <LoadingDot/>
+      <Stack direction="row" spacing={1} sx={{ mt: ".5rem", ml: "0.75rem" }}>
+        <LoadingDot />
+        <LoadingDot />
+        <LoadingDot />
       </Stack>
     </Box>
   );

src/views/components/JobView.jsx

@@ -15,18 +15,14 @@ export default function JobView(props) {
   const { job: initJob } = props;
   const [job, setJob] = useState({ log: [initJob.name] });
 
-  function retryJob(){
-    
-  }
-  
-  function downloadLog(){
-    
-  }
+  function retryJob() {}
 
-  function navigateToJobs(){
+  function downloadLog() {}
+
+  function navigateToJobs() {
     navigate("/jobs");
   }
-  
+
   function onLog(d) {
     const j = { ...job };
     j.log.push(d);
@@ -37,14 +33,21 @@ export default function JobView(props) {
     <Box>
       <AppBar
         position="fixed"
-        sx={{ backgroundColor: "rgba(0,0,0,0)", boxShadow: "none", color:"black" }}
-      ><Toolbar disableGutters />
-        <Box sx={{ flexGrow: 1, margin:"0 10px" }}>
-        <Toolbar disableGutters>
-          <Button onClick={navigateToJobs}>Back</Button>
-          <Typography variant="h6" sx={{ml:"auto", mr:"auto"}}>{initJob.name}</Typography>
-          <Button onClick={downloadLog}>Log</Button>
-          <Button onClick={retryJob}>Retry</Button>
+        sx={{
+          backgroundColor: "rgba(0,0,0,0)",
+          boxShadow: "none",
+          color: "black",
+        }}
+      >
+        <Toolbar disableGutters />
+        <Box sx={{ flexGrow: 1, margin: "0 10px" }}>
+          <Toolbar disableGutters>
+            <Button onClick={navigateToJobs}>Back</Button>
+            <Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
+              {initJob.name}
+            </Typography>
+            <Button onClick={downloadLog}>Log</Button>
+            <Button onClick={retryJob}>Retry</Button>
           </Toolbar>
         </Box>
       </AppBar>
@@ -59,7 +62,7 @@ export default function JobView(props) {
       >
         Hello{" "}
       </button>
-      
+
       <JobLogView log={job.log} />
     </Box>
   );