4410-feat(front): Implement Confirmation Prompt for Multiple Record Deletion (#4514)

* feat: implement confirmation prompt

* feat: remove prop drilling and introduce recoil state

* chore: fix eslint issues

* feat: set record text according to length of records

* chore: fix eslint issues

* refactor: made changes according to code review

* fix: show delete according to singular and plural records.

* fix: eslint issues

* feat: show number of selected records

* style: fix positioning of actionbar

* feat: display ConfirmationModal seperately

* chore: remove recoil state and use usestate instead

* chore: minor change

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
@@ -17,6 +17,7 @@ import {
   IconPuzzle,
   IconTrash,
 } from '@/ui/display/icon';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
 import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
 import { ContextMenuEntry } from '@/ui/navigation/context-menu/types/ContextMenuEntry';
@@ -36,6 +37,8 @@ export const useRecordActionBar = ({
 }: useRecordActionBarProps) => {
   const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
   const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
+  const [isDeleteRecordsModalOpen, setIsDeleteRecordsModalOpen] =
+    useState(false);
 
   const { createFavorite, favorites, deleteFavorite } = useFavorites();
 
@@ -106,10 +109,26 @@ export const useRecordActionBar = ({
   const baseActions: ContextMenuEntry[] = useMemo(
     () => [
       {
-        label: `Delete (${selectedRecordIds.length})`,
+        label: 'Delete',
         Icon: IconTrash,
         accent: 'danger',
-        onClick: () => handleDeleteClick(),
+        onClick: () => setIsDeleteRecordsModalOpen(true),
+        ConfirmationModal: (
+          <ConfirmationModal
+            isOpen={isDeleteRecordsModalOpen}
+            setIsOpen={setIsDeleteRecordsModalOpen}
+            title={`Delete ${selectedRecordIds.length} ${
+              selectedRecordIds.length === 1 ? `record` : 'records'
+            }`}
+            subtitle={`This action cannot be undone. This will permanently delete ${
+              selectedRecordIds.length === 1 ? 'this record' : 'these records'
+            }`}
+            onConfirmClick={() => handleDeleteClick()}
+            deleteButtonText={`Delete ${
+              selectedRecordIds.length > 1 ? 'Records' : 'Record'
+            }`}
+          />
+        ),
       },
       {
         label: `${progress === undefined ? `Export` : `Export (${progress}%)`}`,
@@ -118,7 +137,14 @@ export const useRecordActionBar = ({
         onClick: () => download(),
       },
     ],
-    [handleDeleteClick, download, progress, selectedRecordIds],
+    [
+      handleDeleteClick,
+      download,
+      progress,
+      selectedRecordIds,
+      isDeleteRecordsModalOpen,
+      setIsDeleteRecordsModalOpen,
+    ],
   );
 
   const dataExecuteQuickActionOnmentEnabled = useIsFeatureEnabled(

packages/twenty-front/src/modules/object-record/record-board/action-bar/components/RecordBoardActionBar.tsx

@@ -18,5 +18,5 @@ export const RecordBoardActionBar = ({
     return null;
   }
 
-  return <ActionBar />;
+  return <ActionBar selectedIds={selectedRecordIds} />;
 };

packages/twenty-front/src/modules/object-record/record-table/action-bar/components/RecordTableActionBar.tsx

@@ -16,5 +16,5 @@ export const RecordTableActionBar = ({
     return null;
   }
 
-  return <ActionBar />;
+  return <ActionBar selectedIds={selectedRowIds} />;
 };