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

feat: Revamp navigation bar (#6031)

Browse Source 
closes: #4428

Testing for fetchMoreRecords is pending, along with component tests

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Aditya Pimpalkar
2024-07-16 13:38:17 +01:00
committed by GitHub
parent a8dfff3a6d
commit 4a67cfa1c3
66 changed files with 1056 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
View File

@ -1,7 +1,7 @@
import { useContext } from 'react';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { format } from 'date-fns';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { Avatar, AvatarGroup, IconArrowRight, IconLock } from 'twenty-ui';
@ -14,8 +14,8 @@ import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEv
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CalendarChannelVisibility } from '~/generated/graphql';
import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
import { CalendarChannelVisibility } from '~/generated/graphql';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
import { isDefined } from '~/utils/isDefined';
@ -169,7 +169,9 @@ export const CalendarEventRow = ({
? `${participant.firstName} ${participant.lastName}`
: participant.displayName
}
entityId={participant.workspaceMemberId ?? participant.personId}
placeholderColorSeed={
participant.workspaceMemberId ?? participant.personId
}
type="rounded"
/>
))}

2
packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
View File

@ -62,7 +62,7 @@ export const CommentHeader = ({ comment, actionBar }: CommentHeaderProps) => {
<Avatar
avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
size="md"
entityId={author?.id}
placeholderColorSeed={author?.id}
placeholder={authorName}
/>
<StyledName>{authorName}</StyledName>

6
packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -1,6 +1,6 @@
import { useMemo, useRef } from 'react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { useMemo, useRef } from 'react';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { Avatar, IconNotes, IconSparkles } from 'twenty-ui';
@ -377,7 +377,7 @@ export const CommandMenu = () => {
<Avatar
type="rounded"
avatarUrl={null}
entityId={person.id}
placeholderColorSeed={person.id}
placeholder={
person.name.firstName +
' ' +
@ -399,7 +399,7 @@ export const CommandMenu = () => {
to={`object/company/${company.id}`}
Icon={() => (
<Avatar
entityId={company.id}
placeholderColorSeed={company.id}
placeholder={company.name}
avatarUrl={getLogoUrlFromDomainName(
company.domainName,

2
packages/twenty-front/src/modules/favorites/components/Favorites.tsx
View File

@ -80,7 +80,7 @@ export const Favorites = () => {
label={labelIdentifier}
Icon={() => (
<StyledAvatar
entityId={recordId}
placeholderColorSeed={recordId}
avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
type={avatarType}
placeholder={labelIdentifier}

17
packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx
View File

@ -1,11 +1,10 @@
import React, { useMemo } from 'react';
import React from 'react';
import { useRecoilValue } from 'recoil';
import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
import { PreComputedChipGeneratorsContext } from '@/object-metadata/context/PreComputedChipGeneratorsContext';
import { PreComputedChipGeneratorsProvider } from '@/object-metadata/components/PreComputedChipGeneratorsProvider';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { getRecordChipGeneratorPerObjectPerField } from '@/object-record/utils/getRecordChipGeneratorPerObjectPerField';
import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
export const ObjectMetadataItemsProvider = ({
@ -15,23 +14,15 @@ export const ObjectMetadataItemsProvider = ({
const shouldDisplayChildren = objectMetadataItems.length > 0;
const chipGeneratorPerObjectPerField = useMemo(() => {
return getRecordChipGeneratorPerObjectPerField(objectMetadataItems);
}, [objectMetadataItems]);
return (
<>
<ObjectMetadataItemsLoadEffect />
{shouldDisplayChildren ? (
<PreComputedChipGeneratorsContext.Provider
value={{
chipGeneratorPerObjectPerField,
}}
>
<PreComputedChipGeneratorsProvider>
<RelationPickerScope relationPickerScopeId="relation-picker">
{children}
</RelationPickerScope>
</PreComputedChipGeneratorsContext.Provider>
</PreComputedChipGeneratorsProvider>
) : (
<UserOrMetadataLoader />
)}

30
packages/twenty-front/src/modules/object-metadata/components/PreComputedChipGeneratorsProvider.tsx Normal file
View File

@ -0,0 +1,30 @@
import React, { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { PreComputedChipGeneratorsContext } from '@/object-metadata/context/PreComputedChipGeneratorsContext';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { getRecordChipGenerators } from '@/object-record/utils/getRecordChipGenerators';
export const PreComputedChipGeneratorsProvider = ({
children,
}: React.PropsWithChildren) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const { chipGeneratorPerObjectPerField, identifierChipGeneratorPerObject } =
useMemo(() => {
return getRecordChipGenerators(objectMetadataItems);
}, [objectMetadataItems]);
return (
<>
<PreComputedChipGeneratorsContext.Provider
value={{
chipGeneratorPerObjectPerField,
identifierChipGeneratorPerObject,
}}
>
{children}
</PreComputedChipGeneratorsContext.Provider>
</>
);
};

10
packages/twenty-front/src/modules/object-metadata/context/PreComputedChipGeneratorsContext.ts
View File

@ -3,13 +3,19 @@ import { createContext } from 'react';
import { RecordChipData } from '@/object-record/record-field/types/RecordChipData';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
export type ChipGeneratorPerObjectPerField = Record<
export type ChipGeneratorPerObjectNameSingularPerFieldName = Record<
string,
Record<string, (record: ObjectRecord) => RecordChipData>
>;
export type IdentifierChipGeneratorPerObject = Record<
string,
(record: ObjectRecord) => RecordChipData
>;
export type PreComputedChipGeneratorsContextProps = {
chipGeneratorPerObjectPerField: ChipGeneratorPerObjectPerField;
chipGeneratorPerObjectPerField: ChipGeneratorPerObjectNameSingularPerFieldName;
identifierChipGeneratorPerObject: IdentifierChipGeneratorPerObject;
};
export const PreComputedChipGeneratorsContext =

4
packages/twenty-front/src/modules/object-metadata/utils/getLabelIdentifierFieldValue.ts
View File

@ -8,7 +8,7 @@ export const getLabelIdentifierFieldValue = (
record: ObjectRecord,
labelIdentifierFieldMetadataItem: FieldMetadataItem | undefined,
objectNameSingular: string,
) => {
): string => {
if (
objectNameSingular === CoreObjectNameSingular.WorkspaceMember ||
labelIdentifierFieldMetadataItem?.type === FieldMetadataType.FullName
@ -17,7 +17,7 @@ export const getLabelIdentifierFieldValue = (
}
if (isDefined(labelIdentifierFieldMetadataItem?.name)) {
return record[labelIdentifierFieldMetadataItem.name] as string | number;
return String(record[labelIdentifierFieldMetadataItem.name]);
}
return '';

2
packages/twenty-front/src/modules/object-metadata/utils/getLinkToShowPage.ts
View File

@ -4,7 +4,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
export const getLinkToShowPage = (
objectNameSingular: string,
record: ObjectRecord,
record: Pick<ObjectRecord, 'id'>,
) => {
const basePathToShowPage = getBasePathToShowPage({
objectNameSingular,

36
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
View File

@ -1,13 +1,17 @@
import { EntityChip, EntityChipVariant } from 'twenty-ui';
import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { isNonEmptyString } from '@sniptt/guards';
import { MouseEvent } from 'react';
import { useNavigate } from 'react-router-dom';
export type RecordChipProps = {
objectNameSingular: string;
record: ObjectRecord;
className?: string;
variant?: EntityChipVariant;
variant?: AvatarChipVariant;
};
export const RecordChip = ({
@ -16,19 +20,29 @@ export const RecordChip = ({
className,
variant,
}: RecordChipProps) => {
const { mapToObjectRecordIdentifier } = useMapToObjectRecordIdentifier({
const navigate = useNavigate();
const { recordChipData } = useRecordChipData({
objectNameSingular,
record,
});
const objectRecordIdentifier = mapToObjectRecordIdentifier(record);
const handleAvatarChipClick = (event: MouseEvent) => {
const linkToShowPage = getLinkToShowPage(objectNameSingular, record);
if (isNonEmptyString(linkToShowPage)) {
event.stopPropagation();
navigate(linkToShowPage);
}
};
return (
<EntityChip
entityId={record.id}
name={objectRecordIdentifier.name}
avatarType={objectRecordIdentifier.avatarType}
avatarUrl={objectRecordIdentifier.avatarUrl ?? ''}
linkToEntity={objectRecordIdentifier.linkToShowPage}
<AvatarChip
placeholderColorSeed={record.id}
name={recordChipData.name}
avatarType={recordChipData.avatarType}
avatarUrl={recordChipData.avatarUrl ?? ''}
onClick={handleAvatarChipClick}
className={className}
variant={variant}
/>

6
packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlOperationVariables.ts
View File

@ -1,8 +1,14 @@
import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy';
import { QueryCursorDirection } from '@/object-record/utils/generateFindManyRecordsQuery';
export type RecordGqlOperationVariables = {
filter?: RecordGqlOperationFilter;
orderBy?: RecordGqlOperationOrderBy;
limit?: number;
cursorFilter?: {
cursor: string;
cursorDirection: QueryCursorDirection;
limit: number;
};
};

2
packages/twenty-front/src/modules/object-record/hooks/useFetchAllRecordIds.ts
View File

@ -38,7 +38,7 @@ export const useFetchAllRecordIds = <T>({
const firstQueryResult =
findManyRecordsDataResult?.data?.[objectMetadataItem.namePlural];
const totalCount = firstQueryResult?.totalCount ?? 1;
const totalCount = firstQueryResult?.totalCount ?? 0;
const recordsCount = firstQueryResult?.edges.length ?? 0;

11
packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts
View File

@ -34,6 +34,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
fetchPolicy,
onError,
onCompleted,
cursorFilter,
}: UseFindManyRecordsParams<T>) => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { objectMetadataItem } = useObjectMetadataItem({
@ -42,6 +43,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
const { findManyRecordsQuery } = useFindManyRecordsQuery({
objectNameSingular,
recordGqlFields,
cursorDirection: cursorFilter?.cursorDirection,
});
const { handleFindManyRecordsError } = useHandleFindManyRecordsError({
@ -67,15 +69,16 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
skip: skip || !objectMetadataItem || !currentWorkspaceMember,
variables: {
filter,
limit,
orderBy,
lastCursor: cursorFilter?.cursor ?? undefined,
limit: cursorFilter?.limit ?? limit,
},
fetchPolicy: fetchPolicy,
onCompleted: handleFindManyRecordsCompleted,
onError: handleFindManyRecordsError,
});
const { fetchMoreRecords, totalCount, records, hasNextPage } =
const { fetchMoreRecords, records, hasNextPage } =
useFetchMoreRecordsWithPagination<T>({
objectNameSingular,
filter,
@ -87,6 +90,9 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
objectMetadataItem,
});
const pageInfo = data?.[objectMetadataItem.namePlural].pageInfo;
const totalCount = data?.[objectMetadataItem.namePlural].totalCount;
return {
objectMetadataItem,
records,
@ -96,5 +102,6 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
fetchMoreRecords,
queryStateIdentifier: queryIdentifier,
hasNextPage,
pageInfo,
};
};

8
packages/twenty-front/src/modules/object-record/hooks/useFindManyRecordsQuery.ts
View File

@ -3,16 +3,21 @@ import { useRecoilValue } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { RecordGqlOperationGqlRecordFields } from '@/object-record/graphql/types/RecordGqlOperationGqlRecordFields';
import { generateFindManyRecordsQuery } from '@/object-record/utils/generateFindManyRecordsQuery';
import {
generateFindManyRecordsQuery,
QueryCursorDirection,
} from '@/object-record/utils/generateFindManyRecordsQuery';
export const useFindManyRecordsQuery = ({
objectNameSingular,
recordGqlFields,
computeReferences,
cursorDirection = 'after',
}: {
objectNameSingular: string;
recordGqlFields?: RecordGqlOperationGqlRecordFields;
computeReferences?: boolean;
cursorDirection?: QueryCursorDirection;
}) => {
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
@ -25,6 +30,7 @@ export const useFindManyRecordsQuery = ({
objectMetadataItems,
recordGqlFields,
computeReferences,
cursorDirection,
});
return {

24
packages/twenty-front/src/modules/object-record/hooks/useRecordChipData.ts Normal file
View File

@ -0,0 +1,24 @@
import { PreComputedChipGeneratorsContext } from '@/object-metadata/context/PreComputedChipGeneratorsContext';
import { generateDefaultRecordChipData } from '@/object-metadata/utils/generateDefaultRecordChipData';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { useContext } from 'react';
export const useRecordChipData = ({
objectNameSingular,
record,
}: {
objectNameSingular: string;
record: ObjectRecord;
}) => {
const { identifierChipGeneratorPerObject } = useContext(
PreComputedChipGeneratorsContext,
);
const generateRecordChipData =
identifierChipGeneratorPerObject[objectNameSingular] ??
generateDefaultRecordChipData;
const recordChipData = generateRecordChipData(record);
return { recordChipData };
};

6
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
View File

@ -1,4 +1,4 @@
import { EntityChip, IconComponent } from 'twenty-ui';
import { AvatarChip, IconComponent } from 'twenty-ui';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
@ -13,8 +13,8 @@ export const GenericEntityFilterChip = ({
filter,
Icon,
}: GenericEntityFilterChipProps) => (
<EntityChip
entityId={filter.value}
<AvatarChip
placeholderColorSeed={filter.value}
name={filter.displayValue}
avatarType="rounded"
avatarUrl={getImageAbsoluteURIOrBase64(filter.displayAvatarUrl) || ''}

10
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

@ -1,10 +1,9 @@
import styled from '@emotion/styled';
import { ReactNode, useContext, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import styled from '@emotion/styled';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { EntityChipVariant, IconEye } from 'twenty-ui';
import { AvatarChipVariant, IconEye } from 'twenty-ui';
import { RecordChip } from '@/object-record/components/RecordChip';
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
@ -14,6 +13,7 @@ import {
RecordUpdateHookParams,
} from '@/object-record/record-field/contexts/FieldContext';
import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon';
import { RecordIndexRecordChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
@ -222,10 +222,10 @@ export const RecordBoardCard = () => {
}}
>
<StyledBoardCardHeader showCompactView={isCompactModeActive}>
<RecordChip
<RecordIndexRecordChip
objectNameSingular={objectMetadataItem.nameSingular}
record={record}
variant={EntityChipVariant.Transparent}
variant={AvatarChipVariant.Transparent}
/>
{isCompactModeActive && (
<StyledCompactIconContainer className="compact-icon-container">

3
packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx
View File

@ -4,14 +4,13 @@ import { BooleanFieldDisplay } from '@/object-record/record-field/meta-types/dis
import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/display/components/LinksFieldDisplay';
import { RatingFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RatingFieldDisplay';
import { RelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay';
import { isFieldChipDisplay } from '@/object-record/record-field/meta-types/display/utils/isFieldChipDisplay';
import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
import { isFieldRating } from '@/object-record/record-field/types/guards/isFieldRating';
import { isFieldRelationFromManyObjects } from '@/object-record/record-field/types/guards/isFieldRelationFromManyObjects';
import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
import { isFieldChipDisplay } from '@/object-record/utils/getRecordChipGeneratorPerObjectPerField';
import { FieldContext } from '../contexts/FieldContext';
import { AddressFieldDisplay } from '../meta-types/display/components/AddressFieldDisplay';
import { ChipFieldDisplay } from '../meta-types/display/components/ChipFieldDisplay';

22
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
View File

@ -1,23 +1,21 @@
import { EntityChip } from 'twenty-ui';
import { RecordChip } from '@/object-record/components/RecordChip';
import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay';
import { RecordIndexRecordChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
export const ChipFieldDisplay = () => {
const { recordValue, generateRecordChipData } = useChipFieldDisplay();
const { recordValue, objectNameSingular, isLabelIdentifier } =
useChipFieldDisplay();
if (!recordValue) {
return null;
}
const recordChipData = generateRecordChipData(recordValue);
return (
<EntityChip
entityId={recordValue.id}
name={recordChipData.name as any}
avatarType={recordChipData.avatarType}
avatarUrl={recordChipData.avatarUrl ?? ''}
linkToEntity={recordChipData.linkToShowPage}
return isLabelIdentifier ? (
<RecordIndexRecordChip
objectNameSingular={objectNameSingular}
record={recordValue}
/>
) : (
<RecordChip objectNameSingular={objectNameSingular} record={recordValue} />
);
};

32
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay.tsx
View File

@ -1,37 +1,27 @@
import { EntityChip } from 'twenty-ui';
import { RecordChip } from '@/object-record/components/RecordChip';
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
import { useRelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRelationFromManyFieldDisplay';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
export const RelationFromManyFieldDisplay = () => {
const { fieldValue, fieldDefinition, generateRecordChipData } =
useRelationFromManyFieldDisplay();
const { fieldValue, fieldDefinition } = useRelationFromManyFieldDisplay();
const { isFocused } = useFieldFocus();
if (
!fieldValue ||
!fieldDefinition?.metadata.relationObjectMetadataNameSingular
) {
const relationObjectNameSingular =
fieldDefinition?.metadata.relationObjectMetadataNameSingular;
if (!fieldValue || !relationObjectNameSingular) {
return null;
}
const recordChipsData = fieldValue.map((fieldValueItem) =>
generateRecordChipData(fieldValueItem),
);
return (
<ExpandableList isChipCountDisplayed={isFocused}>
{recordChipsData.map((record) => {
{fieldValue.map((record) => {
return (
<EntityChip
key={record.recordId}
entityId={record.recordId}
name={record.name as any}
avatarType={record.avatarType}
avatarUrl={getImageAbsoluteURIOrBase64(record.avatarUrl) || ''}
linkToEntity={record.linkToShowPage}
<RecordChip
key={record.id}
objectNameSingular={relationObjectNameSingular}
record={record}
/>
);
})}

14
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationToOneFieldDisplay.tsx
View File

@ -1,7 +1,5 @@
import { EntityChip } from 'twenty-ui';
import { RecordChip } from '@/object-record/components/RecordChip';
import { useRelationToOneFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRelationToOneFieldDisplay';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
export const RelationToOneFieldDisplay = () => {
const { fieldValue, fieldDefinition, generateRecordChipData } =
@ -17,12 +15,10 @@ export const RelationToOneFieldDisplay = () => {
const recordChipData = generateRecordChipData(fieldValue);
return (
<EntityChip
entityId={fieldValue.id}
name={recordChipData.name as any}
avatarType={recordChipData.avatarType}
avatarUrl={getImageAbsoluteURIOrBase64(recordChipData.avatarUrl) || ''}
linkToEntity={recordChipData.linkToShowPage}
<RecordChip
key={recordChipData.recordId}
objectNameSingular={recordChipData.objectNameSingular}
record={fieldValue}
/>
);
};

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/utils/isFieldChipDisplay.ts Normal file
View File

@ -0,0 +1,11 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
export const isFieldChipDisplay = (
field: Pick<FieldMetadataItem, 'type'>,
isLabelIdentifier: boolean,
) =>
isLabelIdentifier &&
(isFieldText(field) || isFieldFullName(field) || isFieldNumber(field));

15
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
View File

@ -1,8 +1,7 @@
import { useContext } from 'react';
import { isNonEmptyString } from '@sniptt/guards';
import { useContext } from 'react';
import { PreComputedChipGeneratorsContext } from '@/object-metadata/context/PreComputedChipGeneratorsContext';
import { generateDefaultRecordChipData } from '@/object-metadata/utils/generateDefaultRecordChipData';
import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
@ -12,7 +11,8 @@ import { isDefined } from '~/utils/isDefined';
import { FieldContext } from '../../contexts/FieldContext';
export const useChipFieldDisplay = () => {
const { entityId, fieldDefinition } = useContext(FieldContext);
const { entityId, fieldDefinition, isLabelIdentifier } =
useContext(FieldContext);
const { chipGeneratorPerObjectPerField } = useContext(
PreComputedChipGeneratorsContext,
@ -31,18 +31,13 @@ export const useChipFieldDisplay = () => {
const recordValue = useRecordValue(entityId);
if (!isNonEmptyString(fieldDefinition.metadata.objectMetadataNameSingular)) {
if (!isNonEmptyString(objectNameSingular)) {
throw new Error('Object metadata name singular is not a non-empty string');
}
const generateRecordChipData =
chipGeneratorPerObjectPerField[
fieldDefinition.metadata.objectMetadataNameSingular
]?.[fieldDefinition.metadata.fieldName] ?? generateDefaultRecordChipData;
return {
objectNameSingular,
recordValue,
generateRecordChipData,
isLabelIdentifier,
};
};

6
packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts Normal file
View File

@ -0,0 +1,6 @@
import { createState } from 'twenty-ui';
export const lastShowPageRecordIdState = createState<string | null>({
key: 'lastShowPageRecordIdState',
defaultValue: null,
});

6
packages/twenty-front/src/modules/object-record/record-field/states/recordPositionInternalState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createState } from 'twenty-ui';
export const recordPositionInternalState = createState<number | null>({
key: 'recordPositionInternalState',
defaultValue: null,
});

5
packages/twenty-front/src/modules/object-record/record-field/types/RecordChipData.ts
View File

@ -2,8 +2,9 @@ import { AvatarType } from 'twenty-ui';
export type RecordChipData = {
recordId: string;
name: string | number;
name: string;
avatarType: AvatarType;
avatarUrl: string;
linkToShowPage: string;
isLabelIdentifier: boolean;
objectNameSingular: string;
};

150
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
View File

@ -1,15 +1,24 @@
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
import {
useRecoilCallback,
useRecoilState,
useRecoilValue,
useSetRecoilState,
} from 'recoil';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { RecordIndexBoardContainer } from '@/object-record/record-index/components/RecordIndexBoardContainer';
import { RecordIndexBoardDataLoader } from '@/object-record/record-index/components/RecordIndexBoardDataLoader';
import { RecordIndexBoardDataLoaderEffect } from '@/object-record/record-index/components/RecordIndexBoardDataLoaderEffect';
import { RecordIndexTableContainer } from '@/object-record/record-index/components/RecordIndexTableContainer';
import { RecordIndexTableContainerEffect } from '@/object-record/record-index/components/RecordIndexTableContainerEffect';
import { RecordIndexViewBarEffect } from '@/object-record/record-index/components/RecordIndexViewBarEffect';
import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext';
import { RecordIndexOptionsDropdown } from '@/object-record/record-index/options/components/RecordIndexOptionsDropdown';
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
@ -17,15 +26,22 @@ import { recordIndexIsCompactModeActiveState } from '@/object-record/record-inde
import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState';
import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
import { useFindRecordCursorFromFindManyCacheRootQuery } from '@/object-record/record-show/hooks/useFindRecordCursorFromFindManyCacheRootQuery';
import { findView } from '@/object-record/record-show/hooks/useRecordShowPagePagination';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
import { ViewBar } from '@/views/components/ViewBar';
import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
import { View } from '@/views/types/View';
import { ViewField } from '@/views/types/ViewField';
import { ViewType } from '@/views/types/ViewType';
import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
import { useNavigate } from 'react-router-dom';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
const StyledContainer = styled.div`
@ -108,6 +124,63 @@ export const RecordIndexContainer = ({
[columnDefinitions, setTableColumns],
);
const navigate = useNavigate();
const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
const currentViewId = useRecoilValue(
currentViewIdComponentState({
scopeId: recordIndexId,
}),
);
const view = findView({
objectMetadataItemId: objectMetadataItem?.id ?? '',
viewId: currentViewId ?? null,
views,
});
const filter = turnObjectDropdownFilterIntoQueryFilter(
mapViewFiltersToFilters(view?.viewFilters ?? [], filterDefinitions),
objectMetadataItem?.fields ?? [],
);
const orderBy = turnSortsIntoOrderBy(
objectMetadataItem,
mapViewSortsToSorts(view?.viewSorts ?? [], sortDefinitions),
);
const { findCursorInCache } = useFindRecordCursorFromFindManyCacheRootQuery({
fieldVariables: {
filter,
orderBy,
},
objectNamePlural: objectNamePlural,
});
const handleIndexIdentifierClick = (recordId: string) => {
const cursor = findCursorInCache(recordId);
// TODO: use URL builder
navigate(
`/object/${objectNameSingular}/${recordId}?view=${currentViewId}`,
{
state: {
cursor,
},
},
);
};
const handleIndexRecordsLoaded = useRecoilCallback(
({ set }) =>
() => {
// TODO: find a better way to reset this state ?
set(lastShowPageRecordIdState, null);
},
[],
);
return (
<StyledContainer>
<RecordFieldValueSelectorContextProvider>
@ -153,41 +226,46 @@ export const RecordIndexContainer = ({
/>
</StyledContainerWithPadding>
</SpreadsheetImportProvider>
{recordIndexViewType === ViewType.Table && (
<>
<RecordIndexTableContainer
recordTableId={recordIndexId}
viewBarId={recordIndexId}
objectNameSingular={objectNameSingular}
createRecord={createRecord}
/>
<RecordIndexTableContainerEffect
objectNameSingular={objectNameSingular}
recordTableId={recordIndexId}
viewBarId={recordIndexId}
/>
</>
)}
{recordIndexViewType === ViewType.Kanban && (
<StyledContainerWithPadding>
<RecordIndexBoardContainer
recordBoardId={recordIndexId}
viewBarId={recordIndexId}
objectNameSingular={objectNameSingular}
createRecord={createRecord}
/>
<RecordIndexBoardDataLoader
objectNameSingular={objectNameSingular}
recordBoardId={recordIndexId}
/>
<RecordIndexBoardDataLoaderEffect
objectNameSingular={objectNameSingular}
recordBoardId={recordIndexId}
/>
</StyledContainerWithPadding>
)}
<RecordIndexEventContext.Provider
value={{
onIndexIdentifierClick: handleIndexIdentifierClick,
onIndexRecordsLoaded: handleIndexRecordsLoaded,
}}
>
{recordIndexViewType === ViewType.Table && (
<>
<RecordIndexTableContainer
recordTableId={recordIndexId}
viewBarId={recordIndexId}
objectNameSingular={objectNameSingular}
createRecord={createRecord}
/>
<RecordIndexTableContainerEffect
objectNameSingular={objectNameSingular}
recordTableId={recordIndexId}
viewBarId={recordIndexId}
/>
</>
)}
{recordIndexViewType === ViewType.Kanban && (
<StyledContainerWithPadding>
<RecordIndexBoardContainer
recordBoardId={recordIndexId}
viewBarId={recordIndexId}
objectNameSingular={objectNameSingular}
createRecord={createRecord}
/>
<RecordIndexBoardDataLoader
objectNameSingular={objectNameSingular}
recordBoardId={recordIndexId}
/>
<RecordIndexBoardDataLoaderEffect
objectNameSingular={objectNameSingular}
recordBoardId={recordIndexId}
/>
</StyledContainerWithPadding>
)}
</RecordIndexEventContext.Provider>
</RecordFieldValueSelectorContextProvider>
</StyledContainer>
);

40
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx Normal file
View File

@ -0,0 +1,40 @@
import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { useContext } from 'react';
export type RecordIndexRecordChipProps = {
objectNameSingular: string;
record: ObjectRecord;
variant?: AvatarChipVariant;
};
export const RecordIndexRecordChip = ({
objectNameSingular,
record,
variant,
}: RecordIndexRecordChipProps) => {
const { onIndexIdentifierClick } = useContext(RecordIndexEventContext);
const { recordChipData } = useRecordChipData({
objectNameSingular,
record,
});
const handleAvatarChipClick = () => {
onIndexIdentifierClick(record.id);
};
return (
<AvatarChip
placeholderColorSeed={record.id}
name={recordChipData.name}
avatarType={recordChipData.avatarType}
avatarUrl={recordChipData.avatarUrl ?? ''}
onClick={handleAvatarChipClick}
variant={variant}
/>
);
};

9
packages/twenty-front/src/modules/object-record/record-index/contexts/RecordIndexEventContext.tsx Normal file
View File

@ -0,0 +1,9 @@
import { createEventContext } from '~/utils/createEventContext';
export type RecordIndexEventContextProps = {
onIndexIdentifierClick: (recordId: string) => void;
onIndexRecordsLoaded: () => void;
};
export const RecordIndexEventContext =
createEventContext<RecordIndexEventContextProps>();

34
packages/twenty-front/src/modules/object-record/record-show/hooks/useFindRecordCursorFromFindManyCacheRootQuery.ts Normal file
View File

@ -0,0 +1,34 @@
import { RecordGqlRefEdge } from '@/object-record/cache/types/RecordGqlRefEdge';
import { useApolloClient } from '@apollo/client';
import { createApolloStoreFieldName } from '~/utils/createApolloStoreFieldName';
export const useFindRecordCursorFromFindManyCacheRootQuery = ({
objectNamePlural,
fieldVariables,
}: {
objectNamePlural: string;
fieldVariables: {
filter: any;
orderBy: any;
};
}) => {
const apollo = useApolloClient();
const testsFieldNameOnRootQuery = createApolloStoreFieldName({
fieldName: objectNamePlural,
fieldVariables: fieldVariables,
});
const findCursorInCache = (recordId: string) => {
const extractedCache = apollo.cache.extract() as any;
const edgesInCache =
extractedCache?.['ROOT_QUERY']?.[testsFieldNameOnRootQuery]?.edges ?? [];
return edgesInCache.find(
(edge: RecordGqlRefEdge) => edge.node?.__ref.split(':')[1] === recordId,
)?.cursor;
};
return { findCursorInCache };
};

30
packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordIdsFromFindManyCacheRootQuery.ts Normal file
View File

@ -0,0 +1,30 @@
import { RecordGqlRefEdge } from '@/object-record/cache/types/RecordGqlRefEdge';
import { useApolloClient } from '@apollo/client';
import { createApolloStoreFieldName } from '~/utils/createApolloStoreFieldName';
export const useRecordIdsFromFindManyCacheRootQuery = ({
objectNamePlural,
fieldVariables,
}: {
objectNamePlural: string;
fieldVariables: {
filter: any;
orderBy: any;
};
}) => {
const apollo = useApolloClient();
const testsFieldNameOnRootQuery = createApolloStoreFieldName({
fieldName: objectNamePlural,
fieldVariables: fieldVariables,
});
const extractedCache = apollo.cache.extract() as any;
const recordIdsInCache: string[] =
extractedCache?.['ROOT_QUERY']?.[testsFieldNameOnRootQuery]?.edges?.map(
(edge: RecordGqlRefEdge) => edge.node?.__ref.split(':')[1],
) ?? [];
return { recordIdsInCache };
};

253
packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts Normal file
View File

@ -0,0 +1,253 @@
/* eslint-disable @nx/workspace-no-navigate-prefer-link */
import { useMemo, useState } from 'react';
import {
useLocation,
useNavigate,
useParams,
useSearchParams,
} from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { formatFieldMetadataItemsAsFilterDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { formatFieldMetadataItemsAsSortDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions';
import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { useRecordIdsFromFindManyCacheRootQuery } from '@/object-record/record-show/hooks/useRecordIdsFromFindManyCacheRootQuery';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
import { View } from '@/views/types/View';
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
import { isNonEmptyString } from '@sniptt/guards';
import { capitalize } from '~/utils/string/capitalize';
export const findView = ({
viewId,
objectMetadataItemId,
views,
}: {
viewId: string | null;
objectMetadataItemId: string;
views: View[];
}) => {
if (!viewId) {
return views.find(
(view: any) =>
view.key === 'INDEX' && view?.objectMetadataId === objectMetadataItemId,
) as View;
} else {
return views.find(
(view: any) =>
view?.id === viewId && view?.objectMetadataId === objectMetadataItemId,
) as View;
}
};
export const useRecordShowPagePagination = (
propsObjectNameSingular: string,
propsObjectRecordId: string,
) => {
const {
objectNameSingular: paramObjectNameSingular,
objectRecordId: paramObjectRecordId,
} = useParams();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const viewIdQueryParam = searchParams.get('view');
const setLastShowPageRecordId = useSetRecoilState(lastShowPageRecordIdState);
const [isLoadedRecords, setIsLoadedRecords] = useState(false);
const objectNameSingular = propsObjectNameSingular || paramObjectNameSingular;
const objectRecordId = propsObjectRecordId || paramObjectRecordId;
if (!objectNameSingular || !objectRecordId) {
throw new Error('Object name or Record id is not defined');
}
const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular });
const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
const view = useMemo(() => {
return findView({
objectMetadataItemId: objectMetadataItem?.id ?? '',
viewId: viewIdQueryParam,
views,
});
}, [viewIdQueryParam, objectMetadataItem, views]);
const activeFieldMetadataItems = useMemo(
() =>
objectMetadataItem
? objectMetadataItem.fields.filter(
({ isActive, isSystem }) => isActive && !isSystem,
)
: [],
[objectMetadataItem],
);
const filterDefinitions = formatFieldMetadataItemsAsFilterDefinitions({
fields: activeFieldMetadataItems,
});
const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
fields: activeFieldMetadataItems,
});
const filter = turnObjectDropdownFilterIntoQueryFilter(
mapViewFiltersToFilters(view?.viewFilters ?? [], filterDefinitions),
objectMetadataItem?.fields ?? [],
);
const orderBy = turnSortsIntoOrderBy(
objectMetadataItem,
mapViewSortsToSorts(view?.viewSorts ?? [], sortDefinitions),
);
const recordGqlFields = generateDepthOneRecordGqlFields({
objectMetadataItem,
});
const { state } = useLocation();
const cursorFromIndexPage = state.cursor;
const { loading: loadingCurrentRecord, pageInfo: currentRecordsPageInfo } =
useFindManyRecords({
filter: {
id: { eq: objectRecordId },
},
orderBy,
skip: isLoadedRecords,
limit: 1,
objectNameSingular,
recordGqlFields,
});
const currentRecordCursor = currentRecordsPageInfo?.endCursor;
const cursor = cursorFromIndexPage ?? currentRecordCursor;
const {
loading: loadingRecordBefore,
records: recordsBefore,
pageInfo: pageInfoBefore,
totalCount: totalCountBefore,
} = useFindManyRecords({
filter,
orderBy,
skip: isLoadedRecords,
cursorFilter: isNonEmptyString(cursor)
? {
cursorDirection: 'before',
cursor: cursor,
limit: 1,
}
: undefined,
objectNameSingular,
recordGqlFields,
});
const {
loading: loadingRecordAfter,
records: recordsAfter,
pageInfo: pageInfoAfter,
totalCount: totalCountAfter,
} = useFindManyRecords({
filter,
orderBy,
skip: isLoadedRecords,
cursorFilter: cursor
? {
cursorDirection: 'after',
cursor: cursor,
limit: 1,
}
: undefined,
objectNameSingular,
recordGqlFields,
});
const totalCount = Math.max(totalCountBefore ?? 0, totalCountAfter ?? 0);
const loading =
loadingRecordAfter || loadingRecordBefore || loadingCurrentRecord;
const isThereARecordBefore = recordsBefore.length > 0;
const isThereARecordAfter = recordsAfter.length > 0;
const recordBefore = recordsBefore[0];
const recordAfter = recordsAfter[0];
const recordBeforeCursor = pageInfoBefore?.endCursor;
const recordAfterCursor = pageInfoAfter?.endCursor;
const navigateToPreviousRecord = () => {
navigate(
`/object/${objectNameSingular}/${recordBefore.id}${
viewIdQueryParam ? `?view=${viewIdQueryParam}` : ''
}`,
{
state: {
cursor: recordBeforeCursor,
},
},
);
};
const navigateToNextRecord = () => {
navigate(
`/object/${objectNameSingular}/${recordAfter.id}${
viewIdQueryParam ? `?view=${viewIdQueryParam}` : ''
}`,
{
state: {
cursor: recordAfterCursor,
},
},
);
};
const navigateToIndexView = () => {
const indexPath = `/objects/${objectMetadataItem.namePlural}${
viewIdQueryParam ? `?view=${viewIdQueryParam}` : ''
}`;
setLastShowPageRecordId(objectRecordId);
navigate(indexPath);
};
const { recordIdsInCache } = useRecordIdsFromFindManyCacheRootQuery({
objectNamePlural: objectMetadataItem.namePlural,
fieldVariables: {
filter,
orderBy,
},
});
const rankInView = recordIdsInCache.findIndex((id) => id === objectRecordId);
const rankFoundInFiew = rankInView > -1;
const objectLabel = capitalize(objectMetadataItem.namePlural);
const viewNameWithCount = rankFoundInFiew
? `${rankInView + 1} of ${totalCount} in ${objectLabel}`
: `${objectLabel} (${totalCount})`;
return {
viewName: viewNameWithCount,
hasPreviousRecord: isThereARecordBefore,
isLoadingPagination: loading,
hasNextRecord: isThereARecordAfter,
navigateToPreviousRecord,
navigateToNextRecord,
navigateToIndexView,
};
};

3
packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View File

@ -21,6 +21,7 @@ const StyledTable = styled.table`
`;
type RecordTableProps = {
viewBarId: string;
recordTableId: string;
objectNameSingular: string;
onColumnsChange: (columns: any) => void;
@ -28,6 +29,7 @@ type RecordTableProps = {
};
export const RecordTable = ({
viewBarId,
recordTableId,
objectNameSingular,
onColumnsChange,
@ -68,6 +70,7 @@ export const RecordTable = ({
<RecordTableContextProvider
objectNameSingular={objectNameSingular}
recordTableId={recordTableId}
viewBarId={viewBarId}
>
<RecordTableBodyEffect />
{!isRecordTableInitialLoading &&

3
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContextProvider.tsx
View File

@ -18,10 +18,12 @@ import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocus
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
export const RecordTableContextProvider = ({
viewBarId,
recordTableId,
objectNameSingular,
children,
}: {
viewBarId: string;
recordTableId: string;
objectNameSingular: string;
children: ReactNode;
@ -90,6 +92,7 @@ export const RecordTableContextProvider = ({
return (
<RecordTableContext.Provider
value={{
viewBarId,
objectMetadataItem,
onUpsertRecord: handleUpsertRecord,
onOpenTableCell: handleOpenTableCell,

2
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx
View File

@ -33,7 +33,7 @@ export const RecordTableInternalEffect = ({
callback: () => {
leaveTableFocus();
},
mode: ClickOutsideMode.comparePixels,
mode: ClickOutsideMode.compareHTMLRef,
});
useScopedHotkeys(

1
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -76,6 +76,7 @@ export const RecordTableWithWrappers = ({
<StyledTableContainer>
<StyledTableInternalContainer ref={tableBodyRef}>
<RecordTable
viewBarId={viewBarId}
recordTableId={recordTableId}
objectNameSingular={objectNameSingular}
onColumnsChange={handleColumnsChange}

1
packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
View File

@ -64,6 +64,7 @@ const meta: Meta = {
<RecordFieldValueSelectorContextProvider>
<RecordTableContext.Provider
value={{
viewBarId: mockPerformance.entityId,
objectMetadataItem: mockPerformance.objectMetadataItem as any,
onUpsertRecord: () => {},
onOpenTableCell: () => {},

1
packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableContext.ts
View File

@ -9,6 +9,7 @@ import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocus
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
export type RecordTableContextProps = {
viewBarId: string;
objectMetadataItem: ObjectMetadataItem;
onUpsertRecord: ({
persistField,

48
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx
View File

@ -1,7 +1,8 @@
import { useContext, useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { useContext, useEffect, useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useDebouncedCallback } from 'use-debounce';
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
@ -11,11 +12,17 @@ import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetch
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { isNonEmptyString } from '@sniptt/guards';
import { useScrollRestoration } from '~/hooks/useScrollRestoration';
import { useScrollToPosition } from '~/hooks/useScrollToPosition';
export const ROW_HEIGHT = 32;
export const RecordTableBodyEffect = () => {
const { objectNameSingular } = useContext(RecordTableContext);
const [hasInitializedScroll, setHasInitiazedScroll] = useState(false);
const {
fetchMoreRecords: fetchMoreObjects,
records,
@ -76,9 +83,44 @@ export const RecordTableBodyEffect = () => {
}
}, [scrollLeft, setIsRecordTableScrolledLeft]);
const rowHeight = 32;
const rowHeight = ROW_HEIGHT;
const viewportHeight = records.length * rowHeight;
const [lastShowPageRecordId, setLastShowPageRecordId] = useRecoilState(
lastShowPageRecordIdState,
);
const { scrollToPosition } = useScrollToPosition();
useEffect(() => {
if (isNonEmptyString(lastShowPageRecordId) && !hasInitializedScroll) {
const isRecordAlreadyFetched = records.some(
(record) => record.id === lastShowPageRecordId,
);
if (isRecordAlreadyFetched) {
const recordPosition = records.findIndex(
(record) => record.id === lastShowPageRecordId,
);
const positionInPx = recordPosition * ROW_HEIGHT;
scrollToPosition(positionInPx);
setHasInitiazedScroll(true);
}
}
}, [
loading,
isFetchingMoreObjects,
lastShowPageRecordId,
fetchMoreObjects,
records,
scrollToPosition,
hasInitializedScroll,
setLastShowPageRecordId,
]);
useScrollRestoration(viewportHeight);
useEffect(() => {

11
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts
View File

@ -1,4 +1,3 @@
import { useNavigate } from 'react-router-dom';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useInitDraftValueV2 } from '@/object-record/record-field/hooks/useInitDraftValueV2';
@ -21,6 +20,8 @@ import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useC
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { isDefined } from '~/utils/isDefined';
import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext';
import { useContext } from 'react';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
export const DEFAULT_CELL_SCOPE: HotkeyScope = {
@ -40,13 +41,13 @@ export type OpenTableCellArgs = {
};
export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
const { onIndexIdentifierClick } = useContext(RecordIndexEventContext);
const moveEditModeToTableCellPosition =
useMoveEditModeToTableCellPosition(tableScopeId);
const setHotkeyScope = useSetHotkeyScope();
const { setDragSelectionStartEnabled } = useDragSelect();
const navigate = useNavigate();
const leaveTableFocus = useLeaveTableFocus(tableScopeId);
const { toggleClickOutsideListener } = useClickOutsideListener(
SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
@ -66,7 +67,6 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
initialValue,
cellPosition,
isReadOnly,
pathToShowPage,
objectNameSingular,
customCellHotkeyScope,
fieldDefinition,
@ -94,7 +94,8 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
if (isFirstColumnCell && !isEmpty && !isActionButtonClick) {
leaveTableFocus();
navigate(pathToShowPage);
onIndexIdentifierClick(entityId);
return;
}
@ -142,7 +143,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
openRightDrawer,
setViewableRecordId,
setViewableRecordNameSingular,
navigate,
onIndexIdentifierClick,
],
);

13
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx
View File

@ -1,10 +1,11 @@
import { ReactNode, useContext } from 'react';
import { useInView } from 'react-intersection-observer';
import { useTheme } from '@emotion/react';
import { Draggable } from '@hello-pangea/dnd';
import { ReactNode, useContext, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import { useRecoilValue } from 'recoil';
import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
@ -23,6 +24,7 @@ export const RecordTableRowWrapper = ({
children: ReactNode;
}) => {
const { objectMetadataItem } = useContext(RecordTableContext);
const { onIndexRecordsLoaded } = useContext(RecordIndexEventContext);
const theme = useTheme();
@ -38,6 +40,13 @@ export const RecordTableRowWrapper = ({
rootMargin: '1000px',
});
// TODO: find a better way to emit this event
useEffect(() => {
if (inView) {
onIndexRecordsLoaded?.();
}
}, [inView, onIndexRecordsLoaded]);
return (
<Draggable key={recordId} draggableId={recordId} index={rowIndex}>
{(draggableProvided, draggableSnapshot) => (

2
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
View File

@ -66,7 +66,7 @@ export const MultipleObjectRecordSelectItem = ({
avatar={
<Avatar
avatarUrl={getImageAbsoluteURIOrBase64(recordIdentifier.avatarUrl)}
entityId={objectRecordId}
placeholderColorSeed={objectRecordId}
placeholder={recordIdentifier.name}
size="md"
type={recordIdentifier.avatarType ?? 'rounded'}

2
packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
View File

@ -41,7 +41,7 @@ export const SelectableMenuItemSelect = ({
avatar={
<Avatar
avatarUrl={getImageAbsoluteURIOrBase64(entity.avatarUrl)}
entityId={entity.id}
placeholderColorSeed={entity.id}
placeholder={entity.name}
size="md"
type={entity.avatarType ?? 'rounded'}

2
packages/twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx
View File

@ -70,7 +70,7 @@ export const MultipleRecordSelectDropdown = ({
avatar={
<Avatar
avatarUrl={getImageAbsoluteURIOrBase64(record.avatarUrl)}
entityId={record.id}
placeholderColorSeed={record.id}
placeholder={record.name}
size="md"
type={record.avatarType ?? 'rounded'}

18
packages/twenty-front/src/modules/object-record/utils/generateFindManyRecordsQuery.ts
View File

@ -1,21 +1,24 @@
import gql from 'graphql-tag';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { isAggregationEnabled } from '@/object-metadata/utils/isAggregationEnabled';
import { mapObjectMetadataToGraphQLQuery } from '@/object-metadata/utils/mapObjectMetadataToGraphQLQuery';
import { RecordGqlOperationGqlRecordFields } from '@/object-record/graphql/types/RecordGqlOperationGqlRecordFields';
import { capitalize } from '~/utils/string/capitalize';
export type QueryCursorDirection = 'before' | 'after';
export const generateFindManyRecordsQuery = ({
objectMetadataItem,
objectMetadataItems,
recordGqlFields,
computeReferences,
cursorDirection,
}: {
objectMetadataItem: ObjectMetadataItem;
objectMetadataItems: ObjectMetadataItem[];
recordGqlFields?: RecordGqlOperationGqlRecordFields;
computeReferences?: boolean;
cursorDirection?: QueryCursorDirection;
}) => gql`
query FindMany${capitalize(
objectMetadataItem.namePlural,
@ -24,9 +27,11 @@ query FindMany${capitalize(
)}FilterInput, $orderBy: [${capitalize(
objectMetadataItem.nameSingular,
)}OrderByInput], $lastCursor: String, $limit: Int) {
${
objectMetadataItem.namePlural
}(filter: $filter, orderBy: $orderBy, first: $limit, after: $lastCursor){
${objectMetadataItem.namePlural}(filter: $filter, orderBy: $orderBy, ${
cursorDirection === 'before'
? 'last: $limit, before: $lastCursor'
: 'first: $limit, after: $lastCursor'
} ){
edges {
node ${mapObjectMetadataToGraphQLQuery({
objectMetadataItems,
@ -37,11 +42,12 @@ query FindMany${capitalize(
cursor
}
pageInfo {
${isAggregationEnabled(objectMetadataItem) ? 'hasNextPage' : ''}
hasNextPage
hasPreviousPage
startCursor
endCursor
}
${isAggregationEnabled(objectMetadataItem) ? 'totalCount' : ''}
totalCount
}
}
`;

7
packages/twenty-front/src/modules/object-record/utils/getQueryIdentifier.ts
View File

@ -5,7 +5,12 @@ export const getQueryIdentifier = ({
filter,
orderBy,
limit,
cursorFilter,
}: RecordGqlOperationVariables & {
objectNameSingular: string;
}) =>
objectNameSingular + JSON.stringify(filter) + JSON.stringify(orderBy) + limit;
objectNameSingular +
JSON.stringify(filter) +
JSON.stringify(orderBy) +
limit +
(cursorFilter ? JSON.stringify(cursorFilter) : undefined);

116
packages/twenty-front/src/modules/object-record/utils/getRecordChipGeneratorPerObjectPerField.ts
View File

@ -1,116 +0,0 @@
import { ChipGeneratorPerObjectPerField } from '@/object-metadata/context/PreComputedChipGeneratorsContext';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getAvatarType } from '@/object-metadata/utils/getAvatarType';
import { getAvatarUrl } from '@/object-metadata/utils/getAvatarUrl';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
import { getLabelIdentifierFieldValue } from '@/object-metadata/utils/getLabelIdentifierFieldValue';
import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
import { RecordChipData } from '@/object-record/record-field/types/RecordChipData';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
export const isFieldChipDisplay = (
field: Pick<FieldMetadataItem, 'type'>,
isLabelIdentifier: boolean,
) =>
isLabelIdentifier &&
(isFieldText(field) || isFieldFullName(field) || isFieldNumber(field));
export const getRecordChipGeneratorPerObjectPerField = (
objectMetadataItems: ObjectMetadataItem[],
) => {
const recordChipGeneratorPerObjectPerField: ChipGeneratorPerObjectPerField =
{};
for (const objectMetadataItem of objectMetadataItems) {
const generatorPerField = Object.fromEntries<
(record: ObjectRecord) => RecordChipData
>(
objectMetadataItem.fields
.filter(
(fieldMetadataItem) =>
isLabelIdentifierField({
fieldMetadataItem: fieldMetadataItem,
objectMetadataItem,
}) ||
fieldMetadataItem.type === FieldMetadataType.Relation ||
isFieldChipDisplay(
fieldMetadataItem,
isLabelIdentifierField({
fieldMetadataItem: fieldMetadataItem,
objectMetadataItem,
}),
),
)
.map((fieldMetadataItem) => {
const objectNameSingularToFind = isLabelIdentifierField({
fieldMetadataItem: fieldMetadataItem,
objectMetadataItem: objectMetadataItem,
})
? objectMetadataItem.nameSingular
: isFieldRelation(fieldMetadataItem)
? fieldMetadataItem.relationDefinition?.targetObjectMetadata
.nameSingular ?? undefined
: undefined;
const objectMetadataItemToUse = objectMetadataItems.find(
(objectMetadataItem) =>
objectMetadataItem.nameSingular === objectNameSingularToFind,
);
if (
!isDefined(objectMetadataItemToUse) ||
!isDefined(objectNameSingularToFind)
) {
return ['', () => ({}) as any];
}
const labelIdentifierFieldMetadataItem =
getLabelIdentifierFieldMetadataItem(objectMetadataItemToUse);
const imageIdentifierFieldMetadata =
objectMetadataItemToUse.fields.find(
(field) =>
field.id ===
objectMetadataItemToUse.imageIdentifierFieldMetadataId,
);
const avatarType = getAvatarType(objectNameSingularToFind);
return [
fieldMetadataItem.name,
(record: ObjectRecord) => ({
recordId: record.id,
name: getLabelIdentifierFieldValue(
record,
labelIdentifierFieldMetadataItem,
objectMetadataItemToUse.nameSingular,
),
avatarUrl: getAvatarUrl(
objectMetadataItemToUse.nameSingular,
record,
imageIdentifierFieldMetadata,
),
avatarType,
linkToShowPage: getLinkToShowPage(
objectMetadataItemToUse.nameSingular,
record,
),
}),
];
}),
);
recordChipGeneratorPerObjectPerField[objectMetadataItem.nameSingular] =
generatorPerField;
}
return recordChipGeneratorPerObjectPerField;
};

120
packages/twenty-front/src/modules/object-record/utils/getRecordChipGenerators.ts Normal file
View File

@ -0,0 +1,120 @@
import {
ChipGeneratorPerObjectNameSingularPerFieldName,
IdentifierChipGeneratorPerObject,
} from '@/object-metadata/context/PreComputedChipGeneratorsContext';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getAvatarType } from '@/object-metadata/utils/getAvatarType';
import { getAvatarUrl } from '@/object-metadata/utils/getAvatarUrl';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
import { getLabelIdentifierFieldValue } from '@/object-metadata/utils/getLabelIdentifierFieldValue';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { isFieldChipDisplay } from '@/object-record/record-field/meta-types/display/utils/isFieldChipDisplay';
import { RecordChipData } from '@/object-record/record-field/types/RecordChipData';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
export const getRecordChipGenerators = (
objectMetadataItems: ObjectMetadataItem[],
) => {
const chipGeneratorPerObjectPerField: ChipGeneratorPerObjectNameSingularPerFieldName =
{};
const identifierChipGeneratorPerObject: IdentifierChipGeneratorPerObject = {};
for (const objectMetadataItem of objectMetadataItems) {
const labelIdentifierFieldMetadataItem =
getLabelIdentifierFieldMetadataItem(objectMetadataItem);
const generatorPerField = Object.fromEntries<
(record: ObjectRecord) => RecordChipData
>(
objectMetadataItem.fields
.filter(
(fieldMetadataItem) =>
labelIdentifierFieldMetadataItem?.id === fieldMetadataItem.id ||
fieldMetadataItem.type === FieldMetadataType.Relation ||
isFieldChipDisplay(
fieldMetadataItem,
isLabelIdentifierField({
fieldMetadataItem: fieldMetadataItem,
objectMetadataItem,
}),
),
)
.map((fieldMetadataItem) => {
const isLabelIdentifier =
labelIdentifierFieldMetadataItem?.id === fieldMetadataItem.id;
const currentObjectNameSingular = objectMetadataItem.nameSingular;
const fieldRelationObjectNameSingular =
fieldMetadataItem.relationDefinition?.targetObjectMetadata
.nameSingular ?? undefined;
const objectNameSingularToFind = isLabelIdentifier
? currentObjectNameSingular
: fieldRelationObjectNameSingular;
const objectMetadataItemToUse = objectMetadataItems.find(
(objectMetadataItem) =>
objectMetadataItem.nameSingular === objectNameSingularToFind,
);
if (
!isDefined(objectMetadataItemToUse) ||
!isDefined(objectNameSingularToFind)
) {
return ['', () => ({}) as any];
}
const labelIdentifierFieldMetadataItemToUse =
getLabelIdentifierFieldMetadataItem(objectMetadataItemToUse);
const imageIdentifierFieldMetadataToUse =
objectMetadataItemToUse.fields.find(
(field) =>
field.id ===
objectMetadataItemToUse.imageIdentifierFieldMetadataId,
);
const avatarType = getAvatarType(objectNameSingularToFind);
return [
fieldMetadataItem.name,
(record: ObjectRecord) =>
({
recordId: record.id,
name: getLabelIdentifierFieldValue(
record,
labelIdentifierFieldMetadataItemToUse,
objectMetadataItemToUse.nameSingular,
),
avatarUrl: getAvatarUrl(
objectMetadataItemToUse.nameSingular,
record,
imageIdentifierFieldMetadataToUse,
),
avatarType,
isLabelIdentifier,
objectNameSingular: objectNameSingularToFind,
}) satisfies RecordChipData,
];
}),
);
chipGeneratorPerObjectPerField[objectMetadataItem.nameSingular] =
generatorPerField;
if (isDefined(labelIdentifierFieldMetadataItem)) {
identifierChipGeneratorPerObject[objectMetadataItem.nameSingular] =
chipGeneratorPerObjectPerField[objectMetadataItem.nameSingular]?.[
labelIdentifierFieldMetadataItem.name
];
}
}
return {
chipGeneratorPerObjectPerField,
identifierChipGeneratorPerObject,
};
};

56
packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
View File

@ -4,14 +4,15 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import {
IconChevronLeft,
IconChevronDown,
IconChevronUp,
IconComponent,
IconX,
MOBILE_VIEWPORT,
OverflowingTextWithTooltip,
} from 'twenty-ui';
import { IconButton } from '@/ui/input/button/components/IconButton';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -53,6 +54,7 @@ const StyledLeftContainer = styled.div`
const StyledTitleContainer = styled.div`
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.medium};
margin-left: ${({ theme }) => theme.spacing(1)};
max-width: 50%;
`;
@ -61,6 +63,7 @@ const StyledTopBarIconStyledTitleContainer = styled.div`
align-items: center;
display: flex;
flex: 1 0 auto;
gap: ${({ theme }) => theme.spacing(1)};
flex-direction: row;
`;
@ -89,7 +92,13 @@ const StyledSkeletonLoader = () => {
type PageHeaderProps = ComponentProps<'div'> & {
title: string;
hasBackButton?: boolean;
hasClosePageButton?: boolean;
onClosePage?: () => void;
hasPaginationButtons?: boolean;
hasPreviousRecord?: boolean;
hasNextRecord?: boolean;
navigateToPreviousRecord?: () => void;
navigateToNextRecord?: () => void;
Icon: IconComponent;
children?: ReactNode;
loading?: boolean;
@ -97,7 +106,13 @@ type PageHeaderProps = ComponentProps<'div'> & {
export const PageHeader = ({
title,
hasBackButton,
hasClosePageButton,
onClosePage,
hasPaginationButtons,
hasPreviousRecord,
hasNextRecord,
navigateToPreviousRecord,
navigateToNextRecord,
Icon,
children,
loading,
@ -114,19 +129,36 @@ export const PageHeader = ({
<NavigationDrawerCollapseButton direction="right" />
</StyledTopBarButtonContainer>
)}
{hasBackButton && (
<UndecoratedLink to={-1}>
<IconButton
Icon={IconChevronLeft}
size="small"
variant="tertiary"
/>
</UndecoratedLink>
{hasClosePageButton && (
<IconButton
Icon={IconX}
size="small"
variant="tertiary"
onClick={() => onClosePage?.()}
/>
)}
{loading ? (
<StyledSkeletonLoader />
) : (
<StyledTopBarIconStyledTitleContainer>
{hasPaginationButtons && (
<>
<IconButton
Icon={IconChevronUp}
size="small"
variant="secondary"
disabled={!hasPreviousRecord}
onClick={() => navigateToPreviousRecord?.()}
/>
<IconButton
Icon={IconChevronDown}
size="small"
variant="secondary"
disabled={!hasNextRecord}
onClick={() => navigateToNextRecord?.()}
/>
</>
)}
{Icon && <Icon size={theme.icon.size.md} />}
<StyledTitleContainer data-testid="top-bar-title">
<OverflowingTextWithTooltip text={title} />

6
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
View File

@ -1,7 +1,7 @@
import { ChangeEvent, ReactNode, useRef } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ChangeEvent, ReactNode, useRef } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { AppTooltip, Avatar, AvatarType } from 'twenty-ui';
import { v4 as uuidV4 } from 'uuid';
@ -124,7 +124,7 @@ export const ShowPageSummaryCard = ({
avatarUrl={logoOrAvatar}
onClick={onUploadPicture ? handleAvatarClick : undefined}
size="xl"
entityId={id}
placeholderColorSeed={id}
placeholder={avatarPlaceholder}
type={avatarType}
/>

6
packages/twenty-front/src/modules/users/components/UserChip.tsx
View File

@ -1,4 +1,4 @@
import { EntityChip } from 'twenty-ui';
import { AvatarChip } from 'twenty-ui';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
@ -9,8 +9,8 @@ export type UserChipProps = {
};
export const UserChip = ({ id, name, avatarUrl }: UserChipProps) => (
<EntityChip
entityId={id}
<AvatarChip
placeholderColorSeed={id}
name={name}
avatarType="rounded"
avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl) || ''}

3
packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx
View File

@ -40,7 +40,7 @@ export const WorkspaceMemberCard = ({
<StyledContainer>
<Avatar
avatarUrl={getImageAbsoluteURIOrBase64(workspaceMember.avatarUrl)}
entityId={workspaceMember.id}
placeholderColorSeed={workspaceMember.id}
placeholder={workspaceMember.name.firstName || ''}
type="squared"
size="xl"
@ -53,7 +53,6 @@ export const WorkspaceMemberCard = ({
/>
<StyledEmailText>{workspaceMember.userEmail}</StyledEmailText>
</StyledContent>
{accessory}
</StyledContainer>
);