Lucas/t 353 checkbox should change state when clicking on their whole (#167)

* Added on click on Checkbox component

* - Added test in story
- Added sleep util
- Fixed click target collision (thanks to test !)

* Use a new CheckboxCell to wrap Checkbox

* Fixed lint

* Refactored CSS after comment

* Fixed tests

front/src/pages/companies/companies-columns.tsx

@@ -9,7 +9,6 @@ import { updateCompany } from '../../services/api/companies';
 import { User, mapToUser } from '../../interfaces/entities/user.interface';
 
 import ColumnHead from '../../components/table/ColumnHead';
-import Checkbox from '../../components/form/Checkbox';
 import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
 import EditableDate from '../../components/editable-cell/EditableDate';
 import EditableRelation from '../../components/editable-cell/EditableRelation';
@@ -29,6 +28,7 @@ import {
 } from 'react-icons/tb';
 import { QueryMode } from '../../generated/graphql';
 import { getLogoUrlFromDomainName } from '../../services/utils';
+import { CheckboxCell } from '../../components/table/CheckboxCell';
 
 const columnHelper = createColumnHelper<Company>();
 
@@ -41,15 +41,15 @@ export const useCompaniesColumns = () => {
           <SelectAllCheckbox
             checked={table.getIsAllRowsSelected()}
             indeterminate={table.getIsSomeRowsSelected()}
-            onChange={table.getToggleAllRowsSelectedHandler()}
+            onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
           />
         ),
         cell: (props: CellContext<Company, string>) => (
-          <Checkbox
+          <CheckboxCell
             id={`company-selected-${props.row.original.id}`}
             name={`company-selected-${props.row.original.id}`}
             checked={props.row.getIsSelected()}
-            onChange={props.row.getToggleSelectedHandler()}
+            onChange={(newValue) => props.row.toggleSelected(newValue)}
           />
         ),
         size: 25,

front/src/pages/people/__stories__/People.inputs.stories.tsx

@@ -6,6 +6,7 @@ import People from '../People';
 import { Story } from './People.stories';
 import { mocks, render } from './shared';
 import { mockedPeopleData } from '../../../testing/mock-data/people';
+import { sleep } from '../../../testing/sleep';
 
 const meta: Meta<typeof People> = {
   title: 'Pages/People',
@@ -39,7 +40,7 @@ export const ChangeEmail: Story = {
 
     await userEvent.click(secondRowEmailCell);
 
-    await new Promise((resolve) => setTimeout(resolve, 25));
+    await sleep(25);
 
     expect(
       canvas.queryByTestId('editable-cell-edit-mode-container'),
@@ -47,7 +48,7 @@ export const ChangeEmail: Story = {
 
     await userEvent.click(secondRowEmailCell);
 
-    await new Promise((resolve) => setTimeout(resolve, 25));
+    await sleep(25);
 
     expect(
       canvas.queryByTestId('editable-cell-edit-mode-container'),
@@ -57,3 +58,34 @@ export const ChangeEmail: Story = {
     msw: mocks,
   },
 };
+
+export const Checkbox: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(500);
+
+    const inputCheckboxContainers = await canvas.findAllByTestId(
+      'input-checkbox-cell-container',
+    );
+
+    const inputCheckboxes = await canvas.findAllByTestId('input-checkbox');
+
+    const secondCheckboxContainer = inputCheckboxContainers[1];
+    const secondCheckbox = inputCheckboxes[1] as HTMLInputElement;
+
+    expect(secondCheckboxContainer).toBeDefined();
+
+    await userEvent.click(secondCheckboxContainer);
+
+    expect(secondCheckbox.checked).toBe(true);
+
+    await userEvent.click(secondCheckbox);
+
+    expect(secondCheckbox.checked).toBe(false);
+  },
+  parameters: {
+    msw: mocks,
+  },
+};

front/src/pages/people/people-columns.tsx

@@ -4,7 +4,6 @@ import { Person } from '../../interfaces/entities/person.interface';
 import { updatePerson } from '../../services/api/people';
 
 import ColumnHead from '../../components/table/ColumnHead';
-import Checkbox from '../../components/form/Checkbox';
 import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
 import EditablePhone from '../../components/editable-cell/EditablePhone';
 import { EditablePeopleFullName } from '../../components/people/EditablePeopleFullName';
@@ -19,6 +18,7 @@ import {
   TbUser,
 } from 'react-icons/tb';
 import { PeopleCompanyCell } from '../../components/people/PeopleCompanyCell';
+import { CheckboxCell } from '../../components/table/CheckboxCell';
 
 const columnHelper = createColumnHelper<Person>();
 
@@ -31,15 +31,15 @@ export const usePeopleColumns = () => {
           <SelectAllCheckbox
             checked={table.getIsAllRowsSelected()}
             indeterminate={table.getIsSomeRowsSelected()}
-            onChange={table.getToggleAllRowsSelectedHandler()}
+            onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
           />
         ),
         cell: (props: CellContext<Person, string>) => (
-          <Checkbox
+          <CheckboxCell
             id={`person-selected-${props.row.original.id}`}
             name={`person-selected-${props.row.original.id}`}
             checked={props.row.getIsSelected()}
-            onChange={props.row.getToggleSelectedHandler()}
+            onChange={(newValue) => props.row.toggleSelected(newValue)}
           />
         ),
         size: 25,