add image deletion button on table view image previewer (#7475)

* add image deletion button on table view image previewer

* optimize

* check permission before delete image

* optimize

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -859,13 +859,16 @@ class DirentGridView extends React.Component {
     let direntPath = Utils.joinPath(path, dirent.name);
 
     let canModifyFile = false;
+    let canDeleteFile = false;
     if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
       canModifyFile = true;
+      canDeleteFile = true;
     } else {
       const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
       if (isCustomPermission) {
-        const { modify } = customPermission.permission;
+        const { modify, delete: canDelete } = customPermission.permission;
         canModifyFile = modify;
+        canDeleteFile = canDelete;
       }
     }
 
@@ -1044,7 +1047,7 @@ class DirentGridView extends React.Component {
               closeImagePopup={this.closeImagePopup}
               moveToPrevImage={this.moveToPrevImage}
               moveToNextImage={this.moveToNextImage}
-              onDeleteImage={this.deleteImage}
+              onDeleteImage={(canDeleteFile && this.deleteImage) ? this.deleteImage : null}
               onRotateImage={this.rotateImage}
               enableRotate={canModifyFile}
             />

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -764,13 +764,16 @@ class DirentListView extends React.Component {
     const isDesktop = Utils.isDesktop();
 
     let canModifyFile = false;
+    let canDeleteFile = false;
     if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
       canModifyFile = true;
+      canDeleteFile = true;
     } else {
       const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
       if (isCustomPermission) {
-        const { modify } = customPermission.permission;
+        const { modify, delete: canDelete } = customPermission.permission;
         canModifyFile = modify;
+        canDeleteFile = canDelete;
       }
     }
 
@@ -874,7 +877,7 @@ class DirentListView extends React.Component {
                 closeImagePopup={this.closeImagePopup}
                 moveToPrevImage={this.moveToPrevImage}
                 moveToNextImage={this.moveToNextImage}
-                onDeleteImage={this.deleteImage}
+                onDeleteImage={(canDeleteFile && this.deleteImage) ? this.deleteImage : null}
                 onRotateImage={this.rotateImage}
                 enableRotate={canModifyFile}
               />

frontend/src/metadata/components/cell-formatter/image-previewer.js

@@ -9,7 +9,7 @@ import { Utils } from '../../../utils/utils';
 import { siteRoot, thumbnailSizeForOriginal, fileServerRoot, thumbnailDefaultSize } from '../../../utils/constants';
 import { getFileNameFromRecord, getParentDirFromRecord, getRecordIdFromRecord } from '../../utils/cell';
 
-const ImagePreviewer = ({ record, table, repoID, repoInfo, closeImagePopup }) => {
+const ImagePreviewer = ({ record, table, repoID, repoInfo, closeImagePopup, deleteRecords }) => {
   const [imageIndex, setImageIndex] = useState(0);
   const [imageItems, setImageItems] = useState([]);
 
@@ -81,6 +81,22 @@ const ImagePreviewer = ({ record, table, repoID, repoInfo, closeImagePopup }) =>
     }
   };
 
+  const deleteImage = () => {
+    const image = imageItems[imageIndex];
+    deleteRecords([image.id]);
+
+    const newImageItems = imageItems.filter(item => item.id !== image.id);
+    if (newImageItems.length === 0) {
+      setImageIndex(0);
+      closeImagePopup();
+    } else {
+      const newIndex = imageIndex >= newImageItems.length ? 0 : imageIndex;
+      setImageIndex(newIndex);
+    }
+  };
+
+  const canDelete = window.sfMetadataContext.checkCanDeleteRow();
+
   return (
     <ModalPortal>
       <ImageDialog
@@ -90,6 +106,7 @@ const ImagePreviewer = ({ record, table, repoID, repoInfo, closeImagePopup }) =>
         moveToPrevImage={moveToPrevImage}
         moveToNextImage={moveToNextImage}
         onRotateImage={rotateImage}
+        onDeleteImage={canDelete ? deleteImage : null}
       />
     </ModalPortal>
   );
@@ -101,6 +118,7 @@ ImagePreviewer.propTypes = {
   repoID: PropTypes.string,
   repoInfo: PropTypes.object,
   closeImagePopup: PropTypes.func,
+  deleteRecords: PropTypes.func,
 };
 
 export default ImagePreviewer;

frontend/src/metadata/views/table/masks/interaction-masks/index.js

@@ -1170,6 +1170,7 @@ class InteractionMasks extends React.Component {
               modifyColumnData={this.props.modifyColumnData}
               updateFileTags={this.props.updateFileTags}
               editorPosition={editorPosition}
+              deleteRecords={this.props.deleteRecords}
               {...{
                 ...this.getSelectedDimensions(selectedPosition),
                 ...this.state.editorPosition

frontend/src/metadata/views/table/table-main/records/body.js

@@ -563,6 +563,7 @@ class RecordsBody extends Component {
             modifyColumnData={this.props.modifyColumnData}
             getTableCanvasContainerRect={this.props.getTableCanvasContainerRect}
             updateFileTags={this.props.updateFileTags}
+            deleteRecords={this.props.deleteRecords}
           />
           <div className="sf-metadata-result-table" style={{ width: this.props.totalWidth + SEQUENCE_COLUMN_WIDTH }} ref={this.setResultRef}>
             {this.renderRecords()}