feat: add device group subscription (#1198)

osmanhadzic · web-flow · commit adb91f4e5f70 · 2026-01-30T14:17:16.000+01:00
- add GraphQL subscription for device group creation and updates
- update tests to verify subscription functionality

Signed-off-by: Osman Hadzic &lt;osman.hadzic@secomind.com&gt;
diff --git a/backend/lib/edgehog/groups/device_group/device_group.ex b/backend/lib/edgehog/groups/device_group/device_group.ex
@@ -33,6 +33,14 @@ defmodule Edgehog.Groups.DeviceGroup do
     type :device_group
 
     # TODO: paginate `device` relationship with relay
+
+    subscriptions do
+      pubsub EdgehogWeb.Endpoint
+
+      subscribe :device_group do
+        action_types [:create, :update, :destroy]
+      end
+    end
   end
 
   actions do
diff --git a/backend/test/edgehog_web/schema/subscriptions/device_group/device_group_subscriptions_test.exs b/backend/test/edgehog_web/schema/subscriptions/device_group/device_group_subscriptions_test.exs
@@ -0,0 +1,102 @@
+#
+# This file is part of Edgehog.
+#
+# Copyright 2026 SECO Mind Srl
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+defmodule EdgehogWeb.Schema.Subscriptions.DeviceGroup.DeviceGroupSubscriptionsTest do
+  @moduledoc false
+  use EdgehogWeb.SubsCase
+
+  import Edgehog.GroupsFixtures
+
+  describe "DeviceGroup subscription" do
+    test "receive data on device group creation", %{socket: socket, tenant: tenant} do
+      subscribe(socket)
+
+      device_group = device_group_fixture(tenant: tenant)
+
+      assert_push "subscription:data", push
+
+      assert_created "deviceGroup", device_group_data, push
+
+      assert device_group_data["id"] == AshGraphql.Resource.encode_relay_id(device_group)
+      assert device_group_data["name"] == device_group.name
+      assert device_group_data["handle"] == device_group.handle
+      assert device_group_data["selector"] == device_group.selector
+    end
+
+    test "receive data on device group update", %{socket: socket, tenant: tenant} do
+      device_group = device_group_fixture(tenant: tenant)
+      subscribe(socket)
+
+      new_name = "new_name_#{System.unique_integer()}"
+
+      device_group
+      |> Ash.Changeset.for_update(:update, %{name: new_name})
+      |> Ash.update!(tenant: tenant)
+
+      assert_push "subscription:data", push
+      assert_updated "deviceGroup", device_group_data, push
+
+      assert device_group_data["id"] == AshGraphql.Resource.encode_relay_id(device_group)
+      assert device_group_data["name"] == new_name
+      assert device_group_data["handle"] == device_group.handle
+      assert device_group_data["selector"] == device_group.selector
+    end
+
+    test "receive data on device group destroy", %{socket: socket, tenant: tenant} do
+      device_group = device_group_fixture(tenant: tenant)
+      subscribe(socket)
+
+      Ash.destroy!(device_group, tenant: tenant)
+      assert_push "subscription:data", push
+      assert_destroyed("deviceGroup", device_group_id, push)
+
+      assert device_group_id == AshGraphql.Resource.encode_relay_id(device_group)
+    end
+  end
+
+  defp subscribe(socket, opts \\ []) do
+    default_sub_gql = """
+    subscription {
+      deviceGroup {
+        created {
+          id
+          name
+          handle
+          selector
+        }
+        updated {
+          id
+          name
+          handle
+          selector
+        }
+        destroyed
+      }
+    }
+    """
+
+    sub_gql = Keyword.get(opts, :query, default_sub_gql)
+
+    ref = push_doc(socket, sub_gql)
+    assert_reply ref, :ok, %{subscriptionId: subscription_id}
+
+    subscription_id
+  end
+end
diff --git a/backend/test/support/assertions.ex b/backend/test/support/assertions.ex
@@ -51,4 +51,18 @@ defmodule Edgehog.Assertions do
              } = var!(unquote(push))
     end
   end
+
+  defmacro assert_destroyed(query, destroyed_id, push) do
+    quote do
+      assert %{
+               result: %{
+                 data: %{
+                   unquote(query) => %{
+                     "destroyed" => var!(unquote(destroyed_id))
+                   }
+                 }
+               }
+             } = var!(unquote(push))
+    end
+  end
 end
diff --git a/frontend/src/api/schema.graphql b/frontend/src/api/schema.graphql
@@ -900,6 +900,12 @@ type LocalizedAttribute {
   languageTag: String!
 }
 
