forked from twentyhq/twenty
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixed sync between record value context selector and record store (tw…
…entyhq#5517) This PR introduces many improvements over the new profiling story feature, with new tests and some refactor with main : - Added use-context-selector for getting value faster in display fields and created useRecordFieldValue() hook and RecordValueSetterEffect to synchronize states - Added performance test command in CI - Refactored ExpandableList drill-downs with FieldFocusContext - Refactored field button icon logic into getFieldButtonIcon util - Added RelationFieldDisplay perf story - Added RecordTableCell perf story - First split test of useField.. hook with useRelationFieldDisplay() - Fixed problem with set cell soft focus - Isolated logic between display / soft focus and edit mode in the related components to optimize performances for display mode. - Added warmupRound config for performance story decorator - Added variance in test reporting
- Loading branch information
1 parent
82ec30c
commit de9321d
Showing
47 changed files
with
2,042 additions
and
553 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
packages/twenty-front/src/modules/object-record/record-field/contexts/FieldFocusContext.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { createContext } from 'react'; | ||
|
||
export type FieldFocusContextType = { | ||
isFocused: boolean; | ||
setIsFocused: (isFocused: boolean) => void; | ||
}; | ||
|
||
export const FieldFocusContext = createContext<FieldFocusContextType>( | ||
{} as FieldFocusContextType, | ||
); |
18 changes: 18 additions & 0 deletions
18
...wenty-front/src/modules/object-record/record-field/contexts/FieldFocusContextProvider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { useState } from 'react'; | ||
|
||
import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext'; | ||
|
||
export const FieldFocusContextProvider = ({ children }: any) => { | ||
const [isFocused, setIsFocused] = useState(false); | ||
|
||
return ( | ||
<FieldFocusContext.Provider | ||
value={{ | ||
isFocused, | ||
setIsFocused, | ||
}} | ||
> | ||
{children} | ||
</FieldFocusContext.Provider> | ||
); | ||
}; |
12 changes: 12 additions & 0 deletions
12
packages/twenty-front/src/modules/object-record/record-field/hooks/useFieldFocus.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { useContext } from 'react'; | ||
|
||
import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext'; | ||
|
||
export const useFieldFocus = () => { | ||
const { isFocused, setIsFocused } = useContext(FieldFocusContext); | ||
|
||
return { | ||
isFocused, | ||
setIsFocused, | ||
}; | ||
}; |
27 changes: 3 additions & 24 deletions
27
packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,12 @@ | ||
import { useContext } from 'react'; | ||
import { IconComponent, IconPencil } from 'twenty-ui'; | ||
import { IconComponent } from 'twenty-ui'; | ||
|
||
import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone'; | ||
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks'; | ||
import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/isFieldMultiSelect'; | ||
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; | ||
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; | ||
import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon'; | ||
|
||
import { FieldContext } from '../contexts/FieldContext'; | ||
import { isFieldEmail } from '../types/guards/isFieldEmail'; | ||
import { isFieldLink } from '../types/guards/isFieldLink'; | ||
import { isFieldPhone } from '../types/guards/isFieldPhone'; | ||
|
||
export const useGetButtonIcon = (): IconComponent | undefined => { | ||
const { fieldDefinition } = useContext(FieldContext); | ||
|
||
if (isUndefinedOrNull(fieldDefinition)) return undefined; | ||
|
||
if ( | ||
isFieldLink(fieldDefinition) || | ||
isFieldEmail(fieldDefinition) || | ||
isFieldPhone(fieldDefinition) || | ||
isFieldDisplayedAsPhone(fieldDefinition) || | ||
isFieldMultiSelect(fieldDefinition) || | ||
(isFieldRelation(fieldDefinition) && | ||
fieldDefinition.metadata.relationObjectMetadataNameSingular !== | ||
'workspaceMember') || | ||
isFieldLinks(fieldDefinition) | ||
) { | ||
return IconPencil; | ||
} | ||
return getFieldButtonIcon(fieldDefinition); | ||
}; |
12 changes: 5 additions & 7 deletions
12
packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldEmpty.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 5 additions & 16 deletions
21
...rc/modules/object-record/record-field/meta-types/display/components/LinksFieldDisplay.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,11 @@ | ||
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; | ||
import { useLinksField } from '@/object-record/record-field/meta-types/hooks/useLinksField'; | ||
import { LinksDisplay } from '@/ui/field/display/components/LinksDisplay'; | ||
|
||
type LinksFieldDisplayProps = { | ||
isCellSoftFocused?: boolean; | ||
fromTableCell?: boolean; | ||
}; | ||
|
||
export const LinksFieldDisplay = ({ | ||
isCellSoftFocused, | ||
fromTableCell, | ||
}: LinksFieldDisplayProps) => { | ||
export const LinksFieldDisplay = () => { | ||
const { fieldValue } = useLinksField(); | ||
|
||
return ( | ||
<LinksDisplay | ||
value={fieldValue} | ||
isChipCountDisplayed={isCellSoftFocused} | ||
withExpandedListBorder={fromTableCell} | ||
/> | ||
); | ||
const { isFocused } = useFieldFocus(); | ||
|
||
return <LinksDisplay value={fieldValue} isFocused={isFocused} />; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 4 additions & 4 deletions
8
...modules/object-record/record-field/meta-types/display/components/RelationFieldDisplay.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.