Feat/461 publish collection

public/locales/en/collection.json

@@ -3,5 +3,11 @@
     "authenticated": "This collection currently has no datasets. You can add to it by using the Add Data button on this page.",
     "anonymous": "This collection currently has no datasets. Please <1>log in</1> to see if you are able to add to it."
   },
+  "publish": {
+    "button": "Publish",
+    "question": "Are you sure you want to publish your collection? Once you do so it must remain published.",
+    "error": "There was an error publishing your collection."
+  },
+  "publishedAlert": "Your collection is now public.",
   "createdAlert": "You have successfully created your collection! To learn more about what you can do with your collection, check out the <anchor>User Guide</anchor>."
 }

public/locales/en/shared.json

@@ -1,5 +1,7 @@
 {
   "asterisksIndicateRequiredFields": "Asterisks indicate required fields",
   "remove": "Remove",
-  "add": "Add"
+  "add": "Add",
+  "cancel": "Cancel",
+  "continue": "Continue"
 }

src/collection/domain/repositories/CollectionRepository.ts

@@ -8,4 +8,5 @@ export interface CollectionRepository {
   create(collection: CollectionDTO, hostCollection?: string): Promise<number>
   getFacets(collectionIdOrAlias: number | string): Promise<CollectionFacet[]>
   getUserPermissions(collectionIdOrAlias: number | string): Promise<CollectionUserPermissions>
+  publish(collectionIdOrAlias: number | string): Promise<void>
 }

src/collection/domain/useCases/publishCollection.ts

@@ -0,0 +1,10 @@
+import { CollectionRepository } from '../repositories/CollectionRepository'
+
+export function publishCollection(
+  collectionRepository: CollectionRepository,
+  id: string
+): Promise<void> {
+  return collectionRepository.publish(id).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts

@@ -4,7 +4,8 @@ import {
   createCollection,
   getCollection,
   getCollectionFacets,
-  getCollectionUserPermissions
+  getCollectionUserPermissions,
+  publishCollection
 } from '@iqss/dataverse-client-javascript'
 import { JSCollectionMapper } from '../mappers/JSCollectionMapper'
 import { CollectionDTO } from '../../domain/useCases/DTOs/CollectionDTO'
@@ -33,4 +34,7 @@ export class CollectionJSDataverseRepository implements CollectionRepository {
       .execute(collectionIdOrAlias)
       .then((jsCollectionUserPermissions) => jsCollectionUserPermissions)
   }
+  publish(collectionIdOrAlias: number | string): Promise<void> {
+    return publishCollection.execute(collectionIdOrAlias)
+  }
 }

src/sections/Route.enum.ts

