From edff53f5b8a7381cf83ee228a80975d63f01fd54 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Tue, 17 Dec 2024 21:39:11 +0530 Subject: [PATCH] fix - add new button on opportunity board company picker doesnt work (#8488) Closes https://github.com/twentyhq/twenty/issues/8455 https://github.com/user-attachments/assets/fec269b9-abb4-47e4-811e-fa23b69ca040 --------- Co-authored-by: Charles Bochet --- .../RecordBoardColumnNewOpportunity.tsx | 63 +++++++++++++++---- .../components/SingleRecordSelect.tsx | 2 - .../SingleRecordSelectMenuItemsWithSearch.tsx | 11 ++-- .../hooks/useFilteredSearchRecordQuery.ts | 1 + 4 files changed, 60 insertions(+), 17 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunity.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunity.tsx index 2efb78aa5..bfb1866f5 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunity.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunity.tsx @@ -1,10 +1,17 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard'; import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector'; +import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; +import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState'; import { SingleRecordSelect } from '@/object-record/relation-picker/components/SingleRecordSelect'; +import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext'; import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer'; -import { useRecoilValue } from 'recoil'; - +import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; +import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { v4 } from 'uuid'; +import { isDefined } from '~/utils/isDefined'; export const RecordBoardColumnNewOpportunity = ({ columnId, position, @@ -18,21 +25,55 @@ export const RecordBoardColumnNewOpportunity = ({ scopeId: columnId, }), ); + const { handleCreateSuccess, handleEntitySelect } = useAddNewCard(); + const { createOneRecord: createCompany } = useCreateOneRecord({ + objectNameSingular: CoreObjectNameSingular.Company, + }); + const { openRightDrawer } = useRightDrawer(); + + const setViewableRecordId = useSetRecoilState(viewableRecordIdState); + const setViewableRecordNameSingular = useSetRecoilState( + viewableRecordNameSingularState, + ); + + const createCompanyOpportunityAndOpenRightDrawer = async ( + searchInput?: string, + ) => { + const newRecordId = v4(); + + const createdCompany = await createCompany({ + id: newRecordId, + name: searchInput, + }); + + setViewableRecordId(newRecordId); + setViewableRecordNameSingular(CoreObjectNameSingular.Company); + openRightDrawer(RightDrawerPages.ViewRecord); + + if (isDefined(createdCompany)) { + handleEntitySelect(position, createdCompany); + } + }; + return ( <> {newRecord.isCreating && newRecord.position === position && ( - handleCreateSuccess(position, columnId, false)} - onRecordSelected={(company) => - company ? handleEntitySelect(position, company) : null - } - objectNameSingular={CoreObjectNameSingular.Company} - recordPickerInstanceId="relation-picker" - selectedRecordIds={[]} - /> + + handleCreateSuccess(position, columnId, false)} + onRecordSelected={(company) => + company ? handleEntitySelect(position, company) : null + } + objectNameSingular={CoreObjectNameSingular.Company} + selectedRecordIds={[]} + onCreate={createCompanyOpportunityAndOpenRightDrawer} + /> + )} diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelect.tsx index 916ad71d8..f18bdc769 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelect.tsx @@ -20,7 +20,6 @@ export const SingleRecordSelect = ({ onCreate, onRecordSelected, objectNameSingular, - recordPickerInstanceId, selectedRecordIds, width = 200, }: SingleRecordSelectProps) => { @@ -53,7 +52,6 @@ export const SingleRecordSelect = ({ onCreate, onRecordSelected, objectNameSingular, - recordPickerInstanceId, selectedRecordIds, }} /> diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx index 0066acad2..a9331c4c7 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx @@ -4,10 +4,12 @@ import { } from '@/object-record/relation-picker/components/SingleRecordSelectMenuItems'; import { useRecordPickerRecordsOptions } from '@/object-record/relation-picker/hooks/useRecordPickerRecordsOptions'; import { useRecordSelectSearch } from '@/object-record/relation-picker/hooks/useRecordSelectSearch'; +import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext'; import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; +import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { Placement } from '@floating-ui/react'; import { IconPlus } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; @@ -37,13 +39,14 @@ export const SingleRecordSelectMenuItemsWithSearch = ({ onCreate, onRecordSelected, objectNameSingular, - recordPickerInstanceId = 'record-picker', selectedRecordIds, dropdownPlacement, }: SingleRecordSelectMenuItemsWithSearchProps) => { - const { handleSearchFilterChange } = useRecordSelectSearch({ - recordPickerInstanceId, - }); + const { handleSearchFilterChange } = useRecordSelectSearch(); + + const recordPickerInstanceId = useAvailableComponentInstanceIdOrThrow( + RecordPickerComponentInstanceContext, + ); const { records, recordPickerSearchFilter } = useRecordPickerRecordsOptions({ objectNameSingular, diff --git a/packages/twenty-front/src/modules/search/hooks/useFilteredSearchRecordQuery.ts b/packages/twenty-front/src/modules/search/hooks/useFilteredSearchRecordQuery.ts index 7d49da6c2..e58c35bf9 100644 --- a/packages/twenty-front/src/modules/search/hooks/useFilteredSearchRecordQuery.ts +++ b/packages/twenty-front/src/modules/search/hooks/useFilteredSearchRecordQuery.ts @@ -60,6 +60,7 @@ export const useFilteredSearchRecordQuery = ({ filter: notFilter, limit: limit ?? DEFAULT_SEARCH_REQUEST_LIMIT, searchInput: searchFilter, + fetchPolicy: 'cache-and-network', }); return {