321 command menu context chips compact version (#10072)

Closes https://github.com/twentyhq/core-team-issues/issues/321

- Create component
- Create stories
- Fix bug due to `WorkflowDiagramCanvasEditableEffect`

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

@@ -9,7 +9,7 @@ import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageTitle';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { IconSearch } from 'twenty-ui';
+import { IconList, IconSearch } from 'twenty-ui';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
@@ -53,9 +53,7 @@ describe('useCommandMenu', () => {
     const { result } = renderHooks();
 
     act(() => {
-      result.current.commandMenu.navigateCommandMenu({
-        page: CommandMenuPages.Root,
-      });
+      result.current.commandMenu.openRootCommandMenu();
     });
 
     expect(result.current.isCommandMenuOpened).toBe(true);
@@ -119,7 +117,8 @@ describe('useCommandMenu', () => {
     act(() => {
       result.current.commandMenu.navigateCommandMenu({
         page: CommandMenuPages.ViewRecord,
-        pageTitle: 'View Record',
+        pageTitle: 'Company',
+        pageIcon: IconList,
       });
     });
 
@@ -131,13 +130,14 @@ describe('useCommandMenu', () => {
       },
       {
         page: CommandMenuPages.ViewRecord,
-        pageTitle: 'View Record',
+        pageTitle: 'Company',
+        pageIcon: IconList,
       },
     ]);
     expect(result.current.commandMenuPage).toBe(CommandMenuPages.ViewRecord);
     expect(result.current.commandMenuPageInfo).toEqual({
-      title: 'View Record',
-      Icon: undefined,
+      title: 'Company',
+      Icon: IconList,
     });
   });
 
@@ -155,7 +155,8 @@ describe('useCommandMenu', () => {
     act(() => {
       result.current.commandMenu.navigateCommandMenu({
         page: CommandMenuPages.ViewRecord,
-        pageTitle: 'View Record',
+        pageTitle: 'Company',
+        pageIcon: IconList,
       });
     });
 
@@ -167,7 +168,8 @@ describe('useCommandMenu', () => {
       },
       {
         page: CommandMenuPages.ViewRecord,
-        pageTitle: 'View Record',
+        pageTitle: 'Company',
+        pageIcon: IconList,
       },
     ]);
 

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

@@ -23,8 +23,9 @@ import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared';
-import { IconSearch } from 'twenty-ui';
+import { IconDotsVertical, IconList, IconSearch } from 'twenty-ui';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 
 export const useCommandMenu = () => {
@@ -123,6 +124,14 @@ export const useCommandMenu = () => {
     [openCommandMenu],
   );
 
+  const openRootCommandMenu = useCallback(() => {
+    navigateCommandMenu({
+      page: CommandMenuPages.Root,
+      pageTitle: 'Command Menu',
+      pageIcon: IconDotsVertical,
+    });
+  }, [navigateCommandMenu]);
+
   const toggleCommandMenu = useRecoilCallback(
     ({ snapshot, set }) =>
       async () => {
@@ -135,12 +144,10 @@ export const useCommandMenu = () => {
         if (isCommandMenuOpened) {
           closeCommandMenu();
         } else {
-          navigateCommandMenu({
-            page: CommandMenuPages.Root,
-          });
+          openRootCommandMenu();
         }
       },
-    [closeCommandMenu, navigateCommandMenu],
+    [closeCommandMenu, openRootCommandMenu],
   );
 
   const goBackFromCommandMenu = useRecoilCallback(
@@ -204,6 +211,8 @@ export const useCommandMenu = () => {
         set(viewableRecordIdState, recordId);
         navigateCommandMenu({
           page: CommandMenuPages.ViewRecord,
+          pageTitle: objectNameSingular,
+          pageIcon: IconList,
         });
       };
     },
@@ -267,6 +276,7 @@ export const useCommandMenu = () => {
   );
 
   return {
+    openRootCommandMenu,
     closeCommandMenu,
     navigateCommandMenu,
     navigateCommandMenuHistory,