From ec9587414bd530d5c2fdebdbd7919cc836724e0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Fri, 21 Feb 2025 12:06:27 +0100 Subject: [PATCH] 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 --- .../object-record/components/RecordChip.tsx | 6 ++- .../ObjectOptionsDropdownMenuContent.tsx | 29 +++++++++----- ...jectOptionsDropdownViewSettingsContent.tsx | 38 +++++++++++-------- .../components/RecordBoardCardHeader.tsx | 6 ++- .../display/components/ChipFieldDisplay.tsx | 6 ++- .../recordIndexOpenRecordInSelector.ts | 21 ++++++++++ .../hooks/useOpenRecordTableCellV2.ts | 4 +- 7 files changed, 78 insertions(+), 32 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector.ts diff --git a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx index b98bed517..cb7acb410 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx +++ b/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) => { e.stopPropagation(); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx index ceab6f37b..30d5a7fe8 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx +++ b/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 ( <> {currentView?.name} - - onContentChange('viewSettings')} - LeftIcon={IconLayout} - text="View settings" - hasSubMenu - /> - - + {(isCommandMenuV2Enabled || viewType === ViewType.Kanban) && ( + <> + + onContentChange('viewSettings')} + LeftIcon={IconLayout} + text="View settings" + hasSubMenu + /> + + + + )} { const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView(); @@ -37,27 +39,33 @@ export const ObjectOptionsDropdownViewSettingsContent = () => { const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState); + const isCommandMenuV2Enabled = useIsFeatureEnabled( + FeatureFlagKey.IsCommandMenuV2Enabled, + ); + return ( <> View settings - onContentChange('viewSettingsOpenIn')} - LeftIcon={ - recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL - ? IconLayoutSidebarRight - : IconLayoutNavbar - } - text="Open in" - contextualText={ - recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL - ? 'Side Panel' - : 'Record Page' - } - hasSubMenu - /> + {isCommandMenuV2Enabled && ( + onContentChange('viewSettingsOpenIn')} + LeftIcon={ + recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL + ? IconLayoutSidebarRight + : IconLayoutNavbar + } + text="Open in" + contextualText={ + recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL + ? 'Side Panel' + : 'Record Page' + } + hasSubMenu + /> + )} {viewType === ViewType.Kanban && ( { labelIdentifierLink, } = useChipFieldDisplay(); - const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState); + const recordIndexOpenRecordIn = useRecoilValue( + recordIndexOpenRecordInSelector, + ); const { openRecordInCommandMenu } = useCommandMenu(); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector.ts b/packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector.ts new file mode 100644 index 000000000..ba756a83a --- /dev/null +++ b/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({ + key: 'recordIndexOpenRecordInSelector', + get: ({ get }) => { + const currentWorkspace = get(currentWorkspaceState); + const isCommandMenuV2Enabled = checkIfFeatureFlagIsEnabledOnWorkspace( + FeatureFlagKey.IsCommandMenuV2Enabled, + currentWorkspace, + ); + + return isCommandMenuV2Enabled + ? get(recordIndexOpenRecordInState) + : ViewOpenRecordInType.RECORD_PAGE; + }, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts index 8aaddccf0..5bee9b89e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts +++ b/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) {