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/page-header/components/PageHeaderOpenCommandMenuButton.tsx

@@ -7,12 +7,11 @@ import {
 } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { FeatureFlagKey } from '~/generated/graphql';
 
 export const PageHeaderOpenCommandMenuButton = () => {
-  const { navigateCommandMenu } = useCommandMenu();
+  const { openRootCommandMenu } = useCommandMenu();
 
   const isCommandMenuV2Enabled = useIsFeatureEnabled(
     FeatureFlagKey.IsCommandMenuV2Enabled,
@@ -31,11 +30,7 @@ export const PageHeaderOpenCommandMenuButton = () => {
           accent="default"
           hotkeys={[getOsControlSymbol(), 'K']}
           ariaLabel="Open command menu"
-          onClick={() => {
-            navigateCommandMenu({
-              page: CommandMenuPages.Root,
-            });
-          }}
+          onClick={openRootCommandMenu}
         />
       ) : (
         <IconButton
@@ -44,11 +39,7 @@ export const PageHeaderOpenCommandMenuButton = () => {
           dataTestId="more-showpage-button"
           accent="default"
           variant="secondary"
-          onClick={() => {
-            navigateCommandMenu({
-              page: CommandMenuPages.Root,
-            });
-          }}
+          onClick={openRootCommandMenu}
         />
       )}
     </>

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;