Edit Dialog for Images

cypress/e2e/with_mock_data/items.cy.ts

@@ -909,6 +909,7 @@ describe('Items', () => {
         .should('be.visible')
         .within(() => {
           cy.findByLabelText('File Name *').clear();
+          cy.findByText('.png').should('exist');
           cy.findByLabelText('File Name *').type('test file');
 
           cy.findByLabelText('Title').clear();
@@ -930,12 +931,12 @@ describe('Items', () => {
         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"}'
+          '{"file_name":"test file.png","description":"test description","title":"test title"}'
         );
       });
     });
 
-    it('not changing any fields shows error', () => {
+    it('shows error when no fields have been changed', () => {
       cy.findByText('5YUQDDjKpz2z').click();
       cy.findByText(
         'High-resolution cameras for beam characterization. 1'
@@ -957,7 +958,7 @@ describe('Items', () => {
       cy.findByRole('button', { name: 'Save' }).should('be.disabled');
     });
 
-    it('Required fields that are cleared are not allowed and show error message', () => {
+    it('shows error message when required fields are cleared', () => {
       cy.findByText('5YUQDDjKpz2z').click();
       cy.findByText(
         'High-resolution cameras for beam characterization. 1'

src/common/editFileDialog.component.test.tsx

@@ -87,6 +87,10 @@ describe('Edit file dialog', () => {
 
     it('Edits an image correctly', async () => {
       createView();
+
+      //Checks if file extension is displayed. If it's editable, actual value will not match expected.
+      expect(screen.getByText('.png')).toBeInTheDocument();
+
       modifyFileValues({
         file_name: 'test_file_name.jpeg',
         title: 'Test Title',
@@ -98,15 +102,15 @@ describe('Edit file dialog', () => {
       await user.click(saveButton);
 
       expect(axiosPatchSpy).toHaveBeenCalledWith('/images/1', {
-        file_name: 'test_file_name.jpeg',
+        file_name: 'test_file_name.jpeg.png',
         title: 'Test Title',
         description: 'Test Description',
       });
 
       expect(onClose).toHaveBeenCalled();
     });
 
-    it('No values changed shows correct error message', async () => {
+    it('shows correct error message when no values are changed', async () => {
       createView();
 
       const saveButton = screen.getByRole('button', { name: 'Save' });
@@ -120,7 +124,7 @@ describe('Edit file dialog', () => {
       ).toBeInTheDocument();
     });
 
-    it('Required fields show error if they are whitespace or current value just removed', async () => {
+    it('shows error message if required fields are whitespace or their current value was removed', async () => {
       createView();
       modifyFileValues({
         file_name: '',
@@ -133,7 +137,7 @@ describe('Edit file dialog', () => {
       expect(onClose).not.toHaveBeenCalled();
     });
 
-    it('CatchAllError request works correctly and displays refresh page message', async () => {
+    it('displays refresh page message and a CatchAllError request works correctly', async () => {
       createView();
       modifyFileValues({
         file_name: 'Error 500',

src/common/editFileDialog.component.tsx

@@ -9,6 +9,7 @@
   DialogTitle,
   FormHelperText,
   Grid,
+  InputAdornment,
   TextField,
 } from '@mui/material';
 import { useForm } from 'react-hook-form';
@@ -44,14 +45,25 @@
 
   const { mutateAsync: patchFile, isPending: isEditPending } = usePatchFile();
 
+  const point = selectedFile?.file_name?.lastIndexOf('.') ?? 0;
+  const extension = selectedFile?.file_name?.slice(point) ?? '';
+  const initialName = selectedFile?.file_name?.slice(0, point) ?? '';
+
+  console.log(extension);
+
+  const selectedFileCopy: ObjectFilePatch = React.useMemo(
+    () => (selectedFile ? { ...selectedFile, file_name: initialName } : {}),
+    [selectedFile, initialName]
+  );
+
   const initialFile: ObjectFilePatch = React.useMemo(
     () =>
-      selectedFile ?? {
+      selectedFileCopy ?? {
         file_name: '',
         title: '',
         description: '',
       },
-    [selectedFile]
+    [selectedFileCopy]
   );
 
   const {
@@ -89,16 +101,18 @@
   const handleEditFile = React.useCallback(
     (fileData: ObjectFilePatch) => {
       if (selectedFile) {
-        const isFileNameUpdated = fileData.file_name !== selectedFile.file_name;
+        const isFileNameUpdated =
+          fileData.file_name !== selectedFileCopy.file_name;
 
         const isDescriptionUpdated =
-          fileData.description !== selectedFile.description;
+          fileData.description !== selectedFileCopy.description;
 
-        const isTitleUpdated = fileData.title !== selectedFile.title;
+        const isTitleUpdated = fileData.title !== selectedFileCopy.title;
 
-        let fileToEdit: ObjectFilePatch = {};
+        const fileToEdit: ObjectFilePatch = {};
 
-        if (isFileNameUpdated) fileToEdit.file_name = fileData.file_name;
+        if (isFileNameUpdated)
+          fileToEdit.file_name = fileData.file_name + extension;
         if (isDescriptionUpdated) fileToEdit.description = fileData.description;
         if (isTitleUpdated) fileToEdit.title = fileData.title;
 
@@ -119,11 +133,18 @@
         }
       }
     },
-    [selectedFile, patchFile, handleClose, setError]
+    [
+      selectedFile,
+      selectedFileCopy,
+      extension,
+      patchFile,
+      handleClose,
+      setError,
+    ]
   );
 
   return (
-    <Dialog open={open} maxWidth="lg" fullWidth>
+    <Dialog open={open} maxWidth="sm" fullWidth>
       <DialogTitle>{`Edit ${fileType}`}</DialogTitle>
       <DialogContent>
         <Grid container direction="column" spacing={1} component="form">
@@ -135,6 +156,11 @@
               {...register('file_name')}
               error={!!errors.file_name}
               helperText={errors.file_name?.message}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{extension}</InputAdornment>
+                ),
+              }}
               fullWidth
             />
           </Grid>

src/mocks/handlers.ts

@@ -1084,7 +1084,7 @@ export const handlers = [
 
       const fullBody = { ...obj, ...body };
 
-      if (fullBody.file_name === 'Error 500') {
+      if (fullBody.file_name === 'Error 500.png') {
         return HttpResponse.json(
           { detail: 'Something went wrong' },
           { status: 500 }