fix: impossible to unselect all check box (#4471)

* fix: impossible to unselect all check box

* fix: newly loaded records adopts select/unselect status

* Fix

* Fixes

* Fixed naming

* Used better naming

* Fixed naming

---------

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

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -38,10 +38,6 @@ export const ObjectSortDropdownButton = ({
     setSelectedSortDirection('asc');
   }, []);
 
-  const { isSortSelectedState } = useSortDropdown({
-    sortDropdownId: sortDropdownId,
-  });
-
   const { toggleDropdown } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
 
   const handleButtonClick = () => {
@@ -49,7 +45,11 @@ export const ObjectSortDropdownButton = ({
     resetState();
   };
 
-  const { availableSortDefinitionsState, onSortSelectState } = useSortDropdown({
+  const {
+    availableSortDefinitionsState,
+    onSortSelectState,
+    isSortSelectedState,
+  } = useSortDropdown({
     sortDropdownId: sortDropdownId,
   });
 

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx

@@ -68,7 +68,7 @@ export const RecordTableWithWrappers = ({
     isRecordTableInitialLoadingState,
   );
 
-  const { resetTableRowSelection, setRowSelectedState } = useRecordTable({
+  const { resetTableRowSelection, setRowSelected } = useRecordTable({
     recordTableId,
   });
 
@@ -109,7 +109,7 @@ export const RecordTableWithWrappers = ({
                 <DragSelect
                   dragSelectable={tableBodyRef}
                   onDragSelectionStart={resetTableRowSelection}
-                  onDragSelectionChange={setRowSelectedState}
+                  onDragSelectionChange={setRowSelected}
                 />
               </div>
               <RecordTableInternalEffect

packages/twenty-front/src/modules/object-record/record-table/components/SelectAllCheckbox.tsx

@@ -20,13 +20,20 @@ export const SelectAllCheckbox = () => {
   const { allRowsSelectedStatusSelector } = useRecordTableStates();
 
   const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector());
-  const { selectAllRows } = useRecordTable();
+  const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } =
+    useRecordTable();
 
   const checked = allRowsSelectedStatus === 'all';
   const indeterminate = allRowsSelectedStatus === 'some';
 
-  const onChange = () => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    selectAllRows();
+    if (e.target.checked) {
+      setHasUserSelectedAllRows(true);
+      selectAllRows();
+    } else {
+      setHasUserSelectedAllRows(false);
+      resetTableRowSelection();
+    }
   };
 
   return (

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts

@@ -1,3 +1,4 @@
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
 import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
 import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
 import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
@@ -48,7 +49,6 @@ export const useRecordTableStates = (recordTableId?: string) => {
       tableColumnsComponentState,
       scopeId,
     ),
-
     onColumnsChangeState: extractComponentState(
       onColumnsChangeComponentState,
       scopeId,
@@ -98,6 +98,10 @@ export const useRecordTableStates = (recordTableId?: string) => {
       isRowSelectedComponentFamilyState,
       scopeId,
     ),
+    hasUserSelectedAllRowState: extractComponentState(
+      hasUserSelectedAllRowsComponentState,
+      scopeId,
+    ),
     allRowsSelectedStatusSelector: extractComponentReadOnlySelector(
       allRowsSelectedStatusComponentSelector,
       scopeId,

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetAllRowSelectedState.ts

@@ -0,0 +1,16 @@
+import { useRecoilCallback } from 'recoil';
+
+import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+
+export const useSetHasUserSelectedAllRows = (recordTableId?: string) => {
+  const { hasUserSelectedAllRowState: hasUserSelectedAllRowFamilyState } =
+    useRecordTableStates(recordTableId);
+
+  return useRecoilCallback(
+    ({ set }) =>
+      (selected: boolean) => {
+        set(hasUserSelectedAllRowFamilyState, selected);
+      },
+    [hasUserSelectedAllRowFamilyState],
+  );
+};

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts

@@ -14,8 +14,12 @@ export const useSetRecordTableData = ({
   recordTableId,
   onEntityCountChange,
 }: useSetRecordTableDataProps) => {
-  const { tableRowIdsState, numberOfTableRowsState } =
+  const {
-    useRecordTableStates(recordTableId);
+    tableRowIdsState,
+    numberOfTableRowsState,
+    isRowSelectedFamilyState,
+    hasUserSelectedAllRowState,
+  } = useRecordTableStates(recordTableId);
 
   return useRecoilCallback(
     ({ set, snapshot }) =>
@@ -32,15 +36,32 @@ export const useSetRecordTableData = ({
         }
         const currentRowIds = getSnapshotValue(snapshot, tableRowIdsState);
 
+        const hasUserSelectedAllRows = getSnapshotValue(
+          snapshot,
+          hasUserSelectedAllRowState,
+        );
+
         const entityIds = newEntityArray.map((entity) => entity.id);
 
         if (!isDeeplyEqual(currentRowIds, entityIds)) {
           set(tableRowIdsState, entityIds);
         }
 
+        if (hasUserSelectedAllRows) {
+          for (const rowId of entityIds) {
+            set(isRowSelectedFamilyState(rowId), true);
+          }
+        }
+
         set(numberOfTableRowsState, totalCount);
         onEntityCountChange(totalCount);
       },
-    [numberOfTableRowsState, tableRowIdsState, onEntityCountChange],
+    [
+      numberOfTableRowsState,
+      tableRowIdsState,
+      onEntityCountChange,
+      isRowSelectedFamilyState,
+      hasUserSelectedAllRowState,
+    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts

@@ -4,6 +4,7 @@ import { Key } from 'ts-key-enum';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { useGetIsSomeCellInEditModeState } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { useSetHasUserSelectedAllRows } from '@/object-record/record-table/hooks/internal/useSetAllRowSelectedState';
 import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
 import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -110,7 +111,9 @@ export const useRecordTable = (props?: useRecordTableProps) => {
 
   const leaveTableFocus = useLeaveTableFocus(recordTableId);
 
-  const setRowSelectedState = useSetRowSelectedState(recordTableId);
+  const setRowSelected = useSetRowSelectedState(recordTableId);
+
+  const setHasUserSelectedAllRows = useSetHasUserSelectedAllRows(recordTableId);
 
   const resetTableRowSelection = useResetTableRowSelection(recordTableId);
 
@@ -196,7 +199,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     setRecordTableData,
     setTableColumns,
     leaveTableFocus,
-    setRowSelectedState,
+    setRowSelected,
     resetTableRowSelection,
     upsertRecordTableItem,
     moveDown,
@@ -211,5 +214,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     setSoftFocusPosition,
     isSomeCellInEditModeState,
     selectedRowIdsSelector,
+    setHasUserSelectedAllRows,
   };
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState.ts

@@ -0,0 +1,7 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const hasUserSelectedAllRowsComponentState =
+  createComponentState<boolean>({
+    key: 'hasUserSelectedAllRowsFamilyState',
+    defaultValue: false,
+  });