Delete images

src/api/buildQuery.js

@@ -190,6 +190,21 @@ const queries = {
     }
   },
 
+  deleteImages: (input) => {
+    return {
+      template: `
+        mutation DeleteImages($input: DeleteImagesInput!) {
+          deleteImages(input: $input) {
+            message
+          }
+        }
+      `,
+      variables: {
+        input
+      }
+    }
+  },
+
   getImages: ({ filters, pageInfo, page }) => ({
     template: `
       query GetImages($input: QueryImagesInput!) {

src/auth/roles.js

@@ -12,6 +12,7 @@ export const WRITE_DEPLOYMENTS_ROLES =          [MANAGER];
 export const WRITE_AUTOMATION_RULES_ROLES =     [MANAGER];
 export const WRITE_CAMERA_REGISTRATION_ROLES =  [MANAGER];
 export const QUERY_WITH_CUSTOM_FILTER =         [MANAGER];
+export const DELETE_IMAGES =                    [MANAGER, MEMBER];
 
 export const hasRole = (currRoles, targetRoles = []) => (
   currRoles && (currRoles.includes(SUPER_USER) || currRoles.some((role) => targetRoles.includes(role)))

src/components/ErrorAlerts.jsx

@@ -54,7 +54,6 @@ const ErrorAlerts = () => {
   const statsErrors = useSelector(selectStatsErrors);
   const exportErrors = useSelector(selectExportErrors);
 
-
   const enrichedErrors = [
     enrichErrors(labelsErrors, 'Label Error', 'labels'),
     enrichErrors(projectsErrors, 'Project Error', 'projects'),

src/features/images/imagesSlice.js

@@ -97,7 +97,7 @@ export const imagesSlice = createSlice({
 
     dismissImagesError: (state, { payload }) => {
       const index = payload;
-      state.loadingStates.image.errors.splice(index, 1);
+      state.loadingStates.images.errors.splice(index, 1);
     },
 
     preFocusImageStart: (state, { payload }) => {
@@ -240,6 +240,22 @@ export const imagesSlice = createSlice({
       const index = payload;
       state.loadingStates.export.errors.splice(index, 1);
     },
+
+    deleteImagesStart: (state) => {
+      state.loadingStates.images.isLoading = true;
+      state.loadingStates.images.operation = 'deleting';
+      state.loadingStates.images.error = null;
+    },
+
+    deleteImagesSuccess: (state, { payload }) => {
+      state.loadingStates.images.isLoading = false;
+      state.loadingStates.images.operation = null;
+    },
+
+    deleteImagesError: (state, { payload }) => {
+      state.loadingStates.images.isLoading = false;
+      state.loadingStates.images.errors = payload;
+    },
   },
 });
 
@@ -268,6 +284,9 @@ export const {
   exportFailure,
   clearExport,
   dismissExportError,
+  deleteImagesStart,
+  deleteImagesSuccess,
+  deleteImagesError,
 } = imagesSlice.actions;
 
 // fetchImages thunk
@@ -451,6 +470,29 @@ export const getExportStatus = (documentId) => {
   };
 };
 
+export const deleteImages = (imageIds) => async (dispatch, getState) => {
+  dispatch(deleteImagesStart(imageIds));
+  try {
+    const currentUser = await Auth.currentAuthenticatedUser();
+    const token = currentUser.getSignInUserSession().getIdToken().getJwtToken();
+
+    const projects = getState().projects.projects;
+    const selectedProj = projects.find((proj) => proj.selected);
+
+    if (token && selectedProj) {
+      const r = await call({
+        projId: selectedProj._id,
+        request: 'deleteImages',
+        input: { imageIds },
+      });
+    }
+    dispatch(deleteImagesSuccess(imageIds));
+  } catch (err) {
+    console.log(`error attempting to delete image: `, err);
+    dispatch(deleteImagesError(err));
+  }
+}
+
 export const selectPageInfo = state => state.images.pageInfo;
 export const selectPaginatedField = state => state.images.pageInfo.paginatedField;
 export const selectSortAscending = state => state.images.pageInfo.sortAscending;

src/features/loupe/FullSizeImage.jsx

@@ -1,13 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
+import { Cross2Icon, PlusIcon, TrashIcon } from '@radix-ui/react-icons';
 import { useResizeObserver } from '../../app/utils';
 import { styled } from '../../theme/stitches.config';
 // import { CircleSpinner, SpinnerOverlay } from '../../components/Spinner';
 import { selectUserUsername, selectUserCurrentRoles } from '../user/userSlice';
-import { hasRole, WRITE_OBJECTS_ROLES } from '../../auth/roles';
+import { hasRole, WRITE_OBJECTS_ROLES, DELETE_IMAGES } from '../../auth/roles';
 import { drawBboxStart, selectIsDrawingBbox} from './loupeSlice';
 import { selectWorkingImages, labelsValidated, markedEmpty } from '../review/reviewSlice';
+import { deleteImages } from '../images/imagesSlice';
 import { Image } from '../../components/Image';
 import BoundingBox from './BoundingBox';
 import DrawBboxOverlay from './DrawBboxOverlay';
@@ -145,6 +146,8 @@ const FullSizeImage = ({ image, focusIndex }) => {
 
   const handleAddObjectButtonClick = () => dispatch(drawBboxStart());
 
+  const handleDeleteButtonClick = () => dispatch(deleteImages([image._id]));
+
   return (
     <ImageWrapper ref={containerEl} className='full-size-image'>
       {isDrawingBbox &&
@@ -192,29 +195,46 @@ const FullSizeImage = ({ image, focusIndex }) => {
             </ContextMenuItemIconLeft>
             Mark empty
           </ContextMenuItem>
+          {hasRole(userRoles, DELETE_IMAGES) &&
+            <ContextMenuItem
+              onSelect={handleDeleteButtonClick}
+            >
+              <ContextMenuItemIconLeft>
+                <TrashIcon />
+              </ContextMenuItemIconLeft>
+              Delete
+            </ContextMenuItem>
+          }
         </ContextMenuContent>
       </ContextMenu>
       <ShareImage>
         <ShareImageButton imageId={image._id}/>
       </ShareImage>
-      {hasRole(userRoles, WRITE_OBJECTS_ROLES) &&
-        <EditObjectButtons>
-          <EditObjectButton onClick={handleMarkEmptyButtonClick}>
-            <Cross2Icon /> Mark empty
-          </EditObjectButton>
-          <EditObjectButton
-            onClick={handleAddObjectButtonClick}
-            css={{
-              color: '$loContrast',
-              backgroundColor: '$hiContrast',
-            }}
-          >
-            <PlusIcon /> Add object
+      <EditObjectButtons>
+        {hasRole(userRoles, DELETE_IMAGES) &&
+          <EditObjectButton onClick={handleDeleteButtonClick}>
+            <TrashIcon /> Delete
           </EditObjectButton>
-        </EditObjectButtons>
-      }
+        }
+        {hasRole(userRoles, WRITE_OBJECTS_ROLES) &&
+          <>
+            <EditObjectButton onClick={handleMarkEmptyButtonClick}>
+              <Cross2Icon /> Mark empty
+            </EditObjectButton>
+            <EditObjectButton
+              onClick={handleAddObjectButtonClick}
+              css={{
+                color: '$loContrast',
+                backgroundColor: '$hiContrast',
+              }}
+            >
+              <PlusIcon /> Add object
+            </EditObjectButton>
+          </>
+        }
+      </EditObjectButtons>
     </ImageWrapper>
   );
 };
 
-export default FullSizeImage;
+export default FullSizeImage;

src/features/review/reviewSlice.js

@@ -2,7 +2,7 @@ import { createSlice, createAction } from '@reduxjs/toolkit';
 import { Auth } from 'aws-amplify';
 import { call } from '../../api';
 import { findImage, findObject, findLabel } from '../../app/utils';
-import { getImagesSuccess, clearImages } from '../images/imagesSlice';
+import { getImagesSuccess, clearImages, deleteImagesSuccess } from '../images/imagesSlice';
 
 const initialState = {
   workingImages: [],
@@ -134,8 +134,7 @@ export const reviewSlice = createSlice({
     dismissLabelsError: (state, { payload }) => {
       const index = payload;
       state.loadingStates.labels.errors.splice(index, 1);
-    },
-
+    }
   },
 
   extraReducers: (builder) => {
@@ -147,6 +146,11 @@ export const reviewSlice = createSlice({
       .addCase(clearImages, (state) => {
         state.workingImages = [];
       })
+      .addCase(deleteImagesSuccess, (state, { payload }) => {
+        state.workingImages = state.workingImages.filter(
+          ({ _id }) => !payload.includes(_id)
+        );
+      })
   },
 
 });