137 - Files table UI [2/2] - Filters

dev.Dockerfile

@@ -7,7 +7,9 @@ RUN npm run build
 
 WORKDIR /usr/src/app
 COPY package.json ./
+COPY package-lock.json ./
 COPY .npmrc ./
+RUN npm uninstall --save-dev lerna
 RUN npm install
 
 FROM node:19.6.1-alpine 

packages/design-system/src/lib/components/dropdown-button/dropdown-button-item/DropdownButtonItem.tsx

@@ -1,15 +1,15 @@
 import { Dropdown as DropdownBS } from 'react-bootstrap'
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 
-interface DropdownItemProps {
+interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
   href?: string
   eventKey?: string
   children: ReactNode
 }
 
-export function DropdownButtonItem({ href, eventKey, children }: DropdownItemProps) {
+export function DropdownButtonItem({ href, eventKey, children, ...props }: DropdownItemProps) {
   return (
-    <DropdownBS.Item href={href} eventKey={eventKey}>
+    <DropdownBS.Item href={href} eventKey={eventKey} {...props}>
       {children}
     </DropdownBS.Item>
   )

packages/design-system/src/lib/components/dropdown-button/dropdown-separator/DropdownSeparator.tsx

@@ -0,0 +1,5 @@
+import { Dropdown } from 'react-bootstrap'
+
+export function DropdownSeparator() {
+  return <Dropdown.Divider />
+}

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

@@ -2,6 +2,7 @@ export { Badge } from './components/badge/Badge'
 export { Button } from './components/button/Button'
 export { DropdownButton } from './components/dropdown-button/DropdownButton'
 export { DropdownButtonItem } from './components/dropdown-button/dropdown-button-item/DropdownButtonItem'
+export { DropdownSeparator } from './components/dropdown-button/dropdown-separator/DropdownSeparator'
 export { Col } from './components/grid/Col'
 export { Container } from './components/grid/Container'
 export { Row } from './components/grid/Row'

packages/design-system/src/lib/stories/dropdown-button/DropdownButton.stories.tsx

@@ -3,6 +3,7 @@ import { DropdownButtonItem } from '../../components/dropdown-button/dropdown-bu
 import { DropdownButton } from '../../components/dropdown-button/DropdownButton'
 import { IconName } from '../../components/icon/IconName'
 import { CanvasFixedHeight } from '../CanvasFixedHeight'
+import { DropdownSeparator } from '../../components/dropdown-button/dropdown-separator/DropdownSeparator'
 
 /**
  * ## Description
@@ -117,6 +118,19 @@ export const WithIcon: Story = {
   )
 }
 
+export const WithSeparatorBetweenOptions: Story = {
+  render: () => (
+    <CanvasFixedHeight height={150}>
+      <DropdownButton withSpacing title="Dropdown Button" id="dropdown-1" variant="primary">
+        <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+        <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+        <DropdownSeparator />
+        <DropdownButtonItem href="/item-3">Item 3</DropdownButtonItem>
+      </DropdownButton>
+    </CanvasFixedHeight>
+  )
+}
+
 /**
  * This is an example use case for a navigation dropdown button.
  */

packages/design-system/tests/component/dropdown-button/DropdownButton.spec.tsx

@@ -3,6 +3,7 @@ import { IconName } from '../../../src/lib/components/icon/IconName'
 import styles from '../../../src/lib/components/dropdown-button/DropdownButton.module.scss'
 import { ArrowClockwise } from 'react-bootstrap-icons'
 import DropdownItem from 'react-bootstrap/DropdownItem'
+import { DropdownSeparator } from '../../../src/lib'
 
 const titleText = 'My Dropdown Button'
 
@@ -96,4 +97,18 @@ describe('DropdownButton', () => {
 
     cy.wrap(onSelect).should('be.calledWith', '1')
   })
+
+  it('renders with separator', () => {
+    cy.mount(
+      <DropdownButton id="dropdown-button" title={titleText}>
+        <DropdownItem eventKey="1">Item 1</DropdownItem>
+        <DropdownItem eventKey="2">Item 2</DropdownItem>
+        <DropdownSeparator />
+        <DropdownItem eventKey="3">Item 3</DropdownItem>
+      </DropdownButton>
+    )
+    cy.findByText(titleText).click()
+
+    cy.findByRole('separator').should('exist')
+  })
 })

public/locales/en/files.json

@@ -49,6 +49,25 @@
         "size": "Size",
         "type": "Type"
       }
