2727-fix(front): CommandMenu and KeyboardMenu invoke handled (#2783)

* 2727-fix(front): CommandMenu and KeyboardMenu invoke handled

* Fix Command Menu and bug on metadata re-render

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { CommandMenuSelectableListEffect } from '@/command-menu/components/CommandMenuSelectableListEffect';
+import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { Person } from '@/people/types/Person';
 import { IconNotes } from '@/ui/display/icon';
@@ -89,6 +90,7 @@ export const CommandMenu = () => {
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
   const [search, setSearch] = useState('');
   const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
+  const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(event.target.value);
@@ -97,6 +99,7 @@ export const CommandMenu = () => {
   useScopedHotkeys(
     'ctrl+k,meta+k',
     () => {
+      closeKeyboardShortcutMenu();
       setSearch('');
       toggleCommandMenu();
     },
@@ -108,6 +111,7 @@ export const CommandMenu = () => {
     'esc',
     () => {
       setSearch('');
+      closeKeyboardShortcutMenu();
       closeCommandMenu();
     },
     AppHotkeyScope.CommandMenu,

front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx

@@ -1,5 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 
@@ -20,9 +21,11 @@ export const KeyboardShortcutMenu = () => {
   const isKeyboardShortcutMenuOpened = useRecoilValue(
     isKeyboardShortcutMenuOpenedState,
   );
+  const { closeCommandMenu } = useCommandMenu();
   useScopedHotkeys(
     'shift+?,meta+?',
     () => {
+      closeCommandMenu();
       toggleKeyboardShortcutMenu();
     },
     AppHotkeyScope.KeyboardShortcutMenu,
@@ -30,7 +33,7 @@ export const KeyboardShortcutMenu = () => {
   );
 
   useScopedHotkeys(
-    'Esc',
+    'esc',
     () => {
       closeKeyboardShortcutMenu();
     },

front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx

@@ -1,7 +1,23 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+
 import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const ObjectMetadataItemsLoadEffect = () => {
-  useFindManyObjectMetadataItems();
+  const { objectMetadataItems: newObjectMetadataItems } =
+    useFindManyObjectMetadataItems();
+
+  const [objectMetadataItems, setObjectMetadataItems] = useRecoilState(
+    objectMetadataItemsState,
+  );
+
+  useEffect(() => {
+    if (!isDeeplyEqual(objectMetadataItems, newObjectMetadataItems)) {
+      setObjectMetadataItems(newObjectMetadataItems);
+    }
+  }, [newObjectMetadataItems, objectMetadataItems, setObjectMetadataItems]);
 
   return <></>;
 };

front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx

@@ -3,25 +3,31 @@ import { useRecoilValue } from 'recoil';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
 import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect';
+import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { RelationPickerScope } from '@/ui/input/components/internal/relation-picker/scopes/RelationPickerScope';
 
 export const ObjectMetadataItemsProvider = ({
   children,
 }: React.PropsWithChildren) => {
+  useFindManyObjectMetadataItems();
+
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
-  return objectMetadataItems.length < 1 && currentWorkspace ? (
+  return (
     <>
       <ObjectMetadataItemsLoadEffect />
-    </>
-  ) : (
-    <>
-      <ObjectMetadataItemsRelationPickerEffect />
-      <RelationPickerScope relationPickerScopeId="relation-picker">
-        {children}
-      </RelationPickerScope>
+      {objectMetadataItems.length < 1 && currentWorkspace ? (
+        <></>
+      ) : (
+        <>
+          <ObjectMetadataItemsRelationPickerEffect />
+          <RelationPickerScope relationPickerScopeId="relation-picker">
+            {children}
+          </RelationPickerScope>
+        </>
+      )}
     </>
   );
 };

front/src/modules/object-metadata/hooks/useFindManyObjectMetadataItems.ts

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
 import { useQuery } from '@apollo/client';
-import { useRecoilCallback } from 'recoil';
 
-import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import {
   FieldFilter,
@@ -10,7 +8,6 @@ import {
   ObjectMetadataItemsQuery,
   ObjectMetadataItemsQueryVariables,
 } from '~/generated-metadata/graphql';
-import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { logError } from '~/utils/logError';
 
 import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
@@ -50,24 +47,6 @@ export const useFindManyObjectMetadataItems = ({
         },
       );
     },
-    onCompleted: useRecoilCallback(
-      ({ snapshot, set }) =>
-        (data) => {
-          const objectMetadataItems =
-            mapPaginatedObjectMetadataItemsToObjectMetadataItems({
-              pagedObjectMetadataItems: data,
-            });
-
-          const actualObjectMetadataItems = snapshot
-            .getLoadable(objectMetadataItemsState)
-            .getValue();
-
-          if (!isDeeplyEqual(objectMetadataItems, actualObjectMetadataItems)) {
-            set(objectMetadataItemsState, objectMetadataItems);
-          }
-        },
-      [],
-    ),
   });
 
   const objectMetadataItems = useMemo(() => {