Action menu refactoring (#11454)

# Description

Closes [#696](https://github.com/twentyhq/core-team-issues/issues/696)

- `useAction` hooks have been removed for all actions
- Every action can now declare a react component
- Some standard action components have been introduced: `Action`,
`ActionLink` and `ActionModal`
- The `ActionDisplay` component uses the new `displayType` prop of the
`ActionMenuContext` to render the right component for the action
according to its container: `ActionButton`, `ActionDropdownItem` or
`ActionListItem`
- The `ActionDisplayer` wraps the action component inside a context
which gives it all the information about the action
-`actionMenuEntriesComponenState` has been removed and now all actions
are computed directly using `useRegisteredAction`
- This computation is done inside `ActionMenuContextProvider` and the
actions are passed inside a context
- `actionMenuType` gives information about the container of the action,
so the action can know wether or not to close this container upon
execution

packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx

@@ -1,6 +1,7 @@
-import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { ActionComponent } from '@/action-menu/actions/display/components/ActionComponent';
+import { ActionScope } from '@/action-menu/actions/types/ActionScope';
+import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { ActionMenuEntryScope } from '@/action-menu/types/ActionMenuEntry';
 import { CommandMenuActionMenuDropdownHotkeyScope } from '@/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope';
 import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getRightDrawerActionMenuDropdownIdFromActionMenuId';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -9,17 +10,13 @@ import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTheme } from '@emotion/react';
-import { i18n } from '@lingui/core';
+import { useContext } from 'react';
 import { Button } from 'twenty-ui/input';
 import { getOsControlSymbol } from 'twenty-ui/utilities';
-import { MenuItem } from 'twenty-ui/navigation';
 
 export const CommandMenuActionMenuDropdown = () => {
-  const actionMenuEntries = useRecoilComponentValueV2(
-    actionMenuEntriesComponentSelector,
-  );
+  const { actions } = useContext(ActionMenuContext);
 
   const actionMenuId = useAvailableComponentInstanceIdOrThrow(
     ActionMenuComponentInstanceContext,
@@ -61,25 +58,10 @@ export const CommandMenuActionMenuDropdown = () => {
       dropdownOffset={{ y: parseInt(theme.spacing(2), 10) }}
       dropdownComponents={
         <DropdownMenuItemsContainer>
-          {actionMenuEntries
-            .filter(
-              (actionMenuEntry) =>
-                actionMenuEntry.scope === ActionMenuEntryScope.RecordSelection,
-            )
-            .map((actionMenuEntry, index) => (
-              <MenuItem
-                key={index}
-                LeftIcon={actionMenuEntry.Icon}
-                onClick={() => {
-                  toggleDropdown(
-                    getRightDrawerActionMenuDropdownIdFromActionMenuId(
-                      actionMenuId,
-                    ),
-                  );
-                  actionMenuEntry.onClick?.();
-                }}
-                text={i18n._(actionMenuEntry.label)}
-              />
+          {actions
+            .filter((action) => action.scope === ActionScope.RecordSelection)
+            .map((action) => (
+              <ActionComponent action={action} key={action.key} />
             ))}
         </DropdownMenuItemsContainer>
       }