Add board Action bar and context menu (#3680)

* Add board Action bar and context menu

* Fix according to review

packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx

@@ -14,10 +14,6 @@ import { PositionType } from '../types/PositionType';
 
 import { ContextMenuItem } from './ContextMenuItem';
 
-type ContextMenuProps = {
-  selectedIds: string[];
-};
-
 type StyledContainerProps = {
   position: PositionType;
 };
@@ -41,7 +37,7 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
   z-index: 2;
 `;
 
-export const ContextMenu = ({ selectedIds }: ContextMenuProps) => {
+export const ContextMenu = () => {
   const contextMenuPosition = useRecoilValue(contextMenuPositionState);
   const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
   const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
@@ -57,7 +53,7 @@ export const ContextMenu = ({ selectedIds }: ContextMenuProps) => {
     },
   });
 
-  if (selectedIds.length === 0 || !contextMenuIsOpen) {
+  if (!contextMenuIsOpen) {
     return null;
   }
 
@@ -75,15 +71,9 @@ export const ContextMenu = ({ selectedIds }: ContextMenuProps) => {
     >
       <DropdownMenu data-select-disable width={width}>
         <DropdownMenuItemsContainer>
-          {contextMenuEntries.map((item) => (
-            <ContextMenuItem
-              Icon={item.Icon}
-              label={item.label}
-              accent={item.accent}
-              onClick={item.onClick}
-              key={item.label}
-            />
-          ))}
+          {contextMenuEntries.map((item, index) => {
+            return <ContextMenuItem key={index} item={item} />;
+          })}
         </DropdownMenuItemsContainer>
       </DropdownMenu>
     </StyledContainerContextMenu>

packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenuItem.tsx

@@ -1,20 +1,15 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { ContextMenuEntry } from '@/ui/navigation/context-menu/types/ContextMenuEntry';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
-import { ContextMenuItemAccent } from '../types/ContextMenuItemAccent';
-
 type ContextMenuItemProps = {
-  Icon: IconComponent;
-  label: string;
-  accent?: ContextMenuItemAccent;
-  onClick: () => void;
+  item: ContextMenuEntry;
 };
 
-export const ContextMenuItem = ({
-  label,
-  Icon,
-  accent = 'default',
-  onClick,
-}: ContextMenuItemProps) => (
-  <MenuItem LeftIcon={Icon} onClick={onClick} accent={accent} text={label} />
+export const ContextMenuItem = ({ item }: ContextMenuItemProps) => (
+  <MenuItem
+    LeftIcon={item.Icon}
+    onClick={item.onClick}
+    accent={item.accent}
+    text={item.label}
+  />
 );

packages/twenty-front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx

@@ -9,7 +9,7 @@ import { contextMenuIsOpenState } from '../../states/contextMenuIsOpenState';
 import { contextMenuPositionState } from '../../states/contextMenuPositionState';
 import { ContextMenu } from '../ContextMenu';
 
-const FilledContextMenu = (props: { selectedIds: string[] }) => {
+const FilledContextMenu = () => {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   setContextMenuPosition({
     x: 100,
@@ -17,7 +17,7 @@ const FilledContextMenu = (props: { selectedIds: string[] }) => {
   });
   const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   setContextMenuOpenState(true);
-  return <ContextMenu selectedIds={props.selectedIds} />;
+  return <ContextMenu />;
 };
 
 const meta: Meta<typeof ContextMenu> = {

packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts

@@ -1,10 +1,9 @@
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-
-import { ContextMenuItemAccent } from './ContextMenuItemAccent';
+import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 
 export type ContextMenuEntry = {
   label: string;
   Icon: IconComponent;
-  accent?: ContextMenuItemAccent;
+  accent?: MenuItemAccent;
   onClick: () => void;
 };