Refactor actions (#8761)

Closes #8737 
- Refactored actions by creating hooks to add the possibility to
register actions programatically.
- Small fixes from #8610 review
- Fixed shortcuts display inside the command menu
- Removed `actionMenuEntriesComponentState` and introduced
`actionMenuEntriesComponentSelector`

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx

@@ -1,12 +1,12 @@
 import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-import { RecoilRoot, useRecoilState, useRecoilValue } from 'recoil';
+import { RecoilRoot, useRecoilValue } from 'recoil';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
+import { commandMenuCommandsComponentSelector } from '@/command-menu/states/commandMenuCommandsSelector';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
-import { CommandType } from '@/command-menu/types/Command';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
@@ -24,15 +24,15 @@ const renderHooks = () => {
     () => {
       const commandMenu = useCommandMenu();
       const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
-      const [commandMenuCommands, setCommandMenuCommands] = useRecoilState(
-        commandMenuCommandsState,
+      const commandMenuCommands = useRecoilComponentValueV2(
+        commandMenuCommandsComponentSelector,
+        'command-menu',
       );
 
       return {
         commandMenu,
         isCommandMenuOpened,
         commandMenuCommands,
-        setCommandMenuCommands,
       };
     },
     {
@@ -77,24 +77,6 @@ describe('useCommandMenu', () => {
     expect(result.current.isCommandMenuOpened).toBe(false);
   });
 
-  it('should add commands to the menu', () => {
-    const { result } = renderHooks();
-
-    expect(
-      result.current.commandMenuCommands.find((cmd) => cmd.label === 'Test'),
-    ).toBeUndefined();
-
-    act(() => {
-      result.current.commandMenu.addToCommandMenu([
-        { label: 'Test', id: 'test', to: '/test', type: CommandType.Navigate },
-      ]);
-    });
-
-    expect(
-      result.current.commandMenuCommands.find((cmd) => cmd.label === 'Test'),
-    ).toBeDefined();
-  });
-
   it('onItemClick', () => {
     const { result } = renderHooks();
     const onClickMock = jest.fn();
@@ -106,43 +88,4 @@ describe('useCommandMenu', () => {
     expect(result.current.isCommandMenuOpened).toBe(true);
     expect(onClickMock).toHaveBeenCalledTimes(1);
   });
-
-  it('should setObjectsInCommandMenu command menu', () => {
-    const { result } = renderHooks();
-
-    act(() => {
-      result.current.commandMenu.setObjectsInCommandMenu([]);
-    });
-
-    expect(result.current.commandMenuCommands.length).toBe(1);
-
-    act(() => {
-      result.current.commandMenu.setObjectsInCommandMenu([
-        {
-          id: 'b88745ce-9021-4316-a018-8884e02d05ca',
-          nameSingular: 'task',
-          namePlural: 'tasks',
-          labelSingular: 'Task',
-          labelPlural: 'Tasks',
-          isLabelSyncedWithName: true,
-          shortcut: 'T',
-          description: 'A task',
-          icon: 'IconCheckbox',
-          isCustom: false,
-          isRemote: false,
-          isActive: true,
-          isSystem: false,
-          createdAt: '2024-09-12T20:23:46.041Z',
-          updatedAt: '2024-09-13T08:36:53.426Z',
-          labelIdentifierFieldMetadataId:
-            'ab7901eb-43e1-4dc7-8f3b-cdee2857eb9a',
-          imageIdentifierFieldMetadataId: null,
-          fields: [],
-          indexMetadatas: [],
-        },
-      ]);
-    });
-
-    expect(result.current.commandMenuCommands.length).toBe(2);
-  });
 });

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -9,24 +9,17 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from '~/utils/isDefined';
 
-import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { ALL_ICONS } from '@ui/display/icon/providers/internal/AllIcons';
-import { sortByProperty } from '~/utils/array/sortByProperty';
-import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
-import { Command, CommandType } from '../types/Command';
 
 export const useCommandMenu = () => {
   const navigate = useNavigate();
   const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
   const { resetSelectedItem } = useSelectableList('command-menu-list');
   const {
     setHotkeyScopeAndMemorizePreviousScope,
@@ -161,36 +154,6 @@ export const useCommandMenu = () => {
     [closeCommandMenu, openCommandMenu],
   );
 
-  const addToCommandMenu = useCallback(
-    (addCommand: Command[]) => {
-      setCommands((prev) => [...prev, ...addCommand]);
-    },
-    [setCommands],
-  );
-
-  const setObjectsInCommandMenu = (menuItems: ObjectMetadataItem[]) => {
-    const formattedItems = [
-      ...[
-        ...menuItems.map(
-          (item) =>
-            ({
-              id: item.id,
-              to: `/objects/${item.namePlural}`,
-              label: `Go to ${item.labelPlural}`,
-              type: CommandType.Navigate,
-              firstHotKey: item.shortcut ? 'G' : undefined,
-              secondHotKey: item.shortcut,
-              Icon: ALL_ICONS[
-                (item?.icon as keyof typeof ALL_ICONS) ?? 'IconArrowUpRight'
-              ],
-            }) as Command,
-        ),
-      ].sort(sortByProperty('label', 'asc')),
-      COMMAND_MENU_COMMANDS.settings,
-    ];
-    setCommands(formattedItems);
-  };
-
   const onItemClick = useCallback(
     (onClick?: () => void, to?: string) => {
       toggleCommandMenu();
@@ -211,8 +174,6 @@ export const useCommandMenu = () => {
     openCommandMenu,
     closeCommandMenu,
     toggleCommandMenu,
-    addToCommandMenu,
     onItemClick,
-    setObjectsInCommandMenu,
   };
 };