@@ -27,5 +27,6 @@ export const RouteWithParams = {
 export enum QueryParamKey {
   VERSION = 'version',
   PERSISTENT_ID = 'persistentId',
+  COLLECTION_ID = 'collectionId',
   QUERY = 'q'
 }

src/sections/collection/Collection.tsx

@@ -15,12 +15,14 @@ import { CollectionInfo } from './CollectionInfo'
 import { Trans, useTranslation } from 'react-i18next'
 import { useScrollTop } from '../../shared/hooks/useScrollTop'
 import { useGetCollectionUserPermissions } from '../../shared/hooks/useGetCollectionUserPermissions'
+import { PublishCollectionButton } from './PublishCollectionButton'
 
 interface CollectionProps {
   repository: CollectionRepository
   datasetRepository: DatasetRepository
   id: string
   created: boolean
+  published: boolean
   page?: number
   infiniteScrollEnabled?: boolean
 }
@@ -30,20 +32,21 @@ export function Collection({
   id,
   datasetRepository,
   created,
+  published,
   page,
   infiniteScrollEnabled = false
 }: CollectionProps) {
   useScrollTop()
   const { user } = useSession()
-  const { collection, isLoading } = useCollection(repository, id)
+  const { collection, isLoading } = useCollection(repository, id, published)
   const { collectionUserPermissions } = useGetCollectionUserPermissions({
     collectionIdOrAlias: id,
     collectionRepository: repository
   })
 
   const canUserAddCollection = Boolean(collectionUserPermissions?.canAddCollection)
   const canUserAddDataset = Boolean(collectionUserPermissions?.canAddDataset)
-
+  const canUserPublishCollection = user && Boolean(collectionUserPermissions?.canPublishCollection)
   const showAddDataActions = user && (canUserAddCollection || canUserAddDataset)
 
   const { t } = useTranslation('collection')
@@ -78,6 +81,16 @@ export function Collection({
                 />
               </Alert>
             )}
+            {published && (
+              <Alert variant="success" dismissible={false}>
+                {t('publishedAlert')}
+              </Alert>
+            )}
+            {!collection.isReleased && canUserPublishCollection && (
+              <div className={styles.container}>
+                <PublishCollectionButton repository={repository} collectionId={collection.id} />
+              </div>
+            )}
             {showAddDataActions && (
               <div className={styles.container}>
                 <AddDataActionsButton

src/sections/collection/CollectionFactory.tsx

@@ -18,8 +18,9 @@ function CollectionWithSearchParams() {
   const { collectionId = 'root' } = useParams<{ collectionId: string }>()
   const location = useLocation()
   const page = searchParams.get('page') ? parseInt(searchParams.get('page') as string) : undefined
-  const state = location.state as { created: boolean } | undefined
+  const state = location.state as { published: boolean; created: boolean } | undefined
   const created = state?.created ?? false
+  const published = state?.published ?? false
 
   return (
     <Collection
@@ -28,6 +29,7 @@ function CollectionWithSearchParams() {
       page={page}
       id={collectionId}
       created={created}
+      published={published}
       infiniteScrollEnabled={INFINITE_SCROLL_ENABLED}
     />
   )

src/sections/collection/PublishCollectionButton.tsx

@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import { CollectionRepository } from '../../collection/domain/repositories/CollectionRepository'
+import { PublishCollectionModal } from './publish-collection/PublishCollectionModal'
+import { Button } from '@iqss/dataverse-design-system'
+import { GlobeAmericas } from 'react-bootstrap-icons'
+import styles from '../shared/add-data-actions/AddDataActionsButton.module.scss'
+
+interface PublishCollectionButtonProps {
+  repository: CollectionRepository
+  collectionId: string
+}
+export function PublishCollectionButton({
+  repository,
+  collectionId
+}: PublishCollectionButtonProps) {
+  const { t } = useTranslation('collection')
+  const [showModal, setShowModal] = useState(false)
+
+  const handleSelect = () => {
+    setShowModal(true)
+  }
+
+  return (
+    <>
+      <PublishCollectionModal
+        show={showModal}
+        repository={repository}
+        collectionId={collectionId}
+        handleClose={() => setShowModal(false)}
+      />
+      <Button
+        icon={<GlobeAmericas className={styles.icon} />}
+        variant="secondary"
+        onClick={handleSelect}
+        type="submit">
+        {t('publish.button')}
+      </Button>
+    </>
+  )
+}

src/sections/collection/publish-collection/PublishCollectionModal.module.scss

@@ -0,0 +1,10 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.errorText {
+  color: $dv-danger-color;
+}
+
+.warningText {
+  margin-bottom: 0;
+  color: $dv-warning-color;
+}

src/sections/collection/publish-collection/PublishCollectionModal.tsx

@@ -0,0 +1,75 @@
+import { useTranslation } from 'react-i18next'
+import { Button, Modal, Stack } from '@iqss/dataverse-design-system'
+import { usePublishCollection } from './usePublishCollection'
+
+import styles from './PublishCollectionModal.module.scss'
+import { useNavigate } from 'react-router-dom'
+import { CollectionRepository } from '../../../collection/domain/repositories/CollectionRepository'
+import { SubmissionStatus } from '../../shared/form/DatasetMetadataForm/useSubmitDataset'
+import { RouteWithParams } from '../../Route.enum'
+
+interface PublishCollectionModalProps {
+  show: boolean
+  repository: CollectionRepository
+  collectionId: string
+  handleClose: () => void
+}
+
+export function PublishCollectionModal({
+  show,
+  repository,
+  collectionId,
+  handleClose
+}: PublishCollectionModalProps) {
+  const { t: tShared } = useTranslation('shared')
+  const { t: tCollection } = useTranslation('collection')
+
+  const navigate = useNavigate()
+  const { submissionStatus, submitPublish, publishError } = usePublishCollection(
+    repository,
+    collectionId,
+    onPublishSucceed
+  )
+
+  function onPublishSucceed() {
+    navigate(RouteWithParams.COLLECTIONS(collectionId), {
+      state: { published: true }
+    })
+    handleClose()
+  }
+
+  return (
+    <Modal show={show} onHide={handleClose} size="xl">
+      <Modal.Header>
+        <Modal.Title>Publish Collection</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Stack direction="vertical">
+          <p className={styles.warningText}>{tCollection('publish.question')}</p>
+          <span className={styles.errorText}>
+            {submissionStatus === SubmissionStatus.Errored &&
+              `${tCollection('publish.error')} ${publishError ? publishError : ''}`}
+          </span>
+        </Stack>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="primary"
+          onClick={() => {
+            submitPublish()
+          }}
+          type="submit">
+          {tShared('continue')}
+        </Button>
+        <Button
+          withSpacing
+          variant="secondary"
+          type="button"
+          onClick={handleClose}
+          disabled={submissionStatus === SubmissionStatus.IsSubmitting}>
+          {tShared('cancel')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}

src/sections/collection/publish-collection/usePublishCollection.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react'
+import { CollectionRepository } from '../../../collection/domain/repositories/CollectionRepository'
+import { publishCollection } from '../../../collection/domain/useCases/publishCollection'
+
+import { SubmissionStatus } from '../../shared/form/DatasetMetadataForm/useSubmitDataset'
+
+type UsePublishCollectionReturnType =
+  | {
+      submissionStatus:
+        | SubmissionStatus.NotSubmitted
+        | SubmissionStatus.IsSubmitting
+        | SubmissionStatus.SubmitComplete
+      submitPublish: () => void
+      publishError: null
+    }
+  | {
+      submissionStatus: SubmissionStatus.Errored
+      submitPublish: () => void
+      publishError: string
+    }
+
+export function usePublishCollection(
+  repository: CollectionRepository,
+  collectionId: string,
+  onPublishSucceed: () => void
+): UsePublishCollectionReturnType {
+  const [submissionStatus, setSubmissionStatus] = useState<SubmissionStatus>(
+    SubmissionStatus.NotSubmitted
+  )
+  const [publishError, setPublishError] = useState<string | null>(null)
+
+  const submitPublish = (): void => {
+    setSubmissionStatus(SubmissionStatus.IsSubmitting)
+
+    publishCollection(repository, collectionId)
+      .then(() => {
+        setPublishError(null)
+        setSubmissionStatus(SubmissionStatus.SubmitComplete)
+        onPublishSucceed()
+        return
+      })
+      .catch((err) => {
+        const errorMessage = err instanceof Error && err.message ? err.message : 'Unknown Error' // TODO: i18n
+
+        setPublishError(errorMessage)
+        setSubmissionStatus(SubmissionStatus.Errored)
+      })
+  }
+
+  return {
+    submissionStatus,
+    submitPublish,
+    publishError
+  } as UsePublishCollectionReturnType
+}

src/sections/collection/useCollection.tsx

@@ -3,13 +3,17 @@ import { Collection } from '../../collection/domain/models/Collection'
 import { useEffect, useState } from 'react'
 import { getCollectionById } from '../../collection/domain/useCases/getCollectionById'
 
-export function useCollection(collectionRepository: CollectionRepository, collectionId: string) {
+export function useCollection(
+  collectionRepository: CollectionRepository,
+  collectionId: string,
+  published?: boolean
+) {
   const [isLoading, setIsLoading] = useState(true)
   const [collection, setCollection] = useState<Collection>()
 
   useEffect(() => {
     setIsLoading(true)
-
+    setCollection(undefined)
     getCollectionById(collectionRepository, collectionId)
       .then((collection: Collection | undefined) => {
         setCollection(collection)
@@ -20,7 +24,7 @@ export function useCollection(collectionRepository: CollectionRepository, collec
       .finally(() => {
         setIsLoading(false)
       })
-  }, [collectionRepository, collectionId])
+  }, [collectionRepository, collectionId, published])
 
   return { collection, isLoading }
 }

src/sections/dataset/dataset-action-buttons/publish-dataset-menu/PublishDatasetMenu.tsx

@@ -27,7 +27,6 @@ export function PublishDatasetMenu({ dataset, datasetRepository }: PublishDatase
   }
 
   const handleSelect = () => {
-    // TODO - Implement upload files
     setShowModal(true)
   }