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

replace search resolvers by global search in front (#11086)

Browse Source 
Done
- Replace global search in multi record picker and single record picker

To do
- refactor SingleRecordPicker to match MultipleRecordPicker - next 1:1
- items in this issue
https://github.com/twentyhq/core-team-issues/issues/643



closes https://github.com/twentyhq/core-team-issues/issues/535
This commit is contained in:
Etienne
2025-03-21 17:25:00 +01:00
committed by GitHub
parent da527f1780
commit e624e8deee
26 changed files with 481 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-front/src/modules/settings/roles/role-assignment/components/RoleAssignment.tsx
View File

@ -21,7 +21,11 @@ import {
Section,
TooltipDelay,
} from 'twenty-ui';
import { Role, WorkspaceMember } from '~/generated-metadata/graphql';
import {
GlobalSearchRecord,
Role,
WorkspaceMember,
} from '~/generated-metadata/graphql';
import {
GetRolesDocument,
useGetRolesQuery,
@ -129,14 +133,18 @@ export const RoleAssignment = ({ role }: RoleAssignmentProps) => {
setSelectedWorkspaceMember(null);
};
const handleSelectWorkspaceMember = (workspaceMember: WorkspaceMember) => {
const existingRole = workspaceMemberRoleMap.get(workspaceMember.id);
const handleSelectWorkspaceMember = (
workspaceMemberSearchRecord: GlobalSearchRecord,
) => {
const existingRole = workspaceMemberRoleMap.get(
workspaceMemberSearchRecord.recordId,
);
setSelectedWorkspaceMember({
id: workspaceMember.id,
name: `${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`,
id: workspaceMemberSearchRecord.recordId,
name: `${workspaceMemberSearchRecord.label}`,
role: existingRole,
avatarUrl: workspaceMember.avatarUrl,
avatarUrl: workspaceMemberSearchRecord.imageUrl,
});
setConfirmationModalIsOpen(true);
closeDropdown();

24
packages/twenty-front/src/modules/settings/roles/role-assignment/components/RoleAssignmentWorkspaceMemberPickerDropdown.tsx
View File

@ -1,16 +1,16 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useSearchRecords } from '@/object-record/hooks/useSearchRecords';
import { useObjectRecordSearchRecords } from '@/object-record/hooks/useObjectRecordSearchRecords';
import { RoleAssignmentWorkspaceMemberPickerDropdownContent } from '@/settings/roles/role-assignment/components/RoleAssignmentWorkspaceMemberPickerDropdownContent';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
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 { ChangeEvent, useState } from 'react';
import { WorkspaceMember } from '~/generated-metadata/graphql';
import { GlobalSearchRecord } from '~/generated-metadata/graphql';
type RoleAssignmentWorkspaceMemberPickerDropdownProps = {
excludedWorkspaceMemberIds: string[];
onSelect: (workspaceMember: WorkspaceMember) => void;
onSelect: (workspaceMemberSearchRecord: GlobalSearchRecord) => void;
};
export const RoleAssignmentWorkspaceMemberPickerDropdown = ({
@ -19,15 +19,17 @@ export const RoleAssignmentWorkspaceMemberPickerDropdown = ({
}: RoleAssignmentWorkspaceMemberPickerDropdownProps) => {
const [searchFilter, setSearchFilter] = useState('');
const { loading, records: workspaceMembers } = useSearchRecords({
objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
searchInput: searchFilter,
});
const { loading, searchRecords: workspaceMembers } =
useObjectRecordSearchRecords({
objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
searchInput: searchFilter,
});
const filteredWorkspaceMembers = (workspaceMembers?.filter(
(workspaceMember) =>
!excludedWorkspaceMemberIds.includes(workspaceMember.id),
) ?? []) as WorkspaceMember[];
const filteredWorkspaceMembers =
workspaceMembers?.filter(
(workspaceMember) =>
!excludedWorkspaceMemberIds.includes(workspaceMember.recordId),
) ?? [];
const handleSearchFilterChange = (event: ChangeEvent<HTMLInputElement>) => {
setSearchFilter(event.target.value);

14
packages/twenty-front/src/modules/settings/roles/role-assignment/components/RoleAssignmentWorkspaceMemberPickerDropdownContent.tsx
View File

@ -1,12 +1,12 @@
import { t } from '@lingui/core/macro';
import { MenuItem, MenuItemAvatar } from 'twenty-ui';
import { WorkspaceMember } from '~/generated-metadata/graphql';
import { GlobalSearchRecord } from '~/generated-metadata/graphql';
type RoleAssignmentWorkspaceMemberPickerDropdownContentProps = {
loading: boolean;
searchFilter: string;
filteredWorkspaceMembers: WorkspaceMember[];
onSelect: (workspaceMember: WorkspaceMember) => void;
filteredWorkspaceMembers: GlobalSearchRecord[];
onSelect: (workspaceMemberSearchRecord: GlobalSearchRecord) => void;
};
export const RoleAssignmentWorkspaceMemberPickerDropdownContent = ({
@ -27,15 +27,15 @@ export const RoleAssignmentWorkspaceMemberPickerDropdownContent = ({
<>
{filteredWorkspaceMembers.map((workspaceMember) => (
<MenuItemAvatar
key={workspaceMember.id}
key={workspaceMember.recordId}
onClick={() => onSelect(workspaceMember)}
avatar={{
type: 'rounded',
size: 'md',
placeholder: workspaceMember.name.firstName ?? '',
placeholderColorSeed: workspaceMember.id,
placeholder: workspaceMember.label ?? '',
placeholderColorSeed: workspaceMember.recordId,
}}
text={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
text={workspaceMember.label}
/>
))}
</>