refactor(frontend): refactor DeploymentTargetsTabs

Refactored DeploymentTargetsTabs to use one refetchable fragment
for campaignTargets, instead of four

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

Author: ArnelaL

frontend/src/components/DeploymentEventMessage.tsx

@@ -21,14 +21,16 @@
 import { useCallback, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { DeploymentTargetsTable_CampaignTargetsFragment$data } from "@/api/__generated__/DeploymentTargetsTable_CampaignTargetsFragment.graphql";
+import { DeploymentTargetsTable_CampaignTargetEdgeFragment$data } from "@/api/__generated__/DeploymentTargetsTable_CampaignTargetEdgeFragment.graphql";
 
 import CollapseItem from "@/components/CollapseItem";
 
 type DeploymentEventMessageProps = {
   event: NonNullable<
     NonNullable<
-      DeploymentTargetsTable_CampaignTargetsFragment$data[number]["deployment"]
+      NonNullable<
+        DeploymentTargetsTable_CampaignTargetEdgeFragment$data["edges"]
+      >[number]["node"]["deployment"]
     >["events"]["edges"]
   >[number]["node"];
 };

frontend/src/components/DeploymentTargetsTable.tsx

@@ -18,55 +18,62 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import _ from "lodash";
+import { useMemo } from "react";
 import { FormattedDate, FormattedMessage } from "react-intl";
 import { graphql, useFragment } from "react-relay/hooks";
 
 import type {
-  DeploymentTargetsTable_CampaignTargetsFragment$data,
-  DeploymentTargetsTable_CampaignTargetsFragment$key,
-} from "@/api/__generated__/DeploymentTargetsTable_CampaignTargetsFragment.graphql";
+  DeploymentTargetsTable_CampaignTargetEdgeFragment$data,
+  DeploymentTargetsTable_CampaignTargetEdgeFragment$key,
+} from "@/api/__generated__/DeploymentTargetsTable_CampaignTargetEdgeFragment.graphql";
 
-import { createColumnHelper } from "@/components/Table";
-import InfiniteTable from "@/components/InfiniteTable";
 import DeploymentEventMessage from "@/components/DeploymentEventMessage";
-import DeploymentStateComponent from "@/components/DeploymentState";
 import DeploymentReadiness from "@/components/DeploymentReadiness";
+import DeploymentStateComponent from "@/components/DeploymentState";
+import InfiniteTable from "@/components/InfiniteTable";
+import { createColumnHelper } from "@/components/Table";
 import { Link, Route } from "@/Navigation";
 
 // We use graphql fields below in columns configuration
 /* eslint-disable relay/unused-fields */
 const CAMPAIGN_TARGETS_TABLE_FRAGMENT = graphql`
-  fragment DeploymentTargetsTable_CampaignTargetsFragment on CampaignTarget
-  @relay(plural: true) {
-    device {
-      id
-      name
-    }
-    retryCount
-    latestAttempt
-    completionTimestamp
-    deployment {
-      state
-      isReady
-      events(
-        filter: { type: { eq: ERROR } }
-        sort: [{ field: INSERTED_AT, order: DESC }]
-        first: 1
-      ) {
-        edges {
-          node {
-            message
-            type
-            insertedAt
-            addInfo
+  fragment DeploymentTargetsTable_CampaignTargetEdgeFragment on CampaignTargetConnection {
+    edges {
+      node {
+        device {
+          id
+          name
+        }
+        retryCount
+        latestAttempt
+        completionTimestamp
+        deployment {
+          state
+          isReady
+          events(
+            filter: { type: { eq: ERROR } }
+            sort: [{ field: INSERTED_AT, order: DESC }]
+            first: 1
+          ) {
+            edges {
+              node {
+                message
+                type
+                insertedAt
+                addInfo
+              }
+            }
           }
         }
       }
     }
   }
 `;
 
-type TableRecord = DeploymentTargetsTable_CampaignTargetsFragment$data[number];
+type TableRecord = NonNullable<
+  NonNullable<DeploymentTargetsTable_CampaignTargetEdgeFragment$data>["edges"]
+>[number]["node"];
 const columnIds = [
   "deviceName",
   "state",
@@ -219,31 +226,34 @@ const columns = [
 type Props = {
   className?: string;
   hiddenColumns?: ColumnId[];
-  campaignTargetsRef: DeploymentTargetsTable_CampaignTargetsFragment$key;
-  isLoadingNext: boolean;
-  hasNext: boolean;
-  loadNextCampaignTargets: () => void;
+  campaignTargetsRef: DeploymentTargetsTable_CampaignTargetEdgeFragment$key;
+  loading?: boolean;
+  onLoadMore?: () => void;
 };
 
 const DeploymentTargetsTable = ({
   className,
   campaignTargetsRef,
   hiddenColumns = [],
-  isLoadingNext,
-  hasNext,
-  loadNextCampaignTargets,
+  loading = false,
+  onLoadMore,
 }: Props) => {
-  const campaignTargets = useFragment(
+  const campaignTargetsFragment = useFragment(
     CAMPAIGN_TARGETS_TABLE_FRAGMENT,
     campaignTargetsRef,
   );
+
+  const campaignTargets = useMemo<TableRecord[]>(() => {
+    return _.compact(campaignTargetsFragment?.edges?.map((e) => e?.node)) ?? [];
+  }, [campaignTargetsFragment]);
+
   return (
     <InfiniteTable
       className={className}
       columns={columns}
-      data={[...campaignTargets]}
-      loading={isLoadingNext}
-      onLoadMore={hasNext ? loadNextCampaignTargets : undefined}
+      data={campaignTargets}
+      loading={loading}
+      onLoadMore={onLoadMore}
       hiddenColumns={hiddenColumns}
       hideSearch
     />