fix: Added keyboard functionality for esc and Ctrl + a (twentyhq#8282)

## Description - This PR fixes twentyhq#8247 twentyhq#8206 - Adds keyboard functionality for esc (deselect all records) and Ctrl + a (select records) ## Changes https://github.com/user-attachments/assets/7b2718d6-dbe5-4cd8-8ead-b6baed1fc357 Merged during stream 🎉 --------- Co-authored-by: Devessier <[email protected]>
ehconitin · Nov 15, 2024 · 9e7b90a · 9e7b90a
1 parent 77165a2
commit 9e7b90a
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 1 deletion.
diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
@@ -4,6 +4,7 @@ import { useContext, useRef } from 'react';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
+import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
 import { RecordBoardHeader } from '@/object-record/record-board/components/RecordBoardHeader';
 import { RecordBoardStickyHeaderEffect } from '@/object-record/record-board/components/RecordBoardStickyHeaderEffect';
 import { RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-board/constants/RecordBoardClickOutsideListenerId';
@@ -61,6 +62,7 @@ export const RecordBoard = () => {
     columnIdsState,
     columnsFamilySelector,
     recordIdsByColumnIdFamilyState,
+    allRecordIdsSelector,
   } = useRecordBoardStates(recordBoardId);
 
   const columnIds = useRecoilValue(columnIdsState);
@@ -80,7 +82,28 @@ export const RecordBoard = () => {
     callback: resetRecordSelection,
   });
 
-  useScopedHotkeys([Key.Escape], resetRecordSelection, TableHotkeyScope.Table);
+  const selectAll = useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        const allRecordIds = snapshot
+          .getLoadable(allRecordIdsSelector())
+          .getValue();
+
+        for (const recordId of allRecordIds) {
+          setRecordAsSelected(recordId, true);
+        }
+      },
+    [allRecordIdsSelector, setRecordAsSelected],
+  );
+
+  useScopedHotkeys('ctrl+a,meta+a', selectAll, TableHotkeyScope.Table);
+  useScopedHotkeys('ctrl+a,meta+a', selectAll, ActionBarHotkeyScope.ActionBar);
+
+  useScopedHotkeys(
+    Key.Escape,
+    resetRecordSelection,
+    ActionBarHotkeyScope.ActionBar,
+  );
 
   const handleDragEnd: OnDragEndResponder = useRecoilCallback(
     ({ snapshot }) =>

diff --git a/...wenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts b/...wenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts
@@ -11,6 +11,7 @@ import { recordBoardObjectSingularNameComponentState } from '@/object-record/rec
 import { recordBoardRecordIdsByColumnIdComponentFamilyState } from '@/object-record/record-board/states/recordBoardRecordIdsByColumnIdComponentFamilyState';
 import { recordBoardShouldFetchMoreInColumnComponentFamilyState } from '@/object-record/record-board/states/recordBoardShouldFetchMoreInColumnComponentFamilyState';
 import { recordBoardSortsComponentState } from '@/object-record/record-board/states/recordBoardSortsComponentState';
+import { recordBoardAllRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardAllRecordIdsComponentSelector';
 import { recordBoardColumnsComponentFamilySelector } from '@/object-record/record-board/states/selectors/recordBoardColumnsComponentFamilySelector';
 import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector';
 import { recordBoardShouldFetchMoreComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardShouldFetchMoreComponentFamilySelector';
@@ -76,6 +77,10 @@ export const useRecordBoardStates = (recordBoardId?: string) => {
       isRecordBoardCardSelectedComponentFamilyState,
       scopeId,
     ),
+    allRecordIdsSelector: extractComponentReadOnlySelector(
+      recordBoardAllRecordIdsComponentSelector,
+      scopeId,
+    ),
     selectedRecordIdsSelector: extractComponentReadOnlySelector(
       recordBoardSelectedRecordIdsComponentSelector,
       scopeId,

diff --git a/...s/object-record/record-board/states/selectors/recordBoardAllRecordIdsComponentSelector.ts b/...s/object-record/record-board/states/selectors/recordBoardAllRecordIdsComponentSelector.ts
@@ -0,0 +1,26 @@
+import { recordBoardColumnIdsComponentState } from '@/object-record/record-board/states/recordBoardColumnIdsComponentState';
+import { recordBoardRecordIdsByColumnIdComponentFamilyState } from '@/object-record/record-board/states/recordBoardRecordIdsByColumnIdComponentFamilyState';
+import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
+
+export const recordBoardAllRecordIdsComponentSelector =
+  createComponentReadOnlySelector<string[]>({
+    key: 'recordBoardAllRecordIdsComponentSelector',
+    get:
+      ({ scopeId }) =>
+      ({ get }) => {
+        const columnIds = get(recordBoardColumnIdsComponentState({ scopeId }));
+
+        const recordIdsByColumn = columnIds.map((columnId) =>
+          get(
+            recordBoardRecordIdsByColumnIdComponentFamilyState({
+              scopeId,
+              familyKey: columnId,
+            }),
+          ),
+        );
+
+        const recordIds = recordIdsByColumn.flat();
+
+        return recordIds;
+      },
+  });
diff --git a/...wenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/...wenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -11,6 +11,12 @@ import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields
 import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
 
 import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
+import { useRecordTable } from '../hooks/useRecordTable';
+
+import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
+import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { Key } from 'ts-key-enum';
 
 const StyledTableWithHeader = styled.div`
   height: 100%;
@@ -40,6 +46,23 @@ export const RecordTableWithWrappers = ({
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
+  const { resetTableRowSelection, selectAllRows } = useRecordTable({
+    recordTableId,
+  });
+
+  useScopedHotkeys('ctrl+a,meta+a', selectAllRows, TableHotkeyScope.Table);
+  useScopedHotkeys(
+    'ctrl+a,meta+a',
+    selectAllRows,
+    ActionBarHotkeyScope.ActionBar,
+  );
+
+  useScopedHotkeys(
+    Key.Escape,
+    resetTableRowSelection,
+    ActionBarHotkeyScope.ActionBar,
+  );
+
   const { saveViewFields } = useSaveCurrentViewFields(viewBarId);
 
   const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular });

diff --git a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
@@ -22,7 +22,9 @@ export const DragSelect = ({
   onDragSelectionEnd,
 }: DragSelectProps) => {
   const theme = useTheme();
+
   const { isDragSelectionStartEnabled } = useDragSelect();
+
   const { DragSelection } = useSelectionContainer({
     shouldStartSelecting: (target) => {
       if (!isDragSelectionStartEnabled()) {