-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reactive form preview #8663
Reactive form preview #8663
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PR Summary
Implemented real-time preview updates for number fields in the Data Model Editor, focusing on immediate UI feedback when modifying field settings.
- Fixed percentage display in
NumberFieldDisplay.tsx
by removing incorrect *100 multiplication - Added settings watch functionality in
SettingsDataModelFieldNumberSettingsFormCard.tsx
for live preview updates - Modified
getFieldPreviewValue.ts
to handle number fields with a default preview value of 2000 - Extended
fieldMetadataItem
type to include settings property for better type safety - Simplified field preview logic by removing redundant utility functions while maintaining core functionality
3 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings | Greptile
const value = type === 'percentage' | ||
? `${formatNumber(numericValue, decimals)}%` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
logic: Percentage values should be multiplied by 100 before display. The old code correctly did Number(fieldValue) * 100
, but this was removed. This will cause percentages to display incorrectly (e.g. 0.5 will show as '0.5%' instead of '50%').
|
||
if (!fieldValue) return <NumberDisplay value={null} />; | ||
|
||
const numericValue = Number(fieldValue); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Consider handling invalid number conversion (NaN) cases here
fieldMetadataItem={fieldMetadataItem} | ||
fieldMetadataItem={{ | ||
...fieldMetadataItem, | ||
settings: settings || fieldMetadataItem.settings, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
logic: The fallback to fieldMetadataItem.settings could be undefined if both settings are undefined, potentially causing runtime issues
fieldMetadataItem: Pick< | ||
FieldMetadataItem, | ||
'type' | 'defaultValue' | 'settings' | ||
>; |
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
isDefined(fieldTypeConfig.exampleValue) | ||
) { | ||
return fieldTypeConfig.exampleValue; | ||
const fieldTypeConfig = getSettingsFieldTypeConfig(fieldMetadataItem.type as SettingsFieldType); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
logic: Type assertion to SettingsFieldType may be unsafe if fieldMetadataItem.type is not a valid SettingsFieldType
const fieldTypeConfig = getSettingsFieldTypeConfig(fieldMetadataItem.type as SettingsFieldType); | ||
|
||
if (fieldMetadataItem.type === FieldMetadataType.Number) { | ||
return fieldTypeConfig.exampleValue || 2000; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Magic number 2000 should be defined as a constant with meaningful name
Thanks for your work. I will be reviewing it. Could you first pull the latest version of main branch : I was working on a small fix today : https://github.com/twentyhq/twenty/pull/8684/files ? 🙏 |
@guillim I have synced it now |
.../src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import { isDefined } from '~/utils/isDefined'; | ||
import { FieldMetadataType } from '~/generated-metadata/graphql'; | ||
|
||
const DEFAULT_NUMBER_PREVIEW_VALUE = 2000; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here, you define something that is specific to Number.
However, this preview helper is agnositc (neutral) of its children.
Consequence is that if you look at an adress preview, it is now broken. Maybe you can find a way to make it ok for all kind of fieldMetadataItem types ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
alright, will look into this
c8da726
to
f8571c1
Compare
f8571c1
to
62445c2
Compare
@nklmantey Thanks for the PR, I've followed a different approach, feel free to take a look :) |
Description
This PR fixes issues with field previews not updating immediately when settings are changed in the Data Model Editor. The changes affect number field types, ensuring that the preview updates in real-time as settings are modified.
Fixed Issues
Recording
https://www.loom.com/share/14a30f67266d4a08a694c759ae06b0f3?sid=c0de35ef-9982-438b-b822-94ed106f6891
Fixes #8663Fixes #8556