refactor(frontend): Restructure Application

- Refactor ReleasesTable and ApplicationDevicesTable into a stateless,
  presentational component
- Move Relay pagination, search, and filtering logic to Application page
- Centralize delete behavior and modal handling

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

Author: ArnelaL

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>
   );

frontend/src/components/DeleteReleaseModal.tsx

@@ -0,0 +1,111 @@
+// 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
+
+import { useCallback } from "react";
+import { FormattedMessage } from "react-intl";
+import { graphql, useMutation } from "react-relay";
+
+import type { DeleteReleaseModal_deleteRelease_Mutation } from "@/api/__generated__/DeleteReleaseModal_deleteRelease_Mutation.graphql";
+
+import DeleteModal from "./DeleteModal";
+
+const DELETE_RELEASE_MUTATION = graphql`
+  mutation DeleteReleaseModal_deleteRelease_Mutation($id: ID!) {
+    deleteRelease(id: $id) {
+      result {
+        id
+      }
+    }
+  }
+`;
+
+type Release = {
+  id: string;
+  version: string;
+};
+
+type DeleteReleaseModalProps<R extends Release> = {
+  releaseToDelete: R;
+  onCancel: () => void;
+  onConfirm: () => void;
+  setErrorFeedback: (errorMessages: React.ReactNode) => void;
+};
+const DeleteReleaseModal = <R extends Release>({
+  releaseToDelete,
+  onCancel,
+  onConfirm,
+  setErrorFeedback,
+}: DeleteReleaseModalProps<R>) => {
+  const [deleteRelease, isDeletingRelease] =
+    useMutation<DeleteReleaseModal_deleteRelease_Mutation>(
+      DELETE_RELEASE_MUTATION,
+    );
+
+  const handleDeleteRelease = useCallback(() => {
+    deleteRelease({
+      variables: { id: releaseToDelete.id },
+      onCompleted(data, errors) {
+        if (errors) {
+          const errorFeedback = errors
+            .map((error) => error.message)
+            .join(". \n");
+          return setErrorFeedback(errorFeedback);
+        }
+        setErrorFeedback(null);
+        return onConfirm();
+      },
+      onError() {
+        setErrorFeedback(
+          <FormattedMessage
+            id="components.DeleteReleaseModal.deletionErrorFeedback"
+            defaultMessage="Could not delete the release, please try again."
+          />,
+        );
+      },
+      updater(store, response) {
+        const deletedId = response?.deleteRelease?.result?.id;
+        if (!deletedId) return;
+
+        store.delete(deletedId);
+      },
+    });
+  }, [releaseToDelete, onConfirm, deleteRelease, setErrorFeedback]);
+
+  return (
+    <DeleteModal
+      confirmText={releaseToDelete.version || ""}
+      onCancel={onCancel}
+      onConfirm={handleDeleteRelease}
+      isDeleting={isDeletingRelease}
+      title={
+        <FormattedMessage
+          id="components.DeleteReleaseModal.deleteModal.title"
+          defaultMessage="Delete Release"
+        />
+      }
+    >
+      <p>
+        <FormattedMessage
+          id="components.ReleasesTable.deleteModal.description"
+          defaultMessage="This action cannot be undone. This will permanently delete the release."
+        />
+      </p>
+    </DeleteModal>
+  );
+};
+export default DeleteReleaseModal;