Add configurable collections page size with localStorage persistence (#297)

src/pages/Collections.jsx

@@ -1,7 +1,18 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useClient } from '../context/client-context';
 import SearchBar from '../components/Collections/SearchBar';
-import { Typography, Grid, Pagination, Box, Skeleton, IconButton, Tooltip } from '@mui/material';
+import {
+  Typography,
+  Grid,
+  Pagination,
+  Box,
+  Skeleton,
+  IconButton,
+  Tooltip,
+  Select,
+  MenuItem,
+  FormControl,
+} from '@mui/material';
 import { keyframes } from '@mui/material/styles';
 import { RefreshCw } from 'lucide-react';
 import ErrorNotifier from '../components/ToastNotifications/ErrorNotifier';
@@ -13,11 +24,20 @@ import { debounce } from 'lodash';
 import { useMaxCollections } from '../context/telemetry-context';
 import CreateCollectionButton from '../components/Collections/CreateCollection/CreateCollectionButton';
 
+const PAGE_SIZE_STORAGE_KEY = 'qdrant-web-ui-collections-page-size';
+const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+const DEFAULT_PAGE_SIZE = PAGE_SIZE_OPTIONS[0];
+
 const spin = keyframes`
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 `;
 
+function getInitialPageSize() {
+  const stored = Number(localStorage.getItem(PAGE_SIZE_STORAGE_KEY));
+  return PAGE_SIZE_OPTIONS.includes(stored) ? stored : DEFAULT_PAGE_SIZE;
+}
+
 function Collections() {
   const [rawCollections, setRawCollections] = useState(null);
   const [collections, setCollections] = useState(null);
@@ -27,7 +47,14 @@ function Collections() {
   const [isRefreshing, setIsRefreshing] = useState(false);
   const { client: qdrantClient } = useClient();
   const [currentPage, setCurrentPage] = useState(1);
-  const PAGE_SIZE = 5;
+  const [pageSize, setPageSize] = useState(getInitialPageSize);
+
+  const handlePageSizeChange = (event) => {
+    const newSize = event.target.value;
+    setPageSize(newSize);
+    localStorage.setItem(PAGE_SIZE_STORAGE_KEY, String(newSize));
+    setCurrentPage(1);
+  };
 
   const { maxCollections } = useMaxCollections();
 
@@ -47,7 +74,7 @@ function Collections() {
         const sortedCollections = allCollections.collections.sort((a, b) => a.name.localeCompare(b.name));
         setCollections(sortedCollections);
 
-        const nextPageCollections = sortedCollections.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+        const nextPageCollections = sortedCollections.slice((page - 1) * pageSize, page * pageSize);
 
         const nextRawCollections = await Promise.all(
           nextPageCollections.map(async (collection) => {
@@ -71,7 +98,7 @@ function Collections() {
         setRawCollections(null);
       }
     },
-    [qdrantClient, getErrorMessageWithApiKey]
+    [qdrantClient, getErrorMessageWithApiKey, pageSize]
   );
 
   const getFilteredCollectionsCall = useCallback(
@@ -101,22 +128,28 @@ function Collections() {
     [collections, qdrantClient, getErrorMessageWithApiKey]
   );
 
-  useEffect(() => {
-    getCollectionsCall(currentPage);
-  }, [currentPage, getCollectionsCall]);
+  const debouncedGetFilteredCollectionsCall = useMemo(
+    () => debounce(getFilteredCollectionsCall, 100),
+    [getFilteredCollectionsCall]
+  );
 
   useEffect(() => {
     if (!searchQuery) {
       getCollectionsCall(currentPage);
-    } else {
-      debouncedGetFilteredCollectionsCall(searchQuery);
     }
   }, [searchQuery, currentPage, getCollectionsCall]);
 
-  const debouncedGetFilteredCollectionsCall = useMemo(
-    () => debounce(getFilteredCollectionsCall, 100),
-    [getFilteredCollectionsCall]
-  );
+  useEffect(() => {
+    if (!searchQuery) {
+      return;
+    }
+
+    debouncedGetFilteredCollectionsCall(searchQuery);
+
+    return () => {
+      debouncedGetFilteredCollectionsCall.cancel();
+    };
+  }, [searchQuery, debouncedGetFilteredCollectionsCall]);
 
   const handleRefresh = useCallback(async () => {
     setIsRefreshing(true);
@@ -187,12 +220,25 @@ function Collections() {
             </Typography>
           </Grid>
           <Grid
-            sx={{ display: 'flex', justifyContent: { md: 'end' }, gap: 2 }}
+            sx={{ display: 'flex', justifyContent: { md: 'end' }, gap: 2, alignItems: 'center' }}
             size={{
               xs: 12,
               md: 7,
             }}
           >
+            <FormControl size="small" sx={{ minWidth: 80 }}>
+              <Select
+                value={pageSize}
+                onChange={handlePageSizeChange}
+                inputProps={{ 'aria-label': 'Collections per page' }}
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <MenuItem key={size} value={size}>
+                    {size}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
             <CreateCollectionButton onComplete={() => getCollectionsCall(currentPage)} />
             <SnapshotsUpload onComplete={() => getCollectionsCall(currentPage)} key={'snapshots'} />
           </Grid>
@@ -226,11 +272,11 @@ function Collections() {
                 refreshCollection={refreshCollection}
                 isRefreshing={isRefreshing}
               />
-              {displayCollections && displayCollections.length > PAGE_SIZE && (
+              {displayCollections && displayCollections.length > pageSize && (
                 <Box justifyContent="center" display="flex" mt={3}>
                   <Pagination
                     shape={'rounded'}
-                    count={Math.ceil(displayCollections.length / PAGE_SIZE)}
+                    count={Math.ceil(displayCollections.length / pageSize)}
                     page={currentPage}
                     onChange={handlePageChange}
                   />

src/pages/Collections.test.jsx

@@ -0,0 +1,93 @@
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import Collections from './Collections';
+
+const getCollections = vi.fn();
+const getAliases = vi.fn();
+const getCollection = vi.fn();
+const getApiKey = vi.fn();
+const client = {
+  getCollections,
+  getAliases,
+  getCollection,
+  getApiKey,
+};
+
+vi.mock('../context/client-context', () => ({
+  useClient: () => ({
+    client,
+  }),
+}));
+
+vi.mock('../context/telemetry-context', () => ({
+  useMaxCollections: () => ({ maxCollections: null }),
+}));
+
+vi.mock('../components/Collections/SearchBar', () => ({
+  default: ({ value, setValue }) => (
+    <input aria-label="Search collections" value={value} onChange={(event) => setValue(event.target.value)} />
+  ),
+}));
+
+vi.mock('../components/Collections/CollectionsList', () => ({
+  default: ({ collections }) => <div data-testid="collections-list">{collections.map((item) => item.name).join(',')}</div>,
+}));
+
+vi.mock('../components/Collections/CreateCollection/CreateCollectionButton', () => ({
+  default: () => <button type="button">Create collection</button>,
+}));
+
+vi.mock('../components/Snapshots/SnapshotsUpload', () => ({
+  SnapshotsUpload: () => <button type="button">Upload snapshot</button>,
+}));
+
+vi.mock('../components/ToastNotifications/ErrorNotifier', () => ({
+  default: ({ message }) => <div>{message}</div>,
+}));
+
+describe('Collections page size', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+
+    getCollections.mockResolvedValue({
+      collections: [{ name: 'alpha' }, { name: 'beta' }, { name: 'gamma' }],
+    });
+    getAliases.mockResolvedValue({ aliases: [] });
+    getCollection.mockImplementation(async (name) => ({ vectors_count: name.length }));
+    getApiKey.mockReturnValue(null);
+  });
+
+  it('fetches collections once on initial render', async () => {
+    render(<Collections />);
+
+    await screen.findByTestId('collections-list');
+
+    await waitFor(() => {
+      expect(getCollections).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('falls back to the default page size when localStorage has an unsupported value', async () => {
+    localStorage.setItem('qdrant-web-ui-collections-page-size', '999');
+
+    render(<Collections />);
+
+    const pageSizeSelect = await screen.findByRole('combobox', { name: 'Collections per page' });
+    expect(pageSizeSelect).toHaveTextContent('5');
+  });
+
+  it('persists a newly selected page size', async () => {
+    render(<Collections />);
+
+    const pageSizeSelect = await screen.findByRole('combobox', { name: 'Collections per page' });
+    fireEvent.mouseDown(pageSizeSelect);
+
+    const option = await screen.findByRole('option', { name: '10' });
+    fireEvent.click(option);
+
+    await waitFor(() => {
+      expect(localStorage.getItem('qdrant-web-ui-collections-page-size')).toBe('10');
+    });
+  });
+});