diff --git a/packages/twenty-front/src/modules/apollo/services/__tests__/apollo.factory.test.ts b/packages/twenty-front/src/modules/apollo/services/__tests__/apollo.factory.test.ts index 2e75e22f0303..cc31cbbdbe84 100644 --- a/packages/twenty-front/src/modules/apollo/services/__tests__/apollo.factory.test.ts +++ b/packages/twenty-front/src/modules/apollo/services/__tests__/apollo.factory.test.ts @@ -30,6 +30,7 @@ const mockWorkspaceMember = { lastName: 'Doe', }, colorScheme: 'Light' as const, + userEmail: 'userEmail', }; const mockWorkspace = { @@ -200,6 +201,7 @@ describe('ApolloFactory', () => { lastName: 'Doe', }, colorScheme: 'Light' as const, + userEmail: 'userEmail', }; apolloFactory.updateWorkspaceMember(newWorkspaceMember); diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts index 4e67bc7af0c9..a75ecac0c523 100644 --- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts +++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts @@ -3,7 +3,7 @@ import { createState } from 'twenty-ui/utilities'; export type CurrentWorkspaceMember = Omit< WorkspaceMember, - 'createdAt' | 'updatedAt' | 'userId' | 'userEmail' | '__typename' + 'createdAt' | 'updatedAt' | 'userId' | '__typename' >; export const currentWorkspaceMemberState = diff --git a/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts b/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts index f4e94405574a..09020769fc05 100644 --- a/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts +++ b/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts @@ -1012,4 +1012,5 @@ export const mockWorkspaceMember = { createdAt: '', updatedAt: '', userId: '1', + userEmail: 'userEmail', }; diff --git a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx index 8b1802d8f0f6..70deffd48a05 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx @@ -43,6 +43,7 @@ describe('useFindManyRecords', () => { name: { firstName: 'John', lastName: 'Connor' }, locale: 'en', colorScheme: 'Light', + userEmail: 'userEmail', }); const setMetadataItems = useSetRecoilState(objectMetadataItemsState); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ForbiddenFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ForbiddenFieldDisplay.tsx index 03d0d3f07ad8..a4b4aedc7c53 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ForbiddenFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ForbiddenFieldDisplay.tsx @@ -1,19 +1,20 @@ import { Theme, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { Trans } from '@lingui/react/macro'; +import { IconLock } from 'twenty-ui/display'; const StyledContainer = styled.div<{ theme: Theme }>` align-items: center; - display: flex; + display: inline-flex; - background: ${({ theme }) => theme.background.transparent.lighter}; + background: ${({ theme }) => theme.background.transparent.light}; color: ${({ theme }) => theme.font.color.tertiary}; font-weight: ${({ theme }) => theme.font.weight.regular}; - font-size: ${({ theme }) => theme.font.size.sm}; - padding: ${({ theme }) => theme.spacing(1, 2)}; + font-size: ${({ theme }) => theme.font.size.md}; + padding: ${({ theme }) => theme.spacing(1)}; + gap: ${({ theme }) => theme.spacing(1)}; border-radius: 4px; - border: 1px solid ${({ theme }) => theme.border.color.light}; `; export const ForbiddenFieldDisplay = () => { @@ -21,7 +22,8 @@ export const ForbiddenFieldDisplay = () => { return ( - Forbidden + + Not shared ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/utils/buildRecordInputFromFilter.spec.ts b/packages/twenty-front/src/modules/object-record/record-table/utils/buildRecordInputFromFilter.spec.ts index c4a623ca4115..4f01b64ce528 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/utils/buildRecordInputFromFilter.spec.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/utils/buildRecordInputFromFilter.spec.ts @@ -229,6 +229,7 @@ describe('buildValueFromFilter', () => { dateFormat: null, timeFormat: null, timeZone: null, + userEmail: 'userEmail', }; const testCases = [ diff --git a/packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchRecordQuery.test.tsx b/packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchRecordQuery.test.tsx index 98eae3f7c6ed..ae02a841fed1 100644 --- a/packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchRecordQuery.test.tsx +++ b/packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchRecordQuery.test.tsx @@ -74,6 +74,7 @@ describe('useFilteredSearchRecordQuery', () => { name: { firstName: 'John', lastName: 'Connor' }, locale: 'en', colorScheme: 'Light', + userEmail: 'userEmail', }); const setMetadataItems = useSetRecoilState(objectMetadataItemsState); diff --git a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentWorkspaceMemberPickerDropdown.tsx b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentWorkspaceMemberPickerDropdown.tsx index c0c9e8be46ce..eb38a9edfb83 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentWorkspaceMemberPickerDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentWorkspaceMemberPickerDropdown.tsx @@ -6,6 +6,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent 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 { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; import { useLingui } from '@lingui/react/macro'; import { ChangeEvent, useState } from 'react'; @@ -38,7 +39,7 @@ export const SettingsRoleAssignmentWorkspaceMemberPickerDropdown = ({ const { t } = useLingui(); return ( - + - {enrichedWorkspaceMembers.map((workspaceMember) => ( - onSelect(workspaceMember)} - avatar={{ - type: 'rounded', - size: 'md', - placeholder: workspaceMember?.name.firstName ?? '', - placeholderColorSeed: workspaceMember?.id, - avatarUrl: workspaceMember?.avatarUrl, - }} - text={workspaceMember?.name.firstName ?? ''} - /> - ))} + {enrichedWorkspaceMembers.map((workspaceMember) => { + const workspaceMemberFullName = `${workspaceMember?.name.firstName ?? ''} ${workspaceMember?.name.lastName ?? ''}`; + + return ( + onSelect(workspaceMember)} + avatar={{ + type: 'rounded', + size: 'md', + placeholder: workspaceMemberFullName, + placeholderColorSeed: workspaceMember.id, + avatarUrl: workspaceMember.avatarUrl, + }} + text={workspaceMemberFullName} + contextualText={workspaceMember.userEmail} + /> + ); + })} ); }; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelectFieldSelectDropdownContent.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelectFieldSelectDropdownContent.tsx index 14becaadd390..20fec115333f 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelectFieldSelectDropdownContent.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelectFieldSelectDropdownContent.tsx @@ -10,6 +10,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; @@ -77,7 +78,7 @@ export const MatchColumnSelectFieldSelectDropdownContent = ({ const { t } = useLingui(); return ( - + + ({ const workspaceMember: Omit< WorkspaceMember, - 'createdAt' | 'updatedAt' | 'userId' | 'userEmail' + 'createdAt' | 'updatedAt' | 'userId' > = { __typename: 'WorkspaceMember', id: 'id', @@ -25,6 +25,7 @@ const workspaceMember: Omit< }, locale: 'en', colorScheme: 'System', + userEmail: 'userEmail', }; describe('useColorScheme', () => { diff --git a/packages/twenty-front/src/testing/mock-data/workspace-members.ts b/packages/twenty-front/src/testing/mock-data/workspace-members.ts index e711832ea9da..d555bbad4510 100644 --- a/packages/twenty-front/src/testing/mock-data/workspace-members.ts +++ b/packages/twenty-front/src/testing/mock-data/workspace-members.ts @@ -45,6 +45,7 @@ export const mockCurrentWorkspaceMembers: CurrentWorkspaceMember[] = dateFormat, timeFormat, timeZone, + userEmail, }) => ({ id, locale, @@ -54,5 +55,6 @@ export const mockCurrentWorkspaceMembers: CurrentWorkspaceMember[] = dateFormat, timeFormat, timeZone, + userEmail, }), ); diff --git a/packages/twenty-server/src/engine/core-modules/user/services/workspace-member-transpiler.service.ts b/packages/twenty-server/src/engine/core-modules/user/services/workspace-member-transpiler.service.ts index 2e2359eeedc2..8331a424cb26 100644 --- a/packages/twenty-server/src/engine/core-modules/user/services/workspace-member-transpiler.service.ts +++ b/packages/twenty-server/src/engine/core-modules/user/services/workspace-member-transpiler.service.ts @@ -63,7 +63,7 @@ export class WorkspaceMemberTranspiler { } = workspaceMemberEntity; const avatarUrl = this.generateSignedAvatarUrl({ - workspaceId: userWorkspace.id, + workspaceId: userWorkspace.workspaceId, workspaceMember: { avatarUrl: avatarUrlFromEntity, id, diff --git a/packages/twenty-ui/src/input/button/components/Button/Button.tsx b/packages/twenty-ui/src/input/button/components/Button/Button.tsx index 8292d413de7c..53e13cda9e51 100644 --- a/packages/twenty-ui/src/input/button/components/Button/Button.tsx +++ b/packages/twenty-ui/src/input/button/components/Button/Button.tsx @@ -293,7 +293,9 @@ const StyledButton = styled('button', { }` : 'none'}; color: ${!inverted - ? theme.font.color.danger + ? !disabled + ? theme.font.color.danger + : theme.color.red20 : theme.font.color.inverted}; &:hover { background: ${!inverted diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx index a352b4a2e7f5..a153e1e1e83f 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx @@ -1,19 +1,15 @@ import { useTheme } from '@emotion/react'; -import { - Avatar, - AvatarProps, - IconChevronRight, - OverflowingTextWithTooltip, -} from '@ui/display'; +import { Avatar, AvatarProps, IconChevronRight } from '@ui/display'; import { LightIconButtonGroup } from '@ui/input'; import { MenuItemIconButton } from '@ui/navigation/menu-item/components/MenuItem'; -import { MouseEvent } from 'react'; +import { MenuItemLeftContent } from '@ui/navigation/menu-item/internals/components/MenuItemLeftContent'; +import { MouseEvent, ReactNode } from 'react'; +import { isDefined } from 'twenty-shared/utils'; import { StyledHoverableMenuItemBase, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; import { MenuItemAccent } from '../types/MenuItemAccent'; -import { isDefined } from 'twenty-shared/utils'; export type MenuItemAvatarProps = { accent?: MenuItemAccent; @@ -31,6 +27,7 @@ export type MenuItemAvatarProps = { testId?: string; text: string; hasSubMenu?: boolean; + contextualText?: ReactNode; }; // TODO: merge with MenuItem @@ -46,6 +43,7 @@ export const MenuItemAvatar = ({ avatar, hasSubMenu = false, text, + contextualText, }: MenuItemAvatarProps) => { const theme = useTheme(); const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0; @@ -69,16 +67,22 @@ export const MenuItemAvatar = ({ onMouseLeave={onMouseLeave} > - {isDefined(avatar) && ( - - )} - + + ) : undefined + } + text={text} + contextualText={contextualText} + />
{showIconButtons && (