refactor(command-menu-item): rename Actions to CommandMenuItem (#18489)

actions are being renamed to command menu item, they will be migrated to
server and will be served as headless front components

---------

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>

packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { CommandMenuComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuComponentInstanceContext';
 import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
@@ -56,13 +56,13 @@ export const SidePanelContainer = ({ children }: SidePanelContainerProps) => {
       <ContextStoreComponentInstanceContext.Provider
         value={{ instanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID }}
       >
-        <ActionMenuComponentInstanceContext.Provider
+        <CommandMenuComponentInstanceContext.Provider
           value={{ instanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID }}
         >
           <StyledSidePanelContainer isMobile={isMobile}>
             {children}
           </StyledSidePanelContainer>
-        </ActionMenuComponentInstanceContext.Provider>
+        </CommandMenuComponentInstanceContext.Provider>
       </ContextStoreComponentInstanceContext.Provider>
     </RecordComponentInstanceContextsWrapper>
   );

packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx

@@ -1,4 +1,4 @@
-import { ActionComponent } from '@/action-menu/actions/display/components/ActionComponent';
+import { CommandMenuItemComponent } from '@/command-menu-item/display/components/CommandMenuItemComponent';
 import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
 import { SidePanelDefaultSelectionEffect } from '@/side-panel/components/SidePanelDefaultSelectionEffect';
 import { SIDE_PANEL_SELECTABLE_LIST_ID } from '@/side-panel/constants/SidePanelSelectableListId';
@@ -6,7 +6,7 @@ import { SIDE_PANEL_TOP_BAR_HEIGHT } from '@/side-panel/constants/SidePanelTopBa
 import { SIDE_PANEL_LIST_PADDING } from '@/side-panel/constants/SidePanelListPadding';
 import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
 import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState';
-import { type SidePanelActionGroupConfig } from '@/side-panel/types/SidePanelActionGroupConfig';
+import { type SidePanelCommandMenuItemGroupConfig } from '@/side-panel/types/SidePanelCommandMenuItemGroupConfig';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
@@ -15,7 +15,7 @@ import { t } from '@lingui/core/macro';
 import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export type SidePanelListProps = {
-  commandGroups: SidePanelActionGroupConfig[];
+  commandGroups: SidePanelCommandMenuItemGroupConfig[];
   selectableItemIds: string[];
   children?: React.ReactNode;
   loading?: boolean;
@@ -83,7 +83,7 @@ export const SidePanelList = ({
               items?.length ? (
                 <SidePanelGroup heading={heading} key={heading}>
                   {items.map((item) => (
-                    <ActionComponent action={item} key={item.key} />
+                    <CommandMenuItemComponent action={item} key={item.key} />
                   ))}
                 </SidePanelGroup>
               ) : null,

packages/twenty-front/src/modules/side-panel/components/SidePanelMultipleRecordsInfo.tsx

@@ -1,6 +1,6 @@
-import { DEFAULT_RECORD_ACTIONS_CONFIG } from '@/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig';
-import { MultipleRecordsActionKeys } from '@/action-menu/actions/record-actions/multiple-records/types/MultipleRecordsActionKeys';
-import { getActionLabel } from '@/action-menu/utils/getActionLabel';
+import { DEFAULT_RECORD_COMMAND_MENU_ITEMS_CONFIG } from '@/command-menu-item/record/constants/DefaultRecordCommandMenuItemsConfig';
+import { MultipleRecordsCommandKeys } from '@/command-menu-item/record/multiple-records/types/MultipleRecordsCommandKeys';
+import { getCommandMenuItemLabel } from '@/command-menu-item/utils/getCommandMenuItemLabel';
 import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
 import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
 import { t } from '@lingui/core/macro';
@@ -21,13 +21,13 @@ export const SidePanelMultipleRecordsInfo = ({
   });
 
   const { Icon, label } =
-    DEFAULT_RECORD_ACTIONS_CONFIG[MultipleRecordsActionKeys.UPDATE];
+    DEFAULT_RECORD_COMMAND_MENU_ITEMS_CONFIG[MultipleRecordsCommandKeys.UPDATE];
 
   return (
     <SidePanelPageInfoLayout
       icon={<Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
       iconColor={theme.font.color.tertiary}
-      title={getActionLabel(label)}
+      title={getCommandMenuItemLabel(label)}
       label={t`${totalCount} selected`}
     />
   );

packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx

@@ -1,4 +1,4 @@
-import { ActionMenuContextProvider } from '@/action-menu/contexts/ActionMenuContextProvider';
+import { CommandMenuContextProvider } from '@/command-menu-item/contexts/CommandMenuContextProvider';
 import { SidePanelContainer } from '@/side-panel/components/SidePanelContainer';
 import { SidePanelTopBar } from '@/side-panel/components/SidePanelTopBar';
 import { SIDE_PANEL_PAGES_CONFIG } from '@/side-panel/constants/SidePanelPagesConfig';
@@ -51,13 +51,13 @@ export const SidePanelRouter = () => {
           <SidePanelTopBar />
         </motion.div>
         <StyledSidePanelContent>
-          <ActionMenuContextProvider
+          <CommandMenuContextProvider
             isInSidePanel={true}
             displayType="listItem"
-            actionMenuType="command-menu"
+            containerType="command-menu-list"
           >
             {sidePanelPageComponent}
-          </ActionMenuContextProvider>
+          </CommandMenuContextProvider>
         </StyledSidePanelContent>
       </SidePanelPageComponentInstanceContext.Provider>
     </SidePanelContainer>

packages/twenty-front/src/modules/side-panel/components/__stories__/SidePanelContextRecordChip.stories.tsx

@@ -12,7 +12,7 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ComponentDecorator } from 'twenty-ui/testing';
-import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
+import { getJestMetadataAndApolloMocksAndCommandMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndCommandMenuWrapper';
 import { mockedCompanyRecords } from '~/testing/mock-data/generated/data/companies/mock-companies-data';
 import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
 
@@ -145,7 +145,7 @@ const createContextStoreWrapper = ({
   companies: typeof mockedCompanyRecords;
   componentInstanceId: string;
 }) => {
-  return getJestMetadataAndApolloMocksAndActionMenuWrapper({
+  return getJestMetadataAndApolloMocksAndCommandMenuWrapper({
     apolloMocks: [
       {
         request: {