Merge pull request #29328 from drodil/offset_pagination_filters

fix(catalog): reset offset on filter change in useEntityList

.changeset/twenty-forks-cheat.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fix offset pagination to reset when updating filters in `useEntityList`

plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx

@@ -23,7 +23,7 @@ import {
   identityApiRef,
   storageApiRef,
 } from '@backstage/core-plugin-api';
-import { TestApiProvider, mockApis } from '@backstage/test-utils';
+import { mockApis, TestApiProvider } from '@backstage/test-utils';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import qs from 'qs';
 import React, { PropsWithChildren } from 'react';
@@ -593,6 +593,7 @@ describe(`<EntityListProvider pagination={{ mode: 'offset' }} />`, () => {
       expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
         filter: { kind: 'component' },
         limit,
+        offset: 0,
         orderFields,
         fullTextFilter: {
           term: '2',
@@ -620,6 +621,7 @@ describe(`<EntityListProvider pagination={{ mode: 'offset' }} />`, () => {
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: { kind: 'component' },
       limit,
+      offset: 0,
       orderFields,
     });
   });
@@ -746,6 +748,7 @@ describe(`<EntityListProvider pagination={{ mode: 'offset' }} />`, () => {
       expect(mockCatalogApi.queryEntities).toHaveBeenNthCalledWith(2, {
         filter: { kind: 'api', 'spec.type': ['service'] },
         limit,
+        offset: 0,
         orderFields,
       });
     });

plugins/catalog-react/src/hooks/useEntityListProvider.tsx

@@ -379,14 +379,19 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>(
       // TODO(vinzscam): this is currently causing issues at page reload
       // where the state is not kept. Unfortunately we need to rethink
       // the way filters work in order to fix this.
-      setCursor(undefined);
+      if (paginationMode === 'cursor') {
+        setCursor(undefined);
+      } else if (paginationMode === 'offset') {
+        // Same thing with offset
+        setOffset(0);
+      }
       setRequestedFilters(prevFilters => {
         const newFilters =
           typeof update === 'function' ? update(prevFilters) : update;
         return { ...prevFilters, ...newFilters };
       });
     },
-    [],
+    [paginationMode],
   );
 
   const pageInfo = useMemo(() => {