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/PageHeaderActionMenuButtons.tsx

@@ -1,59 +1,13 @@
-import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import styled from '@emotion/styled';
-import { i18n } from '@lingui/core';
-import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
-import { Button, IconButton } from 'twenty-ui/input';
-
-const StyledWrapper = styled.div`
-  font-size: ${({ theme }) => theme.font.size.md};
-`;
+import { ActionComponent } from '@/action-menu/actions/display/components/ActionComponent';
+import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 
+import { useContext } from 'react';
 export const PageHeaderActionMenuButtons = () => {
-  const actionMenuEntries = useRecoilComponentValueV2(
-    actionMenuEntriesComponentSelector,
-  );
+  const { actions } = useContext(ActionMenuContext);
 
-  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
+  const pinnedActions = actions.filter((entry) => entry.isPinned);
 
-  return (
-    <>
-      {pinnedEntries.map((entry) =>
-        entry.shortLabel ? (
-          <Button
-            key={entry.key}
-            Icon={entry.Icon}
-            size="small"
-            variant="secondary"
-            accent="default"
-            title={entry.shortLabel ? i18n._(entry.shortLabel) : ''}
-            onClick={() => entry.onClick?.()}
-            ariaLabel={i18n._(entry.label)}
-          />
-        ) : (
-          <div id={`action-menu-entry-${entry.key}`} key={entry.key}>
-            <IconButton
-              Icon={entry.Icon}
-              size="small"
-              variant="secondary"
-              accent="default"
-              onClick={() => entry.onClick?.()}
-              ariaLabel={i18n._(entry.label)}
-            />
-            <StyledWrapper>
-              <AppTooltip
-                // eslint-disable-next-line
-                anchorSelect={`#action-menu-entry-${entry.key}`}
-                content={i18n._(entry.label)}
-                delay={TooltipDelay.longDelay}
-                place={TooltipPosition.Bottom}
-                offset={5}
-                noArrow
-              />
-            </StyledWrapper>
-          </div>
-        ),
-      )}
-    </>
-  );
+  return pinnedActions.map((action) => (
+    <ActionComponent key={action.key} action={action} />
+  ));
 };