refactor(frontend): Restructure BaseImageCollection

- Refactor BaseImagesTable into a stateless, presentational component
- Move Relay pagination, search, and filtering logic to
  BaseImageCollection page

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

Author: ArnelaL

frontend/src/components/BaseImagesTable.tsx

@@ -1,65 +1,55 @@
-/*
- * This file is part of Edgehog.
- *
- * Copyright 2023-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 2023-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, useEffect, useMemo, useState } from "react";
-import { FormattedMessage } from "react-intl";
-import { graphql, usePaginationFragment } from "react-relay/hooks";
 import _ from "lodash";
+import { useMemo } from "react";
+import { FormattedMessage } from "react-intl";
+import { graphql, useFragment } from "react-relay/hooks";
 
-import type { BaseImagesTable_PaginationQuery } from "@/api/__generated__/BaseImagesTable_PaginationQuery.graphql";
 import type {
-  BaseImagesTable_BaseImagesFragment$data,
-  BaseImagesTable_BaseImagesFragment$key,
-} from "@/api/__generated__/BaseImagesTable_BaseImagesFragment.graphql";
+  BaseImagesTable_BaseImageEdgeFragment$data,
+  BaseImagesTable_BaseImageEdgeFragment$key,
+} from "@/api/__generated__/BaseImagesTable_BaseImageEdgeFragment.graphql";
 
-import { createColumnHelper } from "@/components/Table";
 import InfiniteTable from "@/components/InfiniteTable";
+import { createColumnHelper } from "@/components/Table";
 import { Link, Route } from "@/Navigation";
-import { RECORDS_TO_LOAD_FIRST, RECORDS_TO_LOAD_NEXT } from "@/constants";
 
 // We use graphql fields below in columns configuration
 /* eslint-disable relay/unused-fields */
 const BASE_IMAGES_TABLE_FRAGMENT = graphql`
-  fragment BaseImagesTable_BaseImagesFragment on BaseImageCollection
-  @refetchable(queryName: "BaseImagesTable_PaginationQuery")
-  @argumentDefinitions(filter: { type: "BaseImageFilterInput" }) {
-    id
-    baseImages(first: $first, after: $after, filter: $filter)
-      @connection(key: "BaseImagesTable_baseImages") {
-      edges {
-        node {
-          id
-          version
-          startingVersionRequirement
-          localizedReleaseDisplayNames {
-            value
-            languageTag
-          }
+  fragment BaseImagesTable_BaseImageEdgeFragment on BaseImageConnection {
+    edges {
+      node {
+        id
+        version
+        startingVersionRequirement
+        localizedReleaseDisplayNames {
+          value
+          languageTag
         }
       }
     }
   }
 `;
 
 type TableRecord = NonNullable<
-  NonNullable<BaseImagesTable_BaseImagesFragment$data["baseImages"]>["edges"]
+  NonNullable<BaseImagesTable_BaseImageEdgeFragment$data>["edges"]
 >[number]["node"];
 
 const columnHelper = createColumnHelper<TableRecord>();
@@ -113,99 +103,40 @@ const getColumnsDefinition = (baseImageCollectionId: string) => [
 
 type Props = {
   className?: string;
-  baseImageCollectionRef: BaseImagesTable_BaseImagesFragment$key;
-  hideSearch?: boolean;
+  baseImagesRef: BaseImagesTable_BaseImageEdgeFragment$key;
+  baseImageCollectionId: string;
+  loading?: boolean;
+  onLoadMore?: () => void;
 };
 
 const BaseImagesTable = ({
   className,
-  baseImageCollectionRef,
-  hideSearch = false,
+  baseImagesRef,
+  baseImageCollectionId,
+  loading = false,
+  onLoadMore,
 }: Props) => {
-  const {
-    data: paginationData,
-    loadNext,
-    hasNext,
-    isLoadingNext,
-    refetch,
-  } = usePaginationFragment<
-    BaseImagesTable_PaginationQuery,
-    BaseImagesTable_BaseImagesFragment$key
-  >(BASE_IMAGES_TABLE_FRAGMENT, baseImageCollectionRef);
-
-  const [searchText, setSearchText] = useState<string | null>(null);
-
-  const columns = useMemo(
-    () => getColumnsDefinition(paginationData.id),
-    [paginationData.id],
+  const baseImagesFragment = useFragment(
+    BASE_IMAGES_TABLE_FRAGMENT,
+    baseImagesRef || null,
   );
+  const baseImages = useMemo<TableRecord[]>(() => {
+    return _.compact(baseImagesFragment?.edges?.map((e) => e?.node)) ?? [];
+  }, [baseImagesFragment]);
 
-  const debounceRefetch = useMemo(
-    () =>
-      _.debounce((text: string) => {
-        if (text === "") {
-          refetch(
-            {
-              first: RECORDS_TO_LOAD_FIRST,
-            },
-            { fetchPolicy: "network-only" },
-          );
-        } else {
-          refetch(
-            {
-              first: RECORDS_TO_LOAD_FIRST,
-              filter: {
-                or: [
-                  { version: { ilike: `%${text}%` } },
-                  { url: { ilike: `%${text}%` } },
-                  {
-                    startingVersionRequirement: {
-                      ilike: `%${text}%`,
-                    },
-                  },
-                ],
-              },
-            },
-            { fetchPolicy: "network-only" },
-          );
-        }
-      }, 500),
-    [refetch],
+  const columns = useMemo(
+    () => getColumnsDefinition(baseImageCollectionId),
+    [baseImageCollectionId],
   );
 
-  useEffect(() => {
-    if (searchText !== null) {
-      debounceRefetch(searchText);
-    }
-  }, [debounceRefetch, searchText]);
-
-  const loadNextBaseImageCollections = useCallback(() => {
-    if (hasNext && !isLoadingNext) {
-      loadNext(RECORDS_TO_LOAD_NEXT);
-    }
-  }, [hasNext, isLoadingNext, loadNext]);
-
-  const baseImages = useMemo(() => {
-    return (
-      paginationData.baseImages?.edges
-        ?.map((edge) => edge?.node)
-        .filter((node): node is TableRecord => node != null) ?? []
-    );
-  }, [paginationData]);
-
-  if (!paginationData.baseImages) {
-    return null;
-  }
-
   return (
     <InfiniteTable
       className={className}
       columns={columns}
       data={baseImages}
-      loading={isLoadingNext}
-      onLoadMore={hasNext ? loadNextBaseImageCollections : undefined}
-      setSearchText={setSearchText}
-      hideSearch={hideSearch}
+      loading={loading}
+      onLoadMore={onLoadMore}
+      hideSearch
     />
   );
 };