Add tab hotkey on table page (#457)

* wip

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixed initialize soft focus

* Fixed enter mode

* Added TODO

* Fix

* Fixes

* Fix tests

* Fix lint

* Fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/ui/components/table/EntityTable.tsx

@@ -6,7 +6,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import {
   FilterConfigType,
@@ -16,12 +16,13 @@ import {
   SelectedSortType,
   SortType,
 } from '@/filters-and-sorts/interfaces/sorts/interface';
-import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { RowContext } from '@/ui/tables/states/RowContext';
 
-import { useResetTableRowSelection } from '../../tables/hooks/useResetTableRowSelection';
 import { currentRowSelectionState } from '../../tables/states/rowSelectionState';
 
 import { TableHeader } from './table-header/TableHeader';
+import { EntityTableRow } from './EntityTableRow';
 
 type OwnProps<TData extends { id: string }, SortField> = {
   data: Array<TData>;
@@ -100,11 +101,6 @@ const StyledTableScrollableContainer = styled.div`
   overflow: auto;
 `;
 
-const StyledRow = styled.tr<{ selected: boolean }>`
-  background: ${(props) =>
-    props.selected ? props.theme.background.secondary : 'none'};
-`;
-
 export function EntityTable<TData extends { id: string }, SortField>({
   data,
   columns,
@@ -118,13 +114,6 @@ export function EntityTable<TData extends { id: string }, SortField>({
   const [currentRowSelection, setCurrentRowSelection] = useRecoilState(
     currentRowSelectionState,
   );
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
-
-  const resetTableRowSelection = useResetTableRowSelection();
-
-  React.useEffect(() => {
-    resetTableRowSelection();
-  }, [resetTableRowSelection]);
 
   const table = useReactTable<TData>({
     data,
@@ -138,16 +127,6 @@ export function EntityTable<TData extends { id: string }, SortField>({
     getRowId: (row) => row.id,
   });
 
-  function handleContextMenu(event: React.MouseEvent, id: string) {
-    event.preventDefault();
-    setCurrentRowSelection((prev) => ({ ...prev, [id]: true }));
-
-    setContextMenuPosition({
-      x: event.clientX,
-      y: event.clientY,
-    });
-  }
-
   return (
     <StyledTableWithHeader>
       <TableHeader
@@ -186,33 +165,9 @@ export function EntityTable<TData extends { id: string }, SortField>({
           </thead>
           <tbody>
             {table.getRowModel().rows.map((row, index) => (
-              <StyledRow
-                key={row.id}
-                data-testid={`row-id-${row.index}`}
-                selected={!!currentRowSelection[row.id]}
-              >
-                {row.getVisibleCells().map((cell) => {
-                  return (
-                    <td
-                      key={cell.id + row.original.id}
-                      onContextMenu={(event) =>
-                        handleContextMenu(event, row.original.id)
-                      }
-                      style={{
-                        width: cell.column.getSize(),
-                        minWidth: cell.column.getSize(),
-                        maxWidth: cell.column.getSize(),
-                      }}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </td>
-                  );
-                })}
-                <td></td>
-              </StyledRow>
+              <RecoilScope SpecificContext={RowContext} key={row.id}>
+                <EntityTableRow row={row} index={index} />
+              </RecoilScope>
             ))}
           </tbody>
         </StyledTable>