admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Raphaël Bosi
2025-02-21 12:06:27 +01:00
committed by GitHub
parent 311fc402d5
commit ec9587414b
7 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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();

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

@ -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}>
<MenuItem
onClick={() => onContentChange('viewSettings')}
LeftIcon={IconLayout}
text="View settings"
hasSubMenu
/>
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
{(isCommandMenuV2Enabled || viewType === ViewType.Kanban) && (
<>
<DropdownMenuItemsContainer scrollable={false}>
<MenuItem
onClick={() => onContentChange('viewSettings')}
LeftIcon={IconLayout}
text="View settings"
hasSubMenu
/>
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItemsContainer scrollable={false}>
<MenuItem

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

@ -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
onClick={() => onContentChange('viewSettingsOpenIn')}
LeftIcon={
recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL
? IconLayoutSidebarRight
: IconLayoutNavbar
}
text="Open in"
contextualText={
recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL
? 'Side Panel'
: 'Record Page'
}
hasSubMenu
/>
{isCommandMenuV2Enabled && (
<MenuItem
onClick={() => 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 && (
<MenuItemToggle
LeftIcon={IconBaselineDensitySmall}

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

@ -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();

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

@ -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();

21
packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexOpenRecordInSelector.ts Normal file
View File

@ -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;
},
});

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

@ -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) {