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

Remove selected record id on related relation record detach (#12591)

Browse Source 
# Introduction
Verified for multi select record picker and it's already working
Also works for both single and multi after record deletion
Fixes https://github.com/twentyhq/twenty/issues/12544
This commit is contained in:
Paul Rastoin
2025-06-13 16:07:35 +02:00
committed by GitHub
parent d494a3e7e9
commit 836e2f792c
4 changed files with 45 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,9 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
import { RecordDetailRecordsListItem } from '@/object-record/record-show/record-detail-section/components/RecordDetailRecordsListItem';
import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { getForeignKeyNameFromRelationFieldName } from '@/object-record/utils/getForeignKeyNameFromRelationFieldName';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
@ -36,6 +38,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { createPortal } from 'react-dom';
import {
IconChevronDown,
@ -103,7 +106,7 @@ export const RecordDetailRelationRecordsListItem = ({
onClick,
relationRecord,
}: RecordDetailRelationRecordsListItemProps) => {
const { fieldDefinition } = useContext(FieldContext);
const { fieldDefinition, recordId } = useContext(FieldContext);
const { openModal } = useModal();
@ -156,6 +159,15 @@ export const RecordDetailRelationRecordsListItem = ({
const { closeDropdown, isDropdownOpen } = useDropdown(dropdownScopeId);
const dropdownId = getRecordFieldCardRelationPickerDropdownId({
fieldDefinition,
recordId,
});
const setSingleRecordPickerSelectedId = useSetRecoilComponentStateV2(
singleRecordPickerSelectedIdComponentState,
dropdownId,
);
const handleDetach = () => {
closeDropdown();
@ -167,17 +179,18 @@ export const RecordDetailRelationRecordsListItem = ({
if (isToOneObject) {
persistField(null);
return;
} else {
updateOneRelationRecord({
idToUpdate: relationRecord.id,
updateOneRecordInput: {
[getForeignKeyNameFromRelationFieldName(
relationFieldMetadataItem.name,
)]: null,
},
});
}
updateOneRelationRecord({
idToUpdate: relationRecord.id,
updateOneRecordInput: {
[getForeignKeyNameFromRelationFieldName(
relationFieldMetadataItem.name,
)]: null,
},
});
setSingleRecordPickerSelectedId(undefined);
};
const handleDelete = async () => {

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

@ -12,6 +12,7 @@ import { RecordDetailRelationRecordsList } from '@/object-record/record-show/rec
import { RecordDetailRelationSectionDropdown } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdown';
import { RecordDetailSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailSection';
import { RecordDetailSectionHeader } from '@/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader';
import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { AggregateOperations } from '@/object-record/record-table/constants/AggregateOperations';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
@ -65,7 +66,10 @@ export const RecordDetailRelationSection = ({
? [fieldValue as ObjectRecord]
: ((fieldValue as ObjectRecord[]) ?? []);
const dropdownId = `record-field-card-relation-picker-${fieldDefinition.fieldMetadataId}-${recordId}`;
const dropdownId = getRecordFieldCardRelationPickerDropdownId({
fieldDefinition,
recordId,
});
const { isDropdownOpen } = useDropdown(dropdownId);

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

@ -19,6 +19,7 @@ import { SingleRecordPicker } from '@/object-record/record-picker/single-record-
import { singleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSearchFilterComponentState';
import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord';
import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
@ -69,7 +70,10 @@ export const RecordDetailRelationSectionDropdown = ({
? [fieldValue as ObjectRecord]
: ((fieldValue as ObjectRecord[]) ?? []);
const dropdownId = `record-field-card-relation-picker-${fieldDefinition.fieldMetadataId}-${recordId}`;
const dropdownId = getRecordFieldCardRelationPickerDropdownId({
fieldDefinition,
recordId,
});
const { closeDropdown, dropdownPlacement } = useDropdown(dropdownId);

12
packages/twenty-front/src/modules/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
type GetRecordFieldCardRelationPickerDropdownIdArgs = {
fieldDefinition: FieldDefinition<FieldMetadata>;
recordId: string;
};
export const getRecordFieldCardRelationPickerDropdownId = ({
fieldDefinition,
recordId,
}: GetRecordFieldCardRelationPickerDropdownIdArgs) =>
`record-field-card-relation-picker-${fieldDefinition.fieldMetadataId}-${recordId}`;