feat(web): delete folder in storage (#1047)

web/public/locales/en/translation.json

@@ -174,6 +174,7 @@
     "All": "Total Capacity",
     "DeleteConfirm": "The current operation will permanently delete the cloud storage",
     "DeleteFileTip": "Are you sure you want to delete the file?",
+    "DeleteFolderTip": "Are you sure you want to delete the whole folder? Notice that it will be a bit slower when a large number of files exist.",
     "Drag": "Drag and drop here or",
     "EmptyText": "No Bucket data yet ,",
     "File": "File",

web/public/locales/zh-CN/translation.json

@@ -174,6 +174,7 @@
     "All": "总容量",
     "DeleteConfirm": "当前操作将会永久删除云存储",
     "DeleteFileTip": "确认要删除文件吗？",
+    "DeleteFolderTip": "确认要删除整个文件夹吗？请注意当有大量文件存在时会稍许有一点慢哦",
     "Drag": "拖放到此处或者",
     "EmptyText": "暂无 Bucket 数据,",
     "File": "文件",

web/public/locales/zh/translation.json

@@ -174,6 +174,7 @@
     "All": "总容量",
     "DeleteConfirm": "当前操作将会永久删除云存储",
     "DeleteFileTip": "确认要删除文件吗？",
+    "DeleteFolderTip": "确认要删除整个文件夹吗？请注意当有大量文件存在时会稍许有一点慢哦",
     "Drag": "拖放到此处或者",
     "EmptyText": "暂无 Bucket 数据,",
     "File": "文件",

web/src/hooks/useAwsS3.ts

@@ -45,7 +45,27 @@ function useAwsS3() {
   };
 
   const deleteFile = async (bucket: string, key: string) => {
-    const res = await s3.deleteObject({ Bucket: bucket, Key: key }).promise();
+    const { Versions } = await s3
+      .listObjectVersions({
+        Bucket: bucket,
+        Prefix: key,
+      })
+      .promise();
+    const res = await s3
+      .deleteObjects({
+        Bucket: bucket,
+        Delete: {
+          Objects: Versions.map(({ Key, VersionId }: { Key: string; VersionId: string }) => ({
+            Key,
+            VersionId,
+          })),
+          Quiet: true,
+        },
+      })
+      .promise();
+    if (res?.Errors?.length === 0 && Versions.length >= 1000) {
+      await deleteFile(bucket, key);
+    }
     return res;
   };
 

web/src/pages/app/storages/mods/FileList/index.tsx

@@ -225,7 +225,20 @@ export default function FileList() {
                                   <DeleteIcon fontSize={14} />
                                 </IconWrap>
                               </ConfirmButton>
-                            ) : null}
+                            ) : (
+                              <ConfirmButton
+                                onSuccessAction={async () => {
+                                  await deleteFile(bucketName!, file.Prefix as string);
+                                  query.refetch();
+                                }}
+                                headerText={String(t("Delete"))}
+                                bodyText={t("StoragePanel.DeleteFolderTip")}
+                              >
+                                <IconWrap tooltip={String(t("Delete"))}>
+                                  <DeleteIcon fontSize={14} />
+                                </IconWrap>
+                              </ConfirmButton>
+                            )}
                           </Td>
                         </Tr>
                       );