Validate mock response body#499
Conversation
Summary of ChangesHello @snappdevelopment, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience for editing and validating mock response bodies by integrating a tabbed interface. Users can now seamlessly switch between a standard text editor and a dedicated JSON validation and pretty-printing view, which also provides immediate feedback on malformed JSON. These changes aim to streamline the process of creating and maintaining accurate mock data. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a valuable feature by adding a validation tab for the mock response body, which will certainly improve the user experience. The implementation is solid, adding tabs to switch between editing and validating the JSON content. My review focuses on a few areas related to UI consistency and theming. I've identified some hardcoded colors that could lead to readability issues in different themes and have provided suggestions to address them.
| Box( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .height(400.dp) | ||
| .background( | ||
| color = FloconTheme.colorPalette.primary, | ||
| shape = FloconTheme.shapes.medium, | ||
| ) | ||
| .padding(vertical = 4.dp, horizontal = 8.dp), | ||
| ) { |
There was a problem hiding this comment.
The FloconJsonTree component uses defaultDarkColors, which are hardcoded and not theme-aware. Placing it inside a Box with a primary background can lead to color clashes and poor readability, especially in a light theme. The ideal solution is to make FloconJsonTree theme-aware. As a workaround, you could remove the background from this Box, but be aware this may create a visual inconsistency between the 'Edit' and 'Validate' tabs.
| Tab( | ||
| text = "Edit", | ||
| isSelected = isEditSelected, | ||
| onSelected = { isEditSelected = true } | ||
| ) | ||
| Tab( | ||
| text = "Validate", | ||
| isSelected = !isEditSelected, | ||
| onSelected = { isEditSelected = false } | ||
| ) |
There was a problem hiding this comment.
The Tab component's implementation uses hardcoded colors (Color.White) for its background, which prevents it from adapting to different application themes (e.g., light vs. dark). It is recommended to refactor the Tab component to use theme-based colors from FloconTheme to ensure visual consistency across the application.
| } else { | ||
| Text( | ||
| text = throwable.localizedMessage, | ||
| style = FloconTheme.typography.bodySmall |
There was a problem hiding this comment.
The parent Box has a primary background color. For correct color contrast and adherence to the theme, the text color should be explicitly set to onPrimary. Since the Text composable is inside this box, its color should be set accordingly.
| style = FloconTheme.typography.bodySmall | |
| style = FloconTheme.typography.bodySmall.copy(color = FloconTheme.colorPalette.onPrimary) |
References
- When a component's background color is
primary, its content color should beonPrimaryfor semantic correctness and to ensure robustness against future theme changes.
| var isEditSelected by remember { mutableStateOf(true) } | ||
|
|
||
| Row(modifier = Modifier.fillMaxWidth()) { | ||
| Tab( |
There was a problem hiding this comment.
could we use a FloconTab ? If does not exist, can we create it ?
There was a problem hiding this comment.
Good idea! It didn't exist yet, but was defined in the same file at the bottom. I moved it to the components and styled the rounded corners a bit differently to get more of a single-choice style.
(Btw feel free to merge my PRs when you approve them. I can't do it myself, because only maintainers have the rights for that)
2 participants
This adds two tabs "Edit" and "Validate" to the mock edit screen. "Edit" shows the regular TextField like before, while "Validate" uses JsonTree to validate the input and display it pretty printed.
Let me know what you think :)
The feature request also asks to pretty print the editable string. This should already work if a json is pasted into the TextField and then saved.
Closes #496