feat: deletion func done

Author: g-saracca

public/locales/en/collection.json

@@ -51,7 +51,8 @@
   "editedAlert": "You have successfully updated your collection!",
   "editCollection": {
     "edit": "Edit",
-    "generalInfo": "General Information"
+    "generalInfo": "General Information",
+    "deleteCollection": "Delete Collection"
   },
   "featuredItems": {
     "title": "Featured Items",
@@ -60,5 +61,12 @@
       "nextLabel": "Go to next slide",
       "dotLabel": "Go to slide"
     }
-  }
+  },
+  "deleteCollectionModal": {
+    "title": "Delete Collection",
+    "message": "Are you sure you want to delete your collection? You cannot undelete this collection.",
+    "delete": "Delete"
+  },
+  "collectionDeletedSuccess": "Your collection has been deleted.",
+  "defaultCollectionDeleteError": "Something went wrong deleting the collection. Try again later."
 }

public/locales/en/shared.json

@@ -8,6 +8,7 @@
   "more": "More...",
   "less": "Less...",
   "share": "Share",
+  "delete": "Delete",
   "saveChanges": "Save Changes",
   "dragHandleLabel": "press space to select and keys to drag",
   "pageNumberNotFound": {

src/sections/collection/Collection.tsx

@@ -52,6 +52,7 @@ export function Collection({
   const canUserEditCollection = Boolean(collectionUserPermissions?.canEditCollection)
   const canUserAddDataset = Boolean(collectionUserPermissions?.canAddDataset)
   const canUserPublishCollection = Boolean(collectionUserPermissions?.canPublishCollection)
+  const canUserDeleteCollection = Boolean(collectionUserPermissions?.canDeleteCollection)
 
   const showAddDataActions = canUserAddCollection || canUserAddDataset
   const showPublishButton = !collection?.isReleased && canUserPublishCollection
@@ -107,7 +108,13 @@ export function Collection({
                         collectionId={collection.id}
                       />
                     )}
-                    {showEditButton && <EditCollectionDropdown collection={collection} />}
+                    {showEditButton && (
+                      <EditCollectionDropdown
+                        collection={collection}
+                        canUserDeleteCollection={canUserDeleteCollection}
+                        collectionRepository={collectionRepository}
+                      />
+                    )}
                   </ButtonGroup>
                 )}
               </div>

src/sections/collection/edit-collection-dropdown/EditCollectionDropdown.tsx

@@ -11,13 +11,22 @@ import {
 import { PencilFill } from 'react-bootstrap-icons'
 import { Collection } from '@/collection/domain/models/Collection'
 import { RouteWithParams } from '@/sections/Route.enum'
+import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
+import { CollectionHelper } from '../CollectionHelper'
+import { DeleteCollectionButton } from './delete-collection-button/DeleteCollectionButton'
 import styles from './EditCollectionDropdown.module.scss'
 
 interface EditCollectionDropdownProps {
   collection: Collection
+  canUserDeleteCollection: boolean
+  collectionRepository: CollectionRepository
 }
 
-export const EditCollectionDropdown = ({ collection }: EditCollectionDropdownProps) => {
+export const EditCollectionDropdown = ({
+  collection,
+  collectionRepository,
+  canUserDeleteCollection
+}: EditCollectionDropdownProps) => {
   const { t } = useTranslation('collection')
   const navigate = useNavigate()
 
@@ -29,6 +38,10 @@ export const EditCollectionDropdown = ({ collection }: EditCollectionDropdownPro
     navigate(RouteWithParams.EDIT_COLLECTION_FEATURED_ITEMS(collection.id))
   }
 
+  // TODO:ME - We need another check, if collection has data
+  const canCollectionBeDeleted =
+    canUserDeleteCollection && !CollectionHelper.isRootCollection(collection.hierarchy)
+
   return (
     <DropdownButton
       id="edit-collection-dropdown"
@@ -55,6 +68,17 @@ export const EditCollectionDropdown = ({ collection }: EditCollectionDropdownPro
       <DropdownButtonItem onClick={onClickEditFeaturedItems}>
         {t('featuredItems.title')}
       </DropdownButtonItem>
+
+      {canCollectionBeDeleted && (
+        <>
+          <DropdownSeparator />
+          <DeleteCollectionButton
+            collectionId={collection.id}
+            parentCollection={CollectionHelper.getParentCollection(collection.hierarchy)}
+            collectionRepository={collectionRepository}
+          />
+        </>
+      )}
     </DropdownButton>
   )
 }

src/sections/collection/edit-collection-dropdown/delete-collection-button/DeleteCollectionButton.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { toast } from 'react-toastify'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { DropdownButtonItem } from '@iqss/dataverse-design-system'
+import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
+import { ConfirmDeleteCollectionModal } from './confirm-delete-collection-modal/ConfirmDeleteCollectionModal'
+import { useDeleteCollection } from './useDeleteCollection'
+import { UpwardHierarchyNode } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode'
+import { RouteWithParams } from '@/sections/Route.enum'
+
+interface DeleteCollectionButtonProps {
+  collectionId: string
+  parentCollection: UpwardHierarchyNode | undefined
+  collectionRepository: CollectionRepository
+}
+
+export const DeleteCollectionButton = ({
+  collectionId,
+  parentCollection,
+  collectionRepository
+}: DeleteCollectionButtonProps) => {
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false)
+  const navigate = useNavigate()
+  const { t } = useTranslation('collection')
+
+  const { handleDeleteCollection, isDeletingCollection, errorDeletingCollection } =
+    useDeleteCollection({
+      collectionRepository,
+      onSuccessfulDelete: closeModalAndNavigateToParentCollection
+    })
+
+  const handleOpenModal = () => setShowConfirmationModal(true)
+  const handleCloseModal = () => setShowConfirmationModal(false)
+
+  function closeModalAndNavigateToParentCollection() {
+    handleCloseModal()
+
+    toast.success(t('collectionDeletedSuccess'))
+    navigate(RouteWithParams.COLLECTIONS(parentCollection?.id))
+  }
+
+  return (
+    <>
+      <DropdownButtonItem onClick={handleOpenModal}>
+        {t('editCollection.deleteCollection')}
+      </DropdownButtonItem>
+      <ConfirmDeleteCollectionModal
+        show={showConfirmationModal}
+        handleClose={handleCloseModal}
+        handleDelete={() => handleDeleteCollection(collectionId)}
+        isDeletingCollection={isDeletingCollection}
+        errorDeletingCollection={errorDeletingCollection}
+      />
+    </>
+  )
+}

src/sections/collection/edit-collection-dropdown/delete-collection-button/confirm-delete-collection-modal/ConfirmDeleteCollectionModal.module.scss

@@ -0,0 +1,13 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.message {
+  color: $dv-warning-color;
+
+  &.error {
+    color: $dv-danger-color;
+  }
+
+  svg {
+    min-width: fit-content;
+  }
+}

src/sections/collection/edit-collection-dropdown/delete-collection-button/confirm-delete-collection-modal/ConfirmDeleteCollectionModal.tsx

@@ -0,0 +1,62 @@
+import { useTranslation } from 'react-i18next'
+import { Button, Modal, Spinner, Stack } from '@iqss/dataverse-design-system'
+import { ExclamationCircleFill, ExclamationTriangle } from 'react-bootstrap-icons'
+import styles from './ConfirmDeleteCollectionModal.module.scss'
+
+interface ConfirmDeleteCollectionModalProps {
+  show: boolean
+  handleClose: () => void
+  handleDelete: () => void
+  isDeletingCollection: boolean
+  errorDeletingCollection: string | null
+}
+
+export const ConfirmDeleteCollectionModal = ({
+  show,
+  handleClose,
+  handleDelete,
+  isDeletingCollection,
+  errorDeletingCollection
+}: ConfirmDeleteCollectionModalProps) => {
+  const { t: tShared } = useTranslation('shared')
+  const { t } = useTranslation('collection')
+
+  return (
+    <Modal show={show} onHide={isDeletingCollection ? () => {} : handleClose} centered size="lg">
+      <Modal.Header>
+        <Modal.Title>{t('deleteCollectionModal.title')}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Stack gap={2}>
+          <Stack direction="horizontal" gap={2} className={styles.message}>
+            <ExclamationTriangle /> <span>{t('deleteCollectionModal.message')}</span>
+          </Stack>
+          {errorDeletingCollection && (
+            <Stack direction="horizontal" gap={2} className={`${styles.message} ${styles.error}`}>
+              <ExclamationCircleFill /> <span>{errorDeletingCollection}</span>
+            </Stack>
+          )}
+        </Stack>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="secondary"
+          onClick={handleClose}
+          type="button"
+          disabled={isDeletingCollection}>
+          {tShared('cancel')}
+        </Button>
+        <Button
+          variant="danger"
+          onClick={handleDelete}
+          type="button"
+          disabled={isDeletingCollection}>
+          <Stack direction="horizontal" gap={1}>
+            {tShared('delete')}
+            {isDeletingCollection && <Spinner variant="light" animation="border" size="sm" />}
+          </Stack>
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}

src/sections/collection/edit-collection-dropdown/delete-collection-button/useDeleteCollection.ts

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { WriteError } from '@iqss/dataverse-client-javascript'
+import { JSDataverseWriteErrorHandler } from '@/shared/helpers/JSDataverseWriteErrorHandler'
+import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
+import { deleteCollection } from '@/collection/domain/useCases/deleteCollection'
+import { Utils } from '@/shared/helpers/Utils'
+
+interface UseDeleteCollection {
+  collectionRepository: CollectionRepository
+  onSuccessfulDelete?: () => void
+}
+
+interface UseDeleteCollectionReturn {
+  isDeletingCollection: boolean
+  errorDeletingCollection: string | null
+  handleDeleteCollection: (collectionIdOrAlias: number | string) => Promise<void>
+}
+
+export const useDeleteCollection = ({
+  collectionRepository,
+  onSuccessfulDelete
+}: UseDeleteCollection): UseDeleteCollectionReturn => {
+  const { t } = useTranslation('collection')
+  const [isDeletingCollection, setIsDeletingCollection] = useState<boolean>(false)
+  const [errorDeletingCollection, setErrorDeletingCollection] = useState<string | null>(null)
+
+  const handleDeleteCollection = async (collectionIdOrAlias: number | string) => {
+    setIsDeletingCollection(true)
+
+    try {
+      await deleteCollection(collectionRepository, collectionIdOrAlias)
+
+      // Wait 3 seconds before calling onSuccessfulDelete (which is redirecting to parent collection) otherwise Search API will still return the deleted collection item
+      await Utils.sleep(3000)
+
+      onSuccessfulDelete?.()
+    } catch (err: WriteError | unknown) {
+      if (err instanceof WriteError) {
+        const error = new JSDataverseWriteErrorHandler(err)
+        const formattedError = error.getReasonWithoutStatusCode() ?? error.getErrorMessage()
+        setErrorDeletingCollection(formattedError)
+      } else {
+        setErrorDeletingCollection(t('defaultCollectionDeleteError'))
+      }
+    } finally {
+      setIsDeletingCollection(false)
+    }
+  }
+
+  return {
+    isDeletingCollection,
+    errorDeletingCollection,
+    handleDeleteCollection
+  }
+}

src/shared/helpers/Utils.ts

@@ -12,4 +12,6 @@ export class Utils {
       timeoutId = setTimeout(() => fn(...args), delay)
     }
   }
+
+  static sleep = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms))
 }