wip[frontend]: add subscriptions for campaigns

- Added subscriptions to DeploymentCampaign page
- Added subscriptions to UpdateCampaign page

TODO:
- Add subscriptions to Channels and Channel page
- Add subscriptions to DeploymentCampaigns and UpdateCampaigns page
- figure out how to update Target Tabs component on DeploymentCampaign
and UpdateCampaign pages

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

Author: ArnelaL

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"
@@ -5005,6 +5017,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"
@@ -5239,6 +5260,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"
@@ -5450,6 +5477,11 @@ type Channel implements Node {
   ): CampaignConnection!
 }
 
+type campaign_target_changed_result {
+  created: CampaignTarget
+  updated: CampaignTarget
+}
+
 enum CampaignTargetSortField {
   ID
   STATUS
@@ -5614,6 +5646,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 :create_campaign mutation"
 type CreateCampaignResult {
   "The successful result of the mutation"
@@ -6261,6 +6312,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,10 +6453,48 @@ 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
+  campaignTargetChanged(
+    "A filter to limit the results"
+    filter: CampaignTargetFilterInput
+  ): campaign_target_changed_result
+  channels(
+    "A filter to limit the results"
+    filter: ChannelFilterInput
+  ): channels_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
 }
 
 """

frontend/src/pages/DeploymentCampaign.tsx

@@ -18,23 +18,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { Suspense, useCallback, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
 import { FormattedMessage } from "react-intl";
 import {
-  fetchQuery,
   graphql,
-  useFragment,
   usePreloadedQuery,
-  useRelayEnvironment,
   useQueryLoader,
+  useSubscription,
 } from "react-relay/hooks";
 import type { PreloadedQuery } from "react-relay/hooks";
-import type { Subscription } from "relay-runtime";
 
 import type { DeploymentCampaign_getCampaign_Query } from "@/api/__generated__/DeploymentCampaign_getCampaign_Query.graphql";
-import type { DeploymentCampaign_RefreshFragment$key } from "@/api/__generated__/DeploymentCampaign_RefreshFragment.graphql";
 
 import Center from "@/components/Center";
 import Col from "@/components/Col";
@@ -57,7 +53,6 @@ const GET_CAMPAIGN_QUERY = graphql`
       name
       ...DeploymentCampaignForm_CampaignFragment
       ...CampaignStatsChart_CampaignStatsChartFragment
-      ...DeploymentCampaign_RefreshFragment
       ...DeploymentTargetsTabs_SuccessfulFragment @arguments(first: $first)
       ...DeploymentTargetsTabs_FailedFragment @arguments(first: $first)
       ...DeploymentTargetsTabs_InProgressFragment @arguments(first: $first)
@@ -66,65 +61,21 @@ const GET_CAMPAIGN_QUERY = graphql`
   }
 `;
 
-const CAMPAIGN_REFRESH_FRAGMENT = graphql`
-  fragment DeploymentCampaign_RefreshFragment on Campaign {
-    id
-    status
-  }
-`;
-
-type DeploymentCampaignRefreshProps = {
-  campaignRef: DeploymentCampaign_RefreshFragment$key;
-};
-
-const DeploymentCampaignRefresh = ({
-  campaignRef,
-}: DeploymentCampaignRefreshProps) => {
-  const relayEnvironment = useRelayEnvironment();
-  const { id, status } = useFragment(CAMPAIGN_REFRESH_FRAGMENT, campaignRef);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-
-  // TODO: use GraphQL subscription (when available) to get deployments about Deployment Campaign
-  const subscriptionRef = useRef<Subscription | null>(null);
-  useEffect(() => {
-    return () => {
-      if (subscriptionRef.current) {
-        subscriptionRef.current.unsubscribe();
+const CAMPAIGN_UPDATE_SUBSCRIPTION = graphql`
+  subscription DeploymentCampaign_campaignUpdated_Subscription($id: ID!) {
+    campaign(id: $id) {
+      updated {
+        id
+        status
+        outcome
+        idleTargetCount
+        inProgressTargetCount
+        failedTargetCount
+        successfulTargetCount
       }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (status === "FINISHED" || isRefreshing) {
-      return;
     }
-    const refreshTimerId = setTimeout(() => {
-      setIsRefreshing(true);
-      subscriptionRef.current = fetchQuery(
-        relayEnvironment,
-        GET_CAMPAIGN_QUERY,
-        {
-          deploymentCampaignId: id,
-          first: RECORDS_TO_LOAD_FIRST,
-        },
-        { fetchPolicy: "network-only" },
-      ).subscribe({
-        complete: () => {
-          setIsRefreshing(false);
-        },
-        error: () => {
-          setIsRefreshing(false);
-        },
-      });
-    }, 10000);
-
-    return () => {
-      clearTimeout(refreshTimerId);
-    };
-  }, [id, status, relayEnvironment, isRefreshing, setIsRefreshing]);
-
-  return isRefreshing ? <Spinner className="ms-2 mx-auto" /> : null;
-};
+  }
+`;
 
 type DeploymentCampaignContentProps = {
   getCampaignQuery: PreloadedQuery<DeploymentCampaign_getCampaign_Query>;
@@ -157,9 +108,7 @@ const DeploymentCampaignContent = ({
 
   return (
     <Page>
-      <Page.Header title={campaign.name}>
-        <DeploymentCampaignRefresh campaignRef={campaign} />
-      </Page.Header>
+      <Page.Header title={campaign.name} />
       <Page.Main>
         <Row>
           <Col lg={9}>
@@ -179,6 +128,11 @@ const DeploymentCampaignContent = ({
 const DeploymentCampaignPage = () => {
   const { deploymentCampaignId = "" } = useParams();
 
+  useSubscription({
+    subscription: CAMPAIGN_UPDATE_SUBSCRIPTION,
+    variables: { id: deploymentCampaignId },
+  });
+
   const [getCampaignQuery, getCampaign] =
     useQueryLoader<DeploymentCampaign_getCampaign_Query>(GET_CAMPAIGN_QUERY);