+    },
+    "filters": {
+      "title": "Filter by"
+    },
+    "filterByType": {
+      "title": "Filter Type"
+    },
+    "filterByTag": {
+      "title": "Filter Tag"
+    },
+    "filterByAccess": {
+      "title": "Access",
+      "options": {
+        "all": "All",
+        "public": "Public",
+        "restricted": "Restricted",
+        "embargoed_public": "Embargoed then Public",
+        "embargoed_restricted": "Embargoed then Restricted"
+      }
     }
   }
 }

src/files/domain/models/File.ts

@@ -73,13 +73,26 @@ export interface FileLabel {
   value: string
 }
 
+export class FileType {
+  constructor(readonly value: string) {}
+
+  toDisplayFormat(): string {
+    const words = this.value.split(' ')
+    return words
+      .map((word) => {
+        return word[0].toUpperCase() + word.substring(1)
+      })
+      .join(' ')
+  }
+}
+
 export class File {
   constructor(
     readonly id: string,
     readonly version: FileVersion,
     readonly name: string,
     readonly access: FileAccess,
-    readonly type: string,
+    readonly type: FileType,
     readonly size: FileSize,
     readonly date: FileDate,
     readonly downloads: number,

src/files/domain/models/FileCriteria.ts

@@ -1,5 +1,32 @@
-export interface FileCriteria {
-  sortBy?: FileSortByOption
+import { FileType } from './File'
+
+export class FileCriteria {
+  constructor(
+    public readonly sortBy: FileSortByOption = FileSortByOption.NAME_AZ,
+    public readonly filterByType?: FileType,
+    public readonly filterByAccess?: FileAccessOption,
+    public readonly filterByTag?: FileTag
+  ) {}
+
+  withSortBy(sortBy: FileSortByOption): FileCriteria {
+    return new FileCriteria(sortBy, this.filterByType, this.filterByAccess, this.filterByTag)
+  }
+
+  withFilterByType(filterByType: string | undefined): FileCriteria {
+    const newFilterByType = filterByType === undefined ? undefined : new FileType(filterByType)
+
+    return new FileCriteria(this.sortBy, newFilterByType, this.filterByAccess, this.filterByTag)
+  }
+
+  withFilterByAccess(filterByAccess: FileAccessOption | undefined): FileCriteria {
+    return new FileCriteria(this.sortBy, this.filterByType, filterByAccess, this.filterByTag)
+  }
+
+  withFilterByTag(filterByTag: string | undefined): FileCriteria {
+    const newFilterByTag = filterByTag === undefined ? undefined : new FileTag(filterByTag)
+
+    return new FileCriteria(this.sortBy, this.filterByType, this.filterByAccess, newFilterByTag)
+  }
 }
 
 export enum FileSortByOption {
@@ -10,3 +37,18 @@ export enum FileSortByOption {
   SIZE = 'size',
   TYPE = 'type'
 }
+
+export enum FileAccessOption {
+  PUBLIC = 'public',
+  RESTRICTED = 'restricted',
+  EMBARGOED = 'embargoed_public',
+  EMBARGOED_RESTRICTED = 'embargoed_restricted'
+}
+
+export class FileTag {
+  constructor(readonly value: string) {}
+
+  toDisplayFormat(): string {
+    return this.value[0].toUpperCase() + this.value.substring(1)
+  }
+}

src/files/domain/models/FilesCountInfo.ts

@@ -0,0 +1,24 @@
+import { FileType } from './File'
+import { FileAccessOption, FileTag } from './FileCriteria'
+
+export interface FilesCountInfo {
+  total: number
+  perFileType: FileTypeCount[]
+  perAccess: FileAccessCount[]
+  perFileTag: FileTagCount[]
+}
+
+export interface FileTypeCount {
+  type: FileType
+  count: number
+}
+
+export interface FileAccessCount {
+  access: FileAccessOption
+  count: number
+}
+
+export interface FileTagCount {
+  tag: FileTag
+  count: number
+}

src/files/domain/repositories/FileRepository.ts

@@ -1,10 +1,15 @@
 import { File } from '../models/File'
 import { FileCriteria } from '../models/FileCriteria'
+import { FilesCountInfo } from '../models/FilesCountInfo'
 
 export interface FileRepository {
   getAllByDatasetPersistentId: (
     datasetPersistentId: string,
     version?: string,
     criteria?: FileCriteria
   ) => Promise<File[]>
+  getCountInfoByDatasetPersistentId: (
+    datasetPersistentId: string,
+    version?: string
+  ) => Promise<FilesCountInfo>
 }

src/files/domain/useCases/getFilesCountInfoByDatasetPersistentId.ts

@@ -0,0 +1,15 @@
+import { FileRepository } from '../repositories/FileRepository'
+import { FileVersionNotNumber } from '../models/File'
+import { FilesCountInfo } from '../models/FilesCountInfo'
+
+export async function getFilesCountInfoByDatasetPersistentId(
+  fileRepository: FileRepository,
+  persistentId: string,
+  version: string = FileVersionNotNumber.LATEST
+): Promise<FilesCountInfo> {
+  return fileRepository
+    .getCountInfoByDatasetPersistentId(persistentId, version)
+    .catch((error: Error) => {
+      throw new Error(error.message)
+    })
+}

src/files/infrastructure/FileJSDataverseRepository.ts

@@ -1,6 +1,8 @@
 import { FileRepository } from '../domain/repositories/FileRepository'
 import { File } from '../domain/models/File'
 import { FilesMockData } from '../../stories/files/FileMockData'
+import { FilesCountInfo } from '../domain/models/FilesCountInfo'
+import { FilesCountInfoMother } from '../../../tests/component/files/domain/models/FilesCountInfoMother'
 
 export class FileJSDataverseRepository implements FileRepository {
   // eslint-disable-next-line unused-imports/no-unused-vars
@@ -12,4 +14,16 @@
       }, 1000)
     })
   }
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  getCountInfoByDatasetPersistentId(
+    persistentId: string,
+    version?: string
+  ): Promise<FilesCountInfo> {
+    // TODO - implement using js-dataverse
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(FilesCountInfoMother.create())
+      }, 1000)
+    })
+  }
 }

