feat: add json editor #4784
feat: add json editor #4784
Conversation
|
@spgandhi is attempting to deploy a commit to the unleash-team Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| value: e.target.value, | ||
| })); | ||
| }} | ||
| placeholder={''} |
There was a problem hiding this comment.
Here we have removed the JSON placeholder because this block won't be used for JSON payload anymore
There was a problem hiding this comment.
This is looking good @spgandhi. Could you also make it match our theme colors in the dark mode? Currently it looks like this which isn't ideal:
| {payload.type === 'json' ? ( | ||
| <Suspense fallback={null}> | ||
| <LazyReactJSONEditor | ||
| content={{ text: payload.value }} | ||
| onChange={content => | ||
| setPayload(payload => { | ||
| return { | ||
| ...payload, | ||
| value: | ||
| 'json' in content | ||
| ? content.json?.toString() || | ||
| '' | ||
| : content.text, | ||
| }; | ||
| }) | ||
| } | ||
| /> | ||
| </Suspense> | ||
| ) : ( | ||
| <StyledInput | ||
| id="variant-payload-value" | ||
| name="variant-payload-value" | ||
| label="Value" | ||
| multiline={payload.type !== 'string'} | ||
| rows={ | ||
| payload.type === 'string' || | ||
| payload.type === 'number' | ||
| ? 1 | ||
| : 4 | ||
| } | ||
| value={payload.value} | ||
| onChange={e => { | ||
| clearError(ErrorField.PAYLOAD); | ||
| setPayload(payload => ({ | ||
| ...payload, | ||
| value: e.target.value, | ||
| })); | ||
| }} | ||
| placeholder={''} |
There was a problem hiding this comment.
We use a ConditionallyRender component to help with readability for conditional renders. Could be used here.
|
@FredrikOseberg made some changes to make the editor more theme compatible. For the hover and focus effect, I see that for inputs, the border width increases from 1px -> 2px on focus. For the JSON Editor, doing this causes the width to change and so looks shaky.So for now I have only updating the colors but not the width 
|
There was a problem hiding this comment.
Very nice! This looks good to me. Thanks for contributing @spgandhi 💯
About the changes
In this PR we are adding a JSON Editor that will be used for
jsonvariant payload type. Its usingvanilla-jsoneditorpackage https://www.npmjs.com/package/vanilla-jsoneditor and is lazy loaded only when thejsonpayload type is selected in the dropdown UI.Feature preview - https://recordit.co/p4Px9DNUIC
Closes #4450
Important files
Discussion points