(ui): Update Queue state when new list of groups is fetched

ui/src/reducers/queuesReducer.ts

@@ -1,3 +1,7 @@
+import {
+  GroupsActionTypes,
+  LIST_GROUPS_SUCCESS,
+} from "../actions/groupsActions";
 import {
   LIST_QUEUES_SUCCESS,
   LIST_QUEUES_BEGIN,
@@ -81,7 +85,7 @@ const initialState: QueuesState = { data: [], loading: false, error: "" };
 
 function queuesReducer(
   state = initialState,
-  action: QueuesActionTypes | TasksActionTypes
+  action: QueuesActionTypes | TasksActionTypes | GroupsActionTypes
 ): QueuesState {
   switch (action.type) {
     case LIST_QUEUES_BEGIN:
@@ -955,6 +959,22 @@ function queuesReducer(
       return { ...state, data: newData };
     }
 
+    case LIST_GROUPS_SUCCESS: {
+      const newData = state.data.map((queueInfo) => {
+        if (queueInfo.name !== action.queue) {
+          return queueInfo;
+        }
+        return {
+          ...queueInfo,
+          currentStats: {
+            ...queueInfo.currentStats,
+            groups: action.payload.groups.length,
+          },
+        };
+      });
+      return { ...state, data: newData };
+    }
+
     default:
       return state;
   }