Only store current object metadata id in state (#10856)

Fix group by refresh when adding a select field

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

@@ -5,7 +5,8 @@ import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContex
 import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { Command } from '@/command-menu/types/Command';
-import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
+import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
+import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLingui } from '@lingui/react/macro';
@@ -35,15 +36,14 @@ export const CommandMenu = () => {
     commandMenuSearch,
   });
 
-  const previousContextStoreCurrentObjectMetadataItem =
+  const previousContextStoreCurrentObjectMetadataItemId =
     useRecoilComponentValueV2(
-      contextStoreCurrentObjectMetadataItemComponentState,
+      contextStoreCurrentObjectMetadataItemIdComponentState,
       'command-menu-previous',
     );
 
-  const currentObjectMetadataItem = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataItemComponentState,
-  );
+  const { objectMetadataItem: currentObjectMetadataItem } =
+    useContextStoreObjectMetadataItemOrThrow();
 
   const commandGroups: CommandGroupConfig[] = [
     {
@@ -74,7 +74,7 @@ export const CommandMenu = () => {
 
   const selectableItemIds = selectableItems.map((item) => item.id);
 
-  if (isDefined(previousContextStoreCurrentObjectMetadataItem)) {
+  if (isDefined(previousContextStoreCurrentObjectMetadataItemId)) {
     selectableItemIds.unshift(RESET_CONTEXT_TO_SELECTION);
   }
 
@@ -84,7 +84,7 @@ export const CommandMenu = () => {
       selectableItemIds={selectableItemIds}
       noResults={noResults}
     >
-      {isDefined(previousContextStoreCurrentObjectMetadataItem) && (
+      {isDefined(previousContextStoreCurrentObjectMetadataItemId) && (
         <CommandGroup heading={t`Context`}>
           <SelectableItem itemId={RESET_CONTEXT_TO_SELECTION}>
             <ResetContextToSelectionCommandButton />

packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx

@@ -13,9 +13,10 @@ import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKey
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
-import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
+import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
@@ -87,20 +88,27 @@ export const CommandMenuContainer = ({
 
   const setCommandMenuSearch = useSetRecoilState(commandMenuSearchState);
 
-  const contextStoreCurrentObjectMetadataItem = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataItemComponentState,
+  const objectMetadataItemId = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataItemIdComponentState,
     COMMAND_MENU_COMPONENT_INSTANCE_ID,
   );
 
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const objectMetadataItem = objectMetadataItems.find(
+    (objectMetadataItem) => objectMetadataItem.id === objectMetadataItemId,
+  );
+
   const currentViewId = useRecoilComponentValueV2(
     contextStoreCurrentViewIdComponentState,
     COMMAND_MENU_COMPONENT_INSTANCE_ID,
   );
 
   const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
-    contextStoreCurrentObjectMetadataItem?.namePlural ?? '',
+    objectMetadataItem?.namePlural ?? '',
     currentViewId ?? '',
   );
+
   return (
     <RecordFilterGroupsComponentInstanceContext.Provider
       value={{ instanceId: recordIndexId }}

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -2,6 +2,7 @@ import { CommandMenuContextChip } from '@/command-menu/components/CommandMenuCon
 import { CommandMenuContextChipGroups } from '@/command-menu/components/CommandMenuContextChipGroups';
 import { CommandMenuContextChipGroupsWithRecordSelection } from '@/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection';
 import { CommandMenuTopBarInputFocusEffect } from '@/command-menu/components/CommandMenuTopBarInputFocusEffect';
+import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
@@ -9,7 +10,7 @@ import { useCommandMenuContextChips } from '@/command-menu/hooks/useCommandMenuC
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
+import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -92,8 +93,9 @@ export const CommandMenuTopBar = () => {
 
   const { closeCommandMenu, goBackFromCommandMenu } = useCommandMenu();
 
-  const contextStoreCurrentObjectMetadataItem = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataItemComponentState,
+  const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataItemIdComponentState,
+    COMMAND_MENU_COMPONENT_INSTANCE_ID,
   );
 
   const commandMenuPage = useRecoilValue(commandMenuPageState);
@@ -129,11 +131,11 @@ export const CommandMenuTopBar = () => {
             </motion.div>
           )}
         </AnimatePresence>
-        {isDefined(contextStoreCurrentObjectMetadataItem) &&
+        {isDefined(contextStoreCurrentObjectMetadataItemId) &&
         commandMenuPage !== CommandMenuPages.SearchRecords ? (
           <CommandMenuContextChipGroupsWithRecordSelection
             contextChips={contextChips}
-            objectMetadataItemId={contextStoreCurrentObjectMetadataItem.id}
+            objectMetadataItemId={contextStoreCurrentObjectMetadataItemId}
           />
         ) : (
           <CommandMenuContextChipGroups contextChips={contextChips} />

packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx

@@ -2,7 +2,7 @@ import { CommandMenuContextRecordsChip } from '@/command-menu/components/Command
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
 import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
-import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
+import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -17,8 +17,8 @@ export const ResetContextToSelectionCommandButton = () => {
     'command-menu-previous',
   );
 
-  const contextStoreCurrentObjectMetadataItem = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataItemComponentState,
+  const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataItemIdComponentState,
     'command-menu-previous',
   );
 
@@ -26,7 +26,7 @@ export const ResetContextToSelectionCommandButton = () => {
 
   const objectMetadataItem = objectMetadataItems.find(
     (objectMetadataItem) =>
-      objectMetadataItem.id === contextStoreCurrentObjectMetadataItem?.id,
+      objectMetadataItem.id === contextStoreCurrentObjectMetadataItemId,
   );
 
   const { resetPreviousCommandMenuContext } =