fix: fixed shortcuts population (#7016)

This PR fixes #6776 

Screenshots:
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/ca061c30-ddb7-40ff-8c54-8b0d85d40864">

---------

Co-authored-by: sid0-0 <a@b.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { IconCheckbox, IconNotes } from 'twenty-ui';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@@ -20,6 +20,7 @@ import {
 } from '~/testing/mock-data/users';
 import { sleep } from '~/utils/sleep';
 
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CommandMenu } from '../CommandMenu';
 
 const companiesMock = getCompaniesMock();
@@ -35,14 +36,21 @@ const meta: Meta<typeof CommandMenu> = {
       const setCurrentWorkspaceMember = useSetRecoilState(
         currentWorkspaceMemberState,
       );
-      const { addToCommandMenu, setToInitialCommandMenu, openCommandMenu } =
+      const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+      const { addToCommandMenu, setObjectsInCommandMenu, openCommandMenu } =
         useCommandMenu();
 
       setCurrentWorkspace(mockDefaultWorkspace);
       setCurrentWorkspaceMember(mockedWorkspaceMemberData);
 
       useEffect(() => {
-        setToInitialCommandMenu();
+        const nonSystemActiveObjects = objectMetadataItems.filter(
+          (object) => !object.isSystem && object.isActive,
+        );
+
+        setObjectsInCommandMenu(nonSystemActiveObjects);
+
         addToCommandMenu([
           {
             id: 'create-task',
@@ -62,7 +70,12 @@ const meta: Meta<typeof CommandMenu> = {
           },
         ]);
         openCommandMenu();
-      }, [addToCommandMenu, setToInitialCommandMenu, openCommandMenu]);
+      }, [
+        addToCommandMenu,
+        setObjectsInCommandMenu,
+        openCommandMenu,
+        objectMetadataItems,
+      ]);
 
       return <Story />;
     },

packages/twenty-front/src/modules/command-menu/constants/CommandMenuCommands.ts

@@ -8,8 +8,8 @@ import {
 
 import { Command, CommandType } from '../types/Command';
 
-export const COMMAND_MENU_COMMANDS: Command[] = [
-  {
+export const COMMAND_MENU_COMMANDS: { [key: string]: Command } = {
+  people: {
     id: 'go-to-people',
     to: '/objects/people',
     label: 'Go to People',
@@ -18,7 +18,7 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
     secondHotKey: 'P',
     Icon: IconUser,
   },
-  {
+  companies: {
     id: 'go-to-companies',
     to: '/objects/companies',
     label: 'Go to Companies',
@@ -27,7 +27,7 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
     secondHotKey: 'C',
     Icon: IconBuildingSkyscraper,
   },
-  {
+  opportunities: {
     id: 'go-to-activities',
     to: '/objects/opportunities',
     label: 'Go to Opportunities',
@@ -36,7 +36,7 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
     secondHotKey: 'O',
     Icon: IconTargetArrow,
   },
-  {
+  settings: {
     id: 'go-to-settings',
     to: '/settings/profile',
     label: 'Go to Settings',
@@ -45,7 +45,7 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
     secondHotKey: 'S',
     Icon: IconSettings,
   },
-  {
+  tasks: {
     id: 'go-to-tasks',
     to: '/objects/tasks',
     label: 'Go to Tasks',
@@ -54,4 +54,4 @@ export const COMMAND_MENU_COMMANDS: Command[] = [
     secondHotKey: 'T',
     Icon: IconCheckbox,
   },
-];
+};

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

@@ -1,6 +1,6 @@
+import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-import { renderHook } from '@testing-library/react';
 import { RecoilRoot, useRecoilState, useRecoilValue } from 'recoil';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
@@ -107,13 +107,39 @@ describe('useCommandMenu', () => {
     expect(onClickMock).toHaveBeenCalledTimes(1);
   });
 
-  it('should setToInitialCommandMenu command menu', () => {
+  it('should setObjectsInCommandMenu command menu', () => {
     const { result } = renderHooks();
 
     act(() => {
-      result.current.commandMenu.setToInitialCommandMenu();
+      result.current.commandMenu.setObjectsInCommandMenu([]);
     });
 
-    expect(result.current.commandMenuCommands.length).toBe(5);
+    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',
+          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: [],
+        },
+      ]);
+    });
+
+    expect(result.current.commandMenuCommands.length).toBe(2);
   });
 });

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

@@ -1,6 +1,6 @@
+import { isNonEmptyString } from '@sniptt/guards';
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
@@ -9,10 +9,13 @@ 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 '../constants/CommandMenuCommands';
+import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
+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 } from '../types/Command';
+import { Command, CommandType } from '../types/Command';
 
 export const useCommandMenu = () => {
   const navigate = useNavigate();
@@ -70,8 +73,27 @@ export const useCommandMenu = () => {
     [setCommands],
   );
 
-  const setToInitialCommandMenu = () => {
-    setCommands(COMMAND_MENU_COMMANDS);
+  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: 'G',
+              secondHotKey: item.labelPlural[0],
+              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(
@@ -96,6 +118,6 @@ export const useCommandMenu = () => {
     toggleCommandMenu,
     addToCommandMenu,
     onItemClick,
-    setToInitialCommandMenu,
+    setObjectsInCommandMenu,
   };
 };