fix(FilesTableRowSelection): global checkbox should select the curren…

…t page only
jayanthkomarraju · Sep 12, 2023 · e83845c · e83845c
1 parent 62487a8
commit e83845c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 26 deletions.
diff --git a/src/sections/dataset/dataset-files/files-table/FilesTableColumnsDefinition.tsx b/src/sections/dataset/dataset-files/files-table/FilesTableColumnsDefinition.tsx
@@ -4,17 +4,15 @@ import { RowSelectionCheckbox } from './row-selection/RowSelectionCheckbox'
 import { FileInfoCell } from './file-info-cell/FileInfoCell'
 import { FileInfoHeader } from './FileInfoHeader'
 
-export const createColumnsDefinition = (
-  toggleAllRowsSelected: (event: unknown) => void
-): ColumnDef<File>[] => [
+export const columns: ColumnDef<File>[] = [
   {
     id: 'select',
     header: ({ table }) => (
       <RowSelectionCheckbox
         {...{
           checked: table.getIsAllRowsSelected(),
           indeterminate: table.getIsSomeRowsSelected(),
-          onChange: toggleAllRowsSelected,
+          onChange: table.getToggleAllRowsSelectedHandler(),
           disabled: table.getPageCount() === 0
         }}
       />

diff --git a/src/sections/dataset/dataset-files/files-table/row-selection/useFileSelection.ts b/src/sections/dataset/dataset-files/files-table/row-selection/useFileSelection.ts
@@ -66,16 +66,6 @@ export function useFileSelection(
     setCurrentPageRowSelection({})
     setFileSelection({})
   }
-  const toggleAllFilesSelected = () => {
-    if (areAllFilesSelected()) {
-      clearFileSelection()
-    } else {
-      selectAllFiles()
-    }
-  }
-  const areAllFilesSelected = () => {
-    return Object.keys(fileSelection).length === paginationInfo.totalFiles
-  }
 
   useEffect(() => {
     setFileSelection(updateFileSelection())
@@ -88,8 +78,7 @@ export function useFileSelection(
   return {
     fileSelection,
     selectAllFiles,
-    clearFileSelection,
-    toggleAllFilesSelected
+    clearFileSelection
   }
 }
 

diff --git a/src/sections/dataset/dataset-files/files-table/useFilesTable.tsx b/src/sections/dataset/dataset-files/files-table/useFilesTable.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { File } from '../../../../files/domain/models/File'
 import { getCoreRowModel, Row, useReactTable } from '@tanstack/react-table'
-import { createColumnsDefinition } from './FilesTableColumnsDefinition'
+import { columns } from './FilesTableColumnsDefinition'
 import { FilePaginationInfo } from '../../../../files/domain/models/FilePaginationInfo'
 import { useFileSelection } from './row-selection/useFileSelection'
 
@@ -14,11 +14,14 @@ export function useFilesTable(files: File[], paginationInfo: FilePaginationInfo)
   const [currentPageSelectedRowModel, setCurrentPageSelectedRowModel] = useState<
     Record<string, Row<File>>
   >({})
-  const { fileSelection, selectAllFiles, clearFileSelection, toggleAllFilesSelected } =
-    useFileSelection(currentPageSelectedRowModel, setCurrentPageRowSelection, paginationInfo)
+  const { fileSelection, selectAllFiles, clearFileSelection } = useFileSelection(
+    currentPageSelectedRowModel,
+    setCurrentPageRowSelection,
+    paginationInfo
+  )
   const table = useReactTable({
     data: files,
-    columns: createColumnsDefinition(toggleAllFilesSelected),
+    columns: columns,
     state: {
       rowSelection: currentPageRowSelection
     },

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
@@ -39,7 +39,7 @@ describe('FilesTable', () => {
   })
 
   describe('Row selection', () => {
-    it('selects all rows when the header checkbox is clicked', () => {
+    it('selects all rows in the current page when the header checkbox is clicked', () => {
       cy.customMount(
         <FilesTable files={testFiles} paginationInfo={paginationInfo} isLoading={false} />
       )
@@ -48,25 +48,27 @@ describe('FilesTable', () => {
 
       cy.get('table > thead > tr > th > input[type=checkbox]').click()
 
-      cy.findByText('200 files are currently selected.').should('exist')
+      cy.findByText('10 files are currently selected.').should('exist')
 
-      cy.findByRole('button', { name: 'Select all 200 files in this dataset.' }).should('not.exist')
+      cy.findByRole('button', { name: 'Select all 200 files in this dataset.' }).should('exist')
     })
 
-    it('clears row selection when the header checkbox is clicked', () => {
+    it.only('clears row selection for the current page when the header checkbox is clicked', () => {
       cy.customMount(
         <FilesTable files={testFiles} paginationInfo={paginationInfo} isLoading={false} />
       )
 
       cy.wait(1000) // wait for the table to load
 
-      cy.get('table > thead > tr > th > input[type=checkbox]').click()
+      cy.get('table > tbody > tr:nth-child(2) > td:nth-child(1) > input[type=checkbox]').click()
+
+      cy.findByRole('button', { name: 'Select all 200 files in this dataset.' }).click()
 
       cy.findByText('200 files are currently selected.').should('exist')
 
       cy.get('table > thead > tr > th > input[type=checkbox]').click()
 
-      cy.findByText(/files are currently selected./).should('not.exist')
+      cy.findByText('190 files are currently selected.').should('exist')
     })
 
     it("selects all rows when the 'Select all' button is clicked", () => {