Refactor and more linking

src/views/catalog/CatalogBox.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import { usePipelineMappings } from "../../Queries.jsx";
-import StoreContext from "../../ctx/StoreContext.jsx";
-import JobContext from "../../ctx/JobContext.jsx";
+import { usePipelineMappings } from "@qltr/queries";
+import StoreContext from "@qltr/store";
+import JobContext, { jobStatus } from "@qltr/jobs";
+import { useJobIconState, usePipelineIconState } from "@qltr/util/JobTools";
 
 import Accordion from "@mui/material/Accordion";
 import AccordionDetails from "@mui/material/AccordionDetails";
@@ -11,15 +12,11 @@ import Typography from "@mui/material/Typography";
 
 import IconButton from "@mui/material/IconButton";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
 
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
-import {
-  selectBranch,
-  asTree,
-  asBranches,
-  as1d,
-} from "../../../lib/jobs/pipelines.js";
+import { asTree, asBranches, as1d } from "@qltr/util/pipelines.js";
 
 export default function CatalogBox(props) {
   const { catalogTest } = props;
@@ -30,24 +27,28 @@ export default function CatalogBox(props) {
     repo: testRepo,
     isPipeline,
     type: testType,
+    job,
+    pipeline,
   } = catalogTest;
 
   const navigate = useNavigate();
   const { data: pipelineMappings, isLoading } = usePipelineMappings();
-  const { state: store, updateStore } = useContext(StoreContext);
+  const { state: store } = useContext(StoreContext);
 
-  const { state: jobState, jobFactory } = useContext(JobContext);
+  const { jobFactory } = useContext(JobContext);
 
   const [open, setOpen] = useState(false);
 
   const toggleOpen = () => setOpen(!open);
 
-  const runTest = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    console.log(catalogTest);
+  const navigateToJob = () => {
+    if (pipeline) return navigate(`/qualiteer/jobs#p${pipeline.id}`);
+    navigate(`/qualiteer/jobs#${job.jobId}`);
+  };
+
+  const runTest = () => {
     if (isPipeline) return runPipelineTest();
-    const jobId = jobFactory({ testNames: [testName] });
+    const jobId = jobFactory({ testNames: [testName], isTriage: true });
     if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
   };
 
@@ -63,6 +64,20 @@ export default function CatalogBox(props) {
     if (store.focusJob) navigate(`/qualiteer/jobs#p${pipeline.id}`);
   };
 
+  const jobOnClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (pipeline) return navigateToJob();
+    if (!job) return runTest();
+    navigateToJob();
+  };
+
+  function jobIcon() {
+    if (pipeline) return usePipelineIconState(pipeline);
+    if (!job) return <PlayArrowIcon />;
+    return useJobIconState(job);
+  }
+
   function Actions() {
     return (
       <React.Fragment>
@@ -70,9 +85,9 @@ export default function CatalogBox(props) {
           color="success"
           aria-label="play"
           component="span"
-          onClick={runTest}
+          onClick={jobOnClick}
         >
-          <PlayArrowIcon />
+          {jobIcon()}
         </IconButton>
       </React.Fragment>
     );
@@ -98,6 +113,11 @@ export default function CatalogBox(props) {
           {`${testClass}#`}
           <Box fontWeight="bold" display="inline">
             {testName}
+            {isPipeline && (
+              <IconButton component="span">
+                <ViewColumnIcon />
+              </IconButton>
+            )}
           </Box>
           <br />
         </Typography>
@@ -119,7 +139,7 @@ export default function CatalogBox(props) {
       </AccordionSummary>
       <AccordionDetails>
         <Typography component={"span"} style={{ wordBreak: "break-word" }}>
-          {JSON.stringify(catalogTest)}
+          {"Test info"}
         </Typography>
       </AccordionDetails>
     </Accordion>