[CommandMenu] Disable record selection dropdown on record pages in command menu editor (#19264)

packages/twenty-front/src/modules/command-menu-item/server-items/edit/components/CommandMenuItemEditRecordSelectionDropdown.tsx

@@ -19,15 +19,16 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const DROPDOWN_ID = 'command-menu-edit-record-selection-dropdown';
 
-const StyledClickableArea = styled.div`
+const StyledClickableArea = styled.div<{ disabled?: boolean }>`
   align-items: center;
   background-color: ${themeCssVariables.background.transparent.lighter};
   border: 1px solid ${themeCssVariables.border.color.medium};
   border-radius: ${themeCssVariables.border.radius.sm};
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
   gap: ${themeCssVariables.spacing[1]};
   height: 24px;
+  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
   padding-left: ${themeCssVariables.spacing[2]};
   padding-right: ${themeCssVariables.spacing[1]};
 `;
@@ -44,7 +45,13 @@ const StyledDropdownMenuContainer = styled.div`
   width: 100%;
 `;
 
-export const CommandMenuItemEditRecordSelectionDropdown = () => {
+type CommandMenuItemEditRecordSelectionDropdownProps = {
+  isRecordPage?: boolean;
+};
+
+export const CommandMenuItemEditRecordSelectionDropdown = ({
+  isRecordPage = false,
+}: CommandMenuItemEditRecordSelectionDropdownProps) => {
   const { t } = useLingui();
   const { closeDropdown } = useCloseDropdown();
 
@@ -55,7 +62,9 @@ export const CommandMenuItemEditRecordSelectionDropdown = () => {
     commandMenuItemEditSelectionModeState,
   );
 
-  const isNoneSelected = commandMenuItemEditSelectionMode === 'none';
+  const isNoneSelected = isRecordPage
+    ? false
+    : commandMenuItemEditSelectionMode === 'none';
 
   const handleSelectMode = (mode: 'none' | 'selection') => {
     setCommandMenuItemEditSelectionMode(mode);
@@ -70,8 +79,10 @@ export const CommandMenuItemEditRecordSelectionDropdown = () => {
   return (
     <Dropdown
       dropdownId={DROPDOWN_ID}
+      disableClickForClickableComponent={isRecordPage}
       clickableComponent={
         <StyledClickableArea
+          disabled={isRecordPage}
           data-click-outside-id={COMMAND_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
         >
           <TriggerIcon size={16} />

packages/twenty-front/src/modules/command-menu-item/server-items/edit/components/SidePanelCommandMenuItemEditPage.tsx

@@ -6,7 +6,10 @@ import { CommandMenuItemEditRecordSelectionDropdown } from '@/command-menu-item/
 import { CommandMenuItemOptionsDropdown } from '@/command-menu-item/server-items/edit/components/CommandMenuItemOptionsDropdown';
 import { useReorderCommandMenuItemsInDraft } from '@/command-menu-item/server-items/edit/hooks/useReorderCommandMenuItemsInDraft';
 import { useResetCommandMenuItemsDraft } from '@/command-menu-item/server-items/edit/hooks/useResetCommandMenuItemsDraft';
-import { commandMenuItemEditSelectionModeState } from '@/command-menu-item/server-items/edit/states/commandMenuItemEditSelectionModeState';
+import {
+  type CommandMenuItemEditSelectionMode,
+  commandMenuItemEditSelectionModeState,
+} from '@/command-menu-item/server-items/edit/states/commandMenuItemEditSelectionModeState';
 import { useUpdateCommandMenuItemInDraft } from '@/command-menu-item/server-items/edit/hooks/useUpdateCommandMenuItemInDraft';
 import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
 import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
@@ -20,6 +23,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { type DropResult } from '@hello-pangea/dnd';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
+import { CommandMenuContextApiPageType } from 'twenty-shared/types';
 import {
   interpolateCommandMenuItemLabel,
   isDefined,
@@ -80,10 +84,18 @@ export const SidePanelCommandMenuItemEditPage = () => {
   const currentObjectMetadataItemId =
     commandMenuContextApi.objectMetadataItem.id;
 
+  const isRecordPage =
+    commandMenuContextApi.pageType ===
+    CommandMenuContextApiPageType.RECORD_PAGE;
+
   const commandMenuItemEditSelectionMode = useAtomStateValue(
     commandMenuItemEditSelectionModeState,
   );
 
+  const effectiveSelectionMode: CommandMenuItemEditSelectionMode = isRecordPage
+    ? 'selection'
+    : commandMenuItemEditSelectionMode;
+
   const sidePanelSearch = useAtomStateValue(sidePanelSearchState);
 
   const commandMenuItems = useAtomStateValue(commandMenuItemsSelector);
@@ -98,7 +110,7 @@ export const SidePanelCommandMenuItemEditPage = () => {
 
   const allowedAvailabilityTypes = new Set<CommandMenuItemAvailabilityType>([
     CommandMenuItemAvailabilityType.GLOBAL,
-    commandMenuItemEditSelectionMode === 'selection'
+    effectiveSelectionMode === 'selection'
       ? CommandMenuItemAvailabilityType.RECORD_SELECTION
       : CommandMenuItemAvailabilityType.FALLBACK,
   ]);
@@ -237,7 +249,9 @@ export const SidePanelCommandMenuItemEditPage = () => {
   return (
     <StyledContainer data-click-outside-id={COMMAND_MENU_CLICK_OUTSIDE_ID}>
       <StyledViewbar>
-        <CommandMenuItemEditRecordSelectionDropdown />
+        <CommandMenuItemEditRecordSelectionDropdown
+          isRecordPage={isRecordPage}
+        />
       </StyledViewbar>
       <StyledContent>
         <SidePanelList commandGroups={[]} selectableItemIds={selectableItemIds}>