More styling and mocking

src/views/jobs/Jobs.jsx

@@ -1,10 +1,12 @@
-import { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import JobContext from "../../ctx/JobContext.jsx";
 import JobBox from "./JobBox.jsx";
 import JobView from "./JobView.jsx";
 import JobBuilder from "./builder/JobBuilder.jsx";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 export default function Jobs() {
   const { state: jobState } = useContext(JobContext);
@@ -19,6 +21,26 @@ export default function Jobs() {
 
   return (
     <div className="jobs">
+      {jobState.jobs.length === 0? (
+      <React.Fragment>
+       <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+         sx={{flexFlow: "wrap"}}
+      >
+
+    <Typography variant="h4">No jobs found! </Typography> </Box>       
+      <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+         sx={{flexFlow: "wrap"}}
+      >  <Typography variant="h5">Click the '+' to start a new one!
+ </Typography>
+       </Box>
+        </React.Fragment>
+      ): null}
       <JobBuilder />
       {location.hash === "" &&
         jobState.jobs.map((v, i) => (

src/views/jobs/builder/PipelineConfirm.jsx

@@ -6,6 +6,7 @@ import DialogContent from "@mui/material/DialogContent";
 function PipelineConfirm(props) {
   const { cache, back, start } = props;
 
+  
   return (
     <React.Fragment>
       <DialogContent>

src/views/jobs/builder/PipelineSelector.jsx

@@ -1,6 +1,5 @@
 import React, { useContext } from "react";
-import StoreContext from "../../../ctx/StoreContext.jsx";
-
+import {usePipelineMappings} from "../../../Queries.jsx";
 import Button from "@mui/material/Button";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -12,14 +11,19 @@ import Stack from "@mui/material/Stack";
 
 function PipelineSelector(props) {
   const { cache, setCache, cancel, next } = props;
-  const { state: store } = useContext(StoreContext);
-  const { pipelineMappings } = store;
-  const primaryMappings = {};
+  const {isLoading, data: pipelineMappings} = usePipelineMappings();
+
+  const primaryMappings = () =>{
+    if(isLoading) return {};
+    const primaryMappings = {};
   for (var pm of pipelineMappings) {
     if (!(pm[0] in primaryMappings)) primaryMappings[pm[0]] = [];
     primaryMappings[pm[0]].push(pm);
   }
-
+  return primaryMappings;
+  };
+  
+  
   const selectPrimary = (primarySelectedMappings) => () => {
     setCache({ primarySelectedMappings });
   };
@@ -27,13 +31,13 @@ function PipelineSelector(props) {
   return (
     <React.Fragment>
       <DialogContent>
-        {Object.keys(primaryMappings).map((k, i) => (
+        {Object.keys(primaryMappings()).map((k, i) => (
           <Accordion
             expanded={false}
             disableGutters={true}
             square
             key={i}
-            onClick={selectPrimary(primaryMappings[k])}
+            onClick={selectPrimary(primaryMappings()[k])}
           >
             <AccordionSummary
               style={{
@@ -48,7 +52,7 @@ function PipelineSelector(props) {
               >
                 {k}
               </Typography>
-              <Stack sx={{ ml: "auto" }}>{primaryMappings[k].length}</Stack>
+              <Stack sx={{ ml: "auto" }}>{(primaryMappings[k] ?? []).length}</Stack>
             </AccordionSummary>
           </Accordion>
         ))}