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/ui/navigation/action-bar/components/ActionBar.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
@@ -7,6 +7,10 @@ import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/cont
 
 import { ActionBarItem } from './ActionBarItem';
 
+type ActionBarProps = {
+  selectedIds?: string[];
+};
+
 const StyledContainerActionBar = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.secondary};
@@ -27,7 +31,15 @@ const StyledContainerActionBar = styled.div`
   z-index: 1;
 `;
 
-export const ActionBar = () => {
+const StyledLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const ActionBar = ({ selectedIds }: ActionBarProps) => {
   const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
   const actionBarEntries = useRecoilValue(actionBarEntriesState);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -37,14 +49,22 @@ export const ActionBar = () => {
   }
 
   return (
-    <StyledContainerActionBar
-      data-select-disable
-      className="action-bar"
-      ref={wrapperRef}
-    >
-      {actionBarEntries.map((item, index) => (
-        <ActionBarItem key={index} item={item} />
-      ))}
-    </StyledContainerActionBar>
+    <>
+      <StyledContainerActionBar
+        data-select-disable
+        className="action-bar"
+        ref={wrapperRef}
+      >
+        {selectedIds && (
+          <StyledLabel>{selectedIds.length} selected:</StyledLabel>
+        )}
+        {actionBarEntries.map((item, index) => (
+          <ActionBarItem key={index} item={item} />
+        ))}
+      </StyledContainerActionBar>
+      <div data-select-disable className="action-bar">
+        {actionBarEntries[0]?.ConfirmationModal}
+      </div>
+    </>
   );
 };

packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts

@@ -7,4 +7,5 @@ export type ActionBarEntry = {
   accent?: MenuItemAccent;
   onClick?: () => void;
   subActions?: ActionBarEntry[];
+  ConfirmationModal?: JSX.Element;
 };