diff --git a/src/sections/dataset/dataset-files/files-table/FilesTableColumnsDefinition.tsx b/src/sections/dataset/dataset-files/files-table/FilesTableColumnsDefinition.tsx index b7d0b4217..f5d6d28bf 100644 --- a/src/sections/dataset/dataset-files/files-table/FilesTableColumnsDefinition.tsx +++ b/src/sections/dataset/dataset-files/files-table/FilesTableColumnsDefinition.tsx @@ -4,9 +4,7 @@ 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[] => [ +export const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( @@ -14,7 +12,7 @@ export const createColumnsDefinition = ( {...{ 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 index e8e9fec2c..61bc82b40 100644 --- 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 index 467f76e1b..52cd528fb 100644 --- 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> >({}) - 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 index 3da28781b..495f2b00b 100644 --- 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( ) @@ -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( ) 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", () => {