Skip to content
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

Merged
merged 11 commits into from
Dec 19, 2024
Merged

Conversation

nklmantey
Copy link
Contributor

@nklmantey nklmantey commented Nov 21, 2024

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

  • Number field preview not updating when changing decimals or number type (e.g., percentage)

Recording
https://www.loom.com/share/14a30f67266d4a08a694c759ae06b0f3?sid=c0de35ef-9982-438b-b822-94ed106f6891

Fixes #8663
Fixes #8556

Copy link
Contributor

@greptile-apps greptile-apps bot left a 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

Comment on lines 14 to 15
const value = type === 'percentage'
? `${formatNumber(numericValue, decimals)}%`
Copy link
Contributor

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);
Copy link
Contributor

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,
Copy link
Contributor

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.

isDefined(fieldTypeConfig.exampleValue)
) {
return fieldTypeConfig.exampleValue;
const fieldTypeConfig = getSettingsFieldTypeConfig(fieldMetadataItem.type as SettingsFieldType);
Copy link
Contributor

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;
Copy link
Contributor

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

@guillim
Copy link
Contributor

guillim commented Nov 22, 2024

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 ?

🙏

@nklmantey
Copy link
Contributor Author

@guillim I have synced it now

Copy link
Contributor

@guillim guillim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Broken address preview value Screenshot 2024-11-22 at 17 31 47

import { isDefined } from '~/utils/isDefined';
import { FieldMetadataType } from '~/generated-metadata/graphql';

const DEFAULT_NUMBER_PREVIEW_VALUE = 2000;
Copy link
Contributor

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 ?

Copy link
Contributor Author

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

@charlesBochet
Copy link
Member

@nklmantey Thanks for the PR, I've followed a different approach, feel free to take a look :)

@charlesBochet charlesBochet merged commit e84176d into twentyhq:main Dec 19, 2024
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

Preview : Inline Settings not reactive
4 participants