Merge pull request IQSS#175 from IQSS/feature/174-refine-ui-styling-f…

…ile-tab 174 - Refine UI styling Files Tab
jayanthkomarraju · Sep 25, 2023 · 71afc5b · 71afc5b
2 parents f9ae2db + 412ad31
commit 71afc5b
Show file tree

Hide file tree

Showing 8 changed files with 8,562 additions and 7,004 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss b/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss
@@ -99,4 +99,18 @@ $navbar-brand-font-size: $dv-brand-font-size;
 
 .navbar-collapse {
   justify-content: end;
+}
+
+th {
+  vertical-align: middle;
+}
+
+.btn-group > div:not(:last-child) > .btn-group > .btn, .btn-group-vertical >div:not(:last-child) > .btn-group > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.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;
 }
diff --git a/packages/design-system/src/lib/stories/button-group/ButtonGroup.stories.tsx b/packages/design-system/src/lib/stories/button-group/ButtonGroup.stories.tsx
@@ -4,6 +4,8 @@ import { Button } from '../../components/button/Button'
 import { ButtonToolbar } from '../../components/button-group/ButtonToolbar'
 import { DropdownButton } from '../../components/dropdown-button/DropdownButton'
 import { DropdownButtonItem } from '../../components/dropdown-button/dropdown-button-item/DropdownButtonItem'
