bruno
bruno copied to clipboard
usebruno
feat: manual sort for query parameters
Description
Fixes #2053
Adds sorting capabilities to the request query parameters. It uses react-dnd internally. Sorting happens already while hovering other items, but changes are only permanent if the request object is saved.
I moved the rendering of the individual table rows into a dedicated file for better separation. Let me know if I should revert this and move everything back into the index.js.
I'm not 100% happy with the solution as it requires copy & paste if this kind of sorting should apply to other components. I see a valid use-case adding this to request headers, vars and asserts as well. It would be possible to move some of the logic into a common utils location, but this increases complexity about the internal workings due to abstraction. If this is the way forward I can refactor here a bit.
Handle Icon
See my comment below for alternative icon proposals, feedback is very much appreciated.
Drag & Drop in Action
https://github.com/usebruno/bruno/assets/1665841/04bbdb29-2480-4bb5-a744-cbe72616cea5
Looks
Light Theme
Dark Theme
Contribution Checklist:
- [x] The pull request only addresses one issue or adds one feature.
- [x] The pull request does not introduce any breaking changes
- [x] I have added screenshots or gifs to help explain the change if applicable.
- [x] I have read the contribution guidelines.
- [x] Create an issue and link to the pull request.
I would be thankful for feedback about the used icon, not sure if this is the best fitting one.
Here are some alternative proposals.
@krummbar Can you review the PR #2641 (It's from @Pragadesh-45 who works at Bruno)
I feel the UX there is much better rather than having to use a full column for the drag icon. The drag handle (a line) appears only when you hover over the row, and when you hover over the drag handle - it becomes bigger allowing the user to click and drag.
The PR #2641 also includes support for adjusting the column width by dragging
