Add pagination to thumbnail view #1099

cypress/e2e/with_mock_data/items.cy.ts

@@ -710,6 +710,30 @@ describe('Items', () => {
       cy.findByText('The image cannot be loaded').should('exist');
     });
 
+    it('displays and hides filters, applies and clears name filter on gallery view', () => {
+      cy.findByText('5YUQDDjKpz2z').click();
+      cy.findByText(
+        'High-resolution cameras for beam characterization. 1'
+      ).should('exist');
+
+      cy.findByText('Gallery').click();
+      cy.findAllByAltText('Image: stfc-logo-blue-text').should(
+        'have.length',
+        7
+      );
+      cy.findByText('Show Filters').click();
+      cy.findByRole('button', { name: 'Clear Filters' }).should('be.disabled');
+      cy.findByLabelText('Filter by File name').type('logo1.png');
+      cy.findByAltText('Image: stfc-logo-blue-text').should('not.exist');
+      cy.findByRole('button', { name: 'Clear Filters' }).click();
+      cy.findAllByAltText('Image: stfc-logo-blue-text').should(
+        'have.length',
+        7
+      );
+      cy.findByText('Hide Filters').click();
+      cy.findByText('Show Filters').should('exist');
+    });
+
     it('opens full-size image when thumbnail is clicked and navigates to the next image', () => {
       cy.findByText('5YUQDDjKpz2z').click();
       cy.findByText(

src/api/api.types.tsx

@@ -250,14 +250,14 @@ export interface ImagePost {
   description?: string | null;
 }
 
-export interface Image
+export interface APIImage
   extends Required<Omit<ImagePost, 'upload_file'>>,
     CreatedModifiedMixin {
   id: string;
   primary: boolean;
   thumbnail_base64: string;
 }
 
-export interface ImageGet extends Image {
+export interface ImageGet extends APIImage {
   download_url: string;
 }

src/api/images.tsx

@@ -1,7 +1,7 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { storageApi } from './api';
-import { Image, ImageGet } from './api.types';
+import { APIImage, ImageGet } from './api.types';
 
 export const getImage = async (id: string): Promise<ImageGet> => {
   return storageApi.get(`/images/${id}`).then((response) => {
@@ -12,7 +12,7 @@ export const getImage = async (id: string): Promise<ImageGet> => {
 const getImages = async (
   entityId: string,
   primary?: boolean
-): Promise<Image[]> => {
+): Promise<APIImage[]> => {
   const queryParams = new URLSearchParams();
   queryParams.append('entity_id', entityId);
 
@@ -27,7 +27,7 @@ const getImages = async (
 export const useGetImages = (
   entityId?: string,
   primary?: boolean
-): UseQueryResult<Image[], AxiosError> => {
+): UseQueryResult<APIImage[], AxiosError> => {
   return useQuery({
     queryKey: ['Images', entityId, primary],
     queryFn: () => getImages(entityId ?? '', primary),

src/common/images/imageGallery.component.test.tsx

@@ -93,7 +93,7 @@ describe('Image Gallery', () => {
       expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
     );
 
-    expect(screen.getAllByText('logo1.png').length).toEqual(10);
+    expect(screen.getAllByText('logo1.png').length).toEqual(8);
     expect(baseElement).toMatchSnapshot();
   });
 
@@ -116,6 +116,85 @@ describe('Image Gallery', () => {
     expect(baseElement).toMatchSnapshot();
   });
 
+  it('changes page correctly and rerenders data', async () => {
+    const { router } = createView();
+
+    await waitFor(() =>
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+    );
+
+    expect(screen.getAllByText('logo1.png').length).toEqual(8);
+    expect(router.state.location.search).toBe('');
+
+    await user.click(screen.getByRole('button', { name: 'Go to page 2' }));
+
+    await waitFor(() => {
+      expect(screen.getAllByText('logo1.png').length).toEqual(2);
+    });
+
+    expect(router.state.location.search).toBe(
+      '?imageState=N4IgDiBcpghg5gUwMoEsBeioEYBsAacBRASQDsATRADxwF86g'
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Go to page 1' }));
+
+    await waitFor(() => {
+      expect(screen.getAllByText('logo1.png').length).toEqual(8);
+    });
+    expect(router.state.location.search).toBe('');
+  });
+
+  it('can change the table filters and clear the table filters', async () => {
+    createView();
+
+    await waitFor(() =>
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+    );
+
+    expect((await screen.findAllByText('logo1.png')).length).toEqual(8);
+
+    await user.click(screen.getByText('Show Filters'));
+
+    expect(await screen.findByText('Hide Filters')).toBeInTheDocument();
+
+    const nameInput = screen.getByLabelText('Filter by File name');
+    await user.type(nameInput, 'stfc-logo-blue-text.png');
+    await waitFor(() => {
+      expect(screen.queryByText('logo1.png')).not.toBeInTheDocument();
+    });
+    const clearFiltersButton = screen.getByRole('button', {
+      name: 'Clear Filters',
+    });
+
+    await user.click(clearFiltersButton);
+    expect((await screen.findAllByText('logo1.png')).length).toEqual(8);
+
+    expect(clearFiltersButton).toBeDisabled();
+  });
+
+  it('toggles filter visibility when clicking the toggle button', async () => {
+    createView();
+
+    await waitFor(() =>
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+    );
+
+    expect((await screen.findAllByText('logo1.png')).length).toEqual(8);
+
+    expect(screen.queryByText('Hide Filters')).not.toBeInTheDocument();
+    expect(screen.getByText('Show Filters')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Show Filters'));
+
+    expect(screen.getByText('Hide Filters')).toBeInTheDocument();
+    expect(screen.getByText('Images per page')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Hide Filters'));
+
+    expect(screen.queryByText('Hide Filters')).not.toBeInTheDocument();
+    expect(screen.getByText('Show Filters')).toBeInTheDocument();
+  });
+
   it('opens full-size image when thumbnail is clicked, navigates to the next image, and then navigates to a third image that failed to upload, falling back to a placeholder', async () => {
     createView();
 
@@ -178,5 +257,16 @@ describe('Image Gallery', () => {
     await waitFor(() => {
       expect(axiosGetSpy).toHaveBeenCalledTimes(4);
     });
+
+    await user.click(
+      within(screen.getByRole('dialog')).getByLabelText('Close')
+    );
+
+    await waitFor(
+      () => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      },
+      { timeout: 5000 }
+    );
   }, 20000);
 });