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/pages/onboarding/ChooseYourPlan.tsx

@@ -14,7 +14,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { Loader } from 'twenty-ui/feedback';
 import { CardPicker, MainButton } from 'twenty-ui/input';
-import { ActionLink, CAL_LINK } from 'twenty-ui/navigation';
+import { CAL_LINK, ClickToActionLink } from 'twenty-ui/navigation';
 import {
   BillingPlanKey,
   BillingPriceLicensedDto,
@@ -248,17 +248,17 @@ export const ChooseYourPlan = () => {
             disabled={isSubmitting}
           />
           <StyledLinkGroup>
-            <ActionLink onClick={signOut}>
+            <ClickToActionLink onClick={signOut}>
               <Trans>Log out</Trans>
-            </ActionLink>
+            </ClickToActionLink>
             <span />
-            <ActionLink onClick={handleSwitchPlan(alternatePlan)}>
+            <ClickToActionLink onClick={handleSwitchPlan(alternatePlan)}>
               <Trans>Switch Plan</Trans>
-            </ActionLink>
+            </ClickToActionLink>
             <span />
-            <ActionLink href={CAL_LINK} target="_blank" rel="noreferrer">
+            <ClickToActionLink href={CAL_LINK} target="_blank" rel="noreferrer">
               <Trans>Book a Call</Trans>
-            </ActionLink>
+            </ClickToActionLink>
           </StyledLinkGroup>
         </>
       ) : (

packages/twenty-front/src/pages/onboarding/InviteTeam.tsx

@@ -21,13 +21,13 @@ import {
 } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
+import { isDefined } from 'twenty-shared/utils';
+import { IconCopy, SeparatorLineText } from 'twenty-ui/display';
+import { LightButton, MainButton } from 'twenty-ui/input';
+import { ClickToActionLink } from 'twenty-ui/navigation';
 import { z } from 'zod';
 import { OnboardingStatus } from '~/generated/graphql';
 import { useCreateWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useCreateWorkspaceInvitation';
-import { isDefined } from 'twenty-shared/utils';
-import { ActionLink } from 'twenty-ui/navigation';
-import { IconCopy, SeparatorLineText } from 'twenty-ui/display';
-import { LightButton, MainButton } from 'twenty-ui/input';
 
 const StyledAnimatedContainer = styled.div`
   display: flex;
@@ -227,9 +227,9 @@ export const InviteTeam = () => {
         />
       </StyledButtonContainer>
       <StyledActionSkipLinkContainer>
-        <ActionLink onClick={handleSkip}>
+        <ClickToActionLink onClick={handleSkip}>
           <Trans>Skip</Trans>
-        </ActionLink>
+        </ClickToActionLink>
       </StyledActionSkipLinkContainer>
     </>
   );

packages/twenty-front/src/pages/onboarding/SyncEmails.tsx

@@ -18,16 +18,16 @@ import { isMicrosoftCalendarEnabledState } from '@/client-config/states/isMicros
 import { isMicrosoftMessagingEnabledState } from '@/client-config/states/isMicrosoftMessagingEnabledState';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 import { AppPath } from '@/types/AppPath';
+import { ConnectedAccountProvider } from 'twenty-shared/types';
+import { IconGoogle, IconMicrosoft } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
+import { ClickToActionLink } from 'twenty-ui/navigation';
 import {
   CalendarChannelVisibility,
   MessageChannelVisibility,
   OnboardingStatus,
   useSkipSyncEmailOnboardingStepMutation,
 } from '~/generated/graphql';
-import { ConnectedAccountProvider } from 'twenty-shared/types';
-import { ActionLink } from 'twenty-ui/navigation';
-import { IconGoogle, IconMicrosoft } from 'twenty-ui/display';
-import { MainButton } from 'twenty-ui/input';
 
 const StyledSyncEmailsContainer = styled.div`
   display: flex;
@@ -150,9 +150,9 @@ export const SyncEmails = () => {
         )}
       </StyledProviderContainer>
       <StyledActionLinkContainer>
-        <ActionLink onClick={continueWithoutSync}>
+        <ClickToActionLink onClick={continueWithoutSync}>
           Continue without sync
-        </ActionLink>
+        </ClickToActionLink>
       </StyledActionLinkContainer>
     </>
   );