Job navigation rewrite

src/views/catalog/CatalogBox.jsx

@@ -1,9 +1,13 @@
 import React, { useState, useContext } from "react";
-import { useNavigate } from "react-router-dom";
+
 import { usePipelineMappings } from "@qltr/queries";
 import StoreContext from "@qltr/store";
 import JobContext, { jobStatus } from "@qltr/jobs";
-import { useJobIconState, usePipelineIconState } from "@qltr/util/JobTools";
+import {
+  useJobIconState,
+  usePipelineIconState,
+  useJobNav,
+} from "@qltr/util/JobTools";
 
 import Accordion from "@mui/material/Accordion";
 import AccordionDetails from "@mui/material/AccordionDetails";
@@ -31,25 +35,23 @@ export default function CatalogBox(props) {
     pipeline,
   } = catalogTest;
 
-  const navigate = useNavigate();
   const { data: pipelineMappings, isLoading } = usePipelineMappings();
   const { state: store } = useContext(StoreContext);
-
   const { jobFactory } = useContext(JobContext);
-
+  const jobNav = useJobNav();
   const [open, setOpen] = useState(false);
 
   const toggleOpen = () => setOpen(!open);
 
   const navigateToJob = () => {
-    if (pipeline) return navigate(`/qualiteer/jobs#p${pipeline.id}`);
-    navigate(`/qualiteer/jobs#${job.jobId}`);
+    if (pipeline) return jobNav.toPipeline(pipeline.id);
+    jobNav.toJob(job.jobId);
   };
 
   const runTest = () => {
     if (isPipeline) return runPipelineTest();
     const jobId = jobFactory({ testNames: [testName], isTriage: true });
-    if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
+    if (store.focusJob) jobNav.toJob(jobId);
   };
 
   const runPipelineTest = () => {
@@ -67,7 +69,7 @@ export default function CatalogBox(props) {
       isTriage: true,
     };
     const pipeline = jobFactory(builderCache);
-    if (store.focusJob) navigate(`/qualiteer/jobs#p${pipeline.id}`);
+    if (store.focusJob) jobNav.toPipeline(pipeline.id);
   };
 
   const jobOnClick = (e) => {