feat(DatasetFiles): complete FileInfoCell with all the file info

packages/design-system/src/lib/components/tooltip/overlay-trigger/OverlayTrigger.tsx

@@ -7,6 +7,7 @@ interface OverlayTriggerProps {
   message: string
   children: ReactElement
 }
+
 export function OverlayTrigger({ placement, message, children }: OverlayTriggerProps) {
   return (
     <OverlayTriggerBS

packages/design-system/src/lib/index.ts

@@ -18,3 +18,4 @@ export { Modal } from './components/modal/Modal'
 export { Table } from './components/table/Table'
 export { Tooltip } from './components/tooltip/Tooltip'
 export { Icon } from './components/Icon.enum'
+export { OverlayTrigger } from './components/tooltip/overlay-trigger/OverlayTrigger'

public/locales/en/files.json

@@ -0,0 +1,8 @@
+{
+  "metadataReleased": "Metadata Released",
+  "published": "Published",
+  "deposited": "Deposited",
+  "embargoedWillBeUntil": "Draft: will be embargoed until",
+  "embargoedUntil" : "Embargoed until",
+  "embargoedWasThrough": "Was embargoed until"
+}

src/files/domain/models/File.ts

@@ -1,5 +1,14 @@
+export enum FileSizeUnit {
+  BYTES = 'B',
+  KILOBYTES = 'KB',
+  MEGABYTES = 'MB',
+  GIGABYTES = 'GB',
+  TERABYTES = 'TB',
+  PETABYTES = 'PB'
+}
+
 export class FileSize {
-  constructor(readonly value: number, readonly unit: string) {}
+  constructor(readonly value: number, readonly unit: FileSizeUnit) {}
 
   toString(): string {
     return `${this.value} ${this.unit}`
@@ -11,14 +20,54 @@ export interface FileAccess {
   canDownload: boolean
 }
 
+export enum FileStatus {
+  DRAFT = 'draft',
+  RELEASED = 'released'
+}
+
 export class FileVersion {
-  constructor(public readonly majorNumber: number, public readonly minorNumber: number) {}
+  constructor(
+    public readonly majorNumber: number,
+    public readonly minorNumber: number,
+    public readonly status: FileStatus
+  ) {}
 
   toString(): string {
     return `${this.majorNumber}.${this.minorNumber}`
   }
 }
 
+export enum FileDateType {
+  METADATA_RELEASED = 'metadataReleased',
+  PUBLISHED = 'published',
+  DEPOSITED = 'deposited'
+}
+
+export interface FileDate {
+  type: FileDateType
+  date: string
+}
+
+export interface FileEmbargo {
+  active: boolean
+  date: string
+}
+
+export interface FileTabularData {
+  variablesCount: number
+  observationsCount: number
+  unf: string
+}
+
+export enum FileLabelType {
+  CATEGORY = 'category',
+  TAG = 'tag'
+}
+export interface FileLabel {
+  type: FileLabelType
+  value: string
+}
+
 export class File {
   constructor(
     readonly id: string,
@@ -27,10 +76,15 @@ export class File {
     readonly access: FileAccess,
     readonly type: string,
     readonly size: FileSize,
-    readonly publicationDate: string,
+    readonly date: FileDate,
     readonly downloads: number,
-    readonly checksum: string,
-    readonly thumbnail?: string
+    readonly labels: FileLabel[],
+    readonly checksum?: string,
+    readonly thumbnail?: string,
+    readonly directory?: string,
+    readonly embargo?: FileEmbargo,
+    readonly tabularData?: FileTabularData,
+    readonly description?: string
   ) {}
 
   getLink(): string {

src/sections/dataset/dataset-files/files-table/file-info-cell/FileChecksum.tsx

@@ -0,0 +1,15 @@
+import styles from './FileInfoCell.module.scss'
+import { CopyToClipboardButton } from './copy-to-clipboard-button/CopyToClipboardButton'
+
+export function FileChecksum({ checksum }: { checksum: string | undefined }) {
+  if (!checksum) {
+    return <></>
+  }
+
+  return (
+    <div className={styles['checksum-container']}>
+      {checksum}
+      <CopyToClipboardButton text={checksum} />
+    </div>
+  )
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileDate.tsx

@@ -0,0 +1,13 @@
+import { FileDate as FileDateModel } from '../../../../../files/domain/models/File'
+import { useTranslation } from 'react-i18next'
+
+export function FileDate({ date }: { date: FileDateModel }) {
+  const { t } = useTranslation('files')
+  return (
+    <div>
+      <span>
+        {t(date.type)} {date.date}
+      </span>
+    </div>
+  )
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileDescription.tsx

@@ -0,0 +1,8 @@
+import styles from './FileInfoCell.module.scss'
+
+export function FileDescription({ description }: { description: string | undefined }) {
+  if (!description) {
+    return <></>
+  }
+  return <div className={styles['description-container']}>{description}</div>
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileDirectory.tsx

@@ -0,0 +1,10 @@
+export function FileDirectory({ directory }: { directory: string | undefined }) {
+  if (!directory) {
+    return <></>
+  }
+  return (
+    <div className="directory-container">
+      <span>{directory}</span>
+    </div>
+  )
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileDownloads.tsx

@@ -0,0 +1,17 @@
+import { FileStatus } from '../../../../../files/domain/models/File'
+
+interface FileDownloadsProps {
+  downloads: number
+  status: FileStatus
+}
+export function FileDownloads({ downloads, status }: FileDownloadsProps) {
+  if (status !== FileStatus.RELEASED) {
+    return <></>
+  }
+
+  return (
+    <div>
+      <span>{downloads} Downloads</span>
+    </div>
+  )
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileEmbargoDate.tsx

@@ -0,0 +1,31 @@
+import { FileEmbargo, FileStatus } from '../../../../../files/domain/models/File'
+import { useTranslation } from 'react-i18next'
+
+interface FileEmbargoDateProps {
+  embargo: FileEmbargo | undefined
+  status: FileStatus
+}
+
+export function FileEmbargoDate({ embargo, status }: FileEmbargoDateProps) {
+  const { t } = useTranslation('files')
+
+  if (!embargo) {
+    return <></>
+  }
+
+  return (
+    <div>
+      <span>
+        {t(embargoTypeOfDate(embargo.active, status))} {embargo.date}
+      </span>
+    </div>
+  )
+}
+
+const embargoTypeOfDate = (embargoIsActive: boolean, status: FileStatus) => {
+  if (status === FileStatus.RELEASED) {
+    return embargoIsActive ? 'embargoedUntil' : 'embargoedWasThrough'
+  }
+
+  return 'embargoedWillBeUntil'
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileInfoCell.module.scss

@@ -5,12 +5,27 @@
 display: flex;
 }
 
-.info-container {
+.body-container {
   padding-left: 10px;
 
-  &__body {
-    color: $dv-subtext-color;
+  &__subtext {
     font-size: $dv-font-size-sm;
+    color: $dv-subtext-color;
+
   }
 }
 
+.checksum-container {
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.description-container {
+  font-size: $dv-font-size-sm;
+  color: $dv-text-color;
+}
+
+.labels-container >*{
+  margin-right: 0.5em;;
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileInfoCell.tsx

@@ -1,8 +1,16 @@
 import { File } from '../../../../../files/domain/models/File'
-import { ClipboardPlusFill } from 'react-bootstrap-icons'
 import styles from './FileInfoCell.module.scss'
 import { FileThumbnail } from './file-thumbnail/FileThumbnail'
-import { FileTitle } from './file-title/FileTitle'
+import { FileTitle } from './FileTitle'
+import { FileDirectory } from './FileDirectory'
+import { FileType } from './FileType'
+import { FileDate } from './FileDate'
+import { FileEmbargoDate } from './FileEmbargoDate'
+import { FileDownloads } from './FileDownloads'
+import { FileChecksum } from './FileChecksum'
+import { FileTabularData } from './FileTabularData'
+import { FileDescription } from './FileDescription'
+import { FileLabels } from './FileLabels'
 
 export function FileInfoCell({ file }: { file: File }) {
   return (
@@ -13,26 +21,19 @@ export function FileInfoCell({ file }: { file: File }) {
         access={file.access}
         type={file.type}
       />
-      <div className={styles['info-container']}>
+      <div className={styles['body-container']}>
         <FileTitle link={file.getLink()} name={file.name} />
-        <div className={styles['info-container__body']}>
-          <div>
-            <span>
-              {file.type} - {file.size.toString()}
-            </span>
-          </div>
-          <div>
-            <span>Published {file.publicationDate}</span>
-          </div>
-          <div>
-            <span>{file.downloads} Downloads</span>
-          </div>
-          <div>
-            <span>
-              {file.checksum} <ClipboardPlusFill />
-            </span>
-          </div>
+        <div className={styles['body-container__subtext']}>
+          <FileDirectory directory={file.directory} />
+          <FileType type={file.type} size={file.size} />
+          <FileDate date={file.date} />
+          <FileEmbargoDate embargo={file.embargo} status={file.version.status} />
+          <FileDownloads downloads={file.downloads} status={file.version.status} />
+          <FileChecksum checksum={file.checksum} />
+          <FileTabularData tabularData={file.tabularData} />
         </div>
+        <FileDescription description={file.description} />
+        <FileLabels labels={file.labels} />
       </div>
     </div>
   )

src/sections/dataset/dataset-files/files-table/file-info-cell/FileLabels.tsx

@@ -0,0 +1,20 @@
+import { FileLabel, FileLabelType } from '../../../../../files/domain/models/File'
+import { Badge } from 'dataverse-design-system'
+import styles from './FileInfoCell.module.scss'
+
+const VARIANT_BY_LABEL_TYPE: Record<FileLabelType, 'secondary' | 'info'> = {
+  [FileLabelType.CATEGORY]: 'secondary',
+  [FileLabelType.TAG]: 'info'
+}
+
+export function FileLabels({ labels }: { labels: FileLabel[] }) {
+  return (
+    <div className={styles['labels-container']}>
+      {labels.map((label, index) => (
+        <Badge key={`${label.value}-${index}`} variant={VARIANT_BY_LABEL_TYPE[label.type]}>
+          {label.value}
+        </Badge>
+      ))}
+    </div>
+  )
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileTabularData.tsx

@@ -0,0 +1,18 @@
+import { FileTabularData as FileTabularDataModel } from '../../../../../files/domain/models/File'
+import { CopyToClipboardButton } from './copy-to-clipboard-button/CopyToClipboardButton'
+
+export function FileTabularData({
+  tabularData
+}: {
+  tabularData: FileTabularDataModel | undefined
+}) {
+  if (!tabularData) {
+    return <></>
+  }
+  return (
+    <div>
+      {tabularData.variablesCount} Variables, {tabularData.observationsCount} Observations{' '}
+      {tabularData.unf} <CopyToClipboardButton text={tabularData.unf} />
+    </div>
+  )
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/FileType.tsx

@@ -0,0 +1,23 @@
+import { FileSize } from '../../../../../files/domain/models/File'
+
+interface FileTypeProps {
+  type: string
+  size: FileSize
+}
+
+export function FileType({ type, size }: FileTypeProps) {
+  return (
+    <div>
+      <span>
+        {capitalizeFirstLetter(type)} - {size.toString()}
+      </span>
+    </div>
+  )
+}
+
+function capitalizeFirstLetter(str: string): string {
+  if (str.length === 0) {
+    return str
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

src/sections/dataset/dataset-files/files-table/file-info-cell/copy-to-clipboard-button/CopyToClipboard.module.scss

@@ -0,0 +1,11 @@
+@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/colors.module";
+
+.container {
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.check {
+  color: $dv-success-color;
+  font-size: 20px;
+}