[Table] Fix TableBody selectedRows state

[ovaldi]

I have a bug when I "Unselect All" rows. (1. click select all to select all rows 2. click select all again to unselect all rows).

Here is the TableBody.js source code:

      this.setState({
        selectedRows: this.state.selectedRows.length > 0 ?
          [this.state.selectedRows[this.state.selectedRows.length - 1]] : [],
      });

Basically, this line of code evaluates to "If I have any selected rows, let my new selected row be the last selected rows)"

eg.

1. If I have 3 items in a grid and all of them are unselected:

□ 1 Dog
□ 2 Cat
□ 3 Rat

2. When I click on the Select All button to select all selections:

√ 1 Dog
√ 2 Cat
√ 3 Rat

3. When I click on the Select All button to remove all selections, I will end up with the following result:

□ 1 Dog
□ 2 Cat
√ 3 Rat

The last row still selected, in this case, I just want to unselect all rows.

Closes #5249.
Closes #5192.
Closes #5234.

[oliviertassinari]

You are the third person asking for that change. Let's move into that direction. Could you write a unit test with the above issue description?
That would help a lot improving the state management. Thanks!

[oliviertassinari]

I'm gonna handle the tests myself. Thanks for the PR.

[ovaldi]

Thank you @oliviertassinari , :)