Merge pull request #823 from IQSS/feat/189-add-export-metadata-dropdown

Add Export Metadata Dropdown

Author: g-saracca

CHANGELOG.md

@@ -9,6 +9,7 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 ### Added
 
 - Dataset Templates Selector in the Create Dataset page.
+- Metadata Export Dropdown to the metadata tab of Dataset Page and File Page.
 
 ### Changed
 

packages/design-system/CHANGELOG.md

@@ -9,6 +9,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
   - Add `customToggle` prop to allow custom toggle components.
   - Add `customToggleClassname` and `customToggleMenuClassname` props to allow custom styling of the custom toggle dropdown wrapper and menu.
   - Add `align` prop to control the alignment of the dropdown menu.
+  - Add `size` prop to control the size of the button (e.g., 'sm', 'lg').
 - **DropdownButtonItem:**
   - Add `type` prop to allow specifying the type of the element.
 - **SelectAdvanced:**

packages/design-system/src/lib/components/dropdown-button/DropdownButton.tsx

@@ -27,6 +27,7 @@ interface DropdownButtonProps {
   customToggleClassname?: string
   customToggleMenuClassname?: string
   align?: 'end' | 'start'
+  size?: 'sm' | 'lg'
 }
 
 export function DropdownButton({
@@ -43,6 +44,7 @@ export function DropdownButton({
   customToggleClassname,
   customToggleMenuClassname,
   align,
+  size,
   children
 }: DropdownButtonProps) {
   // If customToggle is provided, use Dropdown instead of DropdownButtonBS
@@ -58,6 +60,7 @@ export function DropdownButton({
   return (
     <DropdownButtonBS
       className={withSpacing ? styles.spacing : ''}
+      size={size}
       id={id}
       title={
         <>

packages/design-system/src/lib/components/dropdown-button/dropdown-button-item/DropdownButtonItem.tsx

@@ -9,6 +9,7 @@ interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
   children: ReactNode
   as?: ElementType
   to?: string // When passing <Link> as the `as` prop, this prop is used to pass the URL <DropdownButtonItem as={Link} to="/some-path">...</DropdownButtonItem>
+  target?: string // For anchor elements
   type?: string // For button or input elements
   active?: boolean
   className?: string

packages/design-system/src/lib/stories/dropdown-button/DropdownButton.stories.tsx

@@ -7,6 +7,7 @@ import { CanvasFixedHeight } from '../CanvasFixedHeight'
 import { DropdownSeparator } from '../../components/dropdown-button/dropdown-separator/DropdownSeparator'
 import { DropdownHeader } from '../../components/dropdown-button/dropdown-header/DropdownHeader'
 import { Icon } from '../../components/icon/Icon'
+import { Stack } from '../../components/stack/Stack'
 
 /**
  * ## Description
@@ -237,3 +238,42 @@ export const WithCustomToggle: Story = {
     </CanvasFixedHeight>
   )
 }
+
+export const AllSizesAtAGlance: Story = {
+  name: 'All sizes at a glance',
+  render: () => (
+    <CanvasFixedHeight height={200}>
+      <Stack direction="horizontal" gap={3}>
+        <DropdownButton
+          withSpacing
+          title="Large size"
+          id="dropdown-large"
+          variant="primary"
+          size="lg">
+          <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+          <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+          <DropdownButtonItem href="/item-3">Item 3</DropdownButtonItem>
+        </DropdownButton>
+        <DropdownButton
+          withSpacing
+          title="Medium size (default)"
+          id="dropdown-medium"
+          variant="secondary">
+          <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+          <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+          <DropdownButtonItem href="/item-3">Item 3</DropdownButtonItem>
+        </DropdownButton>
+        <DropdownButton
+          withSpacing
+          title="Small size"
+          id="dropdown-small"
+          variant="secondary"
+          size="sm">
+          <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+          <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+          <DropdownButtonItem href="/item-3">Item 3</DropdownButtonItem>
+        </DropdownButton>
+      </Stack>
+    </CanvasFixedHeight>
+  )
+}

public/locales/en/shared.json

@@ -27,6 +27,7 @@
   "dragHandleLabel": "press space to select and keys to drag",
   "unknown": "Unknown",
   "find": "Find",
+  "exportMetadata": "Export Metadata",
   "pageNumberNotFound": {
     "heading": "Page Number Not Found",
     "message": "The page number you requested does not exist. Please try a different page number."

src/info/domain/hooks/useGetAvailableDatasetMetadataExportFormats.ts

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useState } from 'react'
+import { ReadError } from '@iqss/dataverse-client-javascript'
+import { DataverseInfoRepository } from '../repositories/DataverseInfoRepository'
+import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErrorHandler'
+import { getAvailableDatasetMetadataExportFormats } from '../useCases/getAvailableDatasetMetadataExportFormats'
+import { DatasetMetadataExportFormats } from '../models/DatasetMetadataExportFormats'
+
+interface useGetAvailableDatasetMetadataExportFormatsProps {
+  dataverseInfoRepository: DataverseInfoRepository
+  autoFetch?: boolean
+}
+
+export const useGetAvailableDatasetMetadataExportFormats = ({
+  dataverseInfoRepository,
+  autoFetch = true
+}: useGetAvailableDatasetMetadataExportFormatsProps) => {
+  const [datasetMetadataExportFormats, setDatasetMetadataExportFormats] =
+    useState<DatasetMetadataExportFormats | null>(null)
+  const [isLoadingExportFormats, setIsLoadingExportFormats] = useState<boolean>(autoFetch)
+  const [errorGetExportFormats, setErrorGetExportFormats] = useState<string | null>(null)
+
+  const fetchDatasetMetadataExportFormats = useCallback(async () => {
+    setIsLoadingExportFormats(true)
+    setErrorGetExportFormats(null)
+
+    try {
+      const exportFormatsResponse = await getAvailableDatasetMetadataExportFormats(
+        dataverseInfoRepository
+      )
+
+      setDatasetMetadataExportFormats(exportFormatsResponse)
+    } catch (err) {
+      if (err instanceof ReadError) {
+        const error = new JSDataverseReadErrorHandler(err)
+        const formattedError =
+          error.getReasonWithoutStatusCode() ?? /* istanbul ignore next */ error.getErrorMessage()
+
+        setErrorGetExportFormats(formattedError)
+      } else {
+        setErrorGetExportFormats(
+          'Something went wrong getting the dataset export formats. Try again later.'
+        )
+      }
+    } finally {
+      setIsLoadingExportFormats(false)
+    }
+  }, [dataverseInfoRepository])
+
+  useEffect(() => {
+    if (autoFetch) {
+      void fetchDatasetMetadataExportFormats()
+    }
+  }, [autoFetch, fetchDatasetMetadataExportFormats])
+
+  return {
+    datasetMetadataExportFormats,
+    isLoadingExportFormats,
+    errorGetExportFormats,
+    fetchDatasetMetadataExportFormats
+  }
+}

src/info/domain/models/DatasetMetadataExportFormats.ts

@@ -0,0 +1,16 @@
+export type DatasetMetadataExportFormats = Record<string, DatasetMetadataExportFormat>
+
+type DatasetMetadataExportFormat = DatasetMetadataExportFormatBase | XmlDatasetMetadataExportFormat
+
+interface DatasetMetadataExportFormatBase {
+  displayName: string
+  mediaType: string
+  isHarvestable: boolean
+  isVisibleInUserInterface: boolean
+}
+
+interface XmlDatasetMetadataExportFormat extends DatasetMetadataExportFormatBase {
+  XMLNameSpace: string
+  XMLSchemaLocation: string
+  XMLSchemaVersion: string
+}

src/info/domain/repositories/DataverseInfoRepository.ts

@@ -2,6 +2,7 @@ import { ZipDownloadLimit } from '@/settings/domain/models/ZipDownloadLimit'
 import { DataverseVersion } from '../models/DataverseVersion'
 import { TermsOfUse } from '../models/TermsOfUse'
 import { Setting } from '@/settings/domain/models/Setting'
+import { DatasetMetadataExportFormats } from '../models/DatasetMetadataExportFormats'
 
 export interface DataverseInfoRepository {
   getVersion(): Promise<DataverseVersion>
@@ -10,4 +11,5 @@ export interface DataverseInfoRepository {
   getMaxEmbargoDurationInMonths: () => Promise<Setting<number>>
   getHasPublicStore: () => Promise<Setting<boolean>>
   getExternalStatusesAllowed: () => Promise<Setting<string[]>>
+  getAvailableDatasetMetadataExportFormats: () => Promise<DatasetMetadataExportFormats>
 }

src/info/domain/useCases/getAvailableDatasetMetadataExportFormats.ts

@@ -0,0 +1,8 @@
+import { DataverseInfoRepository } from '../repositories/DataverseInfoRepository'
+import { DatasetMetadataExportFormats } from '../models/DatasetMetadataExportFormats'
+
+export function getAvailableDatasetMetadataExportFormats(
+  dataverseInfoRepository: DataverseInfoRepository
+): Promise<DatasetMetadataExportFormats> {
+  return dataverseInfoRepository.getAvailableDatasetMetadataExportFormats()
+}