+type base_image_collection_result {
+  created: BaseImageCollection
+  updated: BaseImageCollection
+  destroyed: ID
+}
+
 "The result of the :delete_base_image_collection mutation"
 type DeleteBaseImageCollectionResult {
   "The record that was successfully deleted"
@@ -1092,6 +1098,12 @@ type BaseImageCollection implements Node {
   ): BaseImageConnection!
 }
 
+type base_image_result {
+  created: BaseImage
+  updated: BaseImage
+  destroyed: ID
+}
+
 "The result of the :delete_base_image mutation"
 type DeleteBaseImageResult {
   "The record that was successfully deleted"
@@ -4716,6 +4728,12 @@ type ForwarderConfig {
   secureSessions: Boolean!
 }
 
+type device_group_result {
+  created: DeviceGroup
+  updated: DeviceGroup
+  destroyed: ID
+}
+
 "The result of the :delete_device_group mutation"
 type DeleteDeviceGroupResult {
   "The record that was successfully deleted"
@@ -6411,10 +6429,22 @@ type RootMutationType {
 }
 
 type RootSubscriptionType {
+  deviceGroup(
+    "A filter to limit the results"
+    filter: DeviceGroupFilterInput
+  ): device_group_result
   deviceChanged(
     "A filter to limit the results"
     filter: DeviceFilterInput
   ): device_changed_result
+  baseImage(
+    "A filter to limit the results"
+    filter: BaseImageFilterInput
+  ): base_image_result
+  baseImageCollection(
+    "A filter to limit the results"
+    filter: BaseImageCollectionFilterInput
+  ): base_image_collection_result
 }
 
 """
diff --git a/frontend/src/components/DeviceGroupsTable.tsx b/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 {
+    deviceGroup {
+      created {
+        id
+        name
+        handle
+        selector
+      }
+    }
+  }
+`;
+
+const DEVICE_GROUP_UPDATED_SUBSCRIPTION = graphql`
+  subscription DeviceGroupsTable_deviceGroupEvent_updated_Subscription {
+    deviceGroup {
+      updated {
+        id
+        name
+        handle
+        selector
+      }
+    }
+  }
+`;
+
+const DEVICE_GROUP_DESTROYED_SUBSCRIPTION = graphql`
+  subscription DeviceGroupsTable_deviceGroupEvent_destroyed_Subscription {
+    deviceGroup {
+      destroyed
+    }
+  }
+`;
+
 type TableRecord = NonNullable<
   NonNullable<
     DeviceGroupsTable_DeviceGroupFragment$data["deviceGroups"]
@@ -122,6 +162,114 @@ const DeviceGroupsTable = ({
   >(DEVICE_GROUPS_TABLE_FRAGMENT, deviceGroupsRef);
   const [searchText, setSearchText] = useState<string | null>(null);
 
+  const normalizedSearchText = useMemo(
+    () => (searchText ?? "").trim(),
+    [searchText],
+  );
+
+  const connectionFilter = useMemo(() => {
+    if (normalizedSearchText === "") return undefined;
+
+    return {
+      or: [
+        { name: { ilike: `%${normalizedSearchText}%` } },
+        { handle: { ilike: `%${normalizedSearchText}%` } },
+        { selector: { ilike: `%${normalizedSearchText}%` } },
+      ],
+    };
+  }, [normalizedSearchText]);
+
+  useSubscription(
+    useMemo(
+      () => ({
+        subscription: DEVICE_GROUP_CREATED_SUBSCRIPTION,
+        variables: {},
+        updater: (store) => {
+          const groupEvent = store.getRootField("deviceGroup");
+          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, normalizedSearchText],
+    ),
+  );
+
+  useSubscription(
+    useMemo(
+      () => ({
+        subscription: DEVICE_GROUP_UPDATED_SUBSCRIPTION,
+        variables: {},
+      }),
+      [],
+    ),
+  );
+
+  useSubscription(
+    useMemo(
+      () => ({
+        subscription: DEVICE_GROUP_DESTROYED_SUBSCRIPTION,
+        variables: {},
+        updater: (store) => {
+          const groupEvent = store.getRootField("deviceGroup");
+          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 +301,9 @@ const DeviceGroupsTable = ({
 
   useEffect(() => {
     if (searchText !== null) {
-      debounceRefetch(searchText);
+      debounceRefetch(normalizedSearchText);
     }
-  }, [debounceRefetch, searchText]);
+  }, [debounceRefetch, normalizedSearchText, searchText]);
 
   const loadNextDeviceGroups = useCallback(() => {
     if (hasNext && !isLoadingNext) {
