Edit Dialog for Images

cypress/e2e/with_mock_data/items.cy.ts

@@ -893,6 +893,136 @@ describe('Items', () => {
 
       cy.findByTestId('galleryLightBox').should('not.exist');
     });
+
+    it('edits an image successfully', () => {
+      cy.findByText('5YUQDDjKpz2z').click();
+      cy.findByText(
+        'High-resolution cameras for beam characterization. 1'
+      ).should('exist');
+
+      cy.findByText('Gallery').click();
+
+      cy.findAllByLabelText('Card Actions').first().click();
+      cy.findAllByText('Edit').last().click();
+
+      cy.findByRole('dialog')
+        .should('be.visible')
+        .within(() => {
+          cy.findByLabelText('File Name *').clear();
+          cy.findByLabelText('File Name *').type('test file');
+
+          cy.findByLabelText('Title').clear();
+          cy.findByLabelText('Title').type('test title');
+
+          cy.findByLabelText('Description').clear();
+          cy.findByLabelText('Description').type('test description');
+        });
+
+      cy.startSnoopingBrowserMockedRequest();
+
+      cy.findByRole('button', { name: 'Save' }).click();
+      cy.findByRole('dialog').should('not.exist');
+
+      cy.findBrowserMockedRequests({
+        method: 'PATCH',
+        url: '/images/:id',
+      }).should(async (patchRequests) => {
+        expect(patchRequests.length).equal(1);
+        const request = patchRequests[0];
+        expect(JSON.stringify(await request.json())).equal(
+          '{"file_name":"test file","description":"test description","title":"test title"}'
+        );
+      });
+    });
+
+    it('not changing any fields shows error', () => {
+      cy.findByText('5YUQDDjKpz2z').click();
+      cy.findByText(
+        'High-resolution cameras for beam characterization. 1'
+      ).should('exist');
+
+      cy.findByText('Gallery').click();
+
+      cy.findAllByLabelText('Card Actions').first().click();
+      cy.findAllByText('Edit').last().click();
+
+      cy.findByRole('dialog')
+        .should('be.visible')
+        .within(() => {
+          cy.findByRole('button', { name: 'Save' }).click();
+          cy.contains(
+            "There have been no changes made. Please change a field's value or press Cancel to exit."
+          );
+        });
+      cy.findByRole('button', { name: 'Save' }).should('be.disabled');
+    });
+
+    it('Required fields that are cleared are not allowed and show error message', () => {
+      cy.findByText('5YUQDDjKpz2z').click();
+      cy.findByText(
+        'High-resolution cameras for beam characterization. 1'
+      ).should('exist');
+
+      cy.findByText('Gallery').click();
+
+      cy.findAllByLabelText('Card Actions').first().click();
+      cy.findAllByText('Edit').last().click();
+
+      cy.findByRole('dialog')
+        .should('be.visible')
+        .within(() => {
+          cy.findByLabelText('File Name *').clear();
+
+          cy.findByRole('button', { name: 'Save' }).click();
+          cy.contains('Please enter a file name.');
+        });
+      cy.findByRole('button', { name: 'Save' }).should('be.disabled');
+    });
+
+    it('opens edit dialog in lightbox', () => {
+      cy.findByText('5YUQDDjKpz2z').click();
+      cy.findByText(
+        'High-resolution cameras for beam characterization. 1'
+      ).should('exist');
+
+      cy.findByText('Gallery').click();
+
+      cy.findAllByAltText('test').first().click();
+      cy.findByTestId('galleryLightBox').within(() => {
+        cy.findByText('File name: stfc-logo-blue-text.png').should('exist');
+        cy.findByText('Title: stfc-logo-blue-text').should('exist');
+        cy.findByText('test').should('exist');
+
+        cy.findByAltText('test').should('exist');
+
+        cy.findByAltText('test')
+          .should('have.attr', 'src')
+          .and(
+            'include',
+            'http://localhost:3000/images/stfc-logo-blue-text.png?text=1'
+          );
+
+        cy.findByLabelText('Image Actions').click();
+      });
+
+      cy.findAllByText('Edit').last().click();
+
+      cy.findByRole('dialog', { timeout: 10000 }).should('exist');
+
+      cy.findByRole('dialog').within(() => {
+        cy.findByText('Edit Image').should('exist');
+      });
+
+      cy.findByRole('dialog').within(() => {
+        cy.findByRole('button', { name: 'Cancel' }).click();
+      });
+
+      cy.findByRole('dialog').should('not.exist');
+
+      cy.findByLabelText('Close').click();
+
+      cy.findByTestId('galleryLightBox').should('not.exist');
+    });
   });
 
   it('delete an item', () => {

src/api/api.types.tsx

@@ -250,6 +250,12 @@ export interface ImagePost {
   description?: string | null;
 }
 
+export interface ObjectFilePatch {
+  file_name?: string;
+  title?: string | null;
+  description?: string | null;
+}
+
 export interface APIImage
   extends Required<Omit<ImagePost, 'upload_file'>>,
     CreatedModifiedMixin {

src/api/images.test.tsx

@@ -1,7 +1,8 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import ImagesJSON from '../mocks/Images.json';
 import { hooksWrapperWithProviders } from '../testUtils';
-import { useGetImage, useGetImages } from './images';
+import { ObjectFilePatch } from './api.types';
+import { useGetImage, useGetImages, usePatchImage } from './images';
 
 describe('images api functions', () => {
   afterEach(() => {
@@ -62,4 +63,28 @@ describe('images api functions', () => {
       });
     });
   });
+
+  describe('usePatchImage', () => {
+    let mockDataPatch: ObjectFilePatch;
+    beforeEach(() => {
+      mockDataPatch = {
+        file_name: 'edited_image.jpeg',
+        title: 'an edited title',
+        description: 'an edited description',
+      };
+    });
+    it('sends a patch request to edit an image and returns a successful response', async () => {
+      const { result } = renderHook(() => usePatchImage(), {
+        wrapper: hooksWrapperWithProviders(),
+      });
+
+      result.current.mutate({ id: '1', fileMetadata: mockDataPatch });
+      await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
+
+      expect(result.current.data).toEqual({
+        ...ImagesJSON[0],
+        ...mockDataPatch,
+      });
+    });
+  });
 });

src/api/images.tsx

@@ -1,7 +1,13 @@
-import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import {
+  useMutation,
+  UseMutationResult,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { storageApi } from './api';
-import { APIImage, APIImageWithURL } from './api.types';
+import { APIImage, APIImageWithURL, ObjectFilePatch } from './api.types';
 
 export const getImage = async (id: string): Promise<APIImageWithURL> => {
   return storageApi.get(`/images/${id}`).then((response) => {
@@ -43,3 +49,29 @@ export const useGetImages = (
     enabled: !!entityId,
   });
 };
+
+const patchImage = async (
+  id: string,
+  fileMetadata: ObjectFilePatch
+): Promise<APIImage> => {
+  return storageApi
+    .patch<APIImage>(`/images/${id}`, fileMetadata)
+    .then((response) => response.data);
+};
+
+export const usePatchImage = (): UseMutationResult<
+  APIImage,
+  AxiosError,
+  { id: string; fileMetadata: ObjectFilePatch }
+> => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, fileMetadata }) => patchImage(id, fileMetadata),
+    onSuccess: (updatedImage: APIImage) => {
+      queryClient.invalidateQueries({ queryKey: ['Images'] });
+      queryClient.invalidateQueries({
+        queryKey: ['Image', updatedImage.id],
+      });
+    },
+  });
+};

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

