Merge pull request #1297 from ral-facilities/feature/remove-primary-images-dialog-#1096

Feature/remove primary images dialog #1096

Author: joshdimanteto

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

@@ -31,7 +31,7 @@ describe('delete Image dialogue', () => {
   beforeEach(() => {
     image = {
       id: '1',
-      file_name: 'Image A',
+      file_name: 'Image_A.png',
       entity_id: '2',
       title: 'a title',
       description: 'a description',
@@ -55,7 +55,7 @@ describe('delete Image dialogue', () => {
     createView();
     expect(screen.getByText('Delete Image')).toBeInTheDocument();
     expect(screen.getByTestId('delete-image-name')).toHaveTextContent(
-      'a title'
+      'Image_A.png'
     );
   });
 
@@ -102,21 +102,6 @@ describe('delete Image dialogue', () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  it('displays warning message when session data is not loaded', async () => {
-    props = {
-      ...props,
-      image: undefined,
-    };
-    createView();
-    const continueButton = screen.getByRole('button', { name: 'Continue' });
-    await user.click(continueButton);
-    const helperTexts = screen.getByText(
-      'No data provided, Please refresh and try again'
-    );
-    expect(helperTexts).toBeInTheDocument();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
   it('calls handleDeleteSession when continue button is clicked', async () => {
     createView();
     const continueButton = screen.getByRole('button', { name: 'Continue' });

src/common/images/deleteImageDialog.component.tsx

@@ -18,7 +18,7 @@ import handleIMS_APIError from '../../handleIMS_APIError';
 export interface DeleteImageProps {
   open: boolean;
   onClose: () => void;
-  image: APIImage | undefined;
+  image: APIImage;
 }
 
 const DeleteImageDialog = (props: DeleteImageProps) => {
@@ -58,7 +58,7 @@ const DeleteImageDialog = (props: DeleteImageProps) => {
       </DialogTitle>
       <DialogContent>
         Are you sure you want to permanently delete{' '}
-        <strong data-testid="delete-image-name">{image?.title}</strong>?
+        <strong data-testid="delete-image-name">{image.file_name}</strong>?
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>

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

@@ -3,6 +3,8 @@ import userEvent, { UserEvent } from '@testing-library/user-event';
 import { renderComponentWithRouterProvider } from '../../testUtils';
 import PrimaryImage, { PrimaryImageProps } from './primaryImage.component'; // Adjust the import path as necessary
 
+vi.mock('../../handleIMS_APIError');
+
 let props: PrimaryImageProps;
 let user: UserEvent;
 
@@ -27,17 +29,45 @@ describe('PrimaryImage Component', () => {
     expect(view.asFragment()).toMatchSnapshot();
   });
 
-  it('can open and close the set primary images dialog', async () => {
+  it('can open and close the set primary image dialog', async () => {
+    createView();
+    await waitFor(() => {
+      expect(
+        screen.getByLabelText('primary images action menu')
+      ).toBeInTheDocument();
+    });
+    const actionButton = screen.getByLabelText('primary images action menu');
+    user.click(actionButton);
+    await waitFor(() => {
+      expect(screen.getByText('Set Primary Image')).toBeInTheDocument();
+    });
+    const primaryImageButton = screen.getByText('Set Primary Image');
+    await user.click(primaryImageButton);
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    await waitFor(() =>
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+    );
+    expect((await screen.findAllByText('logo1.png')).length).toEqual(9);
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    await user.click(cancelButton);
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+
+  it('can open and close the remove primary image dialog', async () => {
     createView();
 
     const actionButton = screen.getByLabelText('primary images action menu');
     user.click(actionButton);
 
     await waitFor(() => {
-      expect(screen.getByText('Set Primary Image')).toBeInTheDocument();
+      expect(screen.getByText('Remove Primary Image')).toBeInTheDocument();
     });
 
-    const primaryImageButton = screen.getByText('Set Primary Image');
+    const primaryImageButton = screen.getByText('Remove Primary Image');
     user.click(primaryImageButton);
 
     await waitFor(() => {
@@ -48,12 +78,27 @@ describe('PrimaryImage Component', () => {
       expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
     );
 
-    expect((await screen.findAllByText('logo1.png')).length).toEqual(9);
+    const element = screen.getByTestId('remove-image-name');
+    expect(element).toHaveTextContent('logo1.png');
 
     const cancelButton = screen.getByRole('button', { name: 'Cancel' });
     await user.click(cancelButton);
     await waitFor(() => {
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
   });
+
+  it('Removes the remove primary image button when there is no set primary image', async () => {
+    props.entityId = '90';
+    createView();
+
+    const actionButton = screen.getByLabelText('primary images action menu');
+    user.click(actionButton);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText('Remove Primary Image')
+      ).not.toBeInTheDocument();
+    });
+  });
 });

src/common/images/primaryImage.component.tsx

@@ -1,3 +1,4 @@
+import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import {
@@ -14,14 +15,17 @@ import {
   Typography,
 } from '@mui/material';
 import React from 'react';
+import { useGetImages } from '../../api/images';
 import PrimaryImageDialog from './primaryImageDialog.component';
+import RemovePrimaryImageDialog from './removePrimaryImageDialog.component';
 
 interface PrimaryOptionsMenuInterface {
-  onChangePrimaryDialogOpen: (dialogOpen: boolean) => void;
+  onChangePrimaryDialogOpen: (dialogOpen: false | 'set' | 'remove') => void;
+  primaryImageExists: boolean;
 }
 
 const PrimaryOptionsMenu = (props: PrimaryOptionsMenuInterface) => {
-  const { onChangePrimaryDialogOpen } = props;
+  const { onChangePrimaryDialogOpen, primaryImageExists } = props;
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
@@ -33,9 +37,14 @@ const PrimaryOptionsMenu = (props: PrimaryOptionsMenuInterface) => {
     setAnchorEl(null);
   };
 
-  const handleOpenPrimary = () => {
+  const handleOpenSetPrimary = () => {
+    onChangePrimaryDialogOpen('set');
+    handleCloseMenu();
+  };
+
+  const handleOpenRemovePrimary = () => {
+    onChangePrimaryDialogOpen('remove');
     handleCloseMenu();
-    onChangePrimaryDialogOpen(true);
   };
 
   return (
@@ -52,12 +61,20 @@ const PrimaryOptionsMenu = (props: PrimaryOptionsMenuInterface) => {
         </span>
       </Tooltip>
       <Menu anchorEl={anchorEl} open={open} onClose={handleCloseMenu}>
-        <MenuItem onClick={handleOpenPrimary}>
+        <MenuItem onClick={handleOpenSetPrimary}>
           <ListItemIcon>
             <EditIcon />
           </ListItemIcon>
           <ListItemText>Set Primary Image</ListItemText>
         </MenuItem>
+        {primaryImageExists && (
+          <MenuItem onClick={handleOpenRemovePrimary}>
+            <ListItemIcon>
+              <DeleteIcon />
+            </ListItemIcon>
+            <ListItemText>Remove Primary Image</ListItemText>
+          </MenuItem>
+        )}
       </Menu>
     </Box>
   );
@@ -70,8 +87,14 @@ export interface PrimaryImageProps {
 
 const PrimaryImage = (props: PrimaryImageProps) => {
   const { sx, entityId } = props;
-  const [primaryDialogOpen, setPrimaryDialogOpen] =
-    React.useState<boolean>(false);
+
+  const { data: imagesData } = useGetImages(entityId, true);
+
+  const primaryImageExists = !!imagesData && imagesData.length > 0;
+
+  const [primaryDialogOpen, setPrimaryDialogOpen] = React.useState<
+    false | 'set' | 'remove'
+  >(false);
   return (
     <Grid sx={{ height: '100%', width: '100%' }}>
       <Box
@@ -92,15 +115,27 @@ const PrimaryImage = (props: PrimaryImageProps) => {
         <Typography variant="h5">No Image</Typography>
       </Box>
       <Box sx={{ height: '20%' }}>
-        <PrimaryOptionsMenu onChangePrimaryDialogOpen={setPrimaryDialogOpen} />
+        <PrimaryOptionsMenu
+          onChangePrimaryDialogOpen={setPrimaryDialogOpen}
+          primaryImageExists={primaryImageExists}
+        />
       </Box>
       <PrimaryImageDialog
-        open={primaryDialogOpen}
+        open={primaryDialogOpen == 'set'}
         onClose={() => {
           setPrimaryDialogOpen(false);
         }}
         entityID={entityId}
       />
+      {primaryImageExists && (
+        <RemovePrimaryImageDialog
+          open={primaryDialogOpen == 'remove'}
+          onClose={() => {
+            setPrimaryDialogOpen(false);
+          }}
+          image={imagesData[0]}
+        />
+      )}
     </Grid>
   );
 };

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

@@ -44,7 +44,7 @@ describe('Primary Image Dialog', () => {
     });
 
     await waitFor(() =>
-      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+      expect(screen.queryAllByRole('progressbar')).toHaveLength(0)
     );
 
     expect((await screen.findAllByText('logo1.png')).length).toEqual(9);

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

@@ -0,0 +1,89 @@
+import { RenderResult, screen, waitFor } from '@testing-library/react';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import { APIImageWithURL } from '../../api/api.types';
+import handleIMS_APIError from '../../handleIMS_APIError';
+import {
+  CREATED_MODIFIED_TIME_VALUES,
+  renderComponentWithRouterProvider,
+} from '../../testUtils';
+import RemovePrimaryImageDialog, {
+  RemovePrimaryImageProps,
+} from './removePrimaryImageDialog.component';
+
+vi.mock('../../handleIMS_APIError');
+
+describe('Remove Primary Image dialogue', () => {
+  let props: RemovePrimaryImageProps;
+  let user: UserEvent;
+  const onClose = vi.fn();
+  let image: APIImageWithURL | undefined;
+  const createView = (): RenderResult => {
+    return renderComponentWithRouterProvider(
+      <RemovePrimaryImageDialog {...props} />
+    );
+  };
+
+  beforeEach(() => {
+    image = {
+      id: '1',
+      file_name: 'Image A',
+      entity_id: '2',
+      title: 'a title',
+      description: 'a description',
+      primary: false,
+      thumbnail_base64: 'base64_thumbnail_test',
+      ...CREATED_MODIFIED_TIME_VALUES,
+      view_url: 'view_url',
+      download_url: 'download_url',
+    };
+    props = {
+      open: true,
+      onClose: onClose,
+      image: image,
+    };
+    user = userEvent.setup(); // Assigning userEvent to 'user'
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders correctly', async () => {
+    createView();
+    expect(screen.getByText('Remove Primary Image')).toBeInTheDocument();
+    expect(screen.getByTestId('remove-image-name')).toHaveTextContent(
+      'Image A'
+    );
+  });
+
+  it('calls onClose when Close button is clicked', async () => {
+    createView();
+    const closeButton = screen.getByRole('button', { name: 'Cancel' });
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it('calls handlePatchImage when continue button is clicked', async () => {
+    createView();
+    const continueButton = screen.getByRole('button', { name: 'Continue' });
+    await user.click(continueButton);
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it('displays error message if an unknown error occurs', async () => {
+    if (image) image.file_name = 'Error_500.png';
+    createView();
+    const continueButton = screen.getByRole('button', { name: 'Continue' });
+    await user.click(continueButton);
+
+    await waitFor(() => {
+      expect(handleIMS_APIError).toHaveBeenCalled();
+    });
+  });
+});