Fix open record in setting for command menu v1 (#10383)

- Hide open record in settings for command menu version 1 users
- Create a selector to check which version of the command menu the user
has before returning if the record should be opened in the record page
or in the side panel

packages/twenty-front/src/modules/object-record/components/RecordChip.tsx

@@ -3,7 +3,7 @@ import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
 import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
-import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
+import { recordIndexOpenRecordInSelector } from '@/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { MouseEvent } from 'react';
@@ -29,7 +29,9 @@ export const RecordChip = ({
 
   const { openRecordInCommandMenu } = useCommandMenu();
 
-  const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState);
+  const recordIndexOpenRecordIn = useRecoilValue(
+    recordIndexOpenRecordInSelector,
+  );
 
   const handleClick = (e: MouseEvent<Element>) => {
     e.stopPropagation();

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx

@@ -31,7 +31,10 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { ViewType } from '@/views/types/ViewType';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { isDefined } from 'twenty-shared';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const ObjectOptionsDropdownMenuContent = () => {
   const {
@@ -98,21 +101,29 @@ export const ObjectOptionsDropdownMenuContent = () => {
     objectMetadataItem.nameSingular !== CoreObjectNameSingular.Note &&
     objectMetadataItem.nameSingular !== CoreObjectNameSingular.Task;
 
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
   return (
     <>
       <DropdownMenuHeader StartIcon={CurrentViewIcon ?? IconList}>
         {currentView?.name}
       </DropdownMenuHeader>
 
-      <DropdownMenuItemsContainer scrollable={false}>
+      {(isCommandMenuV2Enabled || viewType === ViewType.Kanban) && (
-        <MenuItem
+        <>
-          onClick={() => onContentChange('viewSettings')}
+          <DropdownMenuItemsContainer scrollable={false}>
-          LeftIcon={IconLayout}
+            <MenuItem
-          text="View settings"
+              onClick={() => onContentChange('viewSettings')}
-          hasSubMenu
+              LeftIcon={IconLayout}
-        />
+              text="View settings"
-      </DropdownMenuItemsContainer>
+              hasSubMenu
-      <DropdownMenuSeparator />
+            />
+          </DropdownMenuItemsContainer>
+          <DropdownMenuSeparator />
+        </>
+      )}
 
       <DropdownMenuItemsContainer scrollable={false}>
         <MenuItem

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent.tsx

@@ -15,7 +15,9 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { ViewType } from '@/views/types/ViewType';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const ObjectOptionsDropdownViewSettingsContent = () => {
   const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
@@ -37,27 +39,33 @@ export const ObjectOptionsDropdownViewSettingsContent = () => {
 
   const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState);
 
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
   return (
     <>
       <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetContent}>
         View settings
       </DropdownMenuHeader>
       <DropdownMenuItemsContainer>
-        <MenuItem
+        {isCommandMenuV2Enabled && (
-          onClick={() => onContentChange('viewSettingsOpenIn')}
+          <MenuItem
-          LeftIcon={
+            onClick={() => onContentChange('viewSettingsOpenIn')}
-            recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL
+            LeftIcon={
-              ? IconLayoutSidebarRight
+              recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL
-              : IconLayoutNavbar
+                ? IconLayoutSidebarRight
-          }
+                : IconLayoutNavbar
-          text="Open in"
+            }
-          contextualText={
+            text="Open in"
-            recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL
+            contextualText={
-              ? 'Side Panel'
+              recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL
-              : 'Record Page'
+                ? 'Side Panel'
-          }
+                : 'Record Page'
-          hasSubMenu
+            }
-        />
+            hasSubMenu
+          />
+        )}
         {viewType === ViewType.Kanban && (
           <MenuItemToggle
             LeftIcon={IconBaselineDensitySmall}

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx

@@ -18,7 +18,7 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
 import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon';
 import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
-import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
+import { recordIndexOpenRecordInSelector } from '@/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
@@ -119,7 +119,9 @@ export const RecordBoardCardHeader = ({
     return [updateEntity, { loading: false }];
   };
 
-  const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState);
+  const recordIndexOpenRecordIn = useRecoilValue(
+    recordIndexOpenRecordInSelector,
+  );
 
   const { openRecordInCommandMenu } = useCommandMenu();
 

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx

@@ -2,7 +2,7 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { RecordChip } from '@/object-record/components/RecordChip';
 import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay';
 import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
-import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
+import { recordIndexOpenRecordInSelector } from '@/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector';
 import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { useRecoilValue } from 'recoil';
 import { ChipSize } from 'twenty-ui';
@@ -15,7 +15,9 @@ export const ChipFieldDisplay = () => {
     labelIdentifierLink,
   } = useChipFieldDisplay();
 
-  const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState);
+  const recordIndexOpenRecordIn = useRecoilValue(
+    recordIndexOpenRecordInSelector,
+  );
 
   const { openRecordInCommandMenu } = useCommandMenu();
 

packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector.ts

@@ -0,0 +1,21 @@
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
+import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
+import { checkIfFeatureFlagIsEnabledOnWorkspace } from '@/workspace/utils/checkIfFeatureFlagIsEnabledOnWorkspace';
+import { selector } from 'recoil';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
+
+export const recordIndexOpenRecordInSelector = selector<ViewOpenRecordInType>({
+  key: 'recordIndexOpenRecordInSelector',
+  get: ({ get }) => {
+    const currentWorkspace = get(currentWorkspaceState);
+    const isCommandMenuV2Enabled = checkIfFeatureFlagIsEnabledOnWorkspace(
+      FeatureFlagKey.IsCommandMenuV2Enabled,
+      currentWorkspace,
+    );
+
+    return isCommandMenuV2Enabled
+      ? get(recordIndexOpenRecordInState)
+      : ViewOpenRecordInType.RECORD_PAGE;
+  },
+});

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts

@@ -22,7 +22,7 @@ import { isDefined } from 'twenty-shared';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
-import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
+import { recordIndexOpenRecordInSelector } from '@/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector';
 import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
 import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
@@ -121,7 +121,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
           leaveTableFocus();
 
           const openRecordIn = snapshot
-            .getLoadable(recordIndexOpenRecordInState)
+            .getLoadable(recordIndexOpenRecordInSelector)
             .getValue();
 
           if (openRecordIn === ViewOpenRecordInType.RECORD_PAGE) {