refactor(frontend): Restructure Pages and Table components

frontend/src/components/ApplicationDevicesTable.tsx

@@ -1,63 +1,58 @@
-/*
- * This file is part of Edgehog.
- *
- * Copyright 2025 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
- */
+// This file is part of Edgehog.
+//
+// Copyright 2025, 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
 
+import _ from "lodash";
+import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import { graphql, usePaginationFragment } from "react-relay/hooks";
+import { graphql, useFragment } from "react-relay/hooks";
 
-import type { ApplicationDevicesTable_PaginationQuery } from "@/api/__generated__/ApplicationDevicesTable_PaginationQuery.graphql";
 import type {
-  ApplicationDevicesTable_ReleaseFragment$data,
-  ApplicationDevicesTable_ReleaseFragment$key,
-} from "@/api/__generated__/ApplicationDevicesTable_ReleaseFragment.graphql";
+  ApplicationDevicesTable_ReleaseEdgeFragment$data,
+  ApplicationDevicesTable_ReleaseEdgeFragment$key,
+} from "@/api/__generated__/ApplicationDevicesTable_ReleaseEdgeFragment.graphql";
 
 import ConnectionStatus from "@/components/ConnectionStatus";
 import DeploymentStateComponent, {
   type DeploymentState,
 } from "@/components/DeploymentState";
-import Table, { createColumnHelper } from "@/components/Table";
+import { createColumnHelper } from "@/components/Table";
 import { Link, Route } from "@/Navigation";
+import InfiniteTable from "./InfiniteTable";
 
 // We use graphql fields below in columns configuration
 /* eslint-disable relay/unused-fields */
 const APPLICATION_DEVICES_TABLE_FRAGMENT = graphql`
-  fragment ApplicationDevicesTable_ReleaseFragment on Application
-  @refetchable(queryName: "ApplicationDevicesTable_PaginationQuery")
-  @argumentDefinitions(filter: { type: "ReleaseFilterInput" }) {
-    releases(first: $first, after: $after, filter: $filter)
-      @connection(key: "ApplicationDevicesTable_releases") {
-      edges {
-        node {
-          deployments {
-            edges {
-              node {
+  fragment ApplicationDevicesTable_ReleaseEdgeFragment on ReleaseConnection {
+    edges {
+      node {
+        deployments {
+          edges {
+            node {
+              id
+              state
+              isReady
+              device {
                 id
-                state
-                isReady
-                device {
-                  id
-                  name
-                  online
-                }
-                release {
-                  version
-                }
+                name
+                online
+              }
+              release {
+                version
               }
             }
           }
@@ -68,7 +63,7 @@ const APPLICATION_DEVICES_TABLE_FRAGMENT = graphql`
 `;
 
 type ReleaseRecord = NonNullable<
-  ApplicationDevicesTable_ReleaseFragment$data["releases"]["edges"]
+  ApplicationDevicesTable_ReleaseEdgeFragment$data["edges"]
 >[number]["node"];
 
 type TableRecord = NonNullable<
@@ -77,28 +72,30 @@ type TableRecord = NonNullable<
 
 type ApplicationDevicesTableProps = {
   className?: string;
-  applicationDevicesRef: ApplicationDevicesTable_ReleaseFragment$key;
-  hideSearch?: boolean;
+  applicationDevicesRef: ApplicationDevicesTable_ReleaseEdgeFragment$key;
+  loading?: boolean;
+  onLoadMore?: () => void;
 };
 
 const ApplicationDevicesTable = ({
   className,
   applicationDevicesRef,
-  hideSearch = false,
+  loading = false,
+  onLoadMore,
 }: ApplicationDevicesTableProps) => {
-  const { data } = usePaginationFragment<
-    ApplicationDevicesTable_PaginationQuery,
-    ApplicationDevicesTable_ReleaseFragment$key
-  >(APPLICATION_DEVICES_TABLE_FRAGMENT, applicationDevicesRef);
+  const applicationDevicesFragment = useFragment(
+    APPLICATION_DEVICES_TABLE_FRAGMENT,
+    applicationDevicesRef || null,
+  );
+  const releases = useMemo<ReleaseRecord[]>(() => {
+    return (
+      _.compact(applicationDevicesFragment?.edges?.map((e) => e?.node)) ?? []
+    );
+  }, [applicationDevicesFragment]);
 
-  const releasesData =
-    data.releases.edges?.map((edge) => ({
-      deployments:
-        edge.node.deployments.edges?.map(
-          (deploymentEdge) => deploymentEdge.node,
-        ) ?? [],
-    })) ?? [];
-  const tableData = releasesData.flatMap((release) => release.deployments);
+  const tableData = releases.flatMap(
+    (release) => release.deployments?.edges?.map((edge) => edge.node) ?? [],
+  );
 
   const columnHelper = createColumnHelper<TableRecord>();
   const columns = [
@@ -158,11 +155,13 @@ const ApplicationDevicesTable = ({
 
   return (
     <div>
-      <Table
+      <InfiniteTable
         className={className}
         columns={columns}
         data={tableData}
-        hideSearch={hideSearch}
+        loading={loading}
+        onLoadMore={onLoadMore}
+        hideSearch
       />
     </div>
   );