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

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

@@ -1,6 +1,7 @@
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
+import { selectedRecordsComponentState } from '@/object-record/record-table/states/selectedRecordsComponentState';
 import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar';
 
 type RecordBoardActionBarProps = {
@@ -14,7 +15,13 @@ export const RecordBoardActionBar = ({
 
   const selectedRecordIds = useRecoilValue(getSelectedRecordIdsSelector());
 
-  if (!selectedRecordIds.length) {
+  const [selectedRecords, setSelectedRecords] = useRecoilState(
+    selectedRecordsComponentState(),
+  );
+
+  setSelectedRecords(selectedRecordIds.length);
+
+  if (!selectedRecords) {
     return null;
   }
 

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

@@ -1,6 +1,7 @@
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
+import { selectedRecordsComponentState } from '@/object-record/record-table/states/selectedRecordsComponentState';
 import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar';
 
 export const RecordTableActionBar = ({
@@ -12,7 +13,13 @@ export const RecordTableActionBar = ({
 
   const selectedRowIds = useRecoilValue(getSelectedRowIdsSelector());
 
-  if (!selectedRowIds.length) {
+  const [selectedRecords, setSelectedRecords] = useRecoilState(
+    selectedRecordsComponentState(),
+  );
+
+  setSelectedRecords(selectedRowIds.length);
+
+  if (!selectedRecords) {
     return null;
   }
 

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

@@ -0,0 +1,6 @@
+import { createState } from '@/ui/utilities/state/utils/createState';
+
+export const selectedRecordsComponentState = createState<number>({
+  key: 'selectedRecordsComponentState',
+  defaultValue: 0,
+});

packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx

@@ -17,14 +17,12 @@ const StyledContainerActionBar = styled.div`
   display: flex;
   height: 48px;
 
-  left: 50%;
+  left: 40%;
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};
   position: absolute;
   top: auto;
-
-  transform: translateX(-50%);
-  z-index: 1;
+  z-index: 20;
 `;
 
 export const ActionBar = () => {

packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx

@@ -1,11 +1,15 @@
+import { useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 import { MenuItem } from 'tsup.ui.index';
 
+import { selectedRecordsComponentState } from '@/object-record/record-table/states/selectedRecordsComponentState';
 import { IconChevronDown } from '@/ui/display/icon';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { ActionBarEntry } from '@/ui/navigation/action-bar/types/ActionBarEntry';
 import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 
@@ -44,6 +48,10 @@ export const ActionBarItem = ({ item }: ActionBarItemProps) => {
   const theme = useTheme();
   const dropdownId = `action-bar-item-${item.label}`;
   const { toggleDropdown, closeDropdown } = useDropdown(dropdownId);
+  const [isDeleteRecordsModalOpen, setIsDeleteRecordsModalOpen] =
+    useState(false);
+  const [selectedRecords] = useRecoilState(selectedRecordsComponentState());
+
   return (
     <>
       {Array.isArray(item.subActions) ? (
@@ -80,13 +88,33 @@ export const ActionBarItem = ({ item }: ActionBarItemProps) => {
           }
         />
       ) : (
-        <StyledButton
-          accent={item.accent ?? 'default'}
-          onClick={() => item.onClick?.()}
-        >
-          {item.Icon && <item.Icon size={theme.icon.size.md} />}
-          <StyledButtonLabel>{item.label}</StyledButtonLabel>
-        </StyledButton>
+        <>
+          <StyledButton
+            accent={item.accent ?? 'default'}
+            onClick={() =>
+              item.label === 'Delete'
+                ? setIsDeleteRecordsModalOpen(true)
+                : item.onClick?.()
+            }
+          >
+            {item.Icon && <item.Icon size={theme.icon.size.md} />}
+            <StyledButtonLabel>{item.label}</StyledButtonLabel>
+          </StyledButton>
+          {item.label === 'Delete' && (
+            <ConfirmationModal
+              isOpen={isDeleteRecordsModalOpen}
+              setIsOpen={setIsDeleteRecordsModalOpen}
+              title={`Delete ${selectedRecords} ${
+                selectedRecords === 1 ? `record` : 'records'
+              }`}
+              subtitle={`This action cannot be undone. This will permanently delete ${
+                selectedRecords === 1 ? 'this record' : 'these records'
+              }`}
+              onConfirmClick={() => item.onClick?.()}
+              deleteButtonText="Delete Records"
+            />
+          )}
+        </>
       )}
     </>
   );