diff --git a/src/sections/collection/Collection.module.scss b/src/sections/collection/Collection.module.scss index f3d91b901..a6730da0b 100644 --- a/src/sections/collection/Collection.module.scss +++ b/src/sections/collection/Collection.module.scss @@ -11,10 +11,19 @@ gap: 10px; } -.action-buttons { +.metrics-actions-container { display: flex; - justify-content: flex-end; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; margin-bottom: 1rem; + + .right-content { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + align-items: center; + } } .subtext { diff --git a/src/sections/collection/Collection.tsx b/src/sections/collection/Collection.tsx index f90964f0b..a2acddc5a 100644 --- a/src/sections/collection/Collection.tsx +++ b/src/sections/collection/Collection.tsx @@ -14,6 +14,7 @@ import { CollectionSkeleton } from './CollectionSkeleton' import { PageNotFound } from '../page-not-found/PageNotFound' import { CreatedAlert } from './CreatedAlert' import { PublishCollectionButton } from './publish-collection/PublishCollectionButton' +import { ShareButton } from './share-button/ShareButton' import styles from './Collection.module.scss' interface CollectionProps { @@ -47,9 +48,11 @@ export function Collection({ const canUserAddCollection = Boolean(collectionUserPermissions?.canAddCollection) const canUserAddDataset = Boolean(collectionUserPermissions?.canAddDataset) - const canUserPublishCollection = user && Boolean(collectionUserPermissions?.canPublishCollection) + const canUserPublishCollection = Boolean(collectionUserPermissions?.canPublishCollection) const showAddDataActions = Boolean(user && (canUserAddCollection || canUserAddDataset)) + const showPublishButton = user && !collection?.isReleased && canUserPublishCollection + const { t } = useTranslation('collection') if (!isLoading && !collection) { @@ -71,14 +74,25 @@ export function Collection({ {t('publishedAlert')} )} - {!collection.isReleased && canUserPublishCollection && ( -