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

Refactor MultipleObjectsPicker component (#10552)

Browse Source 
Refactor to only have MultipleRecordPicker and SingleRecordPicker

What's done:
- SingleRecordPicker, MultipleRecordPicker
- RelationToOneInput
- RelationFromManyInput
- usage in TableCell, InlineCell, RelationDetailSection, Workflow

What's left:
- Make a pass on the app, to make sure the hotkeyScopes, clickOutside
are properly set
- Fix flashing on ActivityTarget
- add more tests on the code
This commit is contained in:
Charles Bochet
2025-03-10 15:04:09 +01:00
committed by GitHub
parent 7eabcc8774
commit f0de6d31b7
126 changed files with 2465 additions and 2242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowSingleRecordPicker.tsx
View File

@ -2,9 +2,10 @@ import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer';
import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
import { SingleRecordPicker } from '@/object-record/record-picker/components/SingleRecordPicker';
import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState';
import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord';
import { SingleRecordPicker } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPicker';
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 { InputLabel } from '@/ui/input/components/InputLabel';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@ -99,7 +100,7 @@ export const WorkflowSingleRecordPicker = ({
const { closeDropdown } = useDropdown(dropdownId);
const setRecordPickerSearchFilter = useSetRecoilComponentStateV2(
recordPickerSearchFilterComponentState,
singleRecordPickerSearchFilterComponentState,
dropdownId,
);
@ -125,6 +126,20 @@ export const WorkflowSingleRecordPicker = ({
onChange('');
};
const setRecordPickerSelectedId = useSetRecoilComponentStateV2(
singleRecordPickerSelectedIdComponentState,
dropdownId,
);
const handleOpenDropdown = () => {
if (
isDefined(draftValue?.value) &&
!isStandaloneVariableString(draftValue.value)
) {
setRecordPickerSelectedId(draftValue.value);
}
};
return (
<FormFieldInputContainer testId={testId}>
{label ? <InputLabel>{label}</InputLabel> : null}
@ -143,6 +158,7 @@ export const WorkflowSingleRecordPicker = ({
dropdownId={dropdownId}
dropdownPlacement="left-start"
onClose={handleCloseRelationPickerDropdown}
onOpen={handleOpenDropdown}
clickableComponent={
<LightIconButton
className="displayOnHover"
@ -159,12 +175,6 @@ export const WorkflowSingleRecordPicker = ({
onRecordSelected={handleRecordSelected}
objectNameSingular={objectNameSingular}
recordPickerInstanceId={dropdownId}
selectedRecordIds={
draftValue?.value &&
!isStandaloneVariableString(draftValue.value)
? [draftValue.value]
: []
}
/>
}
dropdownHotkeyScope={{ scope: dropdownId }}