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

Migrate right drawer record page to the command menu (#9459)

Browse Source 
Closes #9423



https://github.com/user-attachments/assets/0d93f170-8c4f-43ff-a0ca-3d2874d44820
This commit is contained in:
Raphaël Bosi
2025-01-09 09:58:14 +01:00
committed by GitHub
parent e0e436a51d
commit a2f2f4148a
37 changed files with 400 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,8 +162,8 @@ export const RecordIndexContainer = () => {
contextStoreTargetedRecordsRuleComponentState,
);
const isPageHeaderV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsPageHeaderV2Enabled,
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);
return (
@ -256,7 +256,7 @@ export const RecordIndexContainer = () => {
<RecordIndexBoardDataLoaderEffect recordBoardId={recordIndexId} />
</StyledContainerWithPadding>
)}
{!isPageHeaderV2Enabled && (
{!isCommandMenuV2Enabled && (
<RecordIndexActionMenu indexId={recordIndexId} />
)}
</RecordFieldValueSelectorContextProvider>

8
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
View File

@ -36,8 +36,8 @@ export const RecordIndexPageHeader = () => {
contextStoreNumberOfSelectedRecordsComponentState,
);
const isPageHeaderV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsPageHeaderV2Enabled,
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);
const isObjectMetadataItemReadOnly =
@ -45,7 +45,7 @@ export const RecordIndexPageHeader = () => {
isObjectMetadataReadOnly(objectMetadataItem);
const shouldDisplayAddButton =
(numberOfSelectedRecords === 0 || !isPageHeaderV2Enabled) &&
(numberOfSelectedRecords === 0 || !isCommandMenuV2Enabled) &&
!isObjectMetadataItemReadOnly;
const isTable = recordIndexViewType === ViewType.Table;
@ -65,7 +65,7 @@ export const RecordIndexPageHeader = () => {
<RecordIndexPageKanbanAddButton />
))}
{isPageHeaderV2Enabled && (
{isCommandMenuV2Enabled && (
<>
<RecordIndexActionMenu indexId={recordIndexId} />
<PageHeaderOpenCommandMenuButton />

16
packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
View File

@ -10,14 +10,22 @@ import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordSh
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import styled from '@emotion/styled';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
const StyledRightDrawerRecord = styled.div`
height: ${({ theme }) =>
useIsMobile() ? `calc(100% - ${theme.spacing(16)})` : '100%'};
const StyledRightDrawerRecord = styled.div<{ hasTopBar: boolean }>`
height: ${({ theme, hasTopBar }) =>
hasTopBar ? `calc(100% - ${theme.spacing(16)})` : '100%'};
`;
export const RightDrawerRecord = () => {
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);
const isMobile = useIsMobile();
const hasTopBar = isCommandMenuV2Enabled || isMobile;
const viewableRecordNameSingular = useRecoilValue(
viewableRecordNameSingularState,
);
@ -48,7 +56,7 @@ export const RightDrawerRecord = () => {
<ActionMenuComponentInstanceContext.Provider
value={{ instanceId: `record-show-${objectRecordId}` }}
>
<StyledRightDrawerRecord>
<StyledRightDrawerRecord hasTopBar={hasTopBar}>
<RecordFieldValueSelectorContextProvider>
{!isNewViewableRecordLoading && (
<RecordValueSetterEffect recordId={objectRecordId} />

5
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
View File

@ -212,7 +212,10 @@ export const RecordDetailRelationSection = ({
<>
<RelationFromManyFieldInputMultiRecordsEffect />
<MultiRecordSelect
onCreate={createNewRecordAndOpenRightDrawer}
onCreate={() => {
closeDropdown();
createNewRecordAndOpenRightDrawer?.();
}}
onChange={updateRelation}
onSubmit={closeDropdown}
dropdownPlacement={dropdownPlacement}