Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: Add typing with auto-complete to select a filter field in the data browser #2463

Merged
merged 6 commits into from
Jun 19, 2023
Merged

feat: Add typing with auto-complete to select a filter field in the data browser #2463

merged 6 commits into from
Jun 19, 2023

Conversation

patelmilanun
Copy link
Member

  • add strict prop to autocomplete to set value from suggestion only
  • add inner popover logic to detect inner popover click
  • add containerStyle to style input container
  • add suggestionsItemStyle to style suggestion list items

New Pull Request Checklist

Issue Description

We needed a way to have autocomplete for our field selection box when inside filter. This is required to get a quick search over long list of coulmns.

Closes: #1891

Approach

This PR adds autocomplete to the filter field selector. This PR also adds some styling props to customize the look of it. It also adds new prop called strict. This is required to always have a value that is in the suggestion list i.e, one of the column. I have made value coming from the parent a default value. If you pass this prop as false or don't pass it at all it will work as the old Autocomplete. So no breaking changes.

TODOs before merging

NA

@patelmilanun
Add autocomplete for filter field selector
f40b63e 
- add strict prop to autocomplete to set value from suggestion only
- add inner popover logic to detect inner popover click
- add containerStyle to style input container
- add suggestionsItemStyle to style suggestion list items
@parse-github-assistant
Copy link

Thanks for opening this pull request!

@patelmilanun patelmilanun changed the title Add autocomplete for filter field selector feat: Add autocomplete for filter field selector Jun 17, 2023
@uffizzi-cloud
Copy link

uffizzi-cloud bot commented Jun 17, 2023

Uffizzi Ephemeral Environment deployment-28852

⌚ Updated Jun 17, 2023, 20:57 UTC

☁️ https://app.uffizzi.com/github.com/parse-community/parse-dashboard/pull/2463

📄 View Application Logs etc.

What is Uffizzi? Learn more

@patelmilanun
Copy link
Member Author

@mtrezza can u please review this, I have added some new functionality to the core Autocomplete component. Even though I have checked in places where the original one is used and it's working fine, I'm still not that confident I don't know why. Maybe it's my first time modifying core component. Please check it once.

@mtrezza
Copy link
Member

mtrezza commented Jun 18, 2023 •
edited
Loading

