New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI for filter requests by folder, URI, method, query string #864

Merged
merged 11 commits into from May 23, 2018

Conversation

Projects
None yet
3 participants
@shawnaxsom
Contributor

shawnaxsom commented Apr 15, 2018

Related PRs?

#797 - I previously implemented some of the logic to allow searching by folder, URI, and query string here, but nothing was apparent in the UI.
#857 - Continuation of #797, for implementing the UI of the fuzzy matching results and for adding URI to the Quick Switch window rows.

Relevant Issues?

#739 - This extends #797 in fulfilling #739 by providing a Highlight component that has been added to the Quick Switch window.

What does this PR do?

  • Replaces the fuzzy matching functions with the fuzzysort library, as it provides similar functionality but also provides highlighting capabilities.
  • Creates a reusable Highlight component that shows the matched characters in the fields searched against.
  • Adds that Highlight component to the Quick Switch window fields, and adds URL with querystring to Quick Switch results as well.

Example screenshots, gifs, or videos?

What is left to do or discuss?

  • What should we do with filtering on the sidebar? I didn't implement any UI for it yet, and I haven't added Method or URI/querystring back in for it. I'm thinking we leave method/URI/querystring out as it wouldn't likely fit. But I might at least add the Highlight component to the sidebar to make it more apparent what filters matched.
  • I have an inline style or two, looks like most of the codebase doesn't use that, so I can extract to a class.
  • The Highlight component works fairly well. The only thing I see is that fuzzysort doesn't seem to match multiple times for one of the phrases. I'm assuming it is fuzzysort and not my code...maybe fuzzysort has/needs a /g type of option? https://cl.ly/121S3F3U2z11
  • I need to truncate or wrap long URIs in the Quick Switch window. Long URIs go to the edge of the modal at the moment.

What code can others reuse?

  • Highlight component - We can add the fuzzy matching UI pretty easily anywhere else in the UI we want to implement something similar. Just give it a fuzzy matching string and the text that you want to match/display.

Testing Steps

  • Search for URI, method, query string, folder, and/or request name on Quick Switch window
  • Perform fuzzy search, leaving out some letters for a given field
  • Perform a multiple word search, searching multiple types of fields in the list above
  • Repeat tests for Sidebar search - nothing should have changed, except the fuzzy search algorithm is now using the fuzzysort library
@roblav96

This comment has been minimized.

roblav96 commented Apr 16, 2018

@axs221 WOW 😮Bravo my friend!

@shawnaxsom

This comment has been minimized.

Contributor

shawnaxsom commented Apr 19, 2018

Hopefully I will have some time to finish up the PR this weekend and have it ready for review

@gschier

This comment has been minimized.

Collaborator

gschier commented Apr 20, 2018

What should we do with filtering on the sidebar? I didn't implement any UI for it yet, and I haven't added Method or URI/querystring back in for it. I'm thinking we leave method/URI/querystring out as it wouldn't likely fit. But I might at least add the Highlight component to the sidebar to make it more apparent what filters matched.

I think you made the right move by not adding method/uri/querystring filtering to the sidedbar. The highlight component would be a great addition if you wanted to add that 😄

I have an inline style or two, looks like most of the codebase doesn't use that, so I can extract to a class.

Ya, pulling those out into a class would be 👌

The Highlight component works fairly well. The only thing I see is that fuzzysort doesn't seem to match multiple times for one of the phrases. I'm assuming it is fuzzysort and not my code...maybe fuzzysort has/needs a /g type of option?

Seems like this is because we're first splitting the search phrase into terms and fuzzysorting each of them one-by one. Maybe we can just pass the whole string to fuzzysort instead?

I need to truncate or wrap long URIs in the Quick Switch window. Long URIs go to the edge of the modal at the moment.

👍

@shawnaxsom

This comment has been minimized.

Contributor

shawnaxsom commented Apr 22, 2018

I have the sidebar showing highlights of the filters now, including the query and the folders.

Here is a preview of sidebar searching:

https://cl.ly/0o0f0f0u281g

I still need to address the other issues I mentioned. I'm probably out for the day but hopefully can handle this week.

@shawnaxsom shawnaxsom force-pushed the shawnaxsom:feature/fuzzy-match-ui branch from e4107ec to 2d14a20 Apr 29, 2018

shawnaxsom added some commits Apr 30, 2018

@shawnaxsom

This comment has been minimized.

Contributor

shawnaxsom commented May 11, 2018

@gschier Let me know what you think, I think this is good to go 👍

@gschier

This comment has been minimized.

Collaborator

gschier commented May 11, 2018

Thanks for reminding me! I will likely push a release out next week and make sure this gets in.

@gschier

Amazing work @axs221. I'm excited to finally get this in!

@gschier gschier merged commit 7ef3736 into getinsomnia:develop May 23, 2018

2 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment