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/command-menu/components/CommandMenuContainer.tsx

@@ -1,17 +1,9 @@
-import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
-import { NoSelectionRecordActionKeys } from '@/action-menu/actions/record-actions/no-selection/types/NoSelectionRecordActionsKeys';
-import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter';
-import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter';
-import { RecordAgnosticActionsKeys } from '@/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKeys';
-import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
-import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
 import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useCommandMenuCloseAnimationCompleteCleanup } from '@/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup';
 import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
-import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
 import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
@@ -27,13 +19,11 @@ import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingC
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRef } from 'react';
-import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
-import { FeatureFlagKey } from '~/generated-metadata/graphql';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { useIsMobile } from 'twenty-ui/utilities';
 
 const StyledCommandMenu = styled(motion.div)`
@@ -57,7 +47,7 @@ export const CommandMenuContainer = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const { toggleCommandMenu, closeCommandMenu } = useCommandMenu();
+  const { closeCommandMenu } = useCommandMenu();
 
   const { commandMenuCloseAnimationCompleteCleanup } =
     useCommandMenuCloseAnimationCompleteCleanup();
@@ -97,12 +87,6 @@ export const CommandMenuContainer = ({
 
   const theme = useTheme();
 
-  const isWorkflowEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsWorkflowEnabled,
-  );
-
-  const setCommandMenuSearch = useSetRecoilState(commandMenuSearchState);
-
   const objectMetadataItemId = useRecoilComponentValueV2(
     contextStoreCurrentObjectMetadataItemIdComponentState,
     COMMAND_MENU_COMPONENT_INSTANCE_ID,
@@ -140,53 +124,25 @@ export const CommandMenuContainer = ({
             <ActionMenuComponentInstanceContext.Provider
               value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
             >
-              <ActionMenuContext.Provider
-                value={{
-                  isInRightDrawer: true,
-                  onActionExecutedCallback: ({ key }) => {
-                    if (
-                      key !== RecordAgnosticActionsKeys.SEARCH_RECORDS &&
-                      key !==
-                        RecordAgnosticActionsKeys.SEARCH_RECORDS_FALLBACK &&
-                      key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD
-                    ) {
-                      toggleCommandMenu();
-                    }
-
-                    if (
-                      key !== RecordAgnosticActionsKeys.SEARCH_RECORDS_FALLBACK
-                    ) {
-                      setCommandMenuSearch('');
-                    }
-                  },
-                }}
+              <AnimatePresence
+                mode="wait"
+                onExitComplete={commandMenuCloseAnimationCompleteCleanup}
               >
-                <RecordActionMenuEntriesSetter />
-                <RecordAgnosticActionMenuEntriesSetter />
-                {isWorkflowEnabled && (
-                  <RunWorkflowRecordAgnosticActionMenuEntriesSetter />
+                {isCommandMenuOpened && (
+                  <StyledCommandMenu
+                    data-testid="command-menu"
+                    ref={commandMenuRef}
+                    className="command-menu"
+                    animate={targetVariantForAnimation}
+                    initial="closed"
+                    exit="closed"
+                    variants={COMMAND_MENU_ANIMATION_VARIANTS}
+                    transition={{ duration: theme.animation.duration.normal }}
+                  >
+                    {children}
+                  </StyledCommandMenu>
                 )}
-                <ActionMenuConfirmationModals />
-                <AnimatePresence
-                  mode="wait"
-                  onExitComplete={commandMenuCloseAnimationCompleteCleanup}
-                >
-                  {isCommandMenuOpened && (
-                    <StyledCommandMenu
-                      data-testid="command-menu"
-                      ref={commandMenuRef}
-                      className="command-menu"
-                      animate={targetVariantForAnimation}
-                      initial="closed"
-                      exit="closed"
-                      variants={COMMAND_MENU_ANIMATION_VARIANTS}
-                      transition={{ duration: theme.animation.duration.normal }}
-                    >
-                      {children}
-                    </StyledCommandMenu>
-                  )}
-                </AnimatePresence>
-              </ActionMenuContext.Provider>
+              </AnimatePresence>
             </ActionMenuComponentInstanceContext.Provider>
           </ContextStoreComponentInstanceContext.Provider>
         </RecordSortsComponentInstanceContext.Provider>