fix(FilesTable): remove border of the last cell

IQSS · Sep 19, 2023 · f4bc0de · f4bc0de
1 parent 0f3a335
commit f4bc0de
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/src/sections/dataset/dataset-files/files-table/FilesTable.tsx b/src/sections/dataset/dataset-files/files-table/FilesTable.tsx
@@ -41,3 +41,18 @@ export function FilesTable({ files, isLoading, paginationInfo }: FilesTableProps
     </>
   )
 }
+
+export function getCellStyle(cellId: string) {
+  const statusCellId = 'status'
+  const infoCellId = 'info'
+
+  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/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'
@@ -138,4 +141,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')
+    })
+  })
 })