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/actions/display/components/ActionButton.tsx

@@ -0,0 +1,66 @@
+import { ActionDisplayProps } from '@/action-menu/actions/display/components/ActionDisplay';
+import { getActionLabel } from '@/action-menu/utils/getActionLabel';
+import styled from '@emotion/styled';
+import { isDefined } from 'twenty-shared/utils';
+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};
+`;
+
+export const ActionButton = ({
+  action,
+  onClick,
+  to,
+}: {
+  action: ActionDisplayProps;
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+  to?: string;
+}) => {
+  const label = getActionLabel(action.label);
+
+  const shortLabel = isDefined(action.shortLabel)
+    ? getActionLabel(action.shortLabel)
+    : undefined;
+
+  return (
+    <>
+      {action.shortLabel ? (
+        <Button
+          Icon={action.Icon}
+          size="small"
+          variant="secondary"
+          accent="default"
+          to={to}
+          onClick={onClick}
+          title={shortLabel}
+          ariaLabel={label}
+        />
+      ) : (
+        <div id={`action-menu-entry-${action.key}`} key={action.key}>
+          <IconButton
+            Icon={action.Icon}
+            size="small"
+            variant="secondary"
+            accent="default"
+            to={to}
+            onClick={onClick}
+            ariaLabel={label}
+          />
+          <StyledWrapper>
+            <AppTooltip
+              // eslint-disable-next-line
+              anchorSelect={`#action-menu-entry-${action.key}`}
+              content={label}
+              delay={TooltipDelay.longDelay}
+              place={TooltipPosition.Bottom}
+              offset={5}
+              noArrow
+            />
+          </StyledWrapper>
+        </div>
+      )}
+    </>
+  );
+};