More styling and mocking

src/views/failing/Failing.jsx

@@ -1,13 +1,12 @@
 import { useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
+import {useCurrentlyFailing} from "../../Queries.jsx";
 import StoreContext from "../../ctx/StoreContext.jsx";
 import JobContext from "../../ctx/JobContext.jsx";
 import SilenceDialog from "../alerting/SilenceDialog.jsx";
 import FailingBox from "./FailingBox.jsx";
 
 import SpeedDial from "@mui/material/SpeedDial";
-import SpeedDialAction from "@mui/material/SpeedDialAction";
-import SpeedDialIcon from "@mui/material/SpeedDialIcon";
 
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -17,6 +16,9 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 
 import ReplayIcon from "@mui/icons-material/Replay";
+import Box from "@mui/material/Box";
+
+import Typography from "@mui/material/Typography";
 
 export default function Failing() {
   const { state: jobState, retryAll } = useContext(JobContext);
@@ -26,7 +28,7 @@ export default function Failing() {
     updateStore,
     silenceRequest,
   } = useContext(StoreContext);
-  const { failing } = store;
+  const {isLoading, data: failing} = useCurrentlyFailing();
 
   const [silenceEntry, setSilenceEntry] = useState({ open: false });
 
@@ -56,7 +58,7 @@ export default function Failing() {
 
   return (
     <div className="failing">
-      {failing.map((v, i) => (
+      {isLoading? null :failing.map((v, i) => (
         <FailingBox key={i} failingTest={v} silenceClick={editSilence(v)} />
       ))}
 
@@ -85,13 +87,24 @@ export default function Failing() {
         onClose={handleSilenceClose}
         silence={silenceEntry}
       />
+      {(failing ?? []).length === 0? (    <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Typography variant="h4">No tests failing!</Typography>
+      </Box>
+    
+      
+      ): null}
+      {(failing ?? []).length ===0? null :(
       <SpeedDial
         ariaLabel="Retry All"
         sx={{ position: "fixed", bottom: 16, right: 16 }}
         icon={<ReplayIcon />}
         onClick={retryAllClick}
         open={false}
-      />
+      />)}
     </div>
   );
 }