@@ -0,0 +1,158 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import { http } from 'msw';
+import { MockInstance } from 'vitest';
+import { storageApi } from '../../api/api';
+import { usePatchImage } from '../../api/images';
+import handleIMS_APIError from '../../handleIMS_APIError';
+import ImagesJSON from '../../mocks/Images.json';
+import { server } from '../../mocks/server';
+import { renderComponentWithRouterProvider } from '../../testUtils';
+import EditFileDialog, { FileDialogProps } from './editFileDialog.component';
+
+vi.mock('../../handleIMS_APIError');
+
+describe('Edit file dialog', () => {
+  const onClose = vi.fn();
+  let props: FileDialogProps;
+  let user: UserEvent;
+  const createView = () => {
+    return renderComponentWithRouterProvider(<EditFileDialog {...props} />);
+  };
+
+  beforeEach(() => {
+    props = {
+      open: true,
+      onClose: onClose,
+      fileType: 'Image',
+      usePatchFile: usePatchImage,
+    };
+    user = userEvent.setup();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+  const modifyFileValues = (values: {
+    file_name?: string;
+    title?: string;
+    description?: string;
+  }) => {
+    if (values.file_name !== undefined)
+      fireEvent.change(screen.getByLabelText('File Name *'), {
+        target: { value: values.file_name },
+      });
+
+    if (values.title !== undefined)
+      fireEvent.change(screen.getByLabelText('Title'), {
+        target: { value: values.title },
+      });
+
+    if (values.description !== undefined)
+      fireEvent.change(screen.getByLabelText('Description'), {
+        target: { value: values.description },
+      });
+  };
+
+  describe('Edit an image', () => {
+    let axiosPatchSpy: MockInstance;
+    beforeEach(() => {
+      props = {
+        ...props,
+        selectedFile: ImagesJSON[0],
+      };
+
+      axiosPatchSpy = vi.spyOn(storageApi, 'patch');
+    });
+
+    it('disables save button and shows circular progress indicator when request is pending', async () => {
+      server.use(
+        http.patch('/images/:id', () => {
+          return new Promise(() => {});
+        })
+      );
+
+      createView();
+
+      modifyFileValues({
+        file_name: 'Image A',
+      });
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+      await user.click(saveButton);
+
+      expect(saveButton).toBeDisabled();
+      expect(await screen.findByRole('progressbar')).toBeInTheDocument();
+    });
+
+    it('Edits an image correctly', async () => {
+      createView();
+      modifyFileValues({
+        file_name: 'test_file_name.jpeg',
+        title: 'Test Title',
+        description: 'Test Description',
+      });
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+
+      await user.click(saveButton);
+
+      expect(axiosPatchSpy).toHaveBeenCalledWith('/images/1', {
+        file_name: 'test_file_name.jpeg',
+        title: 'Test Title',
+        description: 'Test Description',
+      });
+
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it('No values changed shows correct error message', async () => {
+      createView();
+
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+
+      await user.click(saveButton);
+
+      expect(
+        screen.getByText(
+          "There have been no changes made. Please change a field's value or press Cancel to exit."
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('Required fields show error if they are whitespace or current value just removed', async () => {
+      createView();
+      modifyFileValues({
+        file_name: '',
+      });
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+
+      await user.click(saveButton);
+
+      expect(screen.getByText('Please enter a file name.')).toBeInTheDocument();
+      expect(onClose).not.toHaveBeenCalled();
+    });
+
+    it('CatchAllError request works correctly and displays refresh page message', async () => {
+      createView();
+      modifyFileValues({
+        file_name: 'Error 500',
+      });
+      const saveButton = screen.getByRole('button', { name: 'Save' });
+
+      await user.click(saveButton);
+
+      expect(handleIMS_APIError).toHaveBeenCalled();
+    });
+
+    it('calls onClose when Close button is clicked', async () => {
+      createView();
+      const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+      await user.click(cancelButton);
+
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+      });
+    });
+  });
+});