feat: ⚡ validation refresh after model change

klarna-incubator · Oct 7, 2024 · 0afb5b7 · 0afb5b7
1 parent fd7d9a2
commit 0afb5b7
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 4 deletions.
diff --git a/api/src/ws/index.ts b/api/src/ws/index.ts
@@ -85,6 +85,7 @@ export function attachWebsocketServer(server: Server, dal: DataAccessLayer) {
     log.debug(`controls was updated via api ${modelId} ${componentId}`);
     if (!server) return;
     server.tellClientsToRefetch("controls", { modelId, componentId });
+    server.tellClientsToRefetch("validation", { modelId, componentId });
   });
 
   dal.controlService.on("deleted-for", ({ modelId, componentId }) => {
@@ -93,13 +94,15 @@ export function attachWebsocketServer(server: Server, dal: DataAccessLayer) {
     if (!server) return;
     server.tellClientsToRefetch("controls", { modelId, componentId });
     server.tellClientsToRefetch("mitigations", { modelId, componentId });
+    server.tellClientsToRefetch("validation", { modelId, componentId });
   });
 
   dal.threatService.on("updated-for", ({ modelId, componentId }) => {
     const server = wssRegistry.get(modelId);
     log.debug(`threats was updated via api ${modelId} ${componentId}`);
     if (!server) return;
     server.tellClientsToRefetch("threats", { modelId, componentId });
+    server.tellClientsToRefetch("validation", { modelId, componentId });
   });
 
   dal.threatService.on("deleted-for", ({ modelId, componentId }) => {
@@ -108,13 +111,15 @@ export function attachWebsocketServer(server: Server, dal: DataAccessLayer) {
     if (!server) return;
     server.tellClientsToRefetch("threats", { modelId, componentId });
     server.tellClientsToRefetch("mitigations", { modelId, componentId });
+    server.tellClientsToRefetch("validation", { modelId, componentId });
   });
 
   dal.mitigationService.on("updated-for", ({ modelId, componentId }) => {
     const server = wssRegistry.get(modelId);
     log.debug(`mitigations was updated via api ${modelId} ${componentId}`);
     if (!server) return;
     server.tellClientsToRefetch("mitigations", { modelId, componentId });
+    server.tellClientsToRefetch("validation", { modelId, componentId });
   });
 
   dal.reviewService.on("updated-for", ({ modelId }) => {
@@ -129,6 +134,7 @@ export function attachWebsocketServer(server: Server, dal: DataAccessLayer) {
     log.debug(`suggestions was updated for ${modelId}`);
     if (!server) return;
     server.tellClientsToRefetch("suggestions", { modelId });
+    server.tellClientsToRefetch("validation", { modelId });
   });
 
   dal.linkService.on("updated-for", ({ modelId, objectType, objectId }) => {

diff --git a/app/src/api/gram/api.js b/app/src/api/gram/api.js
@@ -21,6 +21,7 @@ export const api = createApi({
     "Threats",
     "User",
     "Links",
+    "Validation",
   ],
   baseQuery: fetchBaseQuery({
     baseUrl: `${BASE_URL}/api/v1/`,

diff --git a/app/src/components/model/panels/bottom/BottomPanel.js b/app/src/components/model/panels/bottom/BottomPanel.js
@@ -84,6 +84,7 @@ export function BottomPanel() {
             tab={tab}
             setTab={setTab}
             filteredResults={filteredResults}
+            isLoading={isLoading}
           />
         </>
       )}

diff --git a/app/src/components/model/panels/bottom/ValidationTab.js b/app/src/components/model/panels/bottom/ValidationTab.js
@@ -1,11 +1,11 @@
 import {
   Typography,
   Box,
-  Paper,
   List,
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  CircularProgress,
 } from "@mui/material";
 import DoneIcon from "@mui/icons-material/Done";
 import CloseIcon from "@mui/icons-material/Close";
@@ -74,20 +74,35 @@ function renderResults(results, setSelected, deselectAll, setTab) {
   });
 }
 
-export function ValidationTab({ tab, setTab, filteredResults }) {
+export function ValidationTab({ tab, setTab, filteredResults, isLoading }) {
   const setSelected = useSetSelected();
   const deselectAll = useDeselectAll();
   const selectedComponent = useSelectedComponent();
 
+  if (isLoading) {
+    return (
+      <Box
+        sx={{
+          height: 150,
+          width: "100%",
+          alignContent: "center",
+          justifyContent: "center",
+        }}
+      >
+        <CircularProgress size="3rem" />
+      </Box>
+    );
+  }
+
   return (
     <>
       {tab == 2 && !selectedComponent && (
         <Box
           sx={{
             height: 150,
             width: "100%",
-            alignItems: "center",
             justifyContent: "center",
+            alignContent: "center",
           }}
         >
           <Typography
@@ -105,7 +120,7 @@ export function ValidationTab({ tab, setTab, filteredResults }) {
           sx={{
             height: 150,
             width: "100%",
-            alignItems: "center",
+            alignContent: "center",
             justifyContent: "center",
           }}
         >

diff --git a/app/src/redux/middleware/webSocket.js b/app/src/redux/middleware/webSocket.js
@@ -157,6 +157,10 @@ function refetch(dispatch, event, modelId) {
       dispatch(api.util.invalidateTags(["Suggestions"]));
       break;
 
+    case "validation":
+      dispatch(api.util.invalidateTags(["Validation"]));
+      break;
+
     case "links":
       // dispatch(api.util.invalidateTags(["Links"]));
       // For some reason the below didn't work.