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

Author: MellyGray

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'
+}