[FILES] Allow user to delete or remove themselves from a shared folder

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx

@@ -10,18 +10,19 @@ import {
   Loading,
   Button,
   PlusIcon,
-  useHistory
+  useHistory,
+  Dialog
 } from "@chainsafe/common-components"
 import { BucketKeyPermission, useFiles } from "../../../Contexts/FilesContext"
-import { Trans } from "@lingui/macro"
+import { t, Trans } from "@lingui/macro"
 import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../Themes/types"
-import SharedFolderRowWrapper from "./SharedFolderRowWrapper"
 import UpdateSharedFolderModal from "./EditSharedFolderModal"
 import clsx from "clsx"
 import CreateSharedFolderModal from "./CreateSharedFolderModal"
 import { useFilesApi } from "../../../Contexts/FilesApiContext"
 import { ROUTE_LINKS } from "../../FilesRoutes"
+import SharedFolderRow from "./views/FileSystemItem/SharedFolderRow"
 
 export const desktopSharedGridSettings = "69px 3fr 120px 190px 150px 45px !important"
 export const mobileSharedGridSettings = "3fr 80px 45px !important"
@@ -92,6 +93,9 @@ const useStyles = makeStyles(
         "& svg": {
           marginBottom: constants.generalUnit * 2
         }
+      },
+      confirmDeletionDialog: {
+        top: "50%"
       }
     })
   }
@@ -108,8 +112,10 @@ const SharedFolderOverview = () => {
   const [column, setColumn] = useState<"name" | "size" | "date_uploaded">("name")
   const { redirect } = useHistory()
   const { desktop } = useThemeSwitcher()
-
-  const bucketsToShow = useMemo(() => buckets.filter(b => b.type === "share"), [buckets])
+  const [bucketToDelete, setBucketToDelete] = useState<BucketKeyPermission | undefined>(undefined)
+  const [isDeleteBucketModalOpen, setIsDeleteBucketModalOpen] = useState(false)
+  const [isDeletingSharedFolder, setIsDeletingSharedFolder] = useState(false)
+  const bucketsToShow = useMemo(() => buckets.filter(b => b.type === "share" && b.status !== "deleting"), [buckets])
 
   const handleSortToggle = (
     targetColumn: "name" | "size" | "date_uploaded"
@@ -134,6 +140,18 @@ const SharedFolderOverview = () => {
       .catch(console.error)
   }, [filesApiClient, refreshBuckets])
 
+  const handleDeleteBucket = useCallback((bucket: BucketKeyPermission) => {
+    setIsDeletingSharedFolder(true)
+    filesApiClient.removeBucket(bucket.id)
+      .then(() => refreshBuckets(false))
+      .catch(console.error)
+      .finally(() => {
+        setIsDeletingSharedFolder(false)
+        setBucketToDelete(undefined)
+        setIsDeleteBucketModalOpen(false)
+      })
+  }, [filesApiClient, refreshBuckets])
+
   const openSharedFolder = useCallback((bucketId: string) => {
     redirect(ROUTE_LINKS.SharedFolderExplorer(bucketId, "/"))
   }, [redirect])
@@ -218,7 +236,7 @@ const SharedFolderOverview = () => {
             </TableHead>
             <TableBody>
               {bucketsToShow.map((bucket) =>
-                <SharedFolderRowWrapper
+                <SharedFolderRow
                   key={bucket.id}
                   bucket={bucket}
                   handleRename={handleRename}
@@ -227,6 +245,10 @@ const SharedFolderOverview = () => {
                     setIsBucketModalOpen(true)
                     setBucketToEdit(bucket)
                   }}
+                  handleDeleteSharedFolder={() => {
+                    setBucketToDelete(bucket)
+                    setIsDeleteBucketModalOpen(true)
+                  }}
                 />
               )}
             </TableBody>
@@ -245,6 +267,21 @@ const SharedFolderOverview = () => {
         }}
         bucket={bucketToEdit}
       />
+      <Dialog
+        active={isDeleteBucketModalOpen}
+        reject={() => setIsDeleteBucketModalOpen(false)}
+        accept={() => bucketToDelete && handleDeleteBucket(bucketToDelete)}
+        requestMessage={bucketToDelete?.permission === "owner"
+          ? "You are about to delete a shared folder. Please make sure that you have backed up any necessary content"
+          : "You will be removed from the shared folder. Only the owner of the folder can add you back."
+        }
+        rejectText = {t`Cancel`}
+        acceptText = {t`Confirm`}
+        acceptButtonProps={{ loading: isDeletingSharedFolder, disabled: isDeletingSharedFolder, testId: "confirm-deletion" }}
+        rejectButtonProps={{ disabled: isDeletingSharedFolder, testId: "cancel-deletion" }}
+        injectedClass={{ inner: classes.confirmDeletionDialog }}
+        testId="shared-folder-deletion"
+      />
     </>
   )
 }