Skip to content

Add a filter to the New Data Source modal #789

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

Merged
merged 1 commit into from
Apr 2, 2024

Conversation

snowe2010
Copy link
Contributor

Proposed changes

Adds a filter to make it easier to find the data source you're looking
for in the New Data Source modal found in both the lower pane when
creating an app, and the Data Source page when in Home.

The filtering ignores case and diacritics, but is not a fuzzy filter as
I thought that would be too confusing for a simple search like this.

The localeContains function comes from StackOverflow user Jan Turoň, https://stackoverflow.com/a/69623589/1394698

The function sacrifices complete compatibility with the localeCompare
function for a simplified diacritics check which should suffice for the
majority of lowcoder use cases. I initially tried to get the npm library
locale-includes working, but Vite really doesn't like it, and it failed
to compile no matter what I tried.

Types of changes

What types of changes does your code introduce to Lowcoder?
Put an x in the boxes that apply.

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices apply)

Checklist

You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help!
This is simply a reminder of what we are going to look for before merging your code.
Put an x in the boxes that apply.

  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works I am unable to find any existing tests for this subproject, and I'm not sure if it's possible to add UI tests like this?
  • I have added necessary documentation (if appropriate)
  • Any dependent changes have been merged and published in downstream modules

Manual testing:

I did manual testing of the filter including with diacritics:

No Filter Applied

Screenshot 2024-04-01 at 7 14 36 PM


Filters with normal ASCII

Screenshot 2024-04-01 at 7 14 47 PM
Screenshot 2024-04-01 at 7 14 53 PM


Filters with ASCII finds Data Sources with diacritics

Screenshot 2024-04-01 at 7 15 02 PM
Screenshot 2024-04-01 at 7 15 08 PM
Screenshot 2024-04-01 at 7 15 13 PM

Further comments

I plan on adding a lot more AWS plugins and as a result, being able to search in the modal will probably be very necessary. I also struggle sometimes reading through all the items.

Copy link

netlify bot commented Apr 2, 2024

👷 Deploy request for lowcoder-cloud pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 3803f64

@snowe2010 snowe2010 changed the base branch from main to dev April 2, 2024 02:50
@snowe2010 snowe2010 force-pushed the add-data-query-filter branch from 3803f64 to fa2b603 Compare April 2, 2024 02:52
Copy link

netlify bot commented Apr 2, 2024

👷 Deploy request for lowcoder-test pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 3e1a31f

@snowe2010 snowe2010 force-pushed the add-data-query-filter branch from fa2b603 to 7beec45 Compare April 2, 2024 02:54
add a filter to make it easier to find the data source you're looking
for in the New Data Source modal found in both the lower pane when
creating an app, and the Data Source page when in Home.

The filtering ignores case and diacritics, but is not a fuzzy filter as
I thought that would be too confusing for a simple search like this.

The localeContains function comes from StackOverflow user Jan Turoň, https://stackoverflow.com/a/69623589/1394698

The function sacrifices complete compatibility with the localeCompare
function for a simplified diacritics check which should suffice for the
majority of lowcoder use cases. I initially tried to get the npm library
locale-includes working, but Vite really doesn't like it, and it failed
to compile no matter what I tried.
@snowe2010 snowe2010 force-pushed the add-data-query-filter branch from 7beec45 to 3e1a31f Compare April 2, 2024 02:56
Copy link
Contributor

@FalkWolsky FalkWolsky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A wonderful contribution! Thank you very much. I think many users will love this a lot.

@FalkWolsky FalkWolsky merged commit 41f573b into lowcoder-org:dev Apr 2, 2024
@snowe2010 snowe2010 deleted the add-data-query-filter branch April 2, 2024 16:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants