129 - Dataset Action Buttons UI

.github/workflows/test.yml

@@ -133,6 +133,9 @@ jobs:
         working-directory: packages/design-system
         run: npm run build
 
+      - name: Install Playwright
+        run: npx playwright install
+
       - name: Build Storybook Design System
         working-directory: packages/design-system
         run: npm run build-storybook --quiet

packages/design-system/src/lib/assets/styles/bootstrap-customized.scss

@@ -101,6 +101,18 @@ $navbar-brand-font-size: $dv-brand-font-size;
   justify-content: end;
 }
 
+.dropdown-menu > .dropdown > .dropdown-toggle {
+  width: 100%;
+  text-align: start;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.dropdown-menu > .dropdown > .dropdown-toggle:hover {
+  background-color: $dropdown-link-hover-bg;
+  border-color: transparent;
+}
+
 th {
   vertical-align: middle;
 }

packages/design-system/src/lib/components/button-group/ButtonGroup.module.scss

@@ -1,5 +1,5 @@
 @import "src/lib/assets/styles/design-tokens/colors.module";
 
-.border > button {
+.border > button, .border > [role="group"] > button {
   border: 1px solid $dv-button-border-color;
 }

packages/design-system/src/lib/components/button-group/ButtonGroup.tsx

@@ -7,9 +7,17 @@ interface ButtonGroupProps extends React.HTMLAttributes<HTMLElement> {
   vertical?: boolean
 }
 
-export function ButtonGroup({ vertical, children, ...props }: PropsWithChildren<ButtonGroupProps>) {
+export function ButtonGroup({
+  vertical,
+  children,
+  className,
+  ...props
+}: PropsWithChildren<ButtonGroupProps>) {
   return (
-    <ButtonGroupBS vertical={vertical} className={styles.border} {...props}>
+    <ButtonGroupBS
+      vertical={vertical}
+      className={`${styles.border} ${className ? className : ''}`}
+      {...props}>
       {children}
     </ButtonGroupBS>
   )

public/locales/en/dataset.json

@@ -18,8 +18,43 @@
     "learnAbout": "Learn About",
     "standards": "Data Citation Standards"
   },
-
-  "actions": {
+  "datasetActionButtons": {
+    "title": "Dataset Action Buttons",
+    "submitForReview": {
+      "enabled": "Submit for Review",
+      "disabled": "Submitted for Review"
+    },
+    "publish": {
+      "title": "Publish Dataset",
+      "publish": "Publish",
+      "returnToAuthor": "Return to Author",
+      "changeCurationStatus": "Change Curation Status",
+      "removeCurrentStatus": "Remove Current Status"
+    },
+    "linkDataset": {
+      "title": "Link Dataset"
+    },
+    "editDataset": {
+      "title": "Edit Dataset",
+      "filesUpload": "Files (Upload)",
+      "metadata": "Metadata",
+      "terms": "Terms",
+      "privateUrl": "Private URL",
+      "thumbnailsPlusWidgets": "Thumbnails + Widgets",
+      "delete": {
+        "draft": "Delete Draft Version",
+        "released": "Delete Dataset"
+      },
+      "deaccession": "Deaccession Dataset",
+      "permissions": {
+        "title": "Permissions",
+        "dataset": "Dataset",
+        "file": "File"
+      }
+    },
+    "accessDataset": {
+      "title": "Access Dataset"
+    },
     "uploadFiles": "Upload Files"
   }
 }

src/dataset/domain/models/Dataset.ts

@@ -201,8 +201,7 @@ export enum DatasetPublishingStatus {
   RELEASED = 'released',
   DRAFT = 'draft',
   DEACCESSIONED = 'deaccessioned',
-  EMBARGOED = 'embargoed',
-  IN_REVIEW = 'inReview'
+  EMBARGOED = 'embargoed'
 }
 
 export enum DatasetNonNumericVersion {
@@ -214,6 +213,9 @@ export class DatasetVersion {
   constructor(
     public readonly id: number,
     public readonly publishingStatus: DatasetPublishingStatus,
+    public readonly isLatest: boolean,
+    public readonly isInReview: boolean,
+    public readonly latestVersionStatus: DatasetPublishingStatus,
     public readonly majorNumber?: number,
     public readonly minorNumber?: number
   ) {}
@@ -226,6 +228,32 @@ export class DatasetVersion {
   }
 }
 
+export interface DatasetPermissions {
+  canDownloadFiles: boolean
+  canUpdateDataset: boolean
+  canPublishDataset: boolean
+  canManageDatasetPermissions: boolean
+  canManageFilesPermissions: boolean
+  canDeleteDataset: boolean
+}
+
+export interface DatasetLock {
+  id: number
+  reason: DatasetLockReason
+}
+
+export enum DatasetLockReason {
+  INGEST = 'ingest',
+  WORKFLOW = 'workflow',
+  IN_REVIEW = 'inReview',
+  DCM_UPLOAD = 'dcmUpload',
+  GLOBUS_UPLOAD = 'globusUpload',
+  FINALIZE_PUBLICATION = 'finalizePublication',
+
+  EDIT_IN_PROGRESS = 'editInProgress',
+  FILE_VALIDATION_FAILED = 'fileValidationFailed'
+}
+
 export class Dataset {
   constructor(
     public readonly persistentId: string,
@@ -234,13 +262,40 @@ export class Dataset {
     public readonly labels: DatasetLabel[],
     public readonly summaryFields: DatasetMetadataBlock[],
     public readonly license: DatasetLicense,
-    public readonly metadataBlocks: DatasetMetadataBlocks
+    public readonly metadataBlocks: DatasetMetadataBlocks,
+    public readonly permissions: DatasetPermissions,
+    public readonly locks: DatasetLock[],
+    public readonly hasValidTermsOfAccess: boolean,
+    public readonly isValid: boolean,
+    public readonly isReleased: boolean
   ) {}
 
   public getTitle(): string {
     return this.metadataBlocks[0].fields.title
   }
 
+  public get isLockedFromPublishing(): boolean {
+    return this.isLockedFromEdits
+  }
+
+  public get isLocked(): boolean {
+    return this.locks.length > 0
+  }
+
+  public get isLockedInWorkflow(): boolean {
+    return this.locks.some((lock) => lock.reason === DatasetLockReason.WORKFLOW)
+  }
+
+  public get isLockedFromEdits(): boolean {
+    const lockedReasonIsInReview = this.locks.some(
+      (lock) => lock.reason === DatasetLockReason.IN_REVIEW
+    )
+    // If the lock reason is workflow and the workflow userId is the same as the current user, then the user can edit
+    // TODO - Ask how we want to manage pending workflows
+
+    return this.isLocked && !(lockedReasonIsInReview && this.permissions.canPublishDataset)
+  }
+
   static Builder = class {
     public readonly labels: DatasetLabel[] = []
 
@@ -250,7 +305,12 @@ export class Dataset {
       public readonly citation: string,
       public readonly summaryFields: DatasetMetadataBlock[],
       public readonly license: DatasetLicense = defaultLicense,
-      public readonly metadataBlocks: DatasetMetadataBlocks
+      public readonly metadataBlocks: DatasetMetadataBlocks,
+      public readonly permissions: DatasetPermissions,
+      public readonly locks: DatasetLock[],
+      public readonly hasValidTermsOfAccess: boolean,
+      public readonly isValid: boolean,
+      public readonly isReleased: boolean
     ) {
       this.withLabels()
     }
@@ -267,7 +327,7 @@ export class Dataset {
         )
       }
 
-      if (this.version.publishingStatus !== DatasetPublishingStatus.RELEASED) {
+      if (!this.isReleased) {
         this.labels.push(
           new DatasetLabel(DatasetLabelSemanticMeaning.WARNING, DatasetLabelValue.UNPUBLISHED)
         )
@@ -285,7 +345,7 @@ export class Dataset {
         )
       }
 
-      if (this.version.publishingStatus === DatasetPublishingStatus.IN_REVIEW) {
+      if (this.version.isInReview) {
         this.labels.push(
           new DatasetLabel(DatasetLabelSemanticMeaning.SUCCESS, DatasetLabelValue.IN_REVIEW)
         )
@@ -308,7 +368,12 @@ export class Dataset {
         this.labels,
         this.summaryFields,
         this.license,
-        this.metadataBlocks
+        this.metadataBlocks,
+        this.permissions,
+        this.locks,
+        this.hasValidTermsOfAccess,
+        this.isValid,
+        this.isReleased
       )
     }
   }

src/dataset/infrastructure/mappers/JSDatasetMapper.ts

@@ -1,19 +1,19 @@
 import {
   Dataset as JSDataset,
-  DatasetMetadataBlocks as JSDatasetMetadataBlocks,
   DatasetMetadataBlock as JSDatasetMetadataBlock,
+  DatasetMetadataBlocks as JSDatasetMetadataBlocks,
   DatasetMetadataFields as JSDatasetMetadataFields,
   DatasetVersionInfo as JSDatasetVersionInfo
 } from '@iqss/dataverse-client-javascript'
 import { DatasetVersionState as JSDatasetVersionState } from '@iqss/dataverse-client-javascript/dist/datasets/domain/models/Dataset'
 import {
   Dataset,
   DatasetPublishingStatus,
-  MetadataBlockName,
   DatasetMetadataBlock,
-  DatasetVersion,
+  DatasetMetadataBlocks,
   DatasetMetadataFields,
-  DatasetMetadataBlocks
+  DatasetVersion,
+  MetadataBlockName
 } from '../../domain/models/Dataset'
 
 export class JSDatasetMapper {
@@ -29,7 +29,19 @@ export class JSDatasetMapper {
         jsDataset.alternativePersistentId,
         jsDataset.publicationDate,
         jsDataset.citationDate
-      )
+      ),
+      {
+        canDownloadFiles: true,
+        canUpdateDataset: true,
+        canPublishDataset: true,
+        canManageDatasetPermissions: true,
+        canManageFilesPermissions: true,
+        canDeleteDataset: true
+      }, // TODO Connect with dataset permissions
+      [], // TODO Connect with dataset locks
+      true, // TODO Connect with dataset hasValidTermsOfAccess
+      true, // TODO Connect with dataset isValid
+      !!jsDataset.versionInfo.releaseTime // TODO Connect with dataset isReleased
     ).build()
   }
 
@@ -40,6 +52,9 @@ export class JSDatasetMapper {
     return new DatasetVersion(
       jDatasetVersionId,
       JSDatasetMapper.toStatus(jsDatasetVersionInfo.state),
+      true, // TODO Connect with dataset version isLatest
+      false, // TODO Connect with dataset version isInReview
+      JSDatasetMapper.toStatus(jsDatasetVersionInfo.state), // TODO Connect with dataset version latestVersionState
       jsDatasetVersionInfo.majorNumber,
       jsDatasetVersionInfo.minorNumber
     )

src/sections/dataset/Dataset.tsx

@@ -1,5 +1,3 @@
-import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
-import { useDataset } from './useDataset'
 import { Tabs, Col, Row } from '@iqss/dataverse-design-system'
 import styles from './Dataset.module.scss'
 import { DatasetLabels } from './dataset-labels/DatasetLabels'
@@ -12,22 +10,23 @@ import { DatasetSummary } from './dataset-summary/DatasetSummary'
 import { DatasetCitation } from './dataset-citation/DatasetCitation'
 import { DatasetFiles } from './dataset-files/DatasetFiles'
 import { FileRepository } from '../../files/domain/repositories/FileRepository'
+import { DatasetActionButtons } from './dataset-action-buttons/DatasetActionButtons'
+import { useDataset } from './DatasetContext'
+import { useEffect } from 'react'
 
 interface DatasetProps {
-  datasetRepository: DatasetRepository
   fileRepository: FileRepository
-  searchParams: {
-    persistentId?: string
-    privateUrlToken?: string
-    version?: string
-  }
 }
 
-export function Dataset({ datasetRepository, fileRepository, searchParams }: DatasetProps) {
-  const { dataset } = useDataset(datasetRepository, searchParams)
-  const { isLoading } = useLoading()
+export function Dataset({ fileRepository }: DatasetProps) {
+  const { setIsLoading } = useLoading()
+  const { dataset, isLoading } = useDataset()
   const { t } = useTranslation('dataset')
 
+  useEffect(() => {
+    setIsLoading(isLoading)
+  }, [isLoading])
+
   if (isLoading) {
     return <DatasetSkeleton />
   }
@@ -47,6 +46,9 @@ export function Dataset({ datasetRepository, fileRepository, searchParams }: Dat
               <Col sm={9}>
                 <DatasetCitation citation={dataset.citation} version={dataset.version} />
               </Col>
+              <Col sm={3}>
+                <DatasetActionButtons dataset={dataset} />
+              </Col>
             </Row>
             <Row>
               <Col sm={9} className={styles['summary-container']}>

src/sections/dataset/DatasetContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react'
+import { Dataset } from '../../dataset/domain/models/Dataset'
+
+interface DatasetContextProps {
+  dataset: Dataset | undefined
+  isLoading: boolean
+}
+export const DatasetContext = createContext<DatasetContextProps>({
+  dataset: undefined,
+  isLoading: false
+})
+
+export const useDataset = () => useContext(DatasetContext)

src/sections/dataset/DatasetFactory.tsx

@@ -10,6 +10,7 @@ import { MetadataBlockInfoJSDataverseRepository } from '../../metadata-block-inf
 import { SettingJSDataverseRepository } from '../../settings/infrastructure/SettingJSDataverseRepository'
 import { FilePermissionsProvider } from '../file/file-permissions/FilePermissionsProvider'
 import { SettingsProvider } from '../settings/SettingsProvider'
+import { DatasetProvider } from './DatasetProvider'
 
 const datasetRepository = new DatasetJSDataverseRepository()
 const fileRepository = new FileJSDataverseRepository()
@@ -45,19 +46,19 @@ function DatasetWithSearchParams() {
 
   if (privateUrlToken) {
     return (
-      <Dataset
-        datasetRepository={datasetRepository}
-        fileRepository={fileRepository}
-        searchParams={{ privateUrlToken: privateUrlToken }}
-      />
+      <DatasetProvider
+        repository={datasetRepository}
+        searchParams={{ privateUrlToken: privateUrlToken }}>
+        <Dataset fileRepository={fileRepository} />
+      </DatasetProvider>
     )
   }
 
   return (
-    <Dataset
-      datasetRepository={datasetRepository}
-      fileRepository={fileRepository}
-      searchParams={{ persistentId: persistentId, version: version }}
-    />
+    <DatasetProvider
+      repository={datasetRepository}
+      searchParams={{ persistentId: persistentId, version: version }}>
+      <Dataset fileRepository={fileRepository} />
+    </DatasetProvider>
   )
 }