diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index f3074ff89..d7969e0f6 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -17,6 +17,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline - **FormSelect:** ability to forward react ref to input. - **FormTextArea:** ability to forward react ref to input. - **FormFeedback:** remove `span: 9` from styles. +- **DropdownButtonItem:** extend Props Interface to accept `as` prop. # [1.1.0](https://github.com/IQSS/dataverse-frontend/compare/@iqss/dataverse-design-system@1.0.1...@iqss/dataverse-design-system@1.1.0) (2024-03-12) diff --git a/packages/design-system/src/lib/components/dropdown-button/dropdown-button-item/DropdownButtonItem.tsx b/packages/design-system/src/lib/components/dropdown-button/dropdown-button-item/DropdownButtonItem.tsx index 61425e7ef..0195b121b 100644 --- a/packages/design-system/src/lib/components/dropdown-button/dropdown-button-item/DropdownButtonItem.tsx +++ b/packages/design-system/src/lib/components/dropdown-button/dropdown-button-item/DropdownButtonItem.tsx @@ -1,5 +1,5 @@ import { Dropdown as DropdownBS } from 'react-bootstrap' -import React, { ReactNode } from 'react' +import React, { ElementType, ReactNode } from 'react' interface DropdownItemProps extends React.HTMLAttributes { href?: string @@ -7,6 +7,7 @@ interface DropdownItemProps extends React.HTMLAttributes { disabled?: boolean download?: string children: ReactNode + as?: ElementType } export function DropdownButtonItem({ @@ -15,6 +16,7 @@ export function DropdownButtonItem({ disabled, download, children, + as, ...props }: DropdownItemProps) { return ( @@ -23,6 +25,7 @@ export function DropdownButtonItem({ eventKey={eventKey} disabled={disabled} download={download} + as={as} {...props}> {children} diff --git a/src/Router.tsx b/src/Router.tsx index 42d7963c8..f7c2feaba 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -6,6 +6,7 @@ import { PageNotFound } from './sections/page-not-found/PageNotFound' import { CreateDatasetFactory } from './sections/create-dataset/CreateDatasetFactory' import { FileFactory } from './sections/file/FileFactory' import { CollectionFactory } from './sections/collection/CollectionFactory' +import { UploadDatasetFilesFactory } from './sections/upload-dataset-files/UploadDatasetFilesFactory' import { DatasetNonNumericVersion } from './dataset/domain/models/Dataset' const router = createBrowserRouter( @@ -31,6 +32,10 @@ const router = createBrowserRouter( path: Route.CREATE_DATASET, element: CreateDatasetFactory.create() }, + { + path: Route.UPLOAD_DATASET_FILES, + element: UploadDatasetFilesFactory.create() + }, { path: Route.FILES, element: FileFactory.create() diff --git a/src/sections/Route.enum.ts b/src/sections/Route.enum.ts index 90468de84..bdce8e57d 100644 --- a/src/sections/Route.enum.ts +++ b/src/sections/Route.enum.ts @@ -5,6 +5,7 @@ export enum Route { LOG_OUT = '/', DATASETS = '/datasets', CREATE_DATASET = '/datasets/create', + UPLOAD_DATASET_FILES = '/datasets/upload-files', FILES = '/files', COLLECTIONS = '/collections' } diff --git a/src/sections/dataset/dataset-action-buttons/edit-dataset-menu/EditDatasetMenu.tsx b/src/sections/dataset/dataset-action-buttons/edit-dataset-menu/EditDatasetMenu.tsx index 03faf3cd1..7df59e0f1 100644 --- a/src/sections/dataset/dataset-action-buttons/edit-dataset-menu/EditDatasetMenu.tsx +++ b/src/sections/dataset/dataset-action-buttons/edit-dataset-menu/EditDatasetMenu.tsx @@ -1,45 +1,76 @@ +import { useTranslation } from 'react-i18next' +import { useNavigate } from 'react-router-dom' import { Dataset } from '../../../../dataset/domain/models/Dataset' import { DropdownButton, DropdownButtonItem } from '@iqss/dataverse-design-system' import { EditDatasetPermissionsMenu } from './EditDatasetPermissionsMenu' import { DeleteDatasetButton } from './DeleteDatasetButton' import { DeaccessionDatasetButton } from './DeaccessionDatasetButton' -import { useTranslation } from 'react-i18next' import { useNotImplementedModal } from '../../../not-implemented/NotImplementedModalContext' import { useSession } from '../../../session/SessionContext' +import { Route } from '../../../Route.enum' interface EditDatasetMenuProps { dataset: Dataset } +enum EditDatasetMenuItems { + FILES_UPLOAD = 'filesUpload', + METADATA = 'metadata', + TERMS = 'terms', + PERMISSIONS = 'permissions', + PRIVATE_URL = 'privateUrl', + THUMBNAILS_PLUS_WIDGETS = 'thumbnailsPlusWidgets' +} + export function EditDatasetMenu({ dataset }: EditDatasetMenuProps) { const { user } = useSession() + const { showModal } = useNotImplementedModal() + const { t } = useTranslation('dataset') + const navigate = useNavigate() + + const handleOnSelect = (eventKey: EditDatasetMenuItems | string | null) => { + if (eventKey === EditDatasetMenuItems.FILES_UPLOAD) { + navigate(`${Route.UPLOAD_DATASET_FILES}?persistentId=${dataset.persistentId}`) + return + } + showModal() + } if (!user || !dataset.permissions.canUpdateDataset) { return <> } - const { showModal } = useNotImplementedModal() - const { t } = useTranslation('dataset') + return ( - + {t('datasetActionButtons.editDataset.filesUpload')} - + {t('datasetActionButtons.editDataset.metadata')} - {t('datasetActionButtons.editDataset.terms')} + + {t('datasetActionButtons.editDataset.terms')} + {(dataset.permissions.canManageDatasetPermissions || dataset.permissions.canManageFilesPermissions) && ( - {t('datasetActionButtons.editDataset.privateUrl')} + + {t('datasetActionButtons.editDataset.privateUrl')} + )} - + {t('datasetActionButtons.editDataset.thumbnailsPlusWidgets')} diff --git a/src/sections/dataset/dataset-files/dataset-upload-files-button/DatasetUploadFilesButton.tsx b/src/sections/dataset/dataset-files/dataset-upload-files-button/DatasetUploadFilesButton.tsx index 995904c6a..db5c23a48 100644 --- a/src/sections/dataset/dataset-files/dataset-upload-files-button/DatasetUploadFilesButton.tsx +++ b/src/sections/dataset/dataset-files/dataset-upload-files-button/DatasetUploadFilesButton.tsx @@ -1,24 +1,26 @@ -import { Button } from '@iqss/dataverse-design-system' +import { useNavigate } from 'react-router-dom' +import { useTranslation } from 'react-i18next' import { PlusLg } from 'react-bootstrap-icons' +import { Button } from '@iqss/dataverse-design-system' import { useSession } from '../../../session/SessionContext' -import styles from './DatasetUploadFilesButton.module.scss' -import { useTranslation } from 'react-i18next' import { useDataset } from '../../DatasetContext' -import { useNotImplementedModal } from '../../../not-implemented/NotImplementedModalContext' +import { Route } from '../../../Route.enum' +import styles from './DatasetUploadFilesButton.module.scss' export function DatasetUploadFilesButton() { const { t } = useTranslation('dataset') const { user } = useSession() const { dataset } = useDataset() - const handleClick = () => { - // TODO - Implement upload files - showModal() - } - const { showModal } = useNotImplementedModal() + const navigate = useNavigate() + if (!user || !dataset?.permissions.canUpdateDataset) { return <> } + const handleClick = () => { + navigate(`${Route.UPLOAD_DATASET_FILES}?persistentId=${dataset.persistentId}`) + } + return (