src/sections/dataset/dataset-files/DatasetFiles.tsx

@@ -1,11 +1,9 @@
-import { useFilesTable } from './files-table/useFilesTable'
 import { FileRepository } from '../../../files/domain/repositories/FileRepository'
-import { useFiles } from './useFiles'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { FilesTable } from './files-table/FilesTable'
-import { SpinnerSymbol } from './files-table/spinner-symbol/SpinnerSymbol'
-import { FileCriteriaInputs } from './file-criteria-inputs/FileCriteriaInputs'
+import { FileCriteriaControls } from './file-criteria-controls/FileCriteriaControls'
 import { FileCriteria } from '../../../files/domain/models/FileCriteria'
+import { useFiles } from './useFiles'
 
 interface DatasetFilesProps {
   filesRepository: FileRepository
@@ -18,30 +16,25 @@ export function DatasetFiles({
   datasetPersistentId,
   datasetVersion
 }: DatasetFilesProps) {
-  const [criteria, setCriteria] = useState<FileCriteria>()
-  const { files, isLoading } = useFiles(
+  const [criteria, setCriteria] = useState<FileCriteria>(new FileCriteria())
+  const { files, isLoading, filesCountInfo } = useFiles(
     filesRepository,
     datasetPersistentId,
     datasetVersion,
     criteria
   )
-  const { table, setFilesTableData } = useFilesTable()
   const handleCriteriaChange = (newCriteria: FileCriteria) => {
-    setCriteria((criteria) => ({ ...criteria, ...newCriteria }))
-  }
-
-  useEffect(() => {
-    setFilesTableData(files)
-  }, [files])
-
-  if (isLoading) {
-    return <SpinnerSymbol />
+    setCriteria(newCriteria)
   }
 
   return (
     <>
-      {files.length !== 0 && <FileCriteriaInputs onCriteriaChange={handleCriteriaChange} />}
-      <FilesTable table={table} />
+      <FileCriteriaControls
+        criteria={criteria}
+        onCriteriaChange={handleCriteriaChange}
+        filesCountInfo={filesCountInfo}
+      />
+      <FilesTable files={files} isLoading={isLoading} />
     </>
   )
 }

src/sections/dataset/dataset-files/file-criteria-controls/FileCriteriaControls.module.scss

@@ -0,0 +1,32 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module";
+
+.criteria-section {
+    margin-bottom: 1em;
+}
+
+.sort-container {
+  display: flex;
+  align-items: end;
+  justify-content: end;
+}
+
+.icon {
+  margin-right:  0.3em;
+  margin-bottom: 0.2em;
+}
+
+.text-filter-by {
+  margin-left: 7px;
+  color: $dv-subtext-color;
+  font-size: $dv-font-size-sm;
+}
+
+.selected-option {
+    font-weight: $dv-font-weight-bold;
+}
+
+.filters-container {
+  display: flex;
+  align-items: center;
+}