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/components/Action.tsx

@@ -0,0 +1,27 @@
+import { ActionDisplay } from '@/action-menu/actions/display/components/ActionDisplay';
+import { ActionConfigContext } from '@/action-menu/contexts/ActionConfigContext';
+import { useCloseActionMenu } from '@/action-menu/hooks/useCloseActionMenu';
+import { useContext } from 'react';
+
+export const Action = ({
+  onClick,
+  preventCommandMenuClosing,
+}: {
+  onClick: () => void;
+  preventCommandMenuClosing?: boolean;
+}) => {
+  const actionConfig = useContext(ActionConfigContext);
+
+  const { closeActionMenu } = useCloseActionMenu(preventCommandMenuClosing);
+
+  if (!actionConfig) {
+    return null;
+  }
+
+  const handleClick = () => {
+    closeActionMenu();
+    onClick();
+  };
+
+  return <ActionDisplay action={actionConfig} onClick={handleClick} />;
+};

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

@@ -0,0 +1,35 @@
+import { ActionDisplay } from '@/action-menu/actions/display/components/ActionDisplay';
+import { ActionConfigContext } from '@/action-menu/contexts/ActionConfigContext';
+import { useCloseActionMenu } from '@/action-menu/hooks/useCloseActionMenu';
+import { AppPath } from '@/types/AppPath';
+import { useContext } from 'react';
+import { PathParam } from 'react-router-dom';
+import { getAppPath } from '~/utils/navigation/getAppPath';
+
+export const ActionLink = <T extends AppPath>({
+  to,
+  params,
+  queryParams,
+}: {
+  to: T;
+  params?: { [key in PathParam<T>]: string | null };
+  queryParams?: Record<string, any>;
+}) => {
+  const actionConfig = useContext(ActionConfigContext);
+
+  const { closeActionMenu } = useCloseActionMenu();
+
+  if (!actionConfig) {
+    return null;
+  }
+
+  const path = getAppPath(to, params, queryParams);
+
+  return (
+    <ActionDisplay
+      action={{ ...actionConfig }}
+      onClick={closeActionMenu}
+      to={path}
+    />
+  );
+};

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

@@ -0,0 +1,66 @@
+import { ReactNode, useCallback, useContext, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { ActionDisplay } from '@/action-menu/actions/display/components/ActionDisplay';
+import { ActionConfigContext } from '@/action-menu/contexts/ActionConfigContext';
+import { useCloseActionMenu } from '@/action-menu/hooks/useCloseActionMenu';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
+import { ButtonAccent } from 'twenty-ui/input';
+
+export type ActionModalProps = {
+  title: string;
+  subtitle: ReactNode;
+  onConfirmClick: () => void;
+  confirmButtonText?: string;
+  confirmButtonAccent?: ButtonAccent;
+  isLoading?: boolean;
+};
+
+export const ActionModal = ({
+  title,
+  subtitle,
+  onConfirmClick,
+  confirmButtonText = 'Confirm',
+  confirmButtonAccent = 'danger',
+  isLoading = false,
+}: ActionModalProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const { closeActionMenu } = useCloseActionMenu();
+
+  const handleConfirmClick = () => {
+    closeActionMenu();
+    onConfirmClick();
+    setIsOpen(false);
+  };
+
+  const actionConfig = useContext(ActionConfigContext);
+
+  if (!actionConfig) {
+    return null;
+  }
+
+  return (
+    <>
+      <ActionDisplay action={actionConfig} onClick={handleOpen} />
+      {isOpen &&
+        createPortal(
+          <ConfirmationModal
+            isOpen={isOpen}
+            setIsOpen={setIsOpen}
+            title={title}
+            subtitle={subtitle}
+            onConfirmClick={handleConfirmClick}
+            confirmButtonText={confirmButtonText}
+            confirmButtonAccent={confirmButtonAccent}
+            loading={isLoading}
+          />,
+          document.body,
+        )}
+    </>
+  );
+};