use MRT for cardView #1099

- remove cardView footer

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),