From 343bf461c7c200d24b988e628bdb52319f59293a Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 11 Jan 2024 10:48:23 +0100 Subject: [PATCH 01/20] feat(FileMetadata): add component to File Page --- src/sections/file/File.module.scss | 6 +++++- src/sections/file/File.tsx | 5 ++++- .../file/file-metadata/FileMetadata.tsx | 21 +++++++++++++++++++ src/stories/dataset/Dataset.stories.tsx | 8 +++---- .../dataset-files/DatasetFiles.stories.tsx | 8 +++---- .../AccessFileMenu.stories.tsx | 2 +- .../file-thumbnail/FileThumbnail.stories.tsx | 2 +- src/stories/{files => file}/File.stories.tsx | 0 src/stories/{files => file}/FileMockData.ts | 0 .../FileMockLoadingRepository.ts | 0 .../FileMockNoDataRepository.ts | 0 .../FileMockNoFiltersRepository.ts | 0 .../{files => file}/FileMockRepository.ts | 0 .../FileWithDeniedPermissionsRepository.ts | 0 .../FileWithGrantedPermissionsRepository.ts | 0 .../file-metadata/FileMetadata.stories.tsx | 16 ++++++++++++++ .../WithFilePermissionsDenied.tsx | 0 .../WithFilePermissionsGranted.tsx | 0 tests/component/sections/file/File.spec.tsx | 2 ++ .../file/file-metadata/FileMetadata.spec.tsx | 15 +++++++++++++ 20 files changed, 73 insertions(+), 12 deletions(-) create mode 100644 src/sections/file/file-metadata/FileMetadata.tsx rename src/stories/{files => file}/File.stories.tsx (100%) rename src/stories/{files => file}/FileMockData.ts (100%) rename src/stories/{files => file}/FileMockLoadingRepository.ts (100%) rename src/stories/{files => file}/FileMockNoDataRepository.ts (100%) rename src/stories/{files => file}/FileMockNoFiltersRepository.ts (100%) rename src/stories/{files => file}/FileMockRepository.ts (100%) rename src/stories/{files => file}/FileWithDeniedPermissionsRepository.ts (100%) rename src/stories/{files => file}/FileWithGrantedPermissionsRepository.ts (100%) create mode 100644 src/stories/file/file-metadata/FileMetadata.stories.tsx rename src/stories/{files => file}/file-permission/WithFilePermissionsDenied.tsx (100%) rename src/stories/{files => file}/file-permission/WithFilePermissionsGranted.tsx (100%) create mode 100644 tests/component/sections/file/file-metadata/FileMetadata.spec.tsx diff --git a/src/sections/file/File.module.scss b/src/sections/file/File.module.scss index d05c34a83..3b9d280bc 100644 --- a/src/sections/file/File.module.scss +++ b/src/sections/file/File.module.scss @@ -6,13 +6,17 @@ .subtext { margin-bottom: 10px; - color: $dv-subtext-color; + color: $dv-subtext-color; } .container { margin: 0.5rem 0; } +.tab-container { + padding: 1em 0; +} + .separation-line { margin: 1em 0; border-bottom: 1px solid #dee2e6; diff --git a/src/sections/file/File.tsx b/src/sections/file/File.tsx index 399431c14..d8e7371e0 100644 --- a/src/sections/file/File.tsx +++ b/src/sections/file/File.tsx @@ -9,6 +9,7 @@ import { useLoading } from '../loading/LoadingContext' import { FileSkeleton } from './FileSkeleton' import { DatasetLabels } from '../dataset/dataset-labels/DatasetLabels' import { FileAccessRestrictedIcon } from './file-access/FileAccessRestrictedIcon' +import { FileMetadata } from './file-metadata/FileMetadata' interface FileProps { repository: FileRepository @@ -53,7 +54,9 @@ export function File({ repository, id }: FileProps) {
- +
+ +
diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx new file mode 100644 index 000000000..64e481e0e --- /dev/null +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -0,0 +1,21 @@ +import { Accordion, Col, Row } from '@iqss/dataverse-design-system' + +export function FileMetadata() { + return ( + + + File Metadata + + + + Preview + + + Preview Image + + + + + + ) +} diff --git a/src/stories/dataset/Dataset.stories.tsx b/src/stories/dataset/Dataset.stories.tsx index 85fe96332..7b1364d59 100644 --- a/src/stories/dataset/Dataset.stories.tsx +++ b/src/stories/dataset/Dataset.stories.tsx @@ -4,12 +4,12 @@ import { WithLayout } from '../WithLayout' import { Dataset } from '../../sections/dataset/Dataset' import { WithAnonymizedView } from './WithAnonymizedView' import { WithDatasetPrivateUrl } from './WithDatasetPrivateUrl' -import { FileMockRepository } from '../files/FileMockRepository' +import { FileMockRepository } from '../file/FileMockRepository' import { WithCitationMetadataBlockInfo } from './WithCitationMetadataBlockInfo' -import { FileMockNoDataRepository } from '../files/FileMockNoDataRepository' +import { FileMockNoDataRepository } from '../file/FileMockNoDataRepository' import { WithSettings } from '../WithSettings' -import { WithFilePermissionsDenied } from '../files/file-permission/WithFilePermissionsDenied' -import { WithFilePermissionsGranted } from '../files/file-permission/WithFilePermissionsGranted' +import { WithFilePermissionsDenied } from '../file/file-permission/WithFilePermissionsDenied' +import { WithFilePermissionsGranted } from '../file/file-permission/WithFilePermissionsGranted' import { WithDataset } from './WithDataset' import { WithDatasetDraftAsOwner } from './WithDatasetDraftAsOwner' import { WithDatasetNotFound } from './WithDatasetNotFound' diff --git a/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx b/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx index ab8ba15cd..fe727aa71 100644 --- a/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx +++ b/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react' import { WithI18next } from '../../WithI18next' import { DatasetFiles } from '../../../sections/dataset/dataset-files/DatasetFiles' -import { FileMockRepository } from '../../files/FileMockRepository' -import { FileMockLoadingRepository } from '../../files/FileMockLoadingRepository' -import { FileMockNoDataRepository } from '../../files/FileMockNoDataRepository' +import { FileMockRepository } from '../../file/FileMockRepository' +import { FileMockLoadingRepository } from '../../file/FileMockLoadingRepository' +import { FileMockNoDataRepository } from '../../file/FileMockNoDataRepository' import { WithSettings } from '../../WithSettings' -import { FileMockNoFiltersRepository } from '../../files/FileMockNoFiltersRepository' +import { FileMockNoFiltersRepository } from '../../file/FileMockNoFiltersRepository' import { DatasetMother } from '../../../../tests/component/dataset/domain/models/DatasetMother' const meta: Meta = { diff --git a/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx index 73bc899db..7120e4b52 100644 --- a/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx +++ b/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react' import { AccessFileMenu } from '../../../../../../../sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/access-file-menu/AccessFileMenu' import { WithI18next } from '../../../../../../WithI18next' import { WithSettings } from '../../../../../../WithSettings' -import { WithFilePermissionsGranted } from '../../../../../../files/file-permission/WithFilePermissionsGranted' +import { WithFilePermissionsGranted } from '../../../../../../file/file-permission/WithFilePermissionsGranted' import { FilePreviewMother } from '../../../../../../../../tests/component/files/domain/models/FilePreviewMother' const meta: Meta = { diff --git a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx index a77f0de4a..f654d23a5 100644 --- a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx +++ b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react' import { FileThumbnail } from '../../../../../../../../sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail' import { WithI18next } from '../../../../../../../WithI18next' import { FilePreviewMother } from '../../../../../../../../../tests/component/files/domain/models/FilePreviewMother' -import { WithFilePermissionsGranted } from '../../../../../../../files/file-permission/WithFilePermissionsGranted' +import { WithFilePermissionsGranted } from '../../../../../../../file/file-permission/WithFilePermissionsGranted' const meta: Meta = { title: 'Sections/Dataset Page/DatasetFiles/FilesTable/FileInfoCell/FileThumbnail', diff --git a/src/stories/files/File.stories.tsx b/src/stories/file/File.stories.tsx similarity index 100% rename from src/stories/files/File.stories.tsx rename to src/stories/file/File.stories.tsx diff --git a/src/stories/files/FileMockData.ts b/src/stories/file/FileMockData.ts similarity index 100% rename from src/stories/files/FileMockData.ts rename to src/stories/file/FileMockData.ts diff --git a/src/stories/files/FileMockLoadingRepository.ts b/src/stories/file/FileMockLoadingRepository.ts similarity index 100% rename from src/stories/files/FileMockLoadingRepository.ts rename to src/stories/file/FileMockLoadingRepository.ts diff --git a/src/stories/files/FileMockNoDataRepository.ts b/src/stories/file/FileMockNoDataRepository.ts similarity index 100% rename from src/stories/files/FileMockNoDataRepository.ts rename to src/stories/file/FileMockNoDataRepository.ts diff --git a/src/stories/files/FileMockNoFiltersRepository.ts b/src/stories/file/FileMockNoFiltersRepository.ts similarity index 100% rename from src/stories/files/FileMockNoFiltersRepository.ts rename to src/stories/file/FileMockNoFiltersRepository.ts diff --git a/src/stories/files/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts similarity index 100% rename from src/stories/files/FileMockRepository.ts rename to src/stories/file/FileMockRepository.ts diff --git a/src/stories/files/FileWithDeniedPermissionsRepository.ts b/src/stories/file/FileWithDeniedPermissionsRepository.ts similarity index 100% rename from src/stories/files/FileWithDeniedPermissionsRepository.ts rename to src/stories/file/FileWithDeniedPermissionsRepository.ts diff --git a/src/stories/files/FileWithGrantedPermissionsRepository.ts b/src/stories/file/FileWithGrantedPermissionsRepository.ts similarity index 100% rename from src/stories/files/FileWithGrantedPermissionsRepository.ts rename to src/stories/file/FileWithGrantedPermissionsRepository.ts diff --git a/src/stories/file/file-metadata/FileMetadata.stories.tsx b/src/stories/file/file-metadata/FileMetadata.stories.tsx new file mode 100644 index 000000000..774e5d590 --- /dev/null +++ b/src/stories/file/file-metadata/FileMetadata.stories.tsx @@ -0,0 +1,16 @@ +import { Meta, StoryObj } from '@storybook/react' +import { WithI18next } from '../../WithI18next' +import { FileMetadata } from '../../../sections/file/file-metadata/FileMetadata' + +const meta: Meta = { + title: 'Sections/File Page/FileMetadata', + component: FileMetadata, + decorators: [WithI18next] +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: () => +} diff --git a/src/stories/files/file-permission/WithFilePermissionsDenied.tsx b/src/stories/file/file-permission/WithFilePermissionsDenied.tsx similarity index 100% rename from src/stories/files/file-permission/WithFilePermissionsDenied.tsx rename to src/stories/file/file-permission/WithFilePermissionsDenied.tsx diff --git a/src/stories/files/file-permission/WithFilePermissionsGranted.tsx b/src/stories/file/file-permission/WithFilePermissionsGranted.tsx similarity index 100% rename from src/stories/files/file-permission/WithFilePermissionsGranted.tsx rename to src/stories/file/file-permission/WithFilePermissionsGranted.tsx diff --git a/tests/component/sections/file/File.spec.tsx b/tests/component/sections/file/File.spec.tsx index 3049c4b91..8da9248d9 100644 --- a/tests/component/sections/file/File.spec.tsx +++ b/tests/component/sections/file/File.spec.tsx @@ -16,6 +16,8 @@ describe('File', () => { cy.findAllByText(testFile.name).should('exist') cy.findByText(`This file is part of "${testFile.datasetVersion.title}".`).should('exist') cy.findByText('Version 1.0').should('exist') + cy.findByRole('tab', { name: 'Metadata' }).should('exist') + cy.findByRole('button', { name: 'File Metadata' }).should('exist') }) it('renders skeleton while loading', () => { diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx new file mode 100644 index 000000000..d60717bc3 --- /dev/null +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -0,0 +1,15 @@ +import { FileMetadata } from '../../../../../src/sections/file/file-metadata/FileMetadata' + +describe('FileMetadata', () => { + it('renders the File Metadata tab', () => { + cy.customMount() + + cy.findByRole('button', { name: 'File Metadata' }).should('exist') + }) + + it('renders the file preview', () => { + cy.customMount() + + cy.findByText('Preview').should('exist') + }) +}) From cb305618ad15850adc2dca6c1f46dc43a3fdc2a9 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 10:13:42 +0100 Subject: [PATCH 02/20] feat(FileMetadata): add file preview --- src/files/domain/models/File.ts | 3 +++ ...lPreviewImage.tsx => FilePreviewImage.tsx} | 7 ++++--- .../file-thumbnail/FileThumbnail.module.scss | 15 +-------------- .../file-thumbnail/FileThumbnail.tsx | 8 ++++---- src/sections/file/File.tsx | 2 +- .../file/file-metadata/FileMetadata.tsx | 10 ++++++++-- .../file/file-preview/FileIcon.module.scss | 12 ++++++++++++ .../file-preview/FileIcon.tsx} | 6 +++--- src/sections/file/file-preview/FileImage.tsx | 16 ++++++++++++++++ .../file/file-preview/FilePreview.tsx | 13 +++++++++++++ .../file-preview}/FileTypeToFileIconMap.ts | 0 .../file-metadata/FileMetadata.stories.tsx | 3 ++- .../files/domain/models/FileMother.ts | 18 ++++++++++++++++++ .../file-thumbnail/FileThumbnail.spec.tsx | 14 +++++++------- .../file/file-metadata/FileMetadata.spec.tsx | 6 ++++-- .../file/file-preview/FilePreview.spec.tsx | 19 +++++++++++++++++++ 16 files changed, 115 insertions(+), 37 deletions(-) rename src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/{FileThumbnailPreviewImage.tsx => FilePreviewImage.tsx} (59%) create mode 100644 src/sections/file/file-preview/FileIcon.module.scss rename src/sections/{dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnailIcon.tsx => file/file-preview/FileIcon.tsx} (63%) create mode 100644 src/sections/file/file-preview/FileImage.tsx create mode 100644 src/sections/file/file-preview/FilePreview.tsx rename src/sections/{dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail => file/file-preview}/FileTypeToFileIconMap.ts (100%) create mode 100644 tests/component/sections/file/file-preview/FilePreview.spec.tsx diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index 6f1eb29db..9acfde042 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -1,4 +1,5 @@ import { DatasetVersion } from '../../../dataset/domain/models/Dataset' +import { FileType } from './FilePreview' export interface FilePermissions { canDownloadFile: boolean @@ -7,6 +8,8 @@ export interface FilePermissions { export interface File { name: string datasetVersion: DatasetVersion + type: FileType restricted: boolean permissions: FilePermissions + thumbnail?: string } diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnailPreviewImage.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FilePreviewImage.tsx similarity index 59% rename from src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnailPreviewImage.tsx rename to src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FilePreviewImage.tsx index eb5e68f2c..e44443538 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnailPreviewImage.tsx +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FilePreviewImage.tsx @@ -1,12 +1,13 @@ import styles from './FileThumbnail.module.scss' import { Tooltip } from '@iqss/dataverse-design-system' +import { FileImage } from '../../../../../../../file/file-preview/FileImage' -interface FileThumbnailPreviewImageProps { +interface FilePreviewImageProps { thumbnail: string name: string } -export function FileThumbnailPreviewImage({ thumbnail, name }: FileThumbnailPreviewImageProps) { +export function FilePreviewImage({ thumbnail, name }: FilePreviewImageProps) { return ( - {name} + ) } diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss index b30949ecb..f9557e1f7 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss @@ -1,7 +1,4 @@ -@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module"; -@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; - -%container { +∂%container { position: relative; display: inline-block; } @@ -17,16 +14,6 @@ height: 80px; } -.preview-image { - max-width: 64px; - max-height: 64px; -} - -.icon { - color: $dv-subtext-color; - font-size: 64px; -} - .tooltip { display: table-cell; width: 430px; diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.tsx index 7642d03a0..3c5d454f8 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.tsx +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.tsx @@ -1,5 +1,5 @@ -import { FileThumbnailIcon } from './FileThumbnailIcon' -import { FileThumbnailPreviewImage } from './FileThumbnailPreviewImage' +import { FileIcon } from '../../../../../../../file/file-preview/FileIcon' +import { FilePreviewImage } from './FilePreviewImage' import { FilePreview } from '../../../../../../../../files/domain/models/FilePreview' import { FileAccessRestrictedIcon } from '../../../../../../../file/file-access/FileAccessRestrictedIcon' import styles from './FileThumbnail.module.scss' @@ -20,9 +20,9 @@ export function FileThumbnail({ file }: FileThumbnailProps) { : styles['container-icon'] }`}> {file.thumbnail && sessionUserHasFileDownloadPermission ? ( - + ) : ( - + )}
- +
diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 64e481e0e..88d90f8d1 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -1,6 +1,12 @@ import { Accordion, Col, Row } from '@iqss/dataverse-design-system' +import { File } from '../../../files/domain/models/File' +import { FilePreview } from '../file-preview/FilePreview' -export function FileMetadata() { +interface FileMetadataProps { + file: File +} + +export function FileMetadata({ file }: FileMetadataProps) { return ( @@ -11,7 +17,7 @@ export function FileMetadata() { Preview - Preview Image + diff --git a/src/sections/file/file-preview/FileIcon.module.scss b/src/sections/file/file-preview/FileIcon.module.scss new file mode 100644 index 000000000..415abc9d3 --- /dev/null +++ b/src/sections/file/file-preview/FileIcon.module.scss @@ -0,0 +1,12 @@ +@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; + +.container { + position: relative; + display: inline-block; +} + +.icon { + color: $dv-subtext-color; + font-size: 64px; +} + diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnailIcon.tsx b/src/sections/file/file-preview/FileIcon.tsx similarity index 63% rename from src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnailIcon.tsx rename to src/sections/file/file-preview/FileIcon.tsx index 1f4749630..30d51d243 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnailIcon.tsx +++ b/src/sections/file/file-preview/FileIcon.tsx @@ -1,9 +1,9 @@ -import styles from './FileThumbnail.module.scss' -import { FileType } from '../../../../../../../../files/domain/models/FilePreview' +import styles from './FileIcon.module.scss' +import { FileType } from '../../../files/domain/models/FilePreview' import { FileTypeToFileIconMap } from './FileTypeToFileIconMap' import { IconName } from '@iqss/dataverse-design-system' -export function FileThumbnailIcon({ type }: { type: FileType }) { +export function FileIcon({ type }: { type: FileType }) { const icon = FileTypeToFileIconMap[type.value] || IconName.OTHER return ( diff --git a/src/sections/file/file-preview/FileImage.tsx b/src/sections/file/file-preview/FileImage.tsx new file mode 100644 index 000000000..6b7e9f3b6 --- /dev/null +++ b/src/sections/file/file-preview/FileImage.tsx @@ -0,0 +1,16 @@ +interface FileImageProps { + thumbnail: string + name: string + maxWidth?: number + maxHeight?: number +} + +export function FileImage({ thumbnail, name, maxWidth, maxHeight }: FileImageProps) { + return ( + {name} + ) +} diff --git a/src/sections/file/file-preview/FilePreview.tsx b/src/sections/file/file-preview/FilePreview.tsx new file mode 100644 index 000000000..0f3bc8c1b --- /dev/null +++ b/src/sections/file/file-preview/FilePreview.tsx @@ -0,0 +1,13 @@ +import { FileImage } from './FileImage' +import { FileIcon } from './FileIcon' +import { FileType } from '../../../files/domain/models/FilePreview' + +interface FilePreviewProps { + thumbnail?: string + type: FileType + name: string +} + +export function FilePreview({ thumbnail, type, name }: FilePreviewProps) { + return thumbnail ? : +} diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileTypeToFileIconMap.ts b/src/sections/file/file-preview/FileTypeToFileIconMap.ts similarity index 100% rename from src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileTypeToFileIconMap.ts rename to src/sections/file/file-preview/FileTypeToFileIconMap.ts diff --git a/src/stories/file/file-metadata/FileMetadata.stories.tsx b/src/stories/file/file-metadata/FileMetadata.stories.tsx index 774e5d590..5f0374b32 100644 --- a/src/stories/file/file-metadata/FileMetadata.stories.tsx +++ b/src/stories/file/file-metadata/FileMetadata.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from '@storybook/react' import { WithI18next } from '../../WithI18next' import { FileMetadata } from '../../../sections/file/file-metadata/FileMetadata' +import { FileMother } from '../../../../tests/component/files/domain/models/FileMother' const meta: Meta = { title: 'Sections/File Page/FileMetadata', @@ -12,5 +13,5 @@ export default meta type Story = StoryObj export const Default: Story = { - render: () => + render: () => } diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index 8b63476fa..2a7dd36ab 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -1,16 +1,20 @@ import { File } from '../../../../../src/files/domain/models/File' import { faker } from '@faker-js/faker' import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMother' +import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' +import { FileType } from '../../../../../src/files/domain/models/FilePreview' export class FileMother { static create(props?: Partial): File { return { name: faker.system.fileName(), datasetVersion: DatasetVersionMother.create(), + type: new FileType(faker.helpers.arrayElement(Object.keys(FileTypeToFriendlyTypeMap))), restricted: faker.datatype.boolean(), permissions: { canDownloadFile: faker.datatype.boolean() }, + thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, ...props } } @@ -45,4 +49,18 @@ export class FileMother { ...props }) } + + static createWithThumbnail(props?: Partial): File { + return this.create({ + thumbnail: faker.image.imageUrl(), + ...props + }) + } + + static createWithoutThumbnail(props?: Partial): File { + return this.create({ + thumbnail: undefined, + ...props + }) + } } diff --git a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.spec.tsx b/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.spec.tsx index 1689053e8..adb725c25 100644 --- a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.spec.tsx +++ b/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.spec.tsx @@ -7,7 +7,7 @@ import { FileType } from '../../../../../../../../../../src/files/domain/models/ const fileRepository: FileRepository = {} as FileRepository describe('FileThumbnail', () => { - it('renders FileThumbnailPreviewImage when thumbnail is provided and file can be downloaded', () => { + it('renders FilePreviewImage when thumbnail is provided and file can be downloaded', () => { const file = FilePreviewMother.createWithThumbnail() fileRepository.getUserPermissionsById = cy.stub().resolves( FileUserPermissionsMother.create({ @@ -30,7 +30,7 @@ describe('FileThumbnail', () => { cy.findByText('Restricted with access Icon').should('not.exist') }) - it('does not render FileThumbnailPreviewImage when thumbnail is provided and file cannot be downloaded', () => { + it('does not render FilePreviewImage when thumbnail is provided and file cannot be downloaded', () => { const file = FilePreviewMother.createWithThumbnail() cy.customMount() @@ -39,7 +39,7 @@ describe('FileThumbnail', () => { cy.findByText('Restricted with access Icon').should('not.exist') }) - it('renders FileThumbnailPreviewImage when thumbnail is provided with unlocked icon if restricted with access', () => { + it('renders FilePreviewImage when thumbnail is provided with unlocked icon if restricted with access', () => { const file = FilePreviewMother.createWithThumbnailRestrictedWithAccessGranted() fileRepository.getUserPermissionsById = cy.stub().resolves( FileUserPermissionsMother.create({ @@ -63,7 +63,7 @@ describe('FileThumbnail', () => { cy.findByText('File Access: Restricted with Access Granted').should('exist') }) - it('does not render FileThumbnailPreviewImage when thumbnail is provided if restricted with no access', () => { + it('does not render FilePreviewImage when thumbnail is provided if restricted with no access', () => { const file = FilePreviewMother.createWithThumbnailRestricted() cy.customMount() @@ -76,7 +76,7 @@ describe('FileThumbnail', () => { cy.findByText('Restricted with access Icon').should('not.exist') }) - it('renders FileThumbnailIcon when thumbnail is not provided', () => { + it('renders FileIcon when thumbnail is not provided', () => { const file = FilePreviewMother.createDefault({ type: new FileType('application/pdf') }) cy.customMount() @@ -87,7 +87,7 @@ describe('FileThumbnail', () => { cy.findByText('Restricted with access Icon').should('not.exist') }) - it('renders FileThumbnailIcon when thumbnail is not provided with lock icon when restricted with no access', () => { + it('renders FileIcon when thumbnail is not provided with lock icon when restricted with no access', () => { const file = FilePreviewMother.createWithRestrictedAccess() cy.customMount() @@ -100,7 +100,7 @@ describe('FileThumbnail', () => { cy.findByText('Restricted with access Icon').should('not.exist') }) - it('renders FileThumbnailIcon when thumbnail is not provided with unlock icon when restricted with access', () => { + it('renders FileIcon when thumbnail is not provided with unlock icon when restricted with access', () => { const file = FilePreviewMother.createWithRestrictedAccessWithAccessGranted() fileRepository.getUserPermissionsById = cy.stub().resolves( FileUserPermissionsMother.create({ diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index d60717bc3..07159b3d4 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -1,15 +1,17 @@ import { FileMetadata } from '../../../../../src/sections/file/file-metadata/FileMetadata' +import { FileMother } from '../../../files/domain/models/FileMother' describe('FileMetadata', () => { it('renders the File Metadata tab', () => { - cy.customMount() + cy.customMount() cy.findByRole('button', { name: 'File Metadata' }).should('exist') }) it('renders the file preview', () => { - cy.customMount() + cy.customMount() cy.findByText('Preview').should('exist') + cy.findByRole('img').should('exist') }) }) diff --git a/tests/component/sections/file/file-preview/FilePreview.spec.tsx b/tests/component/sections/file/file-preview/FilePreview.spec.tsx new file mode 100644 index 000000000..1ca7e9247 --- /dev/null +++ b/tests/component/sections/file/file-preview/FilePreview.spec.tsx @@ -0,0 +1,19 @@ +import { FilePreview } from '../../../../../src/sections/file/file-preview/FilePreview' +import { FileMother } from '../../../files/domain/models/FileMother' +import { FileType } from '../../../../../src/files/domain/models/FilePreview' + +describe('FilePreview', () => { + it('renders the file image', () => { + const file = FileMother.createWithThumbnail() + cy.customMount() + + cy.findByAltText(file.name).should('exist').should('have.attr', 'src', file.thumbnail) + }) + + it('renders the file icon', () => { + const file = FileMother.createWithoutThumbnail({ type: new FileType('text/plain') }) + cy.customMount() + + cy.findByLabelText('icon-document').should('exist') + }) +}) From 7c6d5831d49e51bf29b6b0ce45b67b4f0c92e0f7 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 11:52:53 +0100 Subject: [PATCH 03/20] feat(FileMetadata): add file tags --- src/files/domain/models/File.ts | 3 +- .../file/file-metadata/FileMetadata.tsx | 11 +++++ .../files/domain/models/FileMother.ts | 2 + .../files/domain/models/FilePreviewMother.ts | 41 ++++++++----------- .../file/file-metadata/FileMetadata.spec.tsx | 20 +++++++++ 5 files changed, 53 insertions(+), 24 deletions(-) diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index 9acfde042..5ab1a5738 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -1,5 +1,5 @@ import { DatasetVersion } from '../../../dataset/domain/models/Dataset' -import { FileType } from './FilePreview' +import { FileLabel, FileType } from './FilePreview' export interface FilePermissions { canDownloadFile: boolean @@ -11,5 +11,6 @@ export interface File { type: FileType restricted: boolean permissions: FilePermissions + labels: FileLabel[] thumbnail?: string } diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 88d90f8d1..234ff6efb 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -1,6 +1,7 @@ import { Accordion, Col, Row } from '@iqss/dataverse-design-system' import { File } from '../../../files/domain/models/File' import { FilePreview } from '../file-preview/FilePreview' +import { FileLabels } from '../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels' interface FileMetadataProps { file: File @@ -20,6 +21,16 @@ export function FileMetadata({ file }: FileMetadataProps) { + {file.labels.length > 0 && ( + + + File Tags + + + + + + )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index 2a7dd36ab..016c005f8 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -3,6 +3,7 @@ import { faker } from '@faker-js/faker' import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMother' import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' import { FileType } from '../../../../../src/files/domain/models/FilePreview' +import { FileLabelMother } from './FilePreviewMother' export class FileMother { static create(props?: Partial): File { @@ -14,6 +15,7 @@ export class FileMother { permissions: { canDownloadFile: faker.datatype.boolean() }, + labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [], thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, ...props } diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts index a73218ffa..83ee92ada 100644 --- a/tests/component/files/domain/models/FilePreviewMother.ts +++ b/tests/component/files/domain/models/FilePreviewMother.ts @@ -5,13 +5,13 @@ import { FileEmbargo, FileIngest, FileIngestStatus, - FileLabel, - FileLabelType, FileSize, FileSizeUnit, FilePublishingStatus, FileType, - FileChecksum + FileChecksum, + FileLabel, + FileLabelType } from '../../../../../src/files/domain/models/FilePreview' import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' @@ -20,10 +20,19 @@ const valueOrUndefined: (value: T) => T | undefined = (value) => { return shouldShowValue ? value : undefined } -const createFakeFileLabel = (): FileLabel => ({ - type: faker.helpers.arrayElement(Object.values(FileLabelType)), - value: faker.lorem.word() -}) +export class FileLabelMother { + static create(props?: Partial): FileLabel { + return { + type: faker.helpers.arrayElement(Object.values(FileLabelType)), + value: faker.lorem.word(), + ...props + } + } + + static createMany(count: number): FileLabel[] { + return Array.from({ length: count }).map(() => this.create()) + } +} export class FileEmbargoMother { static create(dateAvailable?: Date): FileEmbargo { @@ -96,14 +105,7 @@ export class FilePreviewMother { date: faker.date.recent() }, downloadCount: faker.datatype.number(40), - labels: faker.datatype.boolean() - ? faker.helpers.arrayElements([ - createFakeFileLabel(), - createFakeFileLabel(), - createFakeFileLabel(), - createFakeFileLabel() - ]) - : [], + labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [], checksum: FileChecksumMother.create(), thumbnail: thumbnail, directory: valueOrUndefined(faker.system.directoryPath()), @@ -188,14 +190,7 @@ export class FilePreviewMother { } static createWithLabels(): FilePreview { - return this.createDefault({ - labels: faker.helpers.arrayElements([ - createFakeFileLabel(), - createFakeFileLabel(), - createFakeFileLabel(), - createFakeFileLabel() - ]) - }) + return this.createDefault({ labels: FileLabelMother.createMany(4) }) } static createWithDirectory(): FilePreview { diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 07159b3d4..a0f809124 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -1,5 +1,6 @@ import { FileMetadata } from '../../../../../src/sections/file/file-metadata/FileMetadata' import { FileMother } from '../../../files/domain/models/FileMother' +import { FileLabelType } from '../../../../../src/files/domain/models/FilePreview' describe('FileMetadata', () => { it('renders the File Metadata tab', () => { @@ -14,4 +15,23 @@ describe('FileMetadata', () => { cy.findByText('Preview').should('exist') cy.findByRole('img').should('exist') }) + + it('renders the file labels', () => { + const labels = [ + { value: 'Category 1', type: FileLabelType.CATEGORY }, + { value: 'Tag 1', type: FileLabelType.TAG }, + { value: 'Tag 2', type: FileLabelType.TAG } + ] + cy.customMount() + + cy.findByText('File Tags').should('exist') + cy.findByText('Category 1').should('have.class', 'bg-secondary') + cy.findAllByText(/Tag/).should('have.class', 'bg-info') + }) + + it('does not render the file labels when there are no labels', () => { + cy.customMount() + + cy.findByText('File Tags').should('not.exist') + }) }) From 3c680c8468ecc3a363f010a4b55985695cc3e2b4 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 12:23:38 +0100 Subject: [PATCH 04/20] feat(FileMetadata): add persistentId --- src/files/domain/models/File.ts | 1 + .../file/file-metadata/FileMetadata.module.scss | 3 +++ src/sections/file/file-metadata/FileMetadata.tsx | 13 +++++++++++-- tests/component/files/domain/models/FileMother.ts | 2 ++ .../file/file-metadata/FileMetadata.spec.tsx | 9 +++++++++ 5 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 src/sections/file/file-metadata/FileMetadata.module.scss diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index 5ab1a5738..9d2c1d193 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -12,5 +12,6 @@ export interface File { restricted: boolean permissions: FilePermissions labels: FileLabel[] + persistentId?: string thumbnail?: string } diff --git a/src/sections/file/file-metadata/FileMetadata.module.scss b/src/sections/file/file-metadata/FileMetadata.module.scss new file mode 100644 index 000000000..3bcab6f8a --- /dev/null +++ b/src/sections/file/file-metadata/FileMetadata.module.scss @@ -0,0 +1,3 @@ +.row { + margin: 12px 0; +} \ No newline at end of file diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 234ff6efb..e994d7c8e 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -2,6 +2,7 @@ import { Accordion, Col, Row } from '@iqss/dataverse-design-system' import { File } from '../../../files/domain/models/File' import { FilePreview } from '../file-preview/FilePreview' import { FileLabels } from '../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels' +import styles from './FileMetadata.module.scss' interface FileMetadataProps { file: File @@ -13,7 +14,7 @@ export function FileMetadata({ file }: FileMetadataProps) { File Metadata - + Preview @@ -22,7 +23,7 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.labels.length > 0 && ( - + File Tags @@ -31,6 +32,14 @@ export function FileMetadata({ file }: FileMetadataProps) { )} + {file.persistentId && ( + + + File Persistent ID + + {file.persistentId} + + )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index 016c005f8..259a735b3 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -17,6 +17,7 @@ export class FileMother { }, labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [], thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, + persistentId: faker.datatype.boolean() ? faker.datatype.uuid() : undefined, ...props } } @@ -29,6 +30,7 @@ export class FileMother { permissions: { canDownloadFile: true }, + persistentId: 'doi:10.5072/FK2/ABC123', ...props }) } diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index a0f809124..d90395499 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -34,4 +34,13 @@ describe('FileMetadata', () => { cy.findByText('File Tags').should('not.exist') }) + + it('renders the file persistent id', () => { + cy.customMount( + + ) + + cy.findByText('File Persistent ID').should('exist') + cy.findByText('doi:10.5072/FK2/ABC123').should('exist') + }) }) From f1bdd1d2292d99a0c5c301d2ef65887ca33ba7e0 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 13:29:23 +0100 Subject: [PATCH 05/20] feat(FileMetadata): add Download Url --- .../assets/styles/bootstrap-customized.scss | 3 ++- src/files/domain/models/File.ts | 3 ++- .../file-metadata/FileMetadata.module.scss | 10 +++++++ .../file/file-metadata/FileMetadata.tsx | 22 +++++++++++++++ .../files/domain/models/FileMother.ts | 21 ++++++++++----- .../file/file-metadata/FileMetadata.spec.tsx | 27 +++++++++++++++++++ 6 files changed, 78 insertions(+), 8 deletions(-) diff --git a/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss b/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss index c12c60ff3..4b4724221 100644 --- a/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss +++ b/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss @@ -17,6 +17,7 @@ $danger: $dv-danger-color; // Body $body-color: $dv-text-color; $headings-color: $dv-headings-color; +$code-color: $dv-text-color; // Typography $font-family-base: $dv-font-family; @@ -125,4 +126,4 @@ th { .btn-group > div:not(:first-child) > .btn-group > .btn, .btn-group-vertical > div:not(:first-child) > .btn-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; -} \ No newline at end of file +} diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index 9d2c1d193..d97eb601e 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -1,5 +1,5 @@ import { DatasetVersion } from '../../../dataset/domain/models/Dataset' -import { FileLabel, FileType } from './FilePreview' +import { FileDownloadUrls, FileLabel, FileType } from './FilePreview' export interface FilePermissions { canDownloadFile: boolean @@ -12,6 +12,7 @@ export interface File { restricted: boolean permissions: FilePermissions labels: FileLabel[] + downloadUrls: FileDownloadUrls persistentId?: string thumbnail?: string } diff --git a/src/sections/file/file-metadata/FileMetadata.module.scss b/src/sections/file/file-metadata/FileMetadata.module.scss index 3bcab6f8a..379585ac0 100644 --- a/src/sections/file/file-metadata/FileMetadata.module.scss +++ b/src/sections/file/file-metadata/FileMetadata.module.scss @@ -1,3 +1,13 @@ +@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; + .row { margin: 12px 0; +} + +.help-text { + color: $dv-subtext-color; +} + +.code { + background-color: #F0F0F0; } \ No newline at end of file diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index e994d7c8e..b3245af11 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -8,6 +8,8 @@ interface FileMetadataProps { file: File } +const BASE_URL = (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? '' + export function FileMetadata({ file }: FileMetadataProps) { return ( @@ -40,6 +42,26 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.persistentId} )} + {file.permissions.canDownloadFile && ( + + + Download URL + + +

+ Use the Download URL in a Wget command or a download manager to avoid interrupted + downloads, time outs or other failures.{' '} + + User Guide - Downloading via URL + +

+ + {BASE_URL} + {file.downloadUrls.original} + + + + )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index 259a735b3..e521b180f 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -18,6 +18,11 @@ export class FileMother { labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [], thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, persistentId: faker.datatype.boolean() ? faker.datatype.uuid() : undefined, + downloadUrls: { + original: '/api/access/datafile/107', + tabular: '/api/access/datafile/107', + rData: '/api/access/datafile/107' + }, ...props } } @@ -46,12 +51,7 @@ export class FileMother { } static createRestrictedWithAccessGranted(props?: Partial): File { - return this.createRestricted({ - permissions: { - canDownloadFile: true - }, - ...props - }) + return this.createRestricted(this.createWithDownloadPermissionGranted(props)) } static createWithThumbnail(props?: Partial): File { @@ -67,4 +67,13 @@ export class FileMother { ...props }) } + + static createWithDownloadPermissionGranted(props?: Partial): File { + return this.create({ + permissions: { + canDownloadFile: true + }, + ...props + }) + } } diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index d90395499..9c465362e 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -43,4 +43,31 @@ describe('FileMetadata', () => { cy.findByText('File Persistent ID').should('exist') cy.findByText('doi:10.5072/FK2/ABC123').should('exist') }) + + it('does not render the file persistent id when there is no persistent id', () => { + cy.customMount() + + cy.findByText('File Persistent ID').should('not.exist') + }) + + it('renders the download url if the user has file download permissions', () => { + cy.customMount( + + ) + + cy.findByText('Download URL').should('exist') + cy.findByText('/api/access/datafile/123', { exact: false }).should('exist') + cy.findByText( + 'Use the Download URL in a Wget command or a download manager to avoid interrupted downloads, time outs or other failures.' + ).should('exist') + cy.findByRole('link', { name: 'User Guide - Downloading via URL' }).should( + 'have.attr', + 'href', + 'https://guides.dataverse.org/en/6.1/user/find-use-data.html#downloading-via-url' + ) + }) }) From c4da9aa11b3fb6ee10d5f10a35e90ac50d43b3fc Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 14:20:16 +0100 Subject: [PATCH 06/20] feat(FileMetadata): add unf field --- src/files/domain/models/File.ts | 3 +- .../file/file-metadata/FileMetadata.tsx | 8 +++++ .../files/domain/models/FileMother.ts | 22 +++++++++----- .../files/domain/models/FilePreviewMother.ts | 26 +++++++++------- .../file/file-metadata/FileMetadata.spec.tsx | 30 +++++++++++++++++++ 5 files changed, 69 insertions(+), 20 deletions(-) diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index d97eb601e..c69ab9c68 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -1,5 +1,5 @@ import { DatasetVersion } from '../../../dataset/domain/models/Dataset' -import { FileDownloadUrls, FileLabel, FileType } from './FilePreview' +import { FileDownloadUrls, FileLabel, FileTabularData, FileType } from './FilePreview' export interface FilePermissions { canDownloadFile: boolean @@ -15,4 +15,5 @@ export interface File { downloadUrls: FileDownloadUrls persistentId?: string thumbnail?: string + tabularData?: FileTabularData } diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index b3245af11..1beaa3ca6 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -62,6 +62,14 @@ export function FileMetadata({ file }: FileMetadataProps) { )} + {file.tabularData?.unf && ( + + + File UNF + + {file.tabularData.unf} + + )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index e521b180f..c5177b534 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker' import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMother' import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' import { FileType } from '../../../../../src/files/domain/models/FilePreview' -import { FileLabelMother } from './FilePreviewMother' +import { FileLabelMother, FileTabularDataMother } from './FilePreviewMother' export class FileMother { static create(props?: Partial): File { @@ -23,6 +23,7 @@ export class FileMother { tabular: '/api/access/datafile/107', rData: '/api/access/datafile/107' }, + tabularData: faker.datatype.boolean() ? FileTabularDataMother.create() : undefined, ...props } } @@ -41,13 +42,9 @@ export class FileMother { } static createRestricted(props?: Partial): File { - return this.createRealistic({ - restricted: true, - permissions: { - canDownloadFile: false - }, - ...props - }) + return this.createRealistic( + this.createWithDownloadPermissionDenied({ restricted: true, ...props }) + ) } static createRestrictedWithAccessGranted(props?: Partial): File { @@ -76,4 +73,13 @@ export class FileMother { ...props }) } + + static createWithDownloadPermissionDenied(props?: Partial): File { + return this.create({ + permissions: { + canDownloadFile: false + }, + ...props + }) + } } diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts index 83ee92ada..6b40e2620 100644 --- a/tests/component/files/domain/models/FilePreviewMother.ts +++ b/tests/component/files/domain/models/FilePreviewMother.ts @@ -11,7 +11,8 @@ import { FileType, FileChecksum, FileLabel, - FileLabelType + FileLabelType, + FileTabularData } from '../../../../../src/files/domain/models/FilePreview' import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' @@ -20,6 +21,17 @@ const valueOrUndefined: (value: T) => T | undefined = (value) => { return shouldShowValue ? value : undefined } +export class FileTabularDataMother { + static create(props?: Partial): FileTabularData { + return { + variablesCount: faker.datatype.number(100), + observationsCount: faker.datatype.number(100), + unf: `UNF:6:${faker.datatype.uuid()}==`, + ...props + } + } +} + export class FileLabelMother { static create(props?: Partial): FileLabel { return { @@ -112,11 +124,7 @@ export class FilePreviewMother { embargo: valueOrUndefined(FileEmbargoMother.create()), tabularData: fileType === 'text/tab-separated-values' && !checksum - ? { - variablesCount: faker.datatype.number(100), - observationsCount: faker.datatype.number(100), - unf: `UNF:6:${faker.datatype.uuid()}==` - } + ? FileTabularDataMother.create() : undefined, description: valueOrUndefined(faker.lorem.paragraph()), isDeleted: faker.datatype.boolean(), @@ -218,11 +226,7 @@ export class FilePreviewMother { static createTabular(props?: Partial): FilePreview { return this.createDefault({ type: new FileType('text/tab-separated-values', 'Comma Separated Values'), - tabularData: { - variablesCount: faker.datatype.number(100), - observationsCount: faker.datatype.number(100), - unf: `UNF:${faker.datatype.uuid()}==` - }, + tabularData: FileTabularDataMother.create(), ...props }) } diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 9c465362e..135a23243 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -1,6 +1,7 @@ import { FileMetadata } from '../../../../../src/sections/file/file-metadata/FileMetadata' import { FileMother } from '../../../files/domain/models/FileMother' import { FileLabelType } from '../../../../../src/files/domain/models/FilePreview' +import { FileTabularDataMother } from '../../../files/domain/models/FilePreviewMother' describe('FileMetadata', () => { it('renders the File Metadata tab', () => { @@ -70,4 +71,33 @@ describe('FileMetadata', () => { 'https://guides.dataverse.org/en/6.1/user/find-use-data.html#downloading-via-url' ) }) + + it('does not render the download url if the user does not have file download permissions', () => { + cy.customMount( + + ) + + cy.findByText('Download URL').should('not.exist') + }) + + it('renders the file unf if it exists', () => { + cy.customMount( + + ) + + cy.findByText('File UNF').should('exist') + cy.findByText('some-unf').should('exist') + }) + + it('does not render the file unf if it does not exist', () => { + cy.customMount() + + cy.findByText('File UNF').should('not.exist') + }) }) From 84742fe328cd5bbde883eed9bd3cbdc653106091 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 15:53:06 +0100 Subject: [PATCH 07/20] feat(FileMetadata): add checksum field --- src/files/domain/models/File.ts | 3 ++- .../file/file-metadata/FileMetadata.tsx | 8 ++++++++ .../files/domain/models/FileMother.ts | 4 +++- .../files/domain/models/FilePreviewMother.ts | 10 +++++++++- .../file/file-metadata/FileMetadata.spec.tsx | 19 +++++++++++++++++++ 5 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index c69ab9c68..1e5ef7f79 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -1,5 +1,5 @@ import { DatasetVersion } from '../../../dataset/domain/models/Dataset' -import { FileDownloadUrls, FileLabel, FileTabularData, FileType } from './FilePreview' +import { FileChecksum, FileDownloadUrls, FileLabel, FileTabularData, FileType } from './FilePreview' export interface FilePermissions { canDownloadFile: boolean @@ -16,4 +16,5 @@ export interface File { persistentId?: string thumbnail?: string tabularData?: FileTabularData + checksum?: FileChecksum } diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 1beaa3ca6..c54c779fe 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -70,6 +70,14 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.tabularData.unf} )} + {file.checksum && ( + + + {file.checksum.algorithm} + + {file.checksum.value} + + )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index c5177b534..a9a4ffb17 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker' import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMother' import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' import { FileType } from '../../../../../src/files/domain/models/FilePreview' -import { FileLabelMother, FileTabularDataMother } from './FilePreviewMother' +import { FileChecksumMother, FileLabelMother, FileTabularDataMother } from './FilePreviewMother' export class FileMother { static create(props?: Partial): File { @@ -24,6 +24,7 @@ export class FileMother { rData: '/api/access/datafile/107' }, tabularData: faker.datatype.boolean() ? FileTabularDataMother.create() : undefined, + checksum: FileChecksumMother.create(), ...props } } @@ -37,6 +38,7 @@ export class FileMother { canDownloadFile: true }, persistentId: 'doi:10.5072/FK2/ABC123', + checksum: FileChecksumMother.createRealistic(), ...props }) } diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts index 6b40e2620..dd6af0f0a 100644 --- a/tests/component/files/domain/models/FilePreviewMother.ts +++ b/tests/component/files/domain/models/FilePreviewMother.ts @@ -26,7 +26,7 @@ export class FileTabularDataMother { return { variablesCount: faker.datatype.number(100), observationsCount: faker.datatype.number(100), - unf: `UNF:6:${faker.datatype.uuid()}==`, + unf: `UNF:6:xXw6cIZnwHWvmRdwhYCQZA==`, ...props } } @@ -84,6 +84,14 @@ export class FileChecksumMother { ...props } } + + static createRealistic(props?: Partial): FileChecksum { + return { + algorithm: 'MD5', + value: 'd41d8cd98f00b204e9800998ecf8427e', + ...props + } + } } export class FilePreviewMother { diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 135a23243..5ed05c37d 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -100,4 +100,23 @@ describe('FileMetadata', () => { cy.findByText('File UNF').should('not.exist') }) + + it('renders the file checksum', () => { + cy.customMount( + + ) + + cy.findByText('SHA-1').should('exist') + cy.findByText('some-checksum').should('exist') + }) + + it('does not render the file checksum if it does not exist', () => { + cy.customMount() + + cy.findByText('SHA-1').should('not.exist') + }) }) From fff96a87047a60c29c5f866c24e4ae5b8f96d665 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 16:00:47 +0100 Subject: [PATCH 08/20] feat(FileMetadata): add deposit date field --- src/files/domain/models/File.ts | 1 + src/sections/file/file-metadata/FileMetadata.tsx | 7 +++++++ src/shared/domain/helpers/DateHelper.ts | 8 ++++++++ tests/component/files/domain/models/FileMother.ts | 1 + .../file/file-metadata/FileMetadata.spec.tsx | 15 +++++++++++++++ 5 files changed, 32 insertions(+) diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index 1e5ef7f79..7cfc8fdfc 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -13,6 +13,7 @@ export interface File { permissions: FilePermissions labels: FileLabel[] downloadUrls: FileDownloadUrls + depositDate: Date persistentId?: string thumbnail?: string tabularData?: FileTabularData diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index c54c779fe..29fc3aa7c 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -3,6 +3,7 @@ import { File } from '../../../files/domain/models/File' import { FilePreview } from '../file-preview/FilePreview' import { FileLabels } from '../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels' import styles from './FileMetadata.module.scss' +import { DateHelper } from '../../../shared/domain/helpers/DateHelper' interface FileMetadataProps { file: File @@ -78,6 +79,12 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.checksum.value} )} + + + Deposit Date + + {DateHelper.toDisplayFormatYYYYMMDD(file.depositDate)} + diff --git a/src/shared/domain/helpers/DateHelper.ts b/src/shared/domain/helpers/DateHelper.ts index 021ec2a68..0ec91c242 100644 --- a/src/shared/domain/helpers/DateHelper.ts +++ b/src/shared/domain/helpers/DateHelper.ts @@ -6,4 +6,12 @@ export class DateHelper { day: 'numeric' }) } + + static toDisplayFormatYYYYMMDD(date: Date): string { + return date.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, { + year: 'numeric', + month: '2-digit', + day: '2-digit' + }) + } } diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index a9a4ffb17..bd3bec3ee 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -16,6 +16,7 @@ export class FileMother { canDownloadFile: faker.datatype.boolean() }, labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [], + depositDate: faker.date.past(), thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, persistentId: faker.datatype.boolean() ? faker.datatype.uuid() : undefined, downloadUrls: { diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 5ed05c37d..547848071 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -2,6 +2,7 @@ import { FileMetadata } from '../../../../../src/sections/file/file-metadata/Fil import { FileMother } from '../../../files/domain/models/FileMother' import { FileLabelType } from '../../../../../src/files/domain/models/FilePreview' import { FileTabularDataMother } from '../../../files/domain/models/FilePreviewMother' +import { DateHelper } from '../../../../../src/shared/domain/helpers/DateHelper' describe('FileMetadata', () => { it('renders the File Metadata tab', () => { @@ -119,4 +120,18 @@ describe('FileMetadata', () => { cy.findByText('SHA-1').should('not.exist') }) + + it('renders the file deposit date', () => { + const date = new Date('2021-01-01') + cy.customMount( + + ) + + cy.findByText('Deposit Date').should('exist') + cy.findByText(DateHelper.toDisplayFormatYYYYMMDD(date)).should('exist') + }) }) From 51efa61a24344ae905078a803600b0402ab8a744 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 16:10:00 +0100 Subject: [PATCH 09/20] feat(FileMetadata): add metadata release date field --- src/files/domain/models/File.ts | 1 + .../file/file-metadata/FileMetadata.tsx | 8 ++++++++ .../files/domain/models/FileMother.ts | 3 ++- .../file/file-metadata/FileMetadata.spec.tsx | 20 +++++++++++++++++++ 4 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index 7cfc8fdfc..83e8fd8ac 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -14,6 +14,7 @@ export interface File { labels: FileLabel[] downloadUrls: FileDownloadUrls depositDate: Date + publicationDate?: Date persistentId?: string thumbnail?: string tabularData?: FileTabularData diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 29fc3aa7c..9d5d3b23e 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -85,6 +85,14 @@ export function FileMetadata({ file }: FileMetadataProps) { {DateHelper.toDisplayFormatYYYYMMDD(file.depositDate)} + {file.publicationDate && ( + + + Metadata Release Date + + {DateHelper.toDisplayFormatYYYYMMDD(file.publicationDate)} + + )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index bd3bec3ee..287dfc702 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -17,6 +17,7 @@ export class FileMother { }, labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [], depositDate: faker.date.past(), + publicationDate: faker.datatype.boolean() ? faker.date.past() : undefined, thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, persistentId: faker.datatype.boolean() ? faker.datatype.uuid() : undefined, downloadUrls: { @@ -25,7 +26,7 @@ export class FileMother { rData: '/api/access/datafile/107' }, tabularData: faker.datatype.boolean() ? FileTabularDataMother.create() : undefined, - checksum: FileChecksumMother.create(), + checksum: faker.datatype.boolean() ? FileChecksumMother.create() : undefined, ...props } } diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 547848071..4d040ecb2 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -134,4 +134,24 @@ describe('FileMetadata', () => { cy.findByText('Deposit Date').should('exist') cy.findByText(DateHelper.toDisplayFormatYYYYMMDD(date)).should('exist') }) + + it('renders the file Metadata Release Date', () => { + const date = new Date('2021-01-01') + cy.customMount( + + ) + + cy.findByText('Metadata Release Date').should('exist') + cy.findByText(DateHelper.toDisplayFormatYYYYMMDD(date)).should('exist') + }) + + it('does not render the file Metadata Release Date if the publication date does not exist', () => { + cy.customMount() + + cy.findByText('Metadata Release Date').should('not.exist') + }) }) From 4fce008a345ec7f5db26cc805ce5199470ab5abd Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 16:42:06 +0100 Subject: [PATCH 10/20] feat(FileMetadata): add publication date field --- src/files/domain/models/File.ts | 12 +++++- .../file-info-data/FileEmbargoDate.tsx | 11 ++++- .../file/file-metadata/FileMetadata.tsx | 19 ++++++++ src/shared/domain/helpers/DateHelper.ts | 10 ++++- .../files/domain/models/FileMother.ts | 10 ++++- .../files/domain/models/FilePreviewMother.ts | 42 ++++++++++++------ .../file-info-data/FileEmbargoDate.spec.tsx | 18 ++++++++ .../file/file-metadata/FileMetadata.spec.tsx | 43 ++++++++++++++++++- 8 files changed, 145 insertions(+), 20 deletions(-) diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index 83e8fd8ac..ff6cdca15 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -1,5 +1,13 @@ import { DatasetVersion } from '../../../dataset/domain/models/Dataset' -import { FileChecksum, FileDownloadUrls, FileLabel, FileTabularData, FileType } from './FilePreview' +import { + FileChecksum, + FileDownloadUrls, + FileEmbargo, + FileLabel, + FileTabularData, + FileType, + FileVersion +} from './FilePreview' export interface FilePermissions { canDownloadFile: boolean @@ -7,6 +15,7 @@ export interface FilePermissions { export interface File { name: string + version: FileVersion datasetVersion: DatasetVersion type: FileType restricted: boolean @@ -19,4 +28,5 @@ export interface File { thumbnail?: string tabularData?: FileTabularData checksum?: FileChecksum + embargo?: FileEmbargo } diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx index 4f95ccc4b..6247427e9 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx @@ -8,9 +8,14 @@ import { DateHelper } from '../../../../../../../shared/domain/helpers/DateHelpe interface FileEmbargoDateProps { embargo: FileEmbargo | undefined publishingStatus: FilePublishingStatus + format?: 'YYYY-MM-DD' | 'short' } -export function FileEmbargoDate({ embargo, publishingStatus }: FileEmbargoDateProps) { +export function FileEmbargoDate({ + embargo, + publishingStatus, + format = 'short' +}: FileEmbargoDateProps) { const { t } = useTranslation('files') if (!embargo) { @@ -21,7 +26,9 @@ export function FileEmbargoDate({ embargo, publishingStatus }: FileEmbargoDatePr
{t(embargoTypeOfDate(embargo.isActive, publishingStatus))}{' '} - {DateHelper.toDisplayFormat(embargo.dateAvailable)} + {format === 'YYYY-MM-DD' + ? DateHelper.toDisplayFormatYYYYMMDD(embargo.dateAvailable) + : DateHelper.toDisplayFormat(embargo.dateAvailable)}
) diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 9d5d3b23e..f309a8ea6 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -4,6 +4,7 @@ import { FilePreview } from '../file-preview/FilePreview' import { FileLabels } from '../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels' import styles from './FileMetadata.module.scss' import { DateHelper } from '../../../shared/domain/helpers/DateHelper' +import { FileEmbargoDate } from '../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate' interface FileMetadataProps { file: File @@ -93,6 +94,24 @@ export function FileMetadata({ file }: FileMetadataProps) { {DateHelper.toDisplayFormatYYYYMMDD(file.publicationDate)} )} + {(file.publicationDate || file.embargo) && ( + + + Publication Date + + + {file.embargo ? ( + + ) : ( + DateHelper.toDisplayFormatYYYYMMDD(file.publicationDate) + )} + + + )} diff --git a/src/shared/domain/helpers/DateHelper.ts b/src/shared/domain/helpers/DateHelper.ts index 0ec91c242..44ffacf85 100644 --- a/src/shared/domain/helpers/DateHelper.ts +++ b/src/shared/domain/helpers/DateHelper.ts @@ -1,5 +1,8 @@ export class DateHelper { - static toDisplayFormat(date: Date): string { + static toDisplayFormat(date: Date | undefined): string { + if (!date) { + return '' + } return date.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, { year: 'numeric', month: 'short', @@ -7,7 +10,10 @@ export class DateHelper { }) } - static toDisplayFormatYYYYMMDD(date: Date): string { + static toDisplayFormatYYYYMMDD(date: Date | undefined): string { + if (!date) { + return '' + } return date.toLocaleDateString(Intl.DateTimeFormat().resolvedOptions().locale, { year: 'numeric', month: '2-digit', diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index 287dfc702..ab21c42bd 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -3,12 +3,19 @@ import { faker } from '@faker-js/faker' import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMother' import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' import { FileType } from '../../../../../src/files/domain/models/FilePreview' -import { FileChecksumMother, FileLabelMother, FileTabularDataMother } from './FilePreviewMother' +import { + FileChecksumMother, + FileEmbargoMother, + FileLabelMother, + FileTabularDataMother, + FileVersionMother +} from './FilePreviewMother' export class FileMother { static create(props?: Partial): File { return { name: faker.system.fileName(), + version: FileVersionMother.create(), datasetVersion: DatasetVersionMother.create(), type: new FileType(faker.helpers.arrayElement(Object.keys(FileTypeToFriendlyTypeMap))), restricted: faker.datatype.boolean(), @@ -27,6 +34,7 @@ export class FileMother { }, tabularData: faker.datatype.boolean() ? FileTabularDataMother.create() : undefined, checksum: faker.datatype.boolean() ? FileChecksumMother.create() : undefined, + embargo: FileEmbargoMother.create(), ...props } } diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts index dd6af0f0a..7dbcca36c 100644 --- a/tests/component/files/domain/models/FilePreviewMother.ts +++ b/tests/component/files/domain/models/FilePreviewMother.ts @@ -12,7 +12,8 @@ import { FileChecksum, FileLabel, FileLabelType, - FileTabularData + FileTabularData, + FileVersion } from '../../../../../src/files/domain/models/FilePreview' import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' @@ -94,6 +95,30 @@ export class FileChecksumMother { } } +export class FileVersionMother { + static create(props?: Partial): FileVersion { + return { + number: faker.datatype.number(), + publishingStatus: faker.helpers.arrayElement(Object.values(FilePublishingStatus)), + ...props + } + } + + static createReleased(props?: Partial): FileVersion { + return this.create({ + publishingStatus: FilePublishingStatus.RELEASED, + ...props + }) + } + + static createDeaccessioned(props?: Partial): FileVersion { + return this.create({ + publishingStatus: FilePublishingStatus.DEACCESSIONED, + ...props + }) + } +} + export class FilePreviewMother { static create(props?: Partial): FilePreview { const thumbnail = valueOrUndefined(faker.image.imageUrl()) @@ -108,10 +133,7 @@ export class FilePreviewMother { canBeRequested: faker.datatype.boolean(), requested: faker.datatype.boolean() }, - version: { - number: faker.datatype.number(), - publishingStatus: faker.helpers.arrayElement(Object.values(FilePublishingStatus)) - }, + version: FileVersionMother.create(), type: fileType === 'text/tab-separated-values' ? new FileType('text/tab-separated-values', 'Comma Separated Values') @@ -181,10 +203,7 @@ export class FilePreviewMother { static createDefault(props?: Partial): FilePreview { const defaultFile = { type: new FileType('text/plain'), - version: { - number: 1, - publishingStatus: FilePublishingStatus.RELEASED - }, + version: FileVersionMother.createReleased(), access: { restricted: false, latestVersionRestricted: false, @@ -365,10 +384,7 @@ export class FilePreviewMother { static createDeaccessioned(): FilePreview { return this.createDefault({ - version: { - number: 1, - publishingStatus: FilePublishingStatus.DEACCESSIONED - } + version: FileVersionMother.createDeaccessioned() }) } static createDeleted(): FilePreview { diff --git a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileEmbargoDate.spec.tsx b/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileEmbargoDate.spec.tsx index 95a8d9296..63ce649ad 100644 --- a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileEmbargoDate.spec.tsx +++ b/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileEmbargoDate.spec.tsx @@ -63,4 +63,22 @@ describe('FileEmbargoDate', () => { cy.findByText(/Embargoed until/).should('not.exist') cy.findByText(/Was embargoed until/).should('not.exist') }) + + it('renders the embargo date in YYYY-MM-DD format', () => { + const embargoDate = new Date('2123-09-18') + const embargo = FileEmbargoMother.create(embargoDate) + const status = FilePublishingStatus.RELEASED + cy.customMount( + + ) + const dateString = embargoDate.toLocaleDateString( + Intl.DateTimeFormat().resolvedOptions().locale, + { + year: 'numeric', + month: '2-digit', + day: '2-digit' + } + ) + cy.findByText(`Embargoed until ` + dateString).should('exist') + }) }) diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 4d040ecb2..44c18d1d8 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -1,7 +1,10 @@ import { FileMetadata } from '../../../../../src/sections/file/file-metadata/FileMetadata' import { FileMother } from '../../../files/domain/models/FileMother' import { FileLabelType } from '../../../../../src/files/domain/models/FilePreview' -import { FileTabularDataMother } from '../../../files/domain/models/FilePreviewMother' +import { + FileEmbargoMother, + FileTabularDataMother +} from '../../../files/domain/models/FilePreviewMother' import { DateHelper } from '../../../../../src/shared/domain/helpers/DateHelper' describe('FileMetadata', () => { @@ -154,4 +157,42 @@ describe('FileMetadata', () => { cy.findByText('Metadata Release Date').should('not.exist') }) + + it('renders the file Publication Date', () => { + const date = new Date('2021-10-01') + cy.customMount( + + ) + + cy.findByText('Publication Date').should('exist') + cy.findAllByText(DateHelper.toDisplayFormatYYYYMMDD(date)).should('exist') + }) + + it('renders the file Publication Date with embargo', () => { + const date = new Date('2021-05-01') + cy.customMount( + + ) + + cy.findByText('Publication Date').should('exist') + cy.findByText(DateHelper.toDisplayFormatYYYYMMDD(date)).should('exist') + }) + + it('does not render the file Publication Date if the publication date and embargo do not exist', () => { + cy.customMount( + + ) + + cy.findByText('Publication Date').should('not.exist') + }) }) From 3c1a2e705aa5fd08850b67a1b53cc1fcc0a7bb38 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Mon, 15 Jan 2024 17:55:00 +0100 Subject: [PATCH 11/20] feat(FileMetadat): add embargo reason field --- src/files/domain/models/FilePreview.ts | 2 +- .../file/file-metadata/FileMetadata.tsx | 8 +++++ .../files/domain/models/FileMother.ts | 2 +- .../files/domain/models/FilePreviewMother.ts | 12 +++++-- .../file/file-metadata/FileMetadata.spec.tsx | 35 +++++++++++++++++-- 5 files changed, 53 insertions(+), 6 deletions(-) diff --git a/src/files/domain/models/FilePreview.ts b/src/files/domain/models/FilePreview.ts index 1cdd9bd2d..bfec5f422 100644 --- a/src/files/domain/models/FilePreview.ts +++ b/src/files/domain/models/FilePreview.ts @@ -114,7 +114,7 @@ export interface FileDate { } export class FileEmbargo { - constructor(readonly dateAvailable: Date) {} + constructor(readonly dateAvailable: Date, readonly reason?: string) {} get isActive(): boolean { return this.dateAvailable > new Date() diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index f309a8ea6..22f17f1e9 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -112,6 +112,14 @@ export function FileMetadata({ file }: FileMetadataProps) { )} + {file.embargo && file.embargo.reason && ( + + + Embargo Reason + + {file.embargo.reason} + + )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index ab21c42bd..d3578ecd3 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -34,7 +34,7 @@ export class FileMother { }, tabularData: faker.datatype.boolean() ? FileTabularDataMother.create() : undefined, checksum: faker.datatype.boolean() ? FileChecksumMother.create() : undefined, - embargo: FileEmbargoMother.create(), + embargo: faker.datatype.boolean() ? FileEmbargoMother.create() : undefined, ...props } } diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts index 7dbcca36c..b7163a41b 100644 --- a/tests/component/files/domain/models/FilePreviewMother.ts +++ b/tests/component/files/domain/models/FilePreviewMother.ts @@ -48,10 +48,18 @@ export class FileLabelMother { } export class FileEmbargoMother { - static create(dateAvailable?: Date): FileEmbargo { - return new FileEmbargo(dateAvailable ?? faker.date.future()) + static create(props?: Partial): FileEmbargo { + return new FileEmbargo( + props?.dateAvailable ?? faker.date.future(), + props?.reason ?? faker.lorem.sentence() + ) + } + + static createWithNoReason(props?: Partial): FileEmbargo { + return new FileEmbargo(props?.dateAvailable ?? faker.date.future(), undefined) } } + export class FileIngestMother { static create(props?: Partial): FileIngest { return { diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 44c18d1d8..9fd4572e1 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -149,7 +149,7 @@ describe('FileMetadata', () => { ) cy.findByText('Metadata Release Date').should('exist') - cy.findByText(DateHelper.toDisplayFormatYYYYMMDD(date)).should('exist') + cy.findAllByText(DateHelper.toDisplayFormatYYYYMMDD(date)).should('exist') }) it('does not render the file Metadata Release Date if the publication date does not exist', () => { @@ -179,7 +179,7 @@ describe('FileMetadata', () => { ) @@ -195,4 +195,35 @@ describe('FileMetadata', () => { cy.findByText('Publication Date').should('not.exist') }) + + it('renders the file Embargo Reason', () => { + cy.customMount( + + ) + + cy.findByText('Embargo Reason').should('exist') + cy.findByText('Some reason').should('exist') + }) + + it('does not render the file Embargo Reason if the embargo does not exist', () => { + cy.customMount() + + cy.findByText('Embargo Reason').should('not.exist') + }) + + it('does not render the file Embargo Reason if the embargo reason does not exist', () => { + cy.customMount( + + ) + + cy.findByText('Embargo Reason').should('not.exist') + }) }) From a98ef10229ad506b287f6155be075880d05f2acf Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 11:37:33 +0100 Subject: [PATCH 12/20] feat(FileMetadata): add file size field --- src/files/domain/models/File.ts | 2 ++ .../file/file-metadata/FileMetadata.tsx | 6 ++++++ .../files/domain/models/FileMother.ts | 2 ++ .../files/domain/models/FilePreviewMother.ts | 19 ++++++++++++++----- .../file/file-metadata/FileMetadata.spec.tsx | 16 +++++++++++++++- 5 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index ff6cdca15..a5ffe5d93 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -4,6 +4,7 @@ import { FileDownloadUrls, FileEmbargo, FileLabel, + FileSize, FileTabularData, FileType, FileVersion @@ -18,6 +19,7 @@ export interface File { version: FileVersion datasetVersion: DatasetVersion type: FileType + size: FileSize restricted: boolean permissions: FilePermissions labels: FileLabel[] diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 22f17f1e9..f6597f6ea 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -120,6 +120,12 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.embargo.reason} )} + + + Size + + {file.size.toString()} + diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index d3578ecd3..d561de602 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -7,6 +7,7 @@ import { FileChecksumMother, FileEmbargoMother, FileLabelMother, + FileSizeMother, FileTabularDataMother, FileVersionMother } from './FilePreviewMother' @@ -18,6 +19,7 @@ export class FileMother { version: FileVersionMother.create(), datasetVersion: DatasetVersionMother.create(), type: new FileType(faker.helpers.arrayElement(Object.keys(FileTypeToFriendlyTypeMap))), + size: FileSizeMother.create(), restricted: faker.datatype.boolean(), permissions: { canDownloadFile: faker.datatype.boolean() diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts index b7163a41b..7b32e47ca 100644 --- a/tests/component/files/domain/models/FilePreviewMother.ts +++ b/tests/component/files/domain/models/FilePreviewMother.ts @@ -127,6 +127,18 @@ export class FileVersionMother { } } +export class FileSizeMother { + static create(props?: Partial): FileSize { + const size = { + value: faker.datatype.number({ max: 1024, precision: 2 }), + unit: faker.helpers.arrayElement(Object.values(FileSizeUnit)), + ...props + } + + return new FileSize(size.value, size.unit) + } +} + export class FilePreviewMother { static create(props?: Partial): FilePreview { const thumbnail = valueOrUndefined(faker.image.imageUrl()) @@ -146,10 +158,7 @@ export class FilePreviewMother { fileType === 'text/tab-separated-values' ? new FileType('text/tab-separated-values', 'Comma Separated Values') : new FileType(thumbnail ? 'image' : fileType), - size: { - value: faker.datatype.number({ max: 1024, precision: 2 }), - unit: faker.helpers.arrayElement(Object.values(FileSizeUnit)) - }, + size: FileSizeMother.create(), date: { type: faker.helpers.arrayElement(Object.values(FileDateType)), date: faker.date.recent() @@ -181,7 +190,7 @@ export class FilePreviewMother { fileMockedData.name, fileMockedData.access, fileMockedData.type, - new FileSize(fileMockedData.size.value, fileMockedData.size.unit), + fileMockedData.size, fileMockedData.date, fileMockedData.downloadCount, fileMockedData.labels, diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 9fd4572e1..4326a2755 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -1,8 +1,9 @@ import { FileMetadata } from '../../../../../src/sections/file/file-metadata/FileMetadata' import { FileMother } from '../../../files/domain/models/FileMother' -import { FileLabelType } from '../../../../../src/files/domain/models/FilePreview' +import { FileLabelType, FileSizeUnit } from '../../../../../src/files/domain/models/FilePreview' import { FileEmbargoMother, + FileSizeMother, FileTabularDataMother } from '../../../files/domain/models/FilePreviewMother' import { DateHelper } from '../../../../../src/shared/domain/helpers/DateHelper' @@ -226,4 +227,17 @@ describe('FileMetadata', () => { cy.findByText('Embargo Reason').should('not.exist') }) + + it('renders the file size', () => { + cy.customMount( + + ) + + cy.findByText('Size').should('exist') + cy.findByText('123 B').should('exist') + }) }) From cd9f4ff8335a7c5cc18924cd226894ac56296fa0 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 11:48:57 +0100 Subject: [PATCH 13/20] feat(FileMetadata): add file type field --- .../file/file-metadata/FileMetadata.tsx | 6 +++ .../files/domain/models/FileMother.ts | 5 +- .../files/domain/models/FilePreviewMother.ts | 47 +++++++++++++------ .../file/file-metadata/FileMetadata.spec.tsx | 16 ++++++- 4 files changed, 56 insertions(+), 18 deletions(-) diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index f6597f6ea..c6a1bd5d9 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -126,6 +126,12 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.size.toString()} + + + Type + + {file.type.toDisplayFormat()} + diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index d561de602..c191c6d0d 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -1,14 +1,13 @@ import { File } from '../../../../../src/files/domain/models/File' import { faker } from '@faker-js/faker' import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMother' -import FileTypeToFriendlyTypeMap from '../../../../../src/files/domain/models/FileTypeToFriendlyTypeMap' -import { FileType } from '../../../../../src/files/domain/models/FilePreview' import { FileChecksumMother, FileEmbargoMother, FileLabelMother, FileSizeMother, FileTabularDataMother, + FileTypeMother, FileVersionMother } from './FilePreviewMother' @@ -18,7 +17,7 @@ export class FileMother { name: faker.system.fileName(), version: FileVersionMother.create(), datasetVersion: DatasetVersionMother.create(), - type: new FileType(faker.helpers.arrayElement(Object.keys(FileTypeToFriendlyTypeMap))), + type: FileTypeMother.create(), size: FileSizeMother.create(), restricted: faker.datatype.boolean(), permissions: { diff --git a/tests/component/files/domain/models/FilePreviewMother.ts b/tests/component/files/domain/models/FilePreviewMother.ts index 7b32e47ca..2597b7f8b 100644 --- a/tests/component/files/domain/models/FilePreviewMother.ts +++ b/tests/component/files/domain/models/FilePreviewMother.ts @@ -22,6 +22,31 @@ const valueOrUndefined: (value: T) => T | undefined = (value) => { return shouldShowValue ? value : undefined } +export class FileTypeMother { + static create(props?: Partial): FileType { + return new FileType( + props?.value ?? faker.helpers.arrayElement(Object.keys(FileTypeToFriendlyTypeMap)), + props?.original + ) + } + + static createTabular(): FileType { + return new FileType('text/tab-separated-values', 'Comma Separated Values') + } + + static createText(): FileType { + return new FileType('text/plain') + } + + static createImage(): FileType { + return new FileType('image') + } + + static createRealistic(): FileType { + return new FileType('text/csv', 'Comma Separated Values') + } +} + export class FileTabularDataMother { static create(props?: Partial): FileTabularData { return { @@ -142,7 +167,7 @@ export class FileSizeMother { export class FilePreviewMother { static create(props?: Partial): FilePreview { const thumbnail = valueOrUndefined(faker.image.imageUrl()) - const fileType = faker.helpers.arrayElement(Object.keys(FileTypeToFriendlyTypeMap)) + const tabularFile = faker.datatype.boolean() const checksum = valueOrUndefined(faker.datatype.uuid()) const fileMockedData = { id: faker.datatype.number(), @@ -154,10 +179,7 @@ export class FilePreviewMother { requested: faker.datatype.boolean() }, version: FileVersionMother.create(), - type: - fileType === 'text/tab-separated-values' - ? new FileType('text/tab-separated-values', 'Comma Separated Values') - : new FileType(thumbnail ? 'image' : fileType), + type: tabularFile ? FileTypeMother.createTabular() : FileTypeMother.create(), size: FileSizeMother.create(), date: { type: faker.helpers.arrayElement(Object.values(FileDateType)), @@ -169,10 +191,7 @@ export class FilePreviewMother { thumbnail: thumbnail, directory: valueOrUndefined(faker.system.directoryPath()), embargo: valueOrUndefined(FileEmbargoMother.create()), - tabularData: - fileType === 'text/tab-separated-values' && !checksum - ? FileTabularDataMother.create() - : undefined, + tabularData: tabularFile && !checksum ? FileTabularDataMother.create() : undefined, description: valueOrUndefined(faker.lorem.paragraph()), isDeleted: faker.datatype.boolean(), ingest: { status: FileIngestStatus.NONE }, @@ -219,7 +238,7 @@ export class FilePreviewMother { static createDefault(props?: Partial): FilePreview { const defaultFile = { - type: new FileType('text/plain'), + type: FileTypeMother.createText(), version: FileVersionMother.createReleased(), access: { restricted: false, @@ -269,7 +288,7 @@ export class FilePreviewMother { static createTabular(props?: Partial): FilePreview { return this.createDefault({ - type: new FileType('text/tab-separated-values', 'Comma Separated Values'), + type: FileTypeMother.createTabular(), tabularData: FileTabularDataMother.create(), ...props }) @@ -277,7 +296,7 @@ export class FilePreviewMother { static createNonTabular(props?: Partial): FilePreview { return this.createDefault({ - type: new FileType('text/plain'), + type: FileTypeMother.createText(), tabularData: undefined, ...props }) @@ -382,7 +401,7 @@ export class FilePreviewMother { requested: false }, thumbnail: faker.image.imageUrl(), - type: new FileType('image') + type: FileTypeMother.createImage() }) } @@ -395,7 +414,7 @@ export class FilePreviewMother { requested: false }, thumbnail: faker.image.imageUrl(), - type: new FileType('image') + type: FileTypeMother.createImage() }) } diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 4326a2755..accb28f41 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -4,7 +4,8 @@ import { FileLabelType, FileSizeUnit } from '../../../../../src/files/domain/mod import { FileEmbargoMother, FileSizeMother, - FileTabularDataMother + FileTabularDataMother, + FileTypeMother } from '../../../files/domain/models/FilePreviewMother' import { DateHelper } from '../../../../../src/shared/domain/helpers/DateHelper' @@ -240,4 +241,17 @@ describe('FileMetadata', () => { cy.findByText('Size').should('exist') cy.findByText('123 B').should('exist') }) + + it('renders the file type', () => { + cy.customMount( + + ) + + cy.findByText('Type').should('exist') + cy.findByText('Plain Text').should('exist') + }) }) From 717b66f488f82558be923bf0fb5ee8aa710f3f55 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 11:53:28 +0100 Subject: [PATCH 14/20] feat(FileMetadata): add tabular data fields --- .../file/file-metadata/FileMetadata.tsx | 16 ++++++++++++++ .../file/file-metadata/FileMetadata.spec.tsx | 22 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index c6a1bd5d9..a560f0d7d 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -132,6 +132,22 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.type.toDisplayFormat()} + {file.tabularData && ( + <> + + + Variables + + {file.tabularData.variablesCount} + + + + Observations + + {file.tabularData.observationsCount} + + + )} diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index accb28f41..170868c99 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -254,4 +254,26 @@ describe('FileMetadata', () => { cy.findByText('Type').should('exist') cy.findByText('Plain Text').should('exist') }) + + it('renders the tabular data if it exists', () => { + cy.customMount( + + ) + + cy.findByText('Variables').should('exist') + cy.findByText('123').should('exist') + cy.findByText('Observations').should('exist') + cy.findByText('321').should('exist') + }) + + it('does not render the tabular data if it does not exist', () => { + cy.customMount() + + cy.findByText('Variables').should('not.exist') + cy.findByText('Observations').should('not.exist') + }) }) From 1a0bf1ade8176319fe12d3b5ed6b31f063dfc808 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 11:56:05 +0100 Subject: [PATCH 15/20] feat(FileMetadata): add file directory field --- src/files/domain/models/File.ts | 1 + .../file/file-metadata/FileMetadata.tsx | 8 ++++++++ .../files/domain/models/FileMother.ts | 1 + .../file/file-metadata/FileMetadata.spec.tsx | 19 +++++++++++++++++++ 4 files changed, 29 insertions(+) diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index a5ffe5d93..db8afc922 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -28,6 +28,7 @@ export interface File { publicationDate?: Date persistentId?: string thumbnail?: string + directory?: string tabularData?: FileTabularData checksum?: FileChecksum embargo?: FileEmbargo diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index a560f0d7d..d4ad060d9 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -148,6 +148,14 @@ export function FileMetadata({ file }: FileMetadataProps) { )} + {file.directory && ( + + + File Path + + {file.directory} + + )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index c191c6d0d..cec3d322a 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -27,6 +27,7 @@ export class FileMother { depositDate: faker.date.past(), publicationDate: faker.datatype.boolean() ? faker.date.past() : undefined, thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, + directory: faker.datatype.boolean() ? faker.system.directoryPath() : undefined, persistentId: faker.datatype.boolean() ? faker.datatype.uuid() : undefined, downloadUrls: { original: '/api/access/datafile/107', diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 170868c99..609f3bebb 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -276,4 +276,23 @@ describe('FileMetadata', () => { cy.findByText('Variables').should('not.exist') cy.findByText('Observations').should('not.exist') }) + + it('renders the file directory', () => { + cy.customMount( + + ) + + cy.findByText('File Path').should('exist') + cy.findByText('/some/path').should('exist') + }) + + it('does not render the file directory if it does not exist', () => { + cy.customMount() + + cy.findByText('File Path').should('not.exist') + }) }) From 5f8445b52830f76d1cf593b610454d9477853494 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 12:05:59 +0100 Subject: [PATCH 16/20] refactor: create BASE_URL constant --- src/App.tsx | 8 ++++---- src/config.ts | 1 + src/files/domain/models/File.ts | 1 + .../FileJSDataverseRepository.ts | 4 ++-- .../file/file-metadata/FileMetadata.tsx | 11 +++++++++-- src/sections/layout/header/Header.tsx | 6 +++--- .../files/domain/models/FileMother.ts | 1 + .../file/file-metadata/FileMetadata.spec.tsx | 19 +++++++++++++++++++ tests/e2e-integration/shared/TestsUtils.ts | 4 ++-- tests/support/e2e.ts | 4 ++-- 10 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 src/config.ts diff --git a/src/App.tsx b/src/App.tsx index e63ff51a0..485ef0210 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,12 +3,12 @@ import { Router } from './Router' import { SessionProvider } from './sections/session/SessionProvider' import { UserJSDataverseRepository } from './users/infrastructure/repositories/UserJSDataverseRepository' import { DataverseApiAuthMechanism } from '@iqss/dataverse-client-javascript/dist/core/infra/repositories/ApiConfig' +import { BASE_URL } from './config' -const VITE_DATAVERSE_BACKEND_URL = (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? '' -if (VITE_DATAVERSE_BACKEND_URL) { - ApiConfig.init(`${VITE_DATAVERSE_BACKEND_URL}/api/v1`, DataverseApiAuthMechanism.SESSION_COOKIE) -} else { +if (BASE_URL === '') { throw Error('VITE_DATAVERSE_BACKEND_URL environment variable should be specified.') +} else { + ApiConfig.init(`${BASE_URL}/api/v1`, DataverseApiAuthMechanism.SESSION_COOKIE) } const userRepository = new UserJSDataverseRepository() diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 000000000..9ea389068 --- /dev/null +++ b/src/config.ts @@ -0,0 +1 @@ +export const BASE_URL = (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? '' diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index db8afc922..391d0d374 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -30,6 +30,7 @@ export interface File { thumbnail?: string directory?: string tabularData?: FileTabularData + description?: string checksum?: FileChecksum embargo?: FileEmbargo } diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts index b64bbb683..88b5b9055 100644 --- a/src/files/infrastructure/FileJSDataverseRepository.ts +++ b/src/files/infrastructure/FileJSDataverseRepository.ts @@ -21,12 +21,12 @@ import { DatasetVersion, DatasetVersionNumber } from '../../dataset/domain/model import { File } from '../domain/models/File' import { FileMother } from '../../../tests/component/files/domain/models/FileMother' import { FilePaginationInfo } from '../domain/models/FilePaginationInfo' +import { BASE_URL } from '../../config' const includeDeaccessioned = true export class FileJSDataverseRepository implements FileRepository { - static readonly DATAVERSE_BACKEND_URL = - (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? '' + static readonly DATAVERSE_BACKEND_URL = BASE_URL getAllByDatasetPersistentId( datasetPersistentId: string, diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index d4ad060d9..530c140d8 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -5,13 +5,12 @@ import { FileLabels } from '../../dataset/dataset-files/files-table/file-info/fi import styles from './FileMetadata.module.scss' import { DateHelper } from '../../../shared/domain/helpers/DateHelper' import { FileEmbargoDate } from '../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate' +import { BASE_URL } from '../../../config' interface FileMetadataProps { file: File } -const BASE_URL = (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? '' - export function FileMetadata({ file }: FileMetadataProps) { return ( @@ -156,6 +155,14 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.directory} )} + {file.description && ( + + + Description + + {file.description} + + )} diff --git a/src/sections/layout/header/Header.tsx b/src/sections/layout/header/Header.tsx index 7121bd1f1..2a8db4166 100644 --- a/src/sections/layout/header/Header.tsx +++ b/src/sections/layout/header/Header.tsx @@ -4,13 +4,13 @@ import { Navbar } from '@iqss/dataverse-design-system' import { Route } from '../../Route.enum' import { useSession } from '../../session/SessionContext' import { useNavigate } from 'react-router-dom' +import { BASE_URL } from '../../../config' const currentPage = 0 export function Header() { const { t } = useTranslation('header') const { user, logout } = useSession() const navigate = useNavigate() - const baseRemoteUrl = import.meta.env.VITE_DATAVERSE_BACKEND_URL as string const onLogoutClick = () => { void logout().then(() => { @@ -33,8 +33,8 @@ export function Header() { ) : ( <> - {t('logIn')} - {t('signUp')} + {t('logIn')} + {t('signUp')} )} diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index cec3d322a..dfbe61baa 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -35,6 +35,7 @@ export class FileMother { rData: '/api/access/datafile/107' }, tabularData: faker.datatype.boolean() ? FileTabularDataMother.create() : undefined, + description: faker.datatype.boolean() ? faker.lorem.sentence() : undefined, checksum: faker.datatype.boolean() ? FileChecksumMother.create() : undefined, embargo: faker.datatype.boolean() ? FileEmbargoMother.create() : undefined, ...props diff --git a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx index 609f3bebb..62ea3682b 100644 --- a/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx +++ b/tests/component/sections/file/file-metadata/FileMetadata.spec.tsx @@ -295,4 +295,23 @@ describe('FileMetadata', () => { cy.findByText('File Path').should('not.exist') }) + + it('renders the file description', () => { + cy.customMount( + + ) + + cy.findByText('Description').should('exist') + cy.findByText('Some description').should('exist') + }) + + it('does not render the file description if it does not exist', () => { + cy.customMount() + + cy.findByText('Description').should('not.exist') + }) }) diff --git a/tests/e2e-integration/shared/TestsUtils.ts b/tests/e2e-integration/shared/TestsUtils.ts index f6508dcfd..5df3e1d75 100644 --- a/tests/e2e-integration/shared/TestsUtils.ts +++ b/tests/e2e-integration/shared/TestsUtils.ts @@ -3,10 +3,10 @@ import { DataverseApiHelper } from './DataverseApiHelper' import { DataverseApiAuthMechanism } from '@iqss/dataverse-client-javascript/dist/core/infra/repositories/ApiConfig' import { UserJSDataverseRepository } from '../../../src/users/infrastructure/repositories/UserJSDataverseRepository' import { DatasetHelper } from './datasets/DatasetHelper' +import { BASE_URL } from '../../../src/config' export class TestsUtils { - static readonly DATAVERSE_BACKEND_URL = - (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? '' + static readonly DATAVERSE_BACKEND_URL = BASE_URL static setup() { ApiConfig.init(`${this.DATAVERSE_BACKEND_URL}/api/v1`, DataverseApiAuthMechanism.SESSION_COOKIE) diff --git a/tests/support/e2e.ts b/tests/support/e2e.ts index 5ced14e65..bf781ac31 100644 --- a/tests/support/e2e.ts +++ b/tests/support/e2e.ts @@ -17,6 +17,6 @@ import '../../tests/support/commands' import { ApiConfig } from '@iqss/dataverse-client-javascript/dist/core' import { DataverseApiAuthMechanism } from '@iqss/dataverse-client-javascript/dist/core/infra/repositories/ApiConfig' +import { BASE_URL } from '../../src/config' -const VITE_DATAVERSE_BACKEND_URL = (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? '' -ApiConfig.init(`${VITE_DATAVERSE_BACKEND_URL}/api/v1`, DataverseApiAuthMechanism.SESSION_COOKIE) +ApiConfig.init(`${BASE_URL}/api/v1`, DataverseApiAuthMechanism.SESSION_COOKIE) From 57902138a02143949da06ccda3180361583156c2 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 12:12:19 +0100 Subject: [PATCH 17/20] refactor: move components closer to files --- .../file-info/file-info-cell/FileInfoCell.module.scss | 4 ---- .../files-table/file-info/file-info-cell/FileInfoCell.tsx | 4 ++-- .../file-embargo}/FileEmbargoDate.tsx | 7 ++----- src/sections/file/file-labels/FileLabels.module.scss | 3 +++ .../file-info-data => file/file-labels}/FileLabels.tsx | 6 +++--- src/sections/file/file-metadata/FileMetadata.tsx | 4 ++-- .../file-embargo}/FileEmbargoDate.spec.tsx | 6 +++--- .../file-labels}/FileLabels.spec.tsx | 6 +++--- 8 files changed, 18 insertions(+), 22 deletions(-) rename src/sections/{dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data => file/file-embargo}/FileEmbargoDate.tsx (84%) create mode 100644 src/sections/file/file-labels/FileLabels.module.scss rename src/sections/{dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data => file/file-labels}/FileLabels.tsx (71%) rename tests/component/sections/{dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data => file/file-embargo}/FileEmbargoDate.spec.tsx (88%) rename tests/component/sections/{dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data => file/file-labels}/FileLabels.spec.tsx (62%) diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.module.scss b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.module.scss index 680785133..ab49e9023 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.module.scss +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.module.scss @@ -30,7 +30,3 @@ display: flex; color: $dv-text-color; font-size: $dv-font-size-sm; } - -.labels-container >*{ - margin-right: 0.5em;; -} \ No newline at end of file diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx index 5265e2391..1f2ccaa11 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx @@ -5,12 +5,12 @@ import { FileTitle } from './file-info-data/FileTitle' import { FileDirectory } from './file-info-data/FileDirectory' import { FileType } from './file-info-data/FileType' import { FileDate } from './file-info-data/FileDate' -import { FileEmbargoDate } from './file-info-data/FileEmbargoDate' +import { FileEmbargoDate } from '../../../../../file/file-embargo/FileEmbargoDate' import { FileDownloads } from './file-info-data/FileDownloads' import { FileChecksum } from './file-info-data/FileChecksum' import { FileTabularData } from './file-info-data/FileTabularData' import { FileDescription } from './file-info-data/FileDescription' -import { FileLabels } from './file-info-data/FileLabels' +import { FileLabels } from '../../../../../file/file-labels/FileLabels' export function FileInfoCell({ file }: { file: FilePreview }) { return ( diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx b/src/sections/file/file-embargo/FileEmbargoDate.tsx similarity index 84% rename from src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx rename to src/sections/file/file-embargo/FileEmbargoDate.tsx index 6247427e9..2c84bfe41 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate.tsx +++ b/src/sections/file/file-embargo/FileEmbargoDate.tsx @@ -1,9 +1,6 @@ -import { - FileEmbargo, - FilePublishingStatus -} from '../../../../../../../files/domain/models/FilePreview' +import { FileEmbargo, FilePublishingStatus } from '../../../files/domain/models/FilePreview' import { useTranslation } from 'react-i18next' -import { DateHelper } from '../../../../../../../shared/domain/helpers/DateHelper' +import { DateHelper } from '../../../shared/domain/helpers/DateHelper' interface FileEmbargoDateProps { embargo: FileEmbargo | undefined diff --git a/src/sections/file/file-labels/FileLabels.module.scss b/src/sections/file/file-labels/FileLabels.module.scss new file mode 100644 index 000000000..ec77535e7 --- /dev/null +++ b/src/sections/file/file-labels/FileLabels.module.scss @@ -0,0 +1,3 @@ +.container > * { + margin-right: 0.5em; +} \ No newline at end of file diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels.tsx b/src/sections/file/file-labels/FileLabels.tsx similarity index 71% rename from src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels.tsx rename to src/sections/file/file-labels/FileLabels.tsx index 8c51df433..dd4afa881 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels.tsx +++ b/src/sections/file/file-labels/FileLabels.tsx @@ -1,6 +1,6 @@ -import { FileLabel, FileLabelType } from '../../../../../../../files/domain/models/FilePreview' +import { FileLabel, FileLabelType } from '../../../files/domain/models/FilePreview' import { Badge } from '@iqss/dataverse-design-system' -import styles from '../FileInfoCell.module.scss' +import styles from './FileLabels.module.scss' const VARIANT_BY_LABEL_TYPE: Record = { [FileLabelType.CATEGORY]: 'secondary', @@ -9,7 +9,7 @@ const VARIANT_BY_LABEL_TYPE: Record = { export function FileLabels({ labels }: { labels: FileLabel[] }) { return ( -
+
{labels.map((label, index) => ( {label.value} diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 530c140d8..d57930b4b 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -1,10 +1,10 @@ import { Accordion, Col, Row } from '@iqss/dataverse-design-system' import { File } from '../../../files/domain/models/File' import { FilePreview } from '../file-preview/FilePreview' -import { FileLabels } from '../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels' +import { FileLabels } from '../file-labels/FileLabels' import styles from './FileMetadata.module.scss' import { DateHelper } from '../../../shared/domain/helpers/DateHelper' -import { FileEmbargoDate } from '../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate' +import { FileEmbargoDate } from '../file-embargo/FileEmbargoDate' import { BASE_URL } from '../../../config' interface FileMetadataProps { diff --git a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileEmbargoDate.spec.tsx b/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx similarity index 88% rename from tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileEmbargoDate.spec.tsx rename to tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx index 63ce649ad..81f5d3523 100644 --- a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileEmbargoDate.spec.tsx +++ b/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx @@ -1,6 +1,6 @@ -import { FileEmbargoDate } from '../../../../../../../../../src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileEmbargoDate' -import { FilePublishingStatus } from '../../../../../../../../../src/files/domain/models/FilePreview' -import { FileEmbargoMother } from '../../../../../../../files/domain/models/FilePreviewMother' +import { FileEmbargoDate } from '../../../../../src/sections/file/file-embargo/FileEmbargoDate' +import { FilePublishingStatus } from '../../../../../src/files/domain/models/FilePreview' +import { FileEmbargoMother } from '../../../files/domain/models/FilePreviewMother' describe('FileEmbargoDate', () => { it('renders the embargo date when embargo exists', () => { diff --git a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileLabels.spec.tsx b/tests/component/sections/file/file-labels/FileLabels.spec.tsx similarity index 62% rename from tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileLabels.spec.tsx rename to tests/component/sections/file/file-labels/FileLabels.spec.tsx index 41ae6a06c..c18cebbe0 100644 --- a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileLabels.spec.tsx +++ b/tests/component/sections/file/file-labels/FileLabels.spec.tsx @@ -1,6 +1,6 @@ -import { FileLabelType } from '../../../../../../../../../src/files/domain/models/FilePreview' -import { FileLabels } from '../../../../../../../../../src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileLabels' -import styles from '../../../../../../../../../src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.module.scss' +import { FileLabelType } from '../../../../../src/files/domain/models/FilePreview' +import { FileLabels } from '../../../../../src/sections/file/file-labels/FileLabels' +import styles from '../../../../../src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.module.scss' describe('FileLabels', () => { it('renders labels with correct variants and values', () => { From 89f0467e62caac357dfb1706792e1ca6002b2fa7 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 12:30:25 +0100 Subject: [PATCH 18/20] feat(FileMetadta): add translations --- public/locales/en/file.json | 23 +++++++++ .../file/file-metadata/FileMetadata.tsx | 50 ++++++++++--------- 2 files changed, 50 insertions(+), 23 deletions(-) diff --git a/public/locales/en/file.json b/public/locales/en/file.json index 56ee0fdac..49956177f 100644 --- a/public/locales/en/file.json +++ b/public/locales/en/file.json @@ -20,5 +20,28 @@ "name": "Public", "icon": "Public File Icon" } + }, + "metadata": { + "title": "File Metadata", + "fields": { + "preview": "Preview", + "labels": "File Tags", + "persistentId": "File Persistent ID", + "downloadUrl": { + "title": "Download URL", + "description": "Use the Download URL in a Wget command or a download manager to avoid interrupted downloads, time outs or other failures. <1>User Guide - Downloading via URL" + }, + "unf": "File UNF", + "depositDate": "Deposit Date", + "metadataReleaseDate": "Metadata Release Date", + "publicationDate": "Publication Date", + "embargoReason": "Embargo Reason", + "size": "Size", + "type": "Type", + "variables": "Variables", + "observations": "Observations", + "directory": "File Path", + "description": "Description" + } } } diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index d57930b4b..15966ee9c 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -6,20 +6,22 @@ import styles from './FileMetadata.module.scss' import { DateHelper } from '../../../shared/domain/helpers/DateHelper' import { FileEmbargoDate } from '../file-embargo/FileEmbargoDate' import { BASE_URL } from '../../../config' +import { Trans, useTranslation } from 'react-i18next' interface FileMetadataProps { file: File } export function FileMetadata({ file }: FileMetadataProps) { + const { t } = useTranslation('file') return ( - File Metadata + {t('metadata.title')} - Preview + {t('metadata.fields.preview')} @@ -28,7 +30,7 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.labels.length > 0 && ( - File Tags + {t('metadata.fields.labels')} @@ -38,7 +40,7 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.persistentId && ( - File Persistent ID + {t('metadata.fields.persistentId')} {file.persistentId} @@ -46,16 +48,18 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.permissions.canDownloadFile && ( - Download URL + {t('metadata.fields.downloadUrl.title')} -

- Use the Download URL in a Wget command or a download manager to avoid interrupted - downloads, time outs or other failures.{' '} - - User Guide - Downloading via URL - -

+ +

+ Use the Download URL in a Wget command or a download manager to avoid + interrupted downloads, time outs or other failures.{' '} + + User Guide - Downloading via URL + +

+ {BASE_URL} {file.downloadUrls.original} @@ -66,7 +70,7 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.tabularData?.unf && ( - File UNF + {t('metadata.fields.unf')} {file.tabularData.unf} @@ -81,14 +85,14 @@ export function FileMetadata({ file }: FileMetadataProps) { )} - Deposit Date + {t('metadata.fields.depositDate')} {DateHelper.toDisplayFormatYYYYMMDD(file.depositDate)} {file.publicationDate && ( - Metadata Release Date + {t('metadata.fields.metadataReleaseDate')} {DateHelper.toDisplayFormatYYYYMMDD(file.publicationDate)} @@ -96,7 +100,7 @@ export function FileMetadata({ file }: FileMetadataProps) { {(file.publicationDate || file.embargo) && ( - Publication Date + {t('metadata.fields.publicationDate')} {file.embargo ? ( @@ -114,20 +118,20 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.embargo && file.embargo.reason && ( - Embargo Reason + {t('metadata.fields.embargoReason')} {file.embargo.reason} )} - Size + {t('metadata.fields.size')} {file.size.toString()} - Type + {t('metadata.fields.type')} {file.type.toDisplayFormat()} @@ -135,13 +139,13 @@ export function FileMetadata({ file }: FileMetadataProps) { <> - Variables + {t('metadata.fields.variables')} {file.tabularData.variablesCount} - Observations + {t('metadata.fields.observations')} {file.tabularData.observationsCount} @@ -150,7 +154,7 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.directory && ( - File Path + {t('metadata.fields.directory')} {file.directory} @@ -158,7 +162,7 @@ export function FileMetadata({ file }: FileMetadataProps) { {file.description && ( - Description + {t('metadata.fields.description')} {file.description} From dad803991e109a44b44262dcb704a3bf3de59d09 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 13:11:59 +0100 Subject: [PATCH 19/20] feat(FileMetadata): update FileSkeleton --- .../file-thumbnail/FileThumbnail.module.scss | 2 +- src/sections/file/File.module.scss | 4 ++ src/sections/file/FileSkeleton.tsx | 38 +++++++++++++++++-- .../file-metadata/FileMetadata.module.scss | 4 ++ .../file/file-metadata/FileMetadata.tsx | 2 +- .../files/domain/models/FileMother.ts | 2 +- .../file-embargo/FileEmbargoDate.spec.tsx | 8 ++-- 7 files changed, 50 insertions(+), 10 deletions(-) diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss index f9557e1f7..9d4231f27 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss @@ -1,4 +1,4 @@ -∂%container { +%container { position: relative; display: inline-block; } diff --git a/src/sections/file/File.module.scss b/src/sections/file/File.module.scss index 3b9d280bc..a51be5043 100644 --- a/src/sections/file/File.module.scss +++ b/src/sections/file/File.module.scss @@ -4,6 +4,10 @@ margin: 0.5em 0; } +.row { + margin: 12px 0; +} + .subtext { margin-bottom: 10px; color: $dv-subtext-color; diff --git a/src/sections/file/FileSkeleton.tsx b/src/sections/file/FileSkeleton.tsx index e2c8f30de..e3aa0e21a 100644 --- a/src/sections/file/FileSkeleton.tsx +++ b/src/sections/file/FileSkeleton.tsx @@ -1,8 +1,10 @@ import styles from './File.module.scss' import Skeleton, { SkeletonTheme } from 'react-loading-skeleton' -import { Tabs } from '@iqss/dataverse-design-system' +import { Accordion, Col, Row, Tabs } from '@iqss/dataverse-design-system' +import { useTranslation } from 'react-i18next' export function FileSkeleton() { + const { t } = useTranslation('file') return (
@@ -17,8 +19,38 @@ export function FileSkeleton() {
- - + +
+ + + {t('metadata.title')} + + + + + + + + + + + + {Array.from({ length: 25 }, (_, index) => ( + + + + + + + + + + + ))} + + + +
diff --git a/src/sections/file/file-metadata/FileMetadata.module.scss b/src/sections/file/file-metadata/FileMetadata.module.scss index 379585ac0..c1b19e86e 100644 --- a/src/sections/file/file-metadata/FileMetadata.module.scss +++ b/src/sections/file/file-metadata/FileMetadata.module.scss @@ -10,4 +10,8 @@ .code { background-color: #F0F0F0; +} + +.preview > span { + font-size: 16.7em; } \ No newline at end of file diff --git a/src/sections/file/file-metadata/FileMetadata.tsx b/src/sections/file/file-metadata/FileMetadata.tsx index 15966ee9c..b72c381cd 100644 --- a/src/sections/file/file-metadata/FileMetadata.tsx +++ b/src/sections/file/file-metadata/FileMetadata.tsx @@ -23,7 +23,7 @@ export function FileMetadata({ file }: FileMetadataProps) { {t('metadata.fields.preview')} - + diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index dfbe61baa..88d2c0aad 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -26,7 +26,7 @@ export class FileMother { labels: faker.datatype.boolean() ? FileLabelMother.createMany(3) : [], depositDate: faker.date.past(), publicationDate: faker.datatype.boolean() ? faker.date.past() : undefined, - thumbnail: faker.datatype.boolean() ? faker.image.imageUrl() : undefined, + thumbnail: faker.datatype.boolean() ? faker.image.imageUrl(400) : undefined, directory: faker.datatype.boolean() ? faker.system.directoryPath() : undefined, persistentId: faker.datatype.boolean() ? faker.datatype.uuid() : undefined, downloadUrls: { diff --git a/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx b/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx index 81f5d3523..9a0aa0ef6 100644 --- a/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx +++ b/tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx @@ -5,7 +5,7 @@ import { FileEmbargoMother } from '../../../files/domain/models/FilePreviewMothe describe('FileEmbargoDate', () => { it('renders the embargo date when embargo exists', () => { const embargoDate = new Date('2123-09-18') - const embargo = FileEmbargoMother.create(embargoDate) + const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate }) const status = FilePublishingStatus.RELEASED cy.customMount() const dateString = embargoDate.toLocaleDateString( @@ -21,7 +21,7 @@ describe('FileEmbargoDate', () => { it('renders the until embargo date when embargo is not active and the file is not released', () => { const embargoDate = new Date('2023-09-15') - const embargo = FileEmbargoMother.create(embargoDate) + const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate }) const status = FilePublishingStatus.RELEASED cy.customMount() @@ -38,7 +38,7 @@ describe('FileEmbargoDate', () => { it('renders the draft until embargo date when embargo is active and the file is not released', () => { const embargoDate = new Date('2123-09-18') - const embargo = FileEmbargoMother.create(embargoDate) + const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate }) const status = FilePublishingStatus.DRAFT cy.customMount() @@ -66,7 +66,7 @@ describe('FileEmbargoDate', () => { it('renders the embargo date in YYYY-MM-DD format', () => { const embargoDate = new Date('2123-09-18') - const embargo = FileEmbargoMother.create(embargoDate) + const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate }) const status = FilePublishingStatus.RELEASED cy.customMount( From f69a6993bf368327929ef40ab21974cb73a4c2f9 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 16 Jan 2024 15:44:11 +0100 Subject: [PATCH 20/20] fix: loading test --- tests/component/sections/file/File.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/component/sections/file/File.spec.tsx b/tests/component/sections/file/File.spec.tsx index 8da9248d9..d6c1596c8 100644 --- a/tests/component/sections/file/File.spec.tsx +++ b/tests/component/sections/file/File.spec.tsx @@ -28,7 +28,7 @@ describe('File', () => { cy.findByTestId('file-skeleton').should('exist') cy.wrap(fileRepository.getById).should('be.calledWith', 19) - cy.findByText(testFile.name).should('not.exist') + cy.findByText(testFile.name).should('exist') }) it('renders page not found when file is not found', () => {