feat(frontend): add subscriptions for campaigns

- Added subscriptions to DeploymentCampaigns page
- Added subscriptions to DeploymentCampaign page
- Added subscriptions to UpdateCampaigns page
- Added subscriptions to UpdateCampaign page
- Added subscriptions to Channels page

Signed-off-by: ArnelaL <arnela.lisic@secomind.com>

Author: ArnelaL

frontend/src/api/schema.graphql

@@ -3662,6 +3662,12 @@ type Application implements Node {
   ): ReleaseConnection!
 }
 
+type system_model_part_number_result {
+  created: SystemModelPartNumber
+  updated: SystemModelPartNumber
+  destroyed: ID
+}
+
 enum SystemModelPartNumberSortField {
   ID
   PART_NUMBER
@@ -4004,6 +4010,12 @@ type SystemModel implements Node {
   localizedDescriptions(preferredLanguageTags: [String!]): [LocalizedAttribute!]
 }
 
+type hardware_type_part_number_result {
+  created: HardwareTypePartNumber
+  updated: HardwareTypePartNumber
+  destroyed: ID
+}
+
 enum HardwareTypePartNumberSortField {
   ID
   PART_NUMBER
@@ -4083,6 +4095,12 @@ type HardwareTypePartNumber {
   hardwareType: HardwareType
 }
 
+type hardware_type_result {
+  created: HardwareType
+  updated: HardwareType
+  destroyed: ID
+}
+
 "The result of the :delete_hardware_type mutation"
 type DeleteHardwareTypeResult {
   "The record that was successfully deleted"
@@ -5029,6 +5047,12 @@ type Tag {
   name: String!
 }
 
+type ota_operation_result {
+  created: OtaOperation
+  updated: OtaOperation
+  destroyed: ID
+}
+
 "The result of the :cancel_ota_operation mutation"
 type CancelOtaOperationResult {
   "The successful result of the mutation"
@@ -5275,6 +5299,12 @@ type TenantInfo {
   defaultLocale: String!
 }
 
+type channels_result {
+  created: Channel
+  updated: Channel
+  destroyed: ID
+}
+
 "The result of the :delete_channel mutation"
 type DeleteChannelResult {
   "The record that was successfully deleted"
@@ -5650,6 +5680,25 @@ type CampaignTarget {
   otaOperation: OtaOperation
 }
 
+type campaign_result {
+  updated: Campaign
+}
+
+type update_campaigns_result {
+  created: Campaign
+  updated: Campaign
+}
+
+type deployment_campaigns_result {
+  created: Campaign
+  updated: Campaign
+}
+
+type campaigns_result {
+  created: Campaign
+  updated: Campaign
+}
+
 "The result of the :resume_campaign mutation"
 type ResumeCampaignResult {
   "The successful result of the mutation"
@@ -6465,6 +6514,36 @@ type RootMutationType {
 }
 
 type RootSubscriptionType {
+  campaigns(
+    "A filter to limit the results"
+    filter: CampaignFilterInput
+  ): campaigns_result
+  deploymentCampaigns(
+    "A filter to limit the results"
+    filter: CampaignFilterInput
+
+    types: [String!]
+  ): deployment_campaigns_result
+  updateCampaigns(
+    "A filter to limit the results"
+    filter: CampaignFilterInput
+
+    types: [String!]
+  ): update_campaigns_result
+  campaign(
+    "A filter to limit the results"
+    filter: CampaignFilterInput
+
+    id: ID!
+  ): campaign_result
+  channels(
+    "A filter to limit the results"
+    filter: ChannelFilterInput
+  ): channels_result
+  otaOperation(
+    "A filter to limit the results"
+    filter: OtaOperationFilterInput
+  ): ota_operation_result
   deviceGroup(
     "A filter to limit the results"
     filter: DeviceGroupFilterInput
@@ -6473,6 +6552,18 @@ type RootSubscriptionType {
     "A filter to limit the results"
     filter: DeviceFilterInput
   ): device_changed_result
+  hardwareType(
+    "A filter to limit the results"
+    filter: HardwareTypeFilterInput
+  ): hardware_type_result
+  hardwareTypePartNumber(
+    "A filter to limit the results"
+    filter: HardwareTypePartNumberFilterInput
+  ): hardware_type_part_number_result
+  systemModelPartNumber(
+    "A filter to limit the results"
+    filter: SystemModelPartNumberFilterInput
+  ): system_model_part_number_result
   baseImage(
     "A filter to limit the results"
     filter: BaseImageFilterInput

frontend/src/components/DeploymentTargetsTable.tsx

@@ -45,6 +45,7 @@ const CAMPAIGN_TARGETS_TABLE_FRAGMENT = graphql`
           id
           name
         }
+        status
         retryCount
         latestAttempt
         completionTimestamp

frontend/src/pages/Channels.tsx

@@ -22,10 +22,12 @@ import { ErrorBoundary } from "react-error-boundary";
 import { FormattedMessage } from "react-intl";
 import type { PreloadedQuery } from "react-relay/hooks";
 import {
+  ConnectionHandler,
   graphql,
   usePaginationFragment,
   usePreloadedQuery,
   useQueryLoader,
+  useSubscription,
 } from "react-relay/hooks";
 
 import { Channels_ChannelsFragment$key } from "@/api/__generated__/Channels_ChannelsFragment.graphql";
@@ -67,6 +69,44 @@ const CHANNELS_FRAGMENT = graphql`
   }
 `;
 
+const CHANNEL_UPDATED_SUBSCRIPTION = graphql`
+  subscription Channels_channel_updated_Subscription {
+    channels {
+      updated {
+        id
+        name
+        handle
+        targetGroups {
+          edges {
+            node {
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const CHANNEL_CREATED_SUBSCRIPTION = graphql`
+  subscription Channels_channel_created_Subscription {
+    channels {
+      created {
+        id
+        name
+        handle
+        targetGroups {
+          edges {
+            node {
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
 interface ChannelsLayoutContainerProps {
   channelsData: Channels_getChannels_Query["response"];
   searchText: string | null;
@@ -81,46 +121,129 @@ const ChannelsLayoutContainer = ({
       Channels_ChannelsFragment$key
     >(CHANNELS_FRAGMENT, channelsData);
 
-  const debounceRefetch = useMemo(
-    () =>
-      _.debounce((text: string) => {
-        if (text === "") {
-          refetch(
-            {
-              first: RECORDS_TO_LOAD_FIRST,
+  const normalizedSearchText = useMemo(
+    () => (searchText ?? "").trim(),
+    [searchText],
+  );
+
+  const connectionFilter = useMemo(() => {
+    if (!normalizedSearchText) return {};
+
+    return {
+      or: [
+        { name: { ilike: `%${normalizedSearchText}%` } },
+        { handle: { ilike: `%${normalizedSearchText}%` } },
+        {
+          targetGroups: {
+            name: {
+              ilike: `%${normalizedSearchText}%`,
             },
-            { fetchPolicy: "network-only" },
+          },
+        },
+      ],
+    };
+  }, [normalizedSearchText]);
+
+  useSubscription(
+    useMemo(
+      () => ({
+        subscription: CHANNEL_UPDATED_SUBSCRIPTION,
+        variables: {},
+      }),
+      [],
+    ),
+  );
+
+  useSubscription(
+    useMemo(
+      () => ({
+        subscription: CHANNEL_CREATED_SUBSCRIPTION,
+        variables: {},
+        updater: (store) => {
+          const channelRoot = store.getRootField("channels");
+          const newChannel = channelRoot?.getLinkedRecord("created");
+          if (!newChannel) return;
+
+          if (normalizedSearchText !== "") {
+            const search = normalizedSearchText.toLowerCase();
+
+            const name = String(
+              newChannel.getValue("name") ?? "",
+            ).toLowerCase();
+
+            const handle = String(
+              newChannel.getValue("handle") ?? "",
+            ).toLowerCase();
+
+            const targetGroupsConnection =
+              newChannel.getLinkedRecord("targetGroups");
+
+            const targetGroupEdges =
+              targetGroupsConnection?.getLinkedRecords("edges") ?? [];
+
+            const matchesTargetGroup = targetGroupEdges.some((edge) => {
+              const node = edge?.getLinkedRecord("node");
+              const groupName = String(
+                node?.getValue("name") ?? "",
+              ).toLowerCase();
+
+              return groupName.includes(search);
+            });
+
+            const matchesText =
+              name.includes(search) ||
+              handle.includes(search) ||
+              matchesTargetGroup;
+
+            if (!matchesText) {
+              return;
+            }
+          }
+
+          const connection = ConnectionHandler.getConnection(
+            store.getRoot(),
+            "Channels_channels",
+            { filter: connectionFilter },
           );
-        } else {
-          refetch(
-            {
-              first: RECORDS_TO_LOAD_FIRST,
-              filter: {
-                or: [
-                  { name: { ilike: `%${text}%` } },
-                  { handle: { ilike: `%${text}%` } },
-                  {
-                    targetGroups: {
-                      name: {
-                        ilike: `%${text}%`,
-                      },
-                    },
-                  },
-                ],
-              },
-            },
-            { fetchPolicy: "network-only" },
+
+          if (!connection) return;
+          const newChannelId = newChannel.getDataID();
+
+          const edges = connection.getLinkedRecords("edges") ?? [];
+          const alreadyPresent = edges.some(
+            (edge) =>
+              edge.getLinkedRecord("node")?.getDataID() === newChannelId,
           );
-        }
-      }, 500),
-    [refetch],
+          if (alreadyPresent) return;
+
+          const edge = ConnectionHandler.createEdge(
+            store,
+            connection,
+            newChannel,
+            "ChannelEdge",
+          );
+
+          ConnectionHandler.insertEdgeAfter(connection, edge);
+        },
+      }),
+      [connectionFilter, normalizedSearchText],
+    ),
   );
 
   useEffect(() => {
-    if (searchText !== null) {
-      debounceRefetch(searchText);
-    }
-  }, [debounceRefetch, searchText]);
+    const handler = _.debounce(() => {
+      refetch(
+        { first: RECORDS_TO_LOAD_FIRST, filter: connectionFilter },
+        { fetchPolicy: "network-only" },
+      );
+    }, 500);
+
+    handler();
+
+    return () => {
+      handler.cancel();
+    };
+  }, [connectionFilter, refetch]);
 
   const loadNextChannels = useCallback(() => {
     if (hasNext && !isLoadingNext) {