From 4d58b571e69782ed63cba5da2204098d9544f5b6 Mon Sep 17 00:00:00 2001 From: German Saracca Date: Tue, 16 Apr 2024 14:56:46 -0300 Subject: [PATCH 1/7] feat: add route, basic view and navigation --- src/Router.tsx | 5 ++ src/sections/Route.enum.ts | 1 + .../edit-dataset-menu/EditDatasetMenu.tsx | 50 +++++++++++++++---- .../DatasetUploadFilesButton.tsx | 20 ++++---- .../edit-dataset-files/EditDatasetFiles.tsx | 3 ++ .../EditDatasetFilesFactory.tsx | 8 +++ 6 files changed, 67 insertions(+), 20 deletions(-) create mode 100644 src/sections/edit-dataset-files/EditDatasetFiles.tsx create mode 100644 src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx diff --git a/src/Router.tsx b/src/Router.tsx index 42d7963c8..113bf3a14 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 { EditDatasetFilesFactory } from './sections/edit-dataset-files/EditDatasetFilesFactory' 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.EDIT_DATASET_FILES, + element: EditDatasetFilesFactory.create() + }, { path: Route.FILES, element: FileFactory.create() diff --git a/src/sections/Route.enum.ts b/src/sections/Route.enum.ts index 90468de84..8ed8a5e7f 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', + EDIT_DATASET_FILES = '/datasets/edit-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..11f2d6420 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,77 @@ +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 } +const editDatasetMenuItemOptions = { + FILES_UPLOAD: 'filesUpload', + METADATA: 'metadata', + TERMS: 'terms', + PERMISSIONS: 'permissions', + PRIVATE_URL: 'privateUrl', + THUMBNAILS_PLUS_WIDGETS: 'thumbnailsPlusWidgets' +} as const + +type EditDatasetMenuItems = + (typeof editDatasetMenuItemOptions)[keyof typeof editDatasetMenuItemOptions] + export function EditDatasetMenu({ dataset }: EditDatasetMenuProps) { const { user } = useSession() + const { showModal } = useNotImplementedModal() + const { t } = useTranslation('dataset') + const navigate = useNavigate() + + const handleOnSelect = (eventKey: EditDatasetMenuItems | null) => { + if (eventKey === 'filesUpload') { + navigate(`${Route.EDIT_DATASET_FILES}?persistendId=${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..eb30c7fc1 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,20 +1,17 @@ -import { Button } from '@iqss/dataverse-design-system' +import { Link } 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() + if (!user || !dataset?.permissions.canUpdateDataset) { return <> } @@ -22,9 +19,10 @@ export function DatasetUploadFilesButton() { return ( ) diff --git a/src/sections/edit-dataset-files/EditDatasetFiles.tsx b/src/sections/edit-dataset-files/EditDatasetFiles.tsx new file mode 100644 index 000000000..32a562bfc --- /dev/null +++ b/src/sections/edit-dataset-files/EditDatasetFiles.tsx @@ -0,0 +1,3 @@ +export const EditDatasetFiles = () => { + return
EditDatasetFiles
+} diff --git a/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx b/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx new file mode 100644 index 000000000..9b148b39f --- /dev/null +++ b/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx @@ -0,0 +1,8 @@ +import { ReactElement } from 'react' +import { EditDatasetFiles } from './EditDatasetFiles' + +export class EditDatasetFilesFactory { + static create(): ReactElement { + return + } +} From 011245a1e63568f0b5159fb66b87e615c404f3ee Mon Sep 17 00:00:00 2001 From: German Saracca Date: Tue, 16 Apr 2024 16:01:07 -0300 Subject: [PATCH 2/7] feat: page not found and breadcrumbs --- .../edit-dataset-menu/EditDatasetMenu.tsx | 35 ++++++++-------- .../DatasetUploadFilesButton.tsx | 4 +- .../edit-dataset-files/EditDatasetFiles.tsx | 41 ++++++++++++++++++- .../EditDatasetFilesFactory.tsx | 20 ++++++++- 4 files changed, 76 insertions(+), 24 deletions(-) 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 11f2d6420..35a6c0368 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 @@ -13,17 +13,14 @@ interface EditDatasetMenuProps { dataset: Dataset } -const editDatasetMenuItemOptions = { - FILES_UPLOAD: 'filesUpload', - METADATA: 'metadata', - TERMS: 'terms', - PERMISSIONS: 'permissions', - PRIVATE_URL: 'privateUrl', - THUMBNAILS_PLUS_WIDGETS: 'thumbnailsPlusWidgets' -} as const - -type EditDatasetMenuItems = - (typeof editDatasetMenuItemOptions)[keyof typeof editDatasetMenuItemOptions] +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() @@ -31,9 +28,9 @@ export function EditDatasetMenu({ dataset }: EditDatasetMenuProps) { const { t } = useTranslation('dataset') const navigate = useNavigate() - const handleOnSelect = (eventKey: EditDatasetMenuItems | null) => { - if (eventKey === 'filesUpload') { - navigate(`${Route.EDIT_DATASET_FILES}?persistendId=${dataset.persistentId}`) + const handleOnSelect = (eventKey: EditDatasetMenuItems | string | null) => { + if (eventKey === EditDatasetMenuItems.FILES_UPLOAD) { + navigate(`${Route.EDIT_DATASET_FILES}?persistentId=${dataset.persistentId}`) return } showModal() @@ -52,26 +49,26 @@ export function EditDatasetMenu({ dataset }: EditDatasetMenuProps) { variant="secondary" disabled={dataset.checkIsLockedFromEdits(user.persistentId)}> {t('datasetActionButtons.editDataset.filesUpload')} {t('datasetActionButtons.editDataset.metadata')} - + {t('datasetActionButtons.editDataset.terms')} {(dataset.permissions.canManageDatasetPermissions || dataset.permissions.canManageFilesPermissions) && ( - + {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 eb30c7fc1..658994e8f 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 @@ -15,14 +15,14 @@ export function DatasetUploadFilesButton() { if (!user || !dataset?.permissions.canUpdateDataset) { return <> } - + // TODO:ME : Fix Property 'as' does not exist on type 'IntrinsicAttributes & ButtonProps'. return ( ) diff --git a/src/sections/edit-dataset-files/EditDatasetFiles.tsx b/src/sections/edit-dataset-files/EditDatasetFiles.tsx index 32a562bfc..db87e04d6 100644 --- a/src/sections/edit-dataset-files/EditDatasetFiles.tsx +++ b/src/sections/edit-dataset-files/EditDatasetFiles.tsx @@ -1,3 +1,40 @@ -export const EditDatasetFiles = () => { - return
EditDatasetFiles
+import { useEffect } from 'react' +import { FileRepository } from '../../files/domain/repositories/FileRepository' +import { useLoading } from '../loading/LoadingContext' +import { useDataset } from '../dataset/DatasetContext' +import { PageNotFound } from '../page-not-found/PageNotFound' +import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator' + +interface EditDatasetFilesProps { + fileRepository: FileRepository +} + +export const EditDatasetFiles = ({ fileRepository: _fileRepository }: EditDatasetFilesProps) => { + const { setIsLoading } = useLoading() + const { dataset, isLoading } = useDataset() + + console.log(dataset) + + useEffect(() => { + setIsLoading(isLoading) + }, [isLoading]) + + if (isLoading) { + return

Temporary Loading until having shape of skeleton

+ } + + return ( + <> + {!dataset ? ( + + ) : ( + <> + +
+

Metadata Files uploading goes here

+
+ + )} + + ) } diff --git a/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx b/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx index 9b148b39f..faa13c50f 100644 --- a/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx +++ b/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx @@ -1,8 +1,26 @@ import { ReactElement } from 'react' +import { useSearchParams } from 'react-router-dom' +import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository' +import { FileJSDataverseRepository } from '../../files/infrastructure/FileJSDataverseRepository' +import { DatasetProvider } from '../dataset/DatasetProvider' import { EditDatasetFiles } from './EditDatasetFiles' +const datasetRepository = new DatasetJSDataverseRepository() +const fileRepository = new FileJSDataverseRepository() + export class EditDatasetFilesFactory { static create(): ReactElement { - return + return } } + +function EditDatasetFilesWithSearchParams() { + const [searchParams] = useSearchParams() + const persistentId = searchParams.get('persistentId') ?? undefined + + return ( + + + + ) +} From aba1ea1d4bdecfaa49b62c8555b84bb6d988bc5f Mon Sep 17 00:00:00 2001 From: German Saracca Date: Wed, 17 Apr 2024 14:03:37 -0300 Subject: [PATCH 3/7] feat: change as Link for onclick navigate --- .../DatasetUploadFilesButton.tsx | 14 +++++++++----- .../edit-dataset-files/EditDatasetFiles.tsx | 2 -- 2 files changed, 9 insertions(+), 7 deletions(-) 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 658994e8f..24a8ce12f 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,4 +1,4 @@ -import { Link } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { PlusLg } from 'react-bootstrap-icons' import { Button } from '@iqss/dataverse-design-system' @@ -11,18 +11,22 @@ export function DatasetUploadFilesButton() { const { t } = useTranslation('dataset') const { user } = useSession() const { dataset } = useDataset() + const navigate = useNavigate() if (!user || !dataset?.permissions.canUpdateDataset) { return <> } - // TODO:ME : Fix Property 'as' does not exist on type 'IntrinsicAttributes & ButtonProps'. + + const handleClick = () => { + navigate(`${Route.EDIT_DATASET_FILES}?persistentId=${dataset.persistentId}`) + } + return ( ) diff --git a/src/sections/edit-dataset-files/EditDatasetFiles.tsx b/src/sections/edit-dataset-files/EditDatasetFiles.tsx index db87e04d6..8c08e214d 100644 --- a/src/sections/edit-dataset-files/EditDatasetFiles.tsx +++ b/src/sections/edit-dataset-files/EditDatasetFiles.tsx @@ -13,8 +13,6 @@ export const EditDatasetFiles = ({ fileRepository: _fileRepository }: EditDatase const { setIsLoading } = useLoading() const { dataset, isLoading } = useDataset() - console.log(dataset) - useEffect(() => { setIsLoading(isLoading) }, [isLoading]) From 0e506840ce0123fde7055d554d13542175791758 Mon Sep 17 00:00:00 2001 From: German Saracca Date: Wed, 17 Apr 2024 14:30:16 -0300 Subject: [PATCH 4/7] docs: add basic story --- .../EditDatasetFiles.stories.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/stories/edit-dataset-files/EditDatasetFiles.stories.tsx diff --git a/src/stories/edit-dataset-files/EditDatasetFiles.stories.tsx b/src/stories/edit-dataset-files/EditDatasetFiles.stories.tsx new file mode 100644 index 000000000..80463d8dc --- /dev/null +++ b/src/stories/edit-dataset-files/EditDatasetFiles.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { WithI18next } from '../WithI18next' +import { WithLayout } from '../WithLayout' +import { EditDatasetFiles } from '../../sections/edit-dataset-files/EditDatasetFiles' +import { FileMockRepository } from '../file/FileMockRepository' +import { WithDataset } from '../dataset/WithDataset' + +const meta: Meta = { + title: 'Pages/Edit Dataset Files', + component: EditDatasetFiles, + decorators: [WithI18next], + parameters: { + // Sets the delay for all stories. + chromatic: { delay: 15000, pauseAnimationAtEnd: true } + } +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + decorators: [WithLayout, WithDataset], + render: () => +} From d1584b7b2e62015e8fd726ef115c3ff7994bfcc3 Mon Sep 17 00:00:00 2001 From: German Saracca Date: Fri, 19 Apr 2024 14:24:08 -0300 Subject: [PATCH 5/7] feat(design system): extend props interface to accept as prop --- packages/design-system/CHANGELOG.md | 1 + .../dropdown-button-item/DropdownButtonItem.tsx | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) 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} From 0ddb1431c443731eedb50912c84479d5fa69140c Mon Sep 17 00:00:00 2001 From: German Saracca Date: Fri, 19 Apr 2024 14:59:33 -0300 Subject: [PATCH 6/7] refactor: change edit for upload --- src/Router.tsx | 6 +++--- src/sections/Route.enum.ts | 2 +- .../edit-dataset-menu/EditDatasetMenu.tsx | 10 ++++++---- .../DatasetUploadFilesButton.tsx | 2 +- .../UploadDatasetFiles.tsx} | 6 ++++-- .../UploadDatasetFilesFactory.tsx} | 10 +++++----- .../UploadDatasetFiles.stories.tsx} | 12 ++++++------ 7 files changed, 26 insertions(+), 22 deletions(-) rename src/sections/{edit-dataset-files/EditDatasetFiles.tsx => upload-dataset-files/UploadDatasetFiles.tsx} (86%) rename src/sections/{edit-dataset-files/EditDatasetFilesFactory.tsx => upload-dataset-files/UploadDatasetFilesFactory.tsx} (75%) rename src/stories/{edit-dataset-files/EditDatasetFiles.stories.tsx => upload-dataset-files/UploadDatasetFiles.stories.tsx} (59%) diff --git a/src/Router.tsx b/src/Router.tsx index 113bf3a14..f7c2feaba 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -6,7 +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 { EditDatasetFilesFactory } from './sections/edit-dataset-files/EditDatasetFilesFactory' +import { UploadDatasetFilesFactory } from './sections/upload-dataset-files/UploadDatasetFilesFactory' import { DatasetNonNumericVersion } from './dataset/domain/models/Dataset' const router = createBrowserRouter( @@ -33,8 +33,8 @@ const router = createBrowserRouter( element: CreateDatasetFactory.create() }, { - path: Route.EDIT_DATASET_FILES, - element: EditDatasetFilesFactory.create() + path: Route.UPLOAD_DATASET_FILES, + element: UploadDatasetFilesFactory.create() }, { path: Route.FILES, diff --git a/src/sections/Route.enum.ts b/src/sections/Route.enum.ts index 8ed8a5e7f..bdce8e57d 100644 --- a/src/sections/Route.enum.ts +++ b/src/sections/Route.enum.ts @@ -5,7 +5,7 @@ export enum Route { LOG_OUT = '/', DATASETS = '/datasets', CREATE_DATASET = '/datasets/create', - EDIT_DATASET_FILES = '/datasets/edit-files', + 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 35a6c0368..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 @@ -30,7 +30,7 @@ export function EditDatasetMenu({ dataset }: EditDatasetMenuProps) { const handleOnSelect = (eventKey: EditDatasetMenuItems | string | null) => { if (eventKey === EditDatasetMenuItems.FILES_UPLOAD) { - navigate(`${Route.EDIT_DATASET_FILES}?persistentId=${dataset.persistentId}`) + navigate(`${Route.UPLOAD_DATASET_FILES}?persistentId=${dataset.persistentId}`) return } showModal() @@ -50,25 +50,27 @@ export function EditDatasetMenu({ dataset }: EditDatasetMenuProps) { disabled={dataset.checkIsLockedFromEdits(user.persistentId)}> {t('datasetActionButtons.editDataset.filesUpload')} {t('datasetActionButtons.editDataset.metadata')} - + {t('datasetActionButtons.editDataset.terms')} {(dataset.permissions.canManageDatasetPermissions || dataset.permissions.canManageFilesPermissions) && ( - + {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 24a8ce12f..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 @@ -18,7 +18,7 @@ export function DatasetUploadFilesButton() { } const handleClick = () => { - navigate(`${Route.EDIT_DATASET_FILES}?persistentId=${dataset.persistentId}`) + navigate(`${Route.UPLOAD_DATASET_FILES}?persistentId=${dataset.persistentId}`) } return ( diff --git a/src/sections/edit-dataset-files/EditDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx similarity index 86% rename from src/sections/edit-dataset-files/EditDatasetFiles.tsx rename to src/sections/upload-dataset-files/UploadDatasetFiles.tsx index 8c08e214d..827399fc2 100644 --- a/src/sections/edit-dataset-files/EditDatasetFiles.tsx +++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx @@ -5,11 +5,13 @@ import { useDataset } from '../dataset/DatasetContext' import { PageNotFound } from '../page-not-found/PageNotFound' import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator' -interface EditDatasetFilesProps { +interface UploadDatasetFilesProps { fileRepository: FileRepository } -export const EditDatasetFiles = ({ fileRepository: _fileRepository }: EditDatasetFilesProps) => { +export const UploadDatasetFiles = ({ + fileRepository: _fileRepository +}: UploadDatasetFilesProps) => { const { setIsLoading } = useLoading() const { dataset, isLoading } = useDataset() diff --git a/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx b/src/sections/upload-dataset-files/UploadDatasetFilesFactory.tsx similarity index 75% rename from src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx rename to src/sections/upload-dataset-files/UploadDatasetFilesFactory.tsx index faa13c50f..20dd69293 100644 --- a/src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx +++ b/src/sections/upload-dataset-files/UploadDatasetFilesFactory.tsx @@ -3,24 +3,24 @@ import { useSearchParams } from 'react-router-dom' import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository' import { FileJSDataverseRepository } from '../../files/infrastructure/FileJSDataverseRepository' import { DatasetProvider } from '../dataset/DatasetProvider' -import { EditDatasetFiles } from './EditDatasetFiles' +import { UploadDatasetFiles } from './UploadDatasetFiles' const datasetRepository = new DatasetJSDataverseRepository() const fileRepository = new FileJSDataverseRepository() -export class EditDatasetFilesFactory { +export class UploadDatasetFilesFactory { static create(): ReactElement { - return + return } } -function EditDatasetFilesWithSearchParams() { +function UploadDatasetFilesWithSearchParams() { const [searchParams] = useSearchParams() const persistentId = searchParams.get('persistentId') ?? undefined return ( - + ) } diff --git a/src/stories/edit-dataset-files/EditDatasetFiles.stories.tsx b/src/stories/upload-dataset-files/UploadDatasetFiles.stories.tsx similarity index 59% rename from src/stories/edit-dataset-files/EditDatasetFiles.stories.tsx rename to src/stories/upload-dataset-files/UploadDatasetFiles.stories.tsx index 80463d8dc..7fcc53459 100644 --- a/src/stories/edit-dataset-files/EditDatasetFiles.stories.tsx +++ b/src/stories/upload-dataset-files/UploadDatasetFiles.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react' import { WithI18next } from '../WithI18next' import { WithLayout } from '../WithLayout' -import { EditDatasetFiles } from '../../sections/edit-dataset-files/EditDatasetFiles' +import { UploadDatasetFiles } from '../../sections/upload-dataset-files/UploadDatasetFiles' import { FileMockRepository } from '../file/FileMockRepository' import { WithDataset } from '../dataset/WithDataset' -const meta: Meta = { - title: 'Pages/Edit Dataset Files', - component: EditDatasetFiles, +const meta: Meta = { + title: 'Pages/Upload Dataset Files', + component: UploadDatasetFiles, decorators: [WithI18next], parameters: { // Sets the delay for all stories. @@ -16,9 +16,9 @@ const meta: Meta = { } export default meta -type Story = StoryObj +type Story = StoryObj export const Default: Story = { decorators: [WithLayout, WithDataset], - render: () => + render: () => } From 29a30237bf1328a25addc581474f576585b4db7b Mon Sep 17 00:00:00 2001 From: German Saracca Date: Fri, 19 Apr 2024 15:00:12 -0300 Subject: [PATCH 7/7] test: add test for upload dataset files page --- .../UploadDatasetFiles.spec.tsx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx new file mode 100644 index 000000000..8cd23e138 --- /dev/null +++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx @@ -0,0 +1,49 @@ +import { DatasetRepository } from '../../../../src/dataset/domain/repositories/DatasetRepository' +import { DatasetMother } from '../../dataset/domain/models/DatasetMother' +import { FileRepository } from '../../../../src/files/domain/repositories/FileRepository' +import { Dataset as DatasetModel } from '../../../../src/dataset/domain/models/Dataset' +import { ReactNode } from 'react' +import { DatasetProvider } from '../../../../src/sections/dataset/DatasetProvider' +import { UploadDatasetFiles } from '../../../../src/sections/upload-dataset-files/UploadDatasetFiles' + +const fileRepository: FileRepository = {} as FileRepository +const datasetRepository: DatasetRepository = {} as DatasetRepository + +describe('Dataset', () => { + const mountWithDataset = (component: ReactNode, dataset: DatasetModel | undefined) => { + const searchParams = { persistentId: 'some-persistent-id' } + datasetRepository.getByPersistentId = cy.stub().resolves(dataset) + + cy.customMount( + + {component} + + ) + } + + it('renders skeleton while loading', () => { + const testDataset = DatasetMother.create() + + mountWithDataset(, testDataset) + + cy.findByText('Temporary Loading until having shape of skeleton').should('exist') + cy.findByText(testDataset.version.title).should('not.exist') + }) + + it('renders page not found when dataset is null', () => { + const emptyDataset = DatasetMother.createEmpty() + + mountWithDataset(, emptyDataset) + + cy.findByText('Page Not Found').should('exist') + }) + + it('renders the breadcrumbs', () => { + const testDataset = DatasetMother.create() + + mountWithDataset(, testDataset) + + cy.findByText('Dataset Title').should('exist').should('have.class', 'active') + cy.findByRole('link', { name: 'Root' }).should('exist') + }) +})