From what I've tested it works fine, but it's strictly suggesting fields that start with the entered text. It would be better to:

  • a) suggest any field that contains the entered text anywhere in the field name, e.g. cat matches xcat and catx, but not cxat.
  • b) suggest any field text that contains the entered letters in the given order (but not necessarily following each other), e.g. cat matches xcat cxatbut notact`.

(b) is more versatile and is more graceful with typos, so if possible I'd suggest (b); if that's too complex then I'd go with (a). Not sure how you do the matching, but (b) and (a) are easy in regex.

@patelmilanun
Copy link
Member Author

Hmm, I was thinking of the same. This is as-it-is component of Autocomplete and doesn't have the functionalities you mentioned. So I'll try to add it.

@patelmilanun
Copy link
Member Author

Sorry my bad, there is a prop that do this. I'm pushing new changes now please take a look.

@mtrezza mtrezza mentioned this pull request Jun 18, 2023
Open
@mtrezza mtrezza closed this Jun 19, 2023
@mtrezza mtrezza reopened this Jun 19, 2023
@uffizzi-cloud
Copy link

uffizzi-cloud bot commented Jun 19, 2023

Uffizzi Ephemeral Environment deployment-28949

⌚ Updated Jun 19, 2023, 19:45 UTC

☁️ https://app.uffizzi.com/github.com/parse-community/parse-dashboard/pull/2463

📄 View Application Logs etc.

What is Uffizzi? Learn more

mtrezza
mtrezza approved these changes Jun 19, 2023
View reviewed changes
Copy link
Member

@mtrezza mtrezza left a comment

Choose a reason for hiding this comment

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

Looks good! Nice job, this is a great feature

@mtrezza mtrezza changed the title feat: Add autocomplete for filter field selector feat: Add typing with auto-complete to select a field in the data browser filter dialog Jun 19, 2023
@mtrezza mtrezza changed the title feat: Add typing with auto-complete to select a field in the data browser filter dialog feat: Add typing with auto-complete to select a filter field in the data browser Jun 19, 2023
@mtrezza mtrezza merged commit 257f76b into parse-community:alpha Jun 19, 2023
parseplatformorg pushed a commit that referenced this pull request Jun 19, 2023
@semantic-release-bot
chore(release): 5.2.0-alpha.17 [skip ci]
5293640 
# [5.2.0-alpha.17](5.2.0-alpha.16...5.2.0-alpha.17) (2023-06-19)

### Features

* Add typing with auto-complete to select a filter field in the data browser ([#2463](#2463)) ([257f76b](257f76b))
@parseplatformorg
Copy link
Contributor

🎉 This change has been released in version 5.2.0-alpha.17

@parseplatformorg parseplatformorg added the state:released-alpha Released as alpha version label Jun 19, 2023
@AshishBarvaliya AshishBarvaliya mentioned this pull request Jun 20, 2023
Open
3 tasks
@mtrezza mtrezza mentioned this pull request Jun 24, 2023
Open
3 tasks
parseplatformorg pushed a commit that referenced this pull request Sep 15, 2023
@semantic-release-bot
chore(release): 5.3.0-beta.1 [skip ci]
77d039a 
# [5.3.0-beta.1](5.2.0...5.3.0-beta.1) (2023-09-15)

### Bug Fixes

* Adding a file when adding a new row in the data browser doesn't show filename ([#2471](#2471)) ([5bbb94e](5bbb94e))
* File extension is hidden in file field when editing object in modal dialog in data browser ([#2472](#2472)) ([8df4e4d](8df4e4d))
* Incorrect highlight maker position in class list in data browser ([#2490](#2490)) ([8c28d24](8c28d24))
* Pasting location coordinates into field of type `GeoPoint` does not work in data browser ([#2464](#2464)) ([a8ce343](a8ce343))
* Selecting a saved filter in data browser also highlights other filters with equal names ([#2466](#2466)) ([35360fe](35360fe))
* Vertical scrollbar in data browser is outside visible area when scrolling horizontally ([#2457](#2457)) ([5acac3f](5acac3f))

### Features

* Add Cloud Function execution on Parse Object in data browser ([#2409](#2409)) ([996ce91](996ce91))
* Add parameter `selectedField` to script payload to determine which object field was selected when script was invoked ([#2483](#2483)) ([e98d653](e98d653))
* Add refresh button to Cloud Config page ([#2480](#2480)) ([be212b0](be212b0))
* Add security checks page ([#2491](#2491)) ([103b9c6](103b9c6))
* Add support for confirmation dialog before script execution in data browser ([#2481](#2481)) ([64d3913](64d3913))
* Add typing with auto-complete to select a filter field in the data browser ([#2463](#2463)) ([257f76b](257f76b))
* Reopen last opened class when navigating to data browser ([#2468](#2468)) ([3d7148e](3d7148e))

### Reverts

* fix: Vertical scrollbar in data browser is outside visible area when scrolling horizontally ([#2457](#2457)) ([#2477](#2477)) ([2f1d84e](2f1d84e))
@parseplatformorg
Copy link
Contributor

🎉 This change has been released in version 5.3.0-beta.1

@parseplatformorg parseplatformorg added the state:released-beta Released as beta version label Sep 15, 2023
parseplatformorg pushed a commit that referenced this pull request Sep 20, 2023
@semantic-release-bot
chore(release): 5.3.0-alpha.1 [skip ci]
86c45d8 
# [5.3.0-alpha.1](5.2.0...5.3.0-alpha.1) (2023-09-20)

### Bug Fixes

* Adding a file when adding a new row in the data browser doesn't show filename ([#2471](#2471)) ([5bbb94e](5bbb94e))
* File extension is hidden in file field when editing object in modal dialog in data browser ([#2472](#2472)) ([8df4e4d](8df4e4d))
* Incorrect highlight maker position in class list in data browser ([#2490](#2490)) ([8c28d24](8c28d24))
* Pasting location coordinates into field of type `GeoPoint` does not work in data browser ([#2464](#2464)) ([a8ce343](a8ce343))
* Selecting a saved filter in data browser also highlights other filters with equal names ([#2466](#2466)) ([35360fe](35360fe))
* Vertical scrollbar in data browser is outside visible area when scrolling horizontally ([#2457](#2457)) ([5acac3f](5acac3f))

### Features

* Add Cloud Function execution on Parse Object in data browser ([#2409](#2409)) ([996ce91](996ce91))
* Add parameter `selectedField` to script payload to determine which object field was selected when script was invoked ([#2483](#2483)) ([e98d653](e98d653))
* Add refresh button to Cloud Config page ([#2480](#2480)) ([be212b0](be212b0))
* Add security checks page ([#2491](#2491)) ([103b9c6](103b9c6))
* Add support for confirmation dialog before script execution in data browser ([#2481](#2481)) ([64d3913](64d3913))
* Add typing with auto-complete to select a filter field in the data browser ([#2463](#2463)) ([257f76b](257f76b))
* Reopen last opened class when navigating to data browser ([#2468](#2468)) ([3d7148e](3d7148e))

### Reverts

* fix: Vertical scrollbar in data browser is outside visible area when scrolling horizontally ([#2457](#2457)) ([#2477](#2477)) ([2f1d84e](2f1d84e))
@parseplatformorg
Copy link
Contributor

🎉 This change has been released in version 5.3.0-alpha.1

parseplatformorg pushed a commit that referenced this pull request Nov 16, 2023
@semantic-release-bot
chore(release): 5.3.0 [skip ci]
2a90ae6 
# [5.3.0](5.2.0...5.3.0) (2023-11-16)

### Bug Fixes

* Adding a file when adding a new row in the data browser doesn't show filename ([#2471](#2471)) ([5bbb94e](5bbb94e))
* File extension is hidden in file field when editing object in modal dialog in data browser ([#2472](#2472)) ([8df4e4d](8df4e4d))
* Incorrect highlight maker position in class list in data browser ([#2490](#2490)) ([8c28d24](8c28d24))
* Pasting location coordinates into field of type `GeoPoint` does not work in data browser ([#2464](#2464)) ([a8ce343](a8ce343))
* Selecting a saved filter in data browser also highlights other filters with equal names ([#2466](#2466)) ([35360fe](35360fe))
* Vertical scrollbar in data browser is outside visible area when scrolling horizontally ([#2457](#2457)) ([5acac3f](5acac3f))

### Features

* Add Cloud Function execution on Parse Object in data browser ([#2409](#2409)) ([996ce91](996ce91))
* Add parameter `selectedField` to script payload to determine which object field was selected when script was invoked ([#2483](#2483)) ([e98d653](e98d653))
* Add refresh button to Cloud Config page ([#2480](#2480)) ([be212b0](be212b0))
* Add security checks page ([#2491](#2491)) ([103b9c6](103b9c6))
* Add support for confirmation dialog before script execution in data browser ([#2481](#2481)) ([64d3913](64d3913))
* Add typing with auto-complete to select a filter field in the data browser ([#2463](#2463)) ([257f76b](257f76b))
* Reopen last opened class when navigating to data browser ([#2468](#2468)) ([3d7148e](3d7148e))

### Reverts

* fix: Vertical scrollbar in data browser is outside visible area when scrolling horizontally ([#2457](#2457)) ([#2477](#2477)) ([2f1d84e](2f1d84e))
@parseplatformorg
Copy link
Contributor

🎉 This change has been released in version 5.3.0

@parseplatformorg parseplatformorg added the state:released Released as stable version label Nov 16, 2023
davimacedo pushed a commit to back4app/parse-dashboard that referenced this pull request Apr 4, 2024
@sadakchap @patelmilanun
@semantic-release-bot @mtrezza @parseplatformorg @AshishBarvaliya @cbaker6
Fix nogo bugs 3 (#611)
47c99da 
* feat: Add refresh indicator to Cloud Config page (parse-community#2505)

* chore(release): 5.3.0-alpha.2 [skip ci]

# [5.3.0-alpha.2](parse-community/parse-dashboard@5.3.0-alpha.1...5.3.0-alpha.2) (2023-10-18)

### Features

* Add refresh indicator to Cloud Config page ([parse-community#2505](parse-community#2505)) ([a10d1f0](parse-community@a10d1f0))

* release

* chore(release): 5.3.0 [skip ci]

# [5.3.0](parse-community/parse-dashboard@5.2.0...5.3.0) (2023-11-16)

### Bug Fixes

* Adding a file when adding a new row in the data browser doesn't show filename ([parse-community#2471](parse-community#2471)) ([5bbb94e](parse-community@5bbb94e))
* File extension is hidden in file field when editing object in modal dialog in data browser ([parse-community#2472](parse-community#2472)) ([8df4e4d](parse-community@8df4e4d))
* Incorrect highlight maker position in class list in data browser ([parse-community#2490](parse-community#2490)) ([8c28d24](parse-community@8c28d24))
* Pasting location coordinates into field of type `GeoPoint` does not work in data browser ([parse-community#2464](parse-community#2464)) ([a8ce343](parse-community@a8ce343))
* Selecting a saved filter in data browser also highlights other filters with equal names ([parse-community#2466](parse-community#2466)) ([35360fe](parse-community@35360fe))
* Vertical scrollbar in data browser is outside visible area when scrolling horizontally ([parse-community#2457](parse-community#2457)) ([5acac3f](parse-community@5acac3f))

### Features

* Add Cloud Function execution on Parse Object in data browser ([parse-community#2409](parse-community#2409)) ([996ce91](parse-community@996ce91))
* Add parameter `selectedField` to script payload to determine which object field was selected when script was invoked ([parse-community#2483](parse-community#2483)) ([e98d653](parse-community@e98d653))
* Add refresh button to Cloud Config page ([parse-community#2480](parse-community#2480)) ([be212b0](parse-community@be212b0))
* Add security checks page ([parse-community#2491](parse-community#2491)) ([103b9c6](parse-community@103b9c6))
* Add support for confirmation dialog before script execution in data browser ([parse-community#2481](parse-community#2481)) ([64d3913](parse-community@64d3913))
* Add typing with auto-complete to select a filter field in the data browser ([parse-community#2463](parse-community#2463)) ([257f76b](parse-community@257f76b))
* Reopen last opened class when navigating to data browser ([parse-community#2468](parse-community#2468)) ([3d7148e](parse-community@3d7148e))

### Reverts

* fix: Vertical scrollbar in data browser is outside visible area when scrolling horizontally ([parse-community#2457](parse-community#2457)) ([parse-community#2477](parse-community#2477)) ([2f1d84e](parse-community@2f1d84e))

* release

* chore(release): 5.4.0-beta.1 [skip ci]

# [5.4.0-beta.1](parse-community/parse-dashboard@5.3.0...5.4.0-beta.1) (2023-11-16)

### Features

* Add refresh indicator to Cloud Config page ([parse-community#2505](parse-community#2505)) ([a10d1f0](parse-community@a10d1f0))

* refactor: Security upgrade js-beautify from 1.14.6 to 1.14.10 (parse-community#2513)

* chore(release): 5.4.0-alpha.1 [skip ci]

# [5.4.0-alpha.1](parse-community/parse-dashboard@5.3.0...5.4.0-alpha.1) (2023-12-02)

### Features

* Add refresh indicator to Cloud Config page ([parse-community#2505](parse-community#2505)) ([a10d1f0](parse-community@a10d1f0))

* feat: Execute script for selected rows (parse-community#2508)

* chore(release): 5.4.0-alpha.2 [skip ci]

# [5.4.0-alpha.2](parse-community/parse-dashboard@5.4.0-alpha.1...5.4.0-alpha.2) (2023-12-16)

### Features

* Execute script for selected rows ([parse-community#2508](parse-community#2508)) ([5d9901e](parse-community@5d9901e))

* fix: Dashboard crashes if Parse Server Cloud Function script returns object (parse-community#2516)

* chore(release): 5.4.0-alpha.3 [skip ci]

# [5.4.0-alpha.3](parse-community/parse-dashboard@5.4.0-alpha.2...5.4.0-alpha.3) (2023-12-16)

### Bug Fixes

* Dashboard crashes if Parse Server Cloud Function script returns object ([parse-community#2516](parse-community#2516)) ([5de08f8](parse-community@5de08f8))

* fix: Data browser redirects to wrong class when changing app (parse-community#2526)

* chore(release): 5.4.0-alpha.4 [skip ci]

# [5.4.0-alpha.4](parse-community/parse-dashboard@5.4.0-alpha.3...5.4.0-alpha.4) (2024-02-15)

### Bug Fixes

* Data browser redirects to wrong class when changing app ([parse-community#2526](parse-community#2526)) ([7713f54](parse-community@7713f54))

* fix: Open pointer in new tab in data browser not working when mount path is not root (parse-community#2527)

* chore(release): 5.4.0-alpha.5 [skip ci]

# [5.4.0-alpha.5](parse-community/parse-dashboard@5.4.0-alpha.4...5.4.0-alpha.5) (2024-02-18)

### Bug Fixes

* Open pointer in new tab in data browser not working when mount path is not root ([parse-community#2527](parse-community#2527)) ([2f4081f](parse-community@2f4081f))

* fix: App metrics for user and installation counts show dash (parse-community#2528)

* chore(release): 5.4.0-alpha.6 [skip ci]

# [5.4.0-alpha.6](parse-community/parse-dashboard@5.4.0-alpha.5...5.4.0-alpha.6) (2024-02-26)

### Bug Fixes

* App metrics for user and installation counts show dash ([parse-community#2528](parse-community#2528)) ([850d7b3](parse-community@850d7b3))

* feat: Add descriptive statistics for number cells in data browser (parse-community#2529)

* chore(release): 5.4.0-alpha.7 [skip ci]

# [5.4.0-alpha.7](parse-community/parse-dashboard@5.4.0-alpha.6...5.4.0-alpha.7) (2024-02-26)

### Features

* Add descriptive statistics for number cells in data browser ([parse-community#2529](parse-community#2529)) ([ead9ec4](parse-community@ead9ec4))

* fix: Config page fails to load (parse-community#2531)

* chore(release): 5.4.0-alpha.8 [skip ci]

# [5.4.0-alpha.8](parse-community/parse-dashboard@5.4.0-alpha.7...5.4.0-alpha.8) (2024-02-29)

### Bug Fixes

* Config page fails to load ([parse-community#2531](parse-community#2531)) ([d721b7c](parse-community@d721b7c))

* feat: Add Node 20 support; remove Node 14, 16 support (parse-community#2532)

* feat: Add Node 20 support; remove Node 14, 16 support (parse-community#2535)

BREAKING CHANGE: Removes support for Node 14 and 16

* chore(release): 6.0.0-alpha.1 [skip ci]

# [6.0.0-alpha.1](parse-community/parse-dashboard@5.4.0-alpha.8...6.0.0-alpha.1) (2024-03-05)

### Features

* Add Node 20 support; remove Node 14, 16 support ([parse-community#2532](parse-community#2532)) ([578a339](parse-community@578a339))
* Add Node 20 support; remove Node 14, 16 support ([parse-community#2535](parse-community#2535)) ([5c90f2d](parse-community@5c90f2d))

### BREAKING CHANGES

* Removes support for Node 14 and 16 ([5c90f2d](5c90f2d))

* refactor: Security upgrade express from 4.18.1 to 4.19.2 (parse-community#2539)

* ci: Fix nginx config for preview environment (parse-community#2542)

* refactor: Upgrade to npm lockfile version 3 (parse-community#2543)

* fix: make cursor pointer for support more icon

* fix: more icon cursor pointer

* fix: remove console from B4aNotification

* feat: add light themed b4aEmptyState

* fix: B4aObjectPicker app crash when class exists not

* fix: cloudcode empty states

* fix: reduce size to remove scrollbar

* fix: remove extra space from REST Console top

* fix: dark themed dropdown arrow

* fix: error modal

* feat: add logRocket

---------

Co-authored-by: patelmilanun <20059797+patelmilanun@users.noreply.github.com>
Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Co-authored-by: Parse Platform <90459499+parseplatformorg@users.noreply.github.com>
Co-authored-by: Ashish Baravaliya <49753983+AshishBarvaliya@users.noreply.github.com>
Co-authored-by: Corey <coreyearleon@icloud.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mtrezza mtrezza mtrezza approved these changes

Assignees
No one assigned
Labels
state:released Released as stable version state:released-alpha Released as alpha version state:released-beta Released as beta version
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add auto-complete typing to column dropdowns
3 participants
@patelmilanun @mtrezza @parseplatformorg