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-ui/src/navigation/index.ts

@@ -7,8 +7,8 @@
  *                              |___/
  */
 
-export { ActionLink } from './link/components/ActionLink';
 export { AdvancedSettingsToggle } from './link/components/AdvancedSettingsToggle';
+export { ClickToActionLink } from './link/components/ClickToActionLink';
 export { ContactLink } from './link/components/ContactLink';
 export { GithubVersionLink } from './link/components/GithubVersionLink';
 export { RawLink } from './link/components/RawLink';

packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx

@@ -17,11 +17,11 @@ const StyledButtonLink = styled.a`
   }
 `;
 
-type ActionLinkProps = React.ComponentProps<'a'> & {
+type ClickToActionLinkProps = React.ComponentProps<'a'> & {
   className?: string;
 };
 
-export const ActionLink = (props: ActionLinkProps) => {
+export const ClickToActionLink = (props: ClickToActionLinkProps) => {
   return (
     <StyledButtonLink
       className={props.className}

packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import { IconBrandGithub } from '@ui/display';
-import { ActionLink } from '@ui/navigation/link/components/ActionLink';
+import { ClickToActionLink } from '@ui/navigation/link/components/ClickToActionLink';
 import { GITHUB_LINK } from '../constants/GithubLink';
 
 interface GithubVersionLinkProps {
@@ -11,9 +11,9 @@ export const GithubVersionLink = ({ version }: GithubVersionLinkProps) => {
   const theme = useTheme();
 
   return (
-    <ActionLink href={GITHUB_LINK} target="_blank" rel="noreferrer">
+    <ClickToActionLink href={GITHUB_LINK} target="_blank" rel="noreferrer">
       <IconBrandGithub size={theme.icon.size.md} />
       {version}
-    </ActionLink>
+    </ClickToActionLink>
   );
 };

packages/twenty-ui/src/navigation/link/components/__stories__/ClickToActionLink.stories.tsx

@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ActionLink } from '@ui/navigation/link/components/ActionLink';
+import { ClickToActionLink } from '@ui/navigation/link/components/ClickToActionLink';
 import { ComponentDecorator } from '@ui/testing';
 
-const meta: Meta<typeof ActionLink> = {
-  title: 'UI/navigation/link/ActionLink',
-  component: ActionLink,
+const meta: Meta<typeof ClickToActionLink> = {
+  title: 'UI/navigation/link/ClickToActionLink',
+  component: ClickToActionLink,
 };
 
 export default meta;
-type Story = StoryObj<typeof ActionLink>;
+type Story = StoryObj<typeof ClickToActionLink>;
 
 export const Default: Story = {
   args: {

packages/twenty-ui/src/navigation/link/components/index.ts

@@ -1,5 +1,5 @@
-export * from './ActionLink';
 export * from './AdvancedSettingsToggle';
+export * from './ClickToActionLink';
 export * from './ContactLink';
 export * from './GithubVersionLink';
 export * from './RawLink';