+import { Download, ThreeDotsVertical } from 'react-bootstrap-icons'
+import { Tooltip } from '../../components/tooltip/Tooltip'
 
 /**
  * ## Description
@@ -76,3 +78,32 @@ export const NestedButtonGroups: Story = {
     </ButtonToolbar>
   )
 }
+
+export const ButtonGroupWithTooltips: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Tooltip placement="top" overlay="Access File">
+        <DropdownButton
+          id={`action-button-access-file`}
+          title=""
+          asButtonGroup
+          variant="secondary"
+          icon={<Download aria-label="Access File" />}>
+          <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+          <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+        </DropdownButton>
+      </Tooltip>
+      <Tooltip placement="top" overlay={<span>File Options</span>}>
+        <DropdownButton
+          id={`file-options-file`}
+          title=""
+          asButtonGroup
+          variant="secondary"
+          icon={<ThreeDotsVertical aria-label="File Options" />}>
+          <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+          <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+        </DropdownButton>
+      </Tooltip>
+    </ButtonGroup>
+  )
+}
diff --git a/src/sections/dataset/dataset-files/files-table/FilesTable.tsx b/src/sections/dataset/dataset-files/files-table/FilesTable.tsx
@@ -39,3 +39,22 @@ export function FilesTable({ files, isLoading, paginationInfo }: FilesTableProps
     </>
   )
 }
+
+export function getCellStyle(cellId: string) {
+  const statusCellId = 'status'
+  const infoCellId = 'info'
+
+  if (cellId == 'select') {
+    return { verticalAlign: 'middle' }
+  }
+
+  if (cellId == statusCellId) {
+    return { borderWidth: '0 1px 0 0' }
+  }
+
+  if (cellId == infoCellId) {
+    return { borderWidth: '0 0 0 1px' }
+  }
+
+  return undefined
+}
diff --git a/src/sections/dataset/dataset-files/files-table/FilesTableBody.tsx b/src/sections/dataset/dataset-files/files-table/FilesTableBody.tsx
@@ -2,6 +2,7 @@ import { flexRender, Row } from '@tanstack/react-table'
 import { File } from '../../../../files/domain/models/File'
 import { useTranslation } from 'react-i18next'
 import styles from './FilesTable.module.scss'
+import { getCellStyle } from './FilesTable'
 
 interface FilesTableBodyProps {
   rows: Row<File>[]
@@ -17,8 +18,11 @@ export function FilesTableBody({ rows }: FilesTableBodyProps) {
         return (
           <tr key={row.id} className={row.getIsSelected() ? styles['selected-row'] : ''}>
             {row.getVisibleCells().map((cell) => {
+              const cellIdWithoutPrefix = cell.id.split('_').slice(1).join('_')
               return (
-                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                <td key={cell.id} style={getCellStyle(cellIdWithoutPrefix)}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
               )
             })}
           </tr>

diff --git a/src/sections/dataset/dataset-files/files-table/FilesTableHeader.tsx b/src/sections/dataset/dataset-files/files-table/FilesTableHeader.tsx
@@ -1,6 +1,7 @@
 import { flexRender, HeaderGroup } from '@tanstack/react-table'
 import { File } from '../../../../files/domain/models/File'
 import styles from './FilesTable.module.scss'
+import { getCellStyle } from './FilesTable'
 
 interface FilesTableHeaderProps {
   headers: HeaderGroup<File>[]
@@ -13,7 +14,11 @@ export function FilesTableHeader({ headers }: FilesTableHeaderProps) {
         <tr key={headerGroup.id}>
           {headerGroup.headers.map((header) => {
             return (
-              <th key={header.id} colSpan={header.colSpan} className={styles[header.id]}>
+              <th
+                key={header.id}
+                colSpan={header.colSpan}
+                className={styles[header.id]}
+                style={getCellStyle(header.id)}>
                 {header.isPlaceholder ? null : (
                   <>{flexRender(header.column.columnDef.header, header.getContext())}</>
                 )}

diff --git a/tests/component/files/domain/models/FilesCountInfoMother.tsx b/tests/component/files/domain/models/FilesCountInfoMother.tsx
@@ -5,36 +5,37 @@ import { FileAccessOption, FileTag } from '../../../../../src/files/domain/model
 
 export class FilesCountInfoMother {
   static create(props?: Partial<FilesCountInfo>): FilesCountInfo {
+    const total = props?.total ?? faker.datatype.number()
     return {
       total: faker.datatype.number(),
       perFileType: [
         {
           type: new FileType(faker.system.fileType()),
-          count: faker.datatype.number()
+          count: faker.datatype.number({ max: total })
         },
         {
           type: new FileType(faker.system.fileType()),
-          count: faker.datatype.number()
+          count: faker.datatype.number({ max: total })
         }
       ],
       perAccess: [
         {
           access: faker.helpers.arrayElement(Object.values(FileAccessOption)),
-          count: faker.datatype.number()
+          count: faker.datatype.number({ max: total })
         },
         {
           access: faker.helpers.arrayElement(Object.values(FileAccessOption)),
-          count: faker.datatype.number()
+          count: faker.datatype.number({ max: total })
         }
       ],
       perFileTag: [
         {
           tag: new FileTag(faker.lorem.word()),
-          count: faker.datatype.number()
+          count: faker.datatype.number({ max: total })
         },
         {
           tag: new FileTag(faker.lorem.word()),
-          count: faker.datatype.number()
+          count: faker.datatype.number({ max: total })
         }
       ],
       ...props

diff --git a/tests/component/sections/dataset/dataset-files/files-table/FilesTable.spec.tsx b/tests/component/sections/dataset/dataset-files/files-table/FilesTable.spec.tsx
@@ -1,5 +1,8 @@
 import { FileMother } from '../../../../files/domain/models/FileMother'
-import { FilesTable } from '../../../../../../src/sections/dataset/dataset-files/files-table/FilesTable'
+import {
+  FilesTable,
+  getCellStyle
+} from '../../../../../../src/sections/dataset/dataset-files/files-table/FilesTable'
 import { FileSize, FileSizeUnit } from '../../../../../../src/files/domain/models/File'
 import { SettingMother } from '../../../../settings/domain/models/SettingMother'
 import { ZipDownloadLimit } from '../../../../../../src/settings/domain/models/ZipDownloadLimit'
@@ -144,4 +147,21 @@ describe('FilesTable', () => {
 
     cy.findByRole('columnheader', { name: 'File Actions' }).should('exist')
   })
+
+  describe('getCellStyle function', () => {
+    it('should return the correct style for status cell', () => {
+      const cellId = 'status'
+      cy.wrap(getCellStyle(cellId)).should('deep.equal', { borderWidth: '0 1px 0 0' })
+    })
+
+    it('should return the correct style for info cell', () => {
+      const cellId = 'info'
+      cy.wrap(getCellStyle(cellId)).should('deep.equal', { borderWidth: '0 0 0 1px' })
+    })
+
+    it('should return undefined for unknown cell', () => {
+      const cellId = 'unknown'
+      cy.wrap(getCellStyle(cellId)).should('be.undefined')
+    })
+  })
 })