feat: response filtering

[kobenguyent]

resolves #141

response-filtering.mov

[netlify]

✅ Deploy Preview for chimerical-kitsune-a0bfa0 ready!

Name	Link
🔨 Latest commit	a537dfa
🔍 Latest deploy log	https://app.netlify.com/sites/chimerical-kitsune-a0bfa0/deploys/6642feb25313df000854af29
😎 Deploy Preview	https://deploy-preview-146--chimerical-kitsune-a0bfa0.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[flawiddsouza]

Heyo, looks good.

1. Don't think the filter state needs to be global for this. You can keep it in ResponsePanel.vue itself. The only reason collectionFilter is in state is because the collectionTree and collection are part of state.
   

2. The filter doesn't need to be a textarea unless I'm missing a use case. Currently, you can press enter to add new lines, which might not be needed. You can use input type=text with the full-width-input class to get the default application styling.
   

3. Is it possible to lock the filter at the bottom of the response? The jumping input might not be a good user experience.

4. the response filter appears even on non json responses.
   
   And typing anything in the response filter when this happens, causes the response panel to crash and show a white screen:
   

Otherwise, everything seems good.

[flawiddsouza]

Just found two more things:

1. If there's a really long response, the filter will not be displayed, until you scroll to the bottom of the response:
   

2. If you've filtered the response and send a request, the response does not refresh and keeps showing the old response data until you clear the filter

[kobenguyent]

thanks for your review @flawiddsouza. Addressed all the reported issues.

[flawiddsouza]

Response filter appears over the modal when help is opened:

Dark mode needs to be handled

[kobenguyent]

Addressed the z-index and dark theme issue

[flawiddsouza]

Use --background-color instead of --modal-background-color

.row {
    background: var(--background-color);
}

Help button in dark mode:

Change this:

To this:

It will look much better and be more integrated with the application.

Remove z-index entirely:

It's not changing anything. Your design will work as it is even without it.

It's causing issues for other modals as well. Remove the z-index style override from your help modal. It's not required once you remove the z-index attribute from the help sticky-section.

[kobenguyent]

Thanks! Resolved the issues!

[flawiddsouza]

use var(--font-monospace) instead of the hardcoded fonts there.

add target="_blank" to the external urls, so they open in a new tab

use responseContentType.startsWith('application/json') instead of

Should work the same and be more performant + no false positives. There might be some data that starts with a { but isn't application/json.

[flawiddsouza]

Also, this exclamation mark really stands out in an otherwise calm modal:

Best to remove it. I think the previous text you had was just fine. Also "Note: that" doesn't seem grammatically correct "Note that" was, as note and that are part of the same sentence. If you want to keep the "Note:", Then the correct way to write that would be:

Note: There's no standard for JSONPath. Restfox uses jsonpath-plus.

[flawiddsouza]

Looks good. Good work.