Use JSON visualizer for JSON fields #11428
Conversation
| const getWorkflowRunOutputElements = () => { | ||
| if (!isWorkflowRunOutputField) { | ||
| return []; | ||
| } | ||
|
|
||
| const parsedValue = workflowRunOutputSchema.safeParse( | ||
| JSON.parse(draftValue ?? ''), | ||
| ); | ||
| if (!parsedValue.success) { | ||
| return []; | ||
| } | ||
|
|
||
| return [ | ||
| isDefined(parsedValue.data.error) | ||
| ? { | ||
| id: 'error', | ||
| label: 'error', | ||
| value: parsedValue.data.error as JsonValue, | ||
| } | ||
| : undefined, | ||
| isDefined(parsedValue.data.stepsOutput) | ||
| ? { | ||
| id: 'stepsOutput', | ||
| label: 'stepsOutput', | ||
| value: parsedValue.data.stepsOutput as JsonValue, | ||
| } | ||
| : undefined, | ||
| isDefined(parsedValue.data.flow) | ||
| ? { | ||
| id: 'flow', | ||
| label: 'flow', | ||
| value: parsedValue.data.flow as JsonValue, | ||
| } | ||
| : undefined, | ||
| ].filter(isDefined); | ||
| }; |
There was a problem hiding this comment.
I know this part is hard-coded and adds business logic to the RawJsonFieldInput component which is used all around the application. Do you see a better way of writing that?
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR enhances JSON field inputs by integrating a JSON visualizer with a toggle to a Monaco code editor while also updating theming and editing rules for workflow run outputs.
- RawJsonFieldInput.tsx: Replaces textarea with a JSON visualizer and Monaco editor, reordering workflow run outputs and highlighting errors.
- isFieldValueReadOnly.ts: Adjusts conditions to allow editing for workflow run outputs.
- CodeEditor.tsx: Uses a new variant prop ("with-header") and transparentBackground with BASE_CODE_EDITOR_THEME_ID.
- Index & Theme Files: Re-exports and functions updated to follow the new theming and naming conventions.
- Serverless Function Components: Updated to align with the revised CodeEditor API.
11 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile
| if ( | ||
| objectNameSingular === CoreObjectNameSingular.WorkflowRun && | ||
| fieldName === 'output' | ||
| ) { | ||
| return false; | ||
| } |
There was a problem hiding this comment.
logic: Check ordering: the special case for WorkflowRun output is placed after the isRecordReadOnly check. If the intent is to always allow editing of workflow run outputs, even when the record is flagged as read-only, consider moving this block before the read-only check.
| <JsonTree | ||
| value={isDefined(draftValue) ? JSON.parse(draftValue) : ''} | ||
| emptyArrayLabel={t`Empty Array`} |
There was a problem hiding this comment.
logic: JSON.parse(draftValue) in the non-workflow branch may throw if draftValue is invalid. Consider adding error handling (e.g., try-catch).
| <JsonTree | |
| value={isDefined(draftValue) ? JSON.parse(draftValue) : ''} | |
| emptyArrayLabel={t`Empty Array`} | |
| <JsonTree | |
| value={isDefined(draftValue) ? (() => { try { return JSON.parse(draftValue); } catch { return ''; } })() : ''} | |
| emptyArrayLabel={t`Empty Array`} |
packages/twenty-front/src/modules/object-record/record-field/utils/isFieldValueReadOnly.ts; we want the json visualizer to always be displayed in this specific caseDemo
Failed Workflow Run
CleanShot.2025-04-08.at.11.24.16.mp4
Any JSON field in the record table
CleanShot.2025-04-08.at.11.37.29.mp4
Closes twentyhq/core-team-issues#539