feat(releases): show indexer name in indexer filter (#1720)

* feat(releases): show indexer name instead of identifier in releases indexer filter

* feat(releases): set correct types

* refactor(releases): show indexer name instead of identifier in releases indexer filter

* feat(releases): move listbox options back to render
feat(releases): fallback to identifier instead of showing unknown

web/src/api/queries.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { keepPreviousData, queryOptions } from "@tanstack/react-query";
+import { queryOptions } from "@tanstack/react-query";
 import { APIClient } from "@api/APIClient";
 import {
   ApiKeys,
@@ -133,8 +133,18 @@ export const ReleasesStatsQueryOptions = () =>
 export const ReleasesIndexersQueryOptions = () =>
   queryOptions({
     queryKey: ReleaseKeys.indexers(),
-    queryFn: () => APIClient.release.indexerOptions(),
+    queryFn: async () => {
-    placeholderData: keepPreviousData,
+      const indexersResponse: IndexerDefinition[] = await APIClient.indexers.getAll();
+      const indexerOptionsResponse: string[] = await APIClient.release.indexerOptions();
+      
+      const indexersMap = new Map(indexersResponse.map((indexer: IndexerDefinition) => [indexer.identifier, indexer.name]));
+      
+      return indexerOptionsResponse.map((identifier: string) => ({
+        name: indexersMap.get(identifier) || identifier,
+        identifier: identifier
+      }));
+    },
+    refetchOnWindowFocus: false,
     staleTime: Infinity
   });
 

web/src/screens/releases/ReleaseFilters.tsx

@@ -69,17 +69,20 @@ export const IndexerSelectColumnFilter = ({
 }: FilterProps<object>) => {
   const { data, isSuccess } = useQuery(ReleasesIndexersQueryOptions());
 
+  // Assign indexer name based on the filterValue (indexer.identifier)
+  const currentIndexerName = data?.find(indexer => indexer.identifier === filterValue)?.name ?? "Indexer";
+
   // Render a multi-select box
   return (
     <ListboxFilter
       id={id}
       key={id}
-      label={filterValue ?? "Indexer"}
+      label={currentIndexerName}
       currentValue={filterValue ?? ""}
       onChange={setFilter}
     >
       {isSuccess && data && data?.map((indexer, idx) => (
-        <FilterOption key={idx} label={indexer} value={indexer} />
+        <FilterOption key={idx} label={indexer.name} value={indexer.identifier} />
       ))}
     </ListboxFilter>
   );