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/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx

@@ -2,6 +2,7 @@ import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { RecoilRoot, useRecoilValue } from 'recoil';
 
+import { IconList } from 'twenty-ui';
 import { isRightDrawerOpenState } from '../../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../../states/rightDrawerPageState';
 import { RightDrawerPages } from '../../types/RightDrawerPages';
@@ -33,7 +34,10 @@ describe('useRightDrawer', () => {
     expect(result.current.closeRightDrawer).toBeInstanceOf(Function);
 
     await act(async () => {
-      result.current.openRightDrawer(RightDrawerPages.ViewRecord);
+      result.current.openRightDrawer(RightDrawerPages.ViewRecord, {
+        title: 'Company',
+        Icon: IconList,
+      });
     });
 
     expect(result.current.rightDrawerPage).toEqual(RightDrawerPages.ViewRecord);

packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts

@@ -30,9 +30,9 @@ export const useRightDrawer = () => {
     ({ set }) =>
       (
         rightDrawerPage: RightDrawerPages,
-        commandMenuPageInfo?: {
-          title?: string;
-          Icon?: IconComponent;
+        commandMenuPageInfo: {
+          title: string;
+          Icon: IconComponent;
         },
       ) => {
         if (isCommandMenuV2Enabled) {
@@ -41,8 +41,8 @@ export const useRightDrawer = () => {
 
           navigateCommandMenu({
             page: commandMenuPage,
-            pageTitle: commandMenuPageInfo?.title,
-            pageIcon: commandMenuPageInfo?.Icon,
+            pageTitle: commandMenuPageInfo.title,
+            pageIcon: commandMenuPageInfo.Icon,
           });
 
           return;