Add a CARD layout to the Field widget #16995
Conversation
|
🚀 Preview Environment Ready! Your preview environment is available at: http://bore.pub:8513 This environment will automatically shut down when the PR is closed or after 5 hours. |
Devessier
changed the title
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 18 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationCard.tsx">
<violation number="1" location="packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationCard.tsx:70">
P2: The `useUpdateOneObjectRecordMutation` function is recreated on every render, causing the `FieldContext.Provider` value to change and trigger unnecessary re-renders in child components. Consider memoizing this function with `useCallback` to maintain referential stability.</violation>
</file>
<file name="packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx">
<violation number="1" location="packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx:53">
P2: Removing `targetRecord.id` and `isInRightDrawer` from `instanceId` may cause state collision issues. If the same widget displays different records (e.g., main view vs right drawer), they will now share Recoil state for hover position and edit mode. Consider keeping the record and drawer context in the instance ID for proper state isolation:
```javascript
const instanceId = `${widget.id}-${targetRecord.id}${isInRightDrawer ? '-right-drawer' : ''}`;
```</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| objectNameSingular: targetRecord.targetObjectNameSingular, | ||
| }); | ||
|
|
||
| const useUpdateOneObjectRecordMutation = () => { |
There was a problem hiding this comment.
P2: The useUpdateOneObjectRecordMutation function is recreated on every render, causing the FieldContext.Provider value to change and trigger unnecessary re-renders in child components. Consider memoizing this function with useCallback to maintain referential stability.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationCard.tsx, line 70:
<comment>The `useUpdateOneObjectRecordMutation` function is recreated on every render, causing the `FieldContext.Provider` value to change and trigger unnecessary re-renders in child components. Consider memoizing this function with `useCallback` to maintain referential stability.</comment>
<file context>
@@ -0,0 +1,169 @@
+ objectNameSingular: targetRecord.targetObjectNameSingular,
+ });
+
+ const useUpdateOneObjectRecordMutation = () => {
+ const updateEntity = ({
+ variables,
</file context>
packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
Outdated
Show resolved
Hide resolved
…omponents/FieldsWidget.tsx Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
![sentry[bot]](https://avatars.githubusercontent.com/u/1396951?s=60&v=4){kind=small}
| const { onSubmit } = useContext(FieldInputEventContext); | ||
|
|
||
| const { openModal } = useModal(); | ||
| const { isInRightDrawer } = useIsInRightDrawerOrThrow(); | ||
|
|
||
| const { relationType, objectMetadataNameSingular } = | ||
| fieldDefinition.metadata as FieldRelationMetadata; |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| const useUpdateOneObjectRecordMutation = () => { | ||
| const updateEntity = ({ | ||
| variables, | ||
| }: { | ||
| variables: { | ||
| where: { id: string }; | ||
| updateOneRecordInput: Record<string, unknown>; | ||
| }; | ||
| }) => { | ||
| updateOneRecord?.({ | ||
| idToUpdate: variables.where.id, | ||
| updateOneRecordInput: variables.updateOneRecordInput, | ||
| }); | ||
| }; | ||
| return [updateEntity, { loading: false }] as [ | ||
| (params: any) => void, | ||
| { loading: boolean }, | ||
| ]; | ||
| }; |
There was a problem hiding this comment.
The useUpdateOneObjectRecordMutation function is defined inline and returns a tuple with an any type for the first element. This loose typing reduces type safety. Consider defining a proper type for the mutation function parameters and return value to improve type safety.
| const [expandedItem, setExpandedItem] = useState(''); | ||
| const targetRecord = useTargetRecord(); | ||
|
|
||
| const instanceId = getFieldWidgetInstanceId({ |
There was a problem hiding this comment.
naming: I feel it's more generate than get
|
Hey @Devessier! After you've done the QA of your Pull Request, you can mark it as done here. Thank you! |
1 similar comment
|
Hey @Devessier! After you've done the QA of your Pull Request, you can mark it as done here. Thank you! |
Closes twentyhq/core-team-issues#1943
Demo
CleanShot.2026-01-08.at.11.40.55.mp4