Merge pull request #859 from IQSS/feat/855-contact-owner-and-share-file

ofahimIQSS · web-flow · commit 6ac9379193e8 · 2025-10-16T11:41:14.000-04:00
Contact Owner and Share buttons in File page
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 ### Added
 
 - Added the value entered by the user in the error messages for metadata field validation errors in EMAIL and URL type fields. For example, instead of showing “Point of Contact E-mail is not a valid email address.“, we now show “Point of Contact E-mail foo is not a valid email address.”
+- Contact Owner button in File Page.
+- Share button in File Page.
 
 ### Changed
 
diff --git a/public/locales/en/file.json b/public/locales/en/file.json
@@ -85,6 +85,10 @@
         "replace": "Replace",
         "delete": "Delete"
       }
+    },
+    "share": {
+      "title": "Share File",
+      "helpText": "Share this file on your favorite social media networks."
     }
   },
   "deleteFileModal": {
diff --git a/src/sections/dataset/dataset-action-buttons/DatasetActionButtons.tsx b/src/sections/dataset/dataset-action-buttons/DatasetActionButtons.tsx
@@ -30,7 +30,6 @@ export function DatasetActionButtons({
 
   const isCurrentVersionDeaccessioned =
     dataset.version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
-  const canUpdateDataset = dataset.permissions.canUpdateDataset
 
   return (
     <ButtonGroup aria-label={t('datasetActionButtons.title')} vertical className={styles.group}>
@@ -59,7 +58,7 @@ export function DatasetActionButtons({
           contactRepository={contactRepository}
         />
 
-        {(!isCurrentVersionDeaccessioned || canUpdateDataset) && <ShareDatasetButton />}
+        {!isCurrentVersionDeaccessioned && <ShareDatasetButton />}
       </ButtonGroup>
     </ButtonGroup>
   )
diff --git a/src/sections/file/File.module.scss b/src/sections/file/File.module.scss
@@ -45,3 +45,9 @@
   width: 100%;
   margin: 0.5rem 0;
 }
+
+.contact-owner-and-share-group {
+  > button {
+    width: 50%;
+  }
+}
diff --git a/src/sections/file/File.tsx b/src/sections/file/File.tsx
@@ -24,12 +24,16 @@ import { FilePageHelper } from './FilePageHelper'
 import { FileEmbeddedExternalTool } from './file-embedded-external-tool/FileEmbeddedExternalTool'
 import { useScrollTop } from '@/shared/hooks/useScrollTop'
 import { DataverseInfoRepository } from '@/info/domain/repositories/DataverseInfoRepository'
+import { ContactRepository } from '@/contact/domain/repositories/ContactRepository'
+import { ContactButton } from '../shared/contact/ContactButton'
+import { ShareFileButton } from './share-file-button/ShareFileButton'
 
 interface FileProps {
   id: number
   repository: FileRepository
   datasetRepository: DatasetRepository
   dataverseInfoRepository: DataverseInfoRepository
+  contactRepository: ContactRepository
   datasetVersionNumber?: string
   toolTypeSelectedQueryParam?: string
 }
@@ -39,6 +43,7 @@ export function File({
   repository,
   datasetRepository,
   dataverseInfoRepository,
+  contactRepository,
   datasetVersionNumber,
   toolTypeSelectedQueryParam
 }: FileProps) {
@@ -68,6 +73,9 @@ export function File({
     file?.metadata.type.value
   )
 
+  const isDeaccessioned =
+    file?.datasetVersion.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
+
   useEffect(() => {
     setIsLoading(isLoading)
   }, [isLoading, setIsLoading])
@@ -144,9 +152,7 @@ export function File({
                   userHasDownloadPermission={file.permissions.canDownloadFile}
                   metadata={file.metadata}
                   ingestInProgress={file.ingest.isInProgress}
-                  isDeaccessioned={
-                    file.datasetVersion.publishingStatus === DatasetPublishingStatus.DEACCESSIONED
-                  }
+                  isDeaccessioned={isDeaccessioned}
                   isDraft={file.datasetVersion.publishingStatus === DatasetPublishingStatus.DRAFT}
                 />
                 {file.permissions.canEditOwnerDataset && (
@@ -169,6 +175,17 @@ export function File({
                     datasetRepository={datasetRepository}
                   />
                 )}
+
+                <ButtonGroup className={styles['contact-owner-and-share-group']}>
+                  <ContactButton
+                    toContactName={file.datasetVersion.title}
+                    contactObjectType="dataset"
+                    id={file.datasetPersistentId}
+                    contactRepository={contactRepository}
+                  />
+
+                  {!isDeaccessioned && <ShareFileButton />}
+                </ButtonGroup>
               </ButtonGroup>
             </Col>
           </Row>
diff --git a/src/sections/file/FileFactory.tsx b/src/sections/file/FileFactory.tsx
@@ -7,10 +7,12 @@ import { NotFoundPage } from '../not-found-page/NotFoundPage'
 import { searchParamVersionToDomainVersion } from '../../router'
 import { QueryParamKey } from '../Route.enum'
 import { DataverseInfoJSDataverseRepository } from '@/info/infrastructure/repositories/DataverseInfoJSDataverseRepository'
+import { ContactJSDataverseRepository } from '@/contact/infrastructure/ContactJSDataverseRepository'
 
 const repository = new FileJSDataverseRepository()
 const datasetRepository = new DatasetJSDataverseRepository()
 const dataverseInfoRepository = new DataverseInfoJSDataverseRepository()
+const contactRepository = new ContactJSDataverseRepository()
 
 export class FileFactory {
   static create(): ReactElement {
@@ -39,6 +41,7 @@ function FileWithSearchParams() {
       datasetRepository={datasetRepository}
       toolTypeSelectedQueryParam={toolTypeSelectedQueryParam}
       dataverseInfoRepository={dataverseInfoRepository}
+      contactRepository={contactRepository}
     />
   )
 }
diff --git a/src/sections/file/share-file-button/ShareFileButton.tsx b/src/sections/file/share-file-button/ShareFileButton.tsx
@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@iqss/dataverse-design-system'
+import { SocialShareModal } from '@/sections/shared/social-share-modal/SocialShareModal'
+
+export const ShareFileButton = () => {
+  const { t } = useTranslation('file')
+  const { t: tShared } = useTranslation('shared')
+  const [showShareModal, setShowShareModal] = useState(false)
+
+  const openShareModal = () => setShowShareModal(true)
+  const closeShareModal = () => setShowShareModal(false)
+
+  return (
+    <>
+      <Button variant="secondary" onClick={openShareModal} size="sm">
+        {tShared('share')}
+      </Button>
+
+      <SocialShareModal
+        shareUrl={window.location.href}
+        show={showShareModal}
+        handleClose={closeShareModal}
+        title={t('actionButtons.share.title')}
+        helpText={t('actionButtons.share.helpText')}
+      />
+    </>
+  )
+}
diff --git a/src/stories/file/File.stories.tsx b/src/stories/file/File.stories.tsx
@@ -12,6 +12,7 @@ import { ExternalToolsMockRepository } from '../shared-mock-repositories/externa
 import { FakerHelper } from '@tests/component/shared/FakerHelper'
 import { ExternalToolsMother } from '@tests/component/externalTools/domain/models/ExternalToolsMother'
 import { DataverseInfoMockRepository } from '../shared-mock-repositories/info/DataverseInfoMockRepository'
+import { ContactMockRepository } from '../shared-mock-repositories/contact/ContactMockRepository'
 
 const meta: Meta<typeof File> = {
   title: 'Pages/File',
@@ -32,6 +33,7 @@ export const Default: Story = {
       repository={new FileMockRepository()}
       datasetRepository={new DatasetMockRepository()}
       dataverseInfoRepository={new DataverseInfoMockRepository()}
+      contactRepository={new ContactMockRepository()}
       id={56}
     />
   )
@@ -43,6 +45,7 @@ export const Restricted: Story = {
       repository={new FileMockRepository(FileMother.createRestricted())}
       datasetRepository={new DatasetMockRepository()}
       dataverseInfoRepository={new DataverseInfoMockRepository()}
+      contactRepository={new ContactMockRepository()}
       id={56}
     />
   )
@@ -54,6 +57,7 @@ export const RestrictedWithAccessGranted: Story = {
       repository={new FileMockRepository(FileMother.createRestrictedWithAccessGranted())}
       datasetRepository={new DatasetMockRepository()}
       dataverseInfoRepository={new DataverseInfoMockRepository()}
+      contactRepository={new ContactMockRepository()}
       id={56}
     />
   )
@@ -65,6 +69,7 @@ export const Loading: Story = {
       repository={new FileMockLoadingRepository()}
       datasetRepository={new DatasetMockRepository()}
       dataverseInfoRepository={new DataverseInfoMockRepository()}
+      contactRepository={new ContactMockRepository()}
       id={56}
     />
   )
@@ -76,6 +81,7 @@ export const FileNotFound: Story = {
       repository={new FileMockNoDataRepository()}
       datasetRepository={new DatasetMockRepository()}
       dataverseInfoRepository={new DataverseInfoMockRepository()}
+      contactRepository={new ContactMockRepository()}
       id={56}
     />
   )
@@ -88,6 +94,7 @@ export const WithMultipleExternalTools: Story = {
         repository={new FileMockRepository(FileMother.createRealistic())}
         datasetRepository={new DatasetMockRepository()}
         dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
         id={56}
         toolTypeSelectedQueryParam="preview"
       />
@@ -111,6 +118,7 @@ export const WithOnlyOnePreviewExternalTool: Story = {
         repository={new FileMockRepository(FileMother.createRealistic())}
         datasetRepository={new DatasetMockRepository()}
         dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
         id={56}
         toolTypeSelectedQueryParam="preview"
       />
@@ -134,6 +142,7 @@ export const WithOnlyOneQueryExternalTool: Story = {
         repository={new FileMockRepository(FileMother.createRealistic())}
         datasetRepository={new DatasetMockRepository()}
         dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
         id={56}
         toolTypeSelectedQueryParam="query"
       />
diff --git a/tests/component/sections/dataset/dataset-action-buttons/DatasetActionButtons.spec.tsx b/tests/component/sections/dataset/dataset-action-buttons/DatasetActionButtons.spec.tsx
@@ -73,8 +73,10 @@ describe('DatasetActionButtons', () => {
     cy.findByRole('button', { name: 'Share' }).should('exist')
   })
 
-  it('should not render Share button if the the dataset is deaccessioned and user has no edit permission', () => {
-    const dataset = DatasetMother.createDeaccessionedwithNoEditPermission()
+  it('should not render Share button if the the dataset is deaccessioned', () => {
+    const dataset = DatasetMother.create({
+      version: DatasetVersionMother.createDeaccessioned()
+    })
     cy.mountAuthenticated(
       <DatasetActionButtons
         dataset={dataset}
diff --git a/tests/component/sections/file/File.spec.tsx b/tests/component/sections/file/File.spec.tsx
@@ -7,6 +7,8 @@ import { ExternalToolsProvider } from '@/shared/contexts/external-tools/External
 import { ExternalToolsMother } from '@tests/component/externalTools/domain/models/ExternalToolsMother'
 import { FileExternalToolResolvedMother } from '@tests/component/externalTools/domain/models/FileExternalToolResolvedMother'
 import { DataverseInfoMockRepository } from '@/stories/shared-mock-repositories/info/DataverseInfoMockRepository'
+import { ContactMockRepository } from '@/stories/shared-mock-repositories/contact/ContactMockRepository'
+import { DatasetVersionMother } from '@tests/component/dataset/domain/models/DatasetMother'
 
 const fileRepository: FileRepository = {} as FileRepository
 
@@ -21,6 +23,7 @@ describe('File', () => {
         id={19}
         datasetRepository={new DatasetMockRepository()}
         dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
       />
     )
 
@@ -54,6 +57,7 @@ describe('File', () => {
         id={19}
         datasetRepository={new DatasetMockRepository()}
         dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
       />
     )
 
@@ -71,6 +75,7 @@ describe('File', () => {
         id={19}
         datasetRepository={new DatasetMockRepository()}
         dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
       />
     )
 
@@ -87,6 +92,7 @@ describe('File', () => {
         id={19}
         datasetRepository={new DatasetMockRepository()}
         dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
       />
     )
 
@@ -104,6 +110,7 @@ describe('File', () => {
         datasetVersionNumber={'2.0'}
         datasetRepository={new DatasetMockRepository()}
         dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
       />
     )
 
@@ -117,6 +124,26 @@ describe('File', () => {
     cy.contains('Published On').should('exist')
   })
 
+  it('should not render Share button if the the file dataset version is deaccessioned', () => {
+    const testFile = FileMother.createRealistic({
+      datasetVersion: DatasetVersionMother.createDeaccessioned()
+    })
+    fileRepository.getById = cy.stub().as('getFile').resolves(testFile)
+
+    cy.customMount(
+      <File
+        repository={fileRepository}
+        id={19}
+        datasetVersionNumber={'2.0'}
+        datasetRepository={new DatasetMockRepository()}
+        dataverseInfoRepository={new DataverseInfoMockRepository()}
+        contactRepository={new ContactMockRepository()}
+      />
+    )
+    cy.findByText('Deaccessioned').should('exist')
+    cy.findByRole('button', { name: 'Share' }).should('not.exist')
+  })
+
   describe('external tools tab', () => {
     const externalToolsRepository: ExternalToolsRepository = {} as ExternalToolsRepository
 
@@ -139,6 +166,7 @@ describe('File', () => {
             id={19}
             datasetRepository={new DatasetMockRepository()}
             dataverseInfoRepository={new DataverseInfoMockRepository()}
+            contactRepository={new ContactMockRepository()}
           />
         </ExternalToolsProvider>
       )
@@ -158,6 +186,7 @@ describe('File', () => {
             id={19}
             datasetRepository={new DatasetMockRepository()}
             dataverseInfoRepository={new DataverseInfoMockRepository()}
+            contactRepository={new ContactMockRepository()}
           />
         </ExternalToolsProvider>
       )
@@ -180,6 +209,7 @@ describe('File', () => {
             id={19}
             datasetRepository={new DatasetMockRepository()}
             dataverseInfoRepository={new DataverseInfoMockRepository()}
+            contactRepository={new ContactMockRepository()}
           />
         </ExternalToolsProvider>
       )
@@ -197,6 +227,7 @@ describe('File', () => {
             id={19}
             datasetRepository={new DatasetMockRepository()}
             dataverseInfoRepository={new DataverseInfoMockRepository()}
+            contactRepository={new ContactMockRepository()}
           />
         </ExternalToolsProvider>
       )
@@ -217,6 +248,7 @@ describe('File', () => {
             id={19}
             datasetRepository={new DatasetMockRepository()}
             dataverseInfoRepository={new DataverseInfoMockRepository()}
+            contactRepository={new ContactMockRepository()}
           />
         </ExternalToolsProvider>
       )
diff --git a/tests/component/sections/file/share-file-button/ShareFileButton.spec.tsx b/tests/component/sections/file/share-file-button/ShareFileButton.spec.tsx
@@ -0,0 +1,16 @@
+import { ShareFileButton } from '@/sections/file/share-file-button/ShareFileButton'
+
+describe('ShareFileButton', () => {
+  it('opens and close the share dataset modal', () => {
+    cy.viewport(1200, 800)
+
+    cy.mountAuthenticated(<ShareFileButton />)
+    cy.findByRole('button', { name: /Share/i }).should('exist')
+
+    cy.findByRole('button', { name: /Share/i }).click()
+    cy.findByText('Share this file on your favorite social media networks.').should('exist')
+
+    cy.findAllByRole('button', { name: /Close/i }).last().click()
+    cy.findByText('Share this file on your favorite social media networks.').should('not.exist')
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,10 @@`
`85`	`85`	`"replace": "Replace",`
`86`	`86`	`"delete": "Delete"`
`87`	`87`	`}`
	`88`	`+ },`
	`89`	`+ "share": {`
	`90`	`+ "title": "Share File",`
	`91`	`+ "helpText": "Share this file on your favorite social media networks."`
`88`	`92`	`}`
`89`	`93`	`},`
`90`	`94`	`"deleteFileModal": {`