feat: implement device group subscriptions

- implement GraphQL subscriptions for device group changes

Signed-off-by: Osman Hadzic <osman.hadzic@secomind.com>

Author: osmanhadzic

frontend/src/api/schema.graphql

@@ -4716,6 +4716,12 @@ type ForwarderConfig {
   secureSessions: Boolean!
 }
 
+type device_group_event_result {
+  created: DeviceGroup
+  updated: DeviceGroup
+  destroyed: ID
+}
+
 "The result of the :delete_device_group mutation"
 type DeleteDeviceGroupResult {
   "The record that was successfully deleted"
@@ -5005,6 +5011,15 @@ type Tag {
   name: String!
 }
 
+"The result of the :cancel_ota_operation mutation"
+type CancelOtaOperationResult {
+  "The successful result of the mutation"
+  result: OtaOperation
+
+  "Any errors generated, if the mutation failed"
+  errors: [MutationError!]!
+}
+
 "The result of the :create_manual_ota_operation mutation"
 type CreateManualOtaOperationResult {
   "The successful result of the mutation"
@@ -6261,6 +6276,9 @@ type RootMutationType {
     input: CreateManualOtaOperationInput!
   ): CreateManualOtaOperationResult
 
+  "Cancels an OTA update operation"
+  cancelOtaOperation(id: ID!): CancelOtaOperationResult
+
   "Creates a new device group."
   createDeviceGroup(input: CreateDeviceGroupInput!): CreateDeviceGroupResult
 
@@ -6399,6 +6417,10 @@ type RootMutationType {
 }
 
 type RootSubscriptionType {
+  deviceGroupEvent(
+    "A filter to limit the results"
+    filter: DeviceGroupFilterInput
+  ): device_group_event_result
   deviceChanged(
     "A filter to limit the results"
     filter: DeviceFilterInput

frontend/src/components/DeviceGroupsTable.tsx

@@ -20,9 +20,15 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
-import { graphql, usePaginationFragment } from "react-relay/hooks";
+import {
+  graphql,
+  usePaginationFragment,
+  useSubscription,
+} from "react-relay/hooks";
 import _ from "lodash";
 
+import { ConnectionHandler } from "relay-runtime";
+
 import type { DeviceGroupsTable_PaginationQuery } from "@/api/__generated__/DeviceGroupsTable_PaginationQuery.graphql";
 import type {
   DeviceGroupsTable_DeviceGroupFragment$data,
@@ -54,6 +60,40 @@ const DEVICE_GROUPS_TABLE_FRAGMENT = graphql`
   }
 `;
 
+const DEVICE_GROUP_CREATED_SUBSCRIPTION = graphql`
+  subscription DeviceGroupsTable_deviceGroupEvent_created_Subscription {
+    deviceGroupEvent {
+      created {
+        id
+        name
+        handle
+        selector
+      }
+    }
+  }
+`;
+
+const DEVICE_GROUP_UPDATED_SUBSCRIPTION = graphql`
+  subscription DeviceGroupsTable_deviceGroupEvent_updated_Subscription {
+    deviceGroupEvent {
+      updated {
+        id
+        name
+        handle
+        selector
+      }
+    }
+  }
+`;
+
+const DEVICE_GROUP_DESTROYED_SUBSCRIPTION = graphql`
+  subscription DeviceGroupsTable_deviceGroupEvent_destroyed_Subscription {
+    deviceGroupEvent {
+      destroyed
+    }
+  }
+`;
+
 type TableRecord = NonNullable<
   NonNullable<
     DeviceGroupsTable_DeviceGroupFragment$data["deviceGroups"]
@@ -122,6 +162,119 @@ const DeviceGroupsTable = ({
   >(DEVICE_GROUPS_TABLE_FRAGMENT, deviceGroupsRef);
   const [searchText, setSearchText] = useState<string | null>(null);
 
+  const normalizedSearchText = useMemo(
+    () => (searchText ?? "").trim(),
+    [searchText],
+  );
+
+  const currentFilter = useMemo(() => {
+    if (normalizedSearchText === "") return {};
+
+    return {
+      or: [
+        { name: { ilike: `%${normalizedSearchText}%` } },
+        { handle: { ilike: `%${normalizedSearchText}%` } },
+        { selector: { ilike: `%${normalizedSearchText}%` } },
+      ],
+    };
+  }, [normalizedSearchText]);
+
+  const connectionFilter = useMemo(
+    () => (normalizedSearchText === "" ? undefined : currentFilter),
+    [currentFilter, normalizedSearchText],
+  );
+
+  useSubscription(
+    useMemo(
+      () => ({
+        subscription: DEVICE_GROUP_CREATED_SUBSCRIPTION,
+        variables: {},
+        updater: (store) => {
+          const groupEvent = store.getRootField("deviceGroupEvent");
+          const newGroup = groupEvent?.getLinkedRecord("created");
+          if (!newGroup) return;
+
+          if (normalizedSearchText !== "") {
+            const search = normalizedSearchText.toLowerCase();
+            const name = String(newGroup.getValue("name") ?? "").toLowerCase();
+            const handle = String(
+              newGroup.getValue("handle") ?? "",
+            ).toLowerCase();
+            const selector = String(
+              newGroup.getValue("selector") ?? "",
+            ).toLowerCase();
+
+            if (
+              !name.includes(search) &&
+              !handle.includes(search) &&
+              !selector.includes(search)
+            ) {
+              return;
+            }
+          }
+
+          const connection = ConnectionHandler.getConnection(
+            store.getRoot(),
+            "DeviceGroupsTable_deviceGroups",
+            connectionFilter ? { filter: connectionFilter } : undefined,
+          );
+          if (!connection) return;
+
+          const newGroupId = newGroup.getDataID();
+          const edges = connection.getLinkedRecords("edges") ?? [];
+          const alreadyPresent = edges.some(
+            (edge) => edge.getLinkedRecord("node")?.getDataID() === newGroupId,
+          );
+          if (alreadyPresent) return;
+
+          const edge = ConnectionHandler.createEdge(
+            store,
+            connection,
+            newGroup,
+            "DeviceGroupEdge",
+          );
+
+          ConnectionHandler.insertEdgeBefore(connection, edge);
+        },
+      }),
+      [connectionFilter, currentFilter, normalizedSearchText],
+    ),
+  );
+
+  useSubscription(
+    useMemo(
+      () => ({
+        subscription: DEVICE_GROUP_UPDATED_SUBSCRIPTION,
+        variables: {},
+      }),
+      [],
+    ),
+  );
+
+  useSubscription(
+    useMemo(
+      () => ({
+        subscription: DEVICE_GROUP_DESTROYED_SUBSCRIPTION,
+        variables: {},
+        updater: (store) => {
+          const groupEvent = store.getRootField("deviceGroupEvent");
+          const destroyedId = groupEvent?.getValue("destroyed");
+          if (!destroyedId || typeof destroyedId !== "string") return;
+
+          const connection = ConnectionHandler.getConnection(
+            store.getRoot(),
+            "DeviceGroupsTable_deviceGroups",
+            connectionFilter ? { filter: connectionFilter } : undefined,
+          );
+          if (!connection) return;
+
+          ConnectionHandler.deleteNode(connection, destroyedId);
+        },
+      }),
+      [connectionFilter],
+    ),
+  );
+
   const debounceRefetch = useMemo(
     () =>
       _.debounce((text: string) => {
@@ -153,9 +306,9 @@ const DeviceGroupsTable = ({
 
   useEffect(() => {
     if (searchText !== null) {
-      debounceRefetch(searchText);
+      debounceRefetch(normalizedSearchText);
     }
-  }, [debounceRefetch, searchText]);
+  }, [debounceRefetch, normalizedSearchText, searchText]);
 
   const loadNextDeviceGroups = useCallback(() => {
     if (hasNext && !isLoadingNext) {