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

[patelmilanun]

• 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

• [x] I am not disclosing a vulnerability.
• [x] I am creating this PR in reference to an issue.

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

[parse-github-assistant[bot]]

Thanks for opening this pull request!

[uffizzi-cloud[bot]]

Uffizzi Ephemeral Environment deployment-28852

:watch: Updated Jun 17, 2023, 20:57 UTC

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

:page_facing_up: View Application Logs etc.

What is Uffizzi? Learn more

[patelmilanun]

@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]

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 xcatcxatbut 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]

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]

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

[uffizzi-cloud[bot]]

Uffizzi Ephemeral Environment deployment-28949

:watch: Updated Jun 19, 2023, 19:45 UTC

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

:page_facing_up: View Application Logs etc.

What is Uffizzi? Learn more

[parseplatformorg]

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

[parseplatformorg]

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

[parseplatformorg]

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

[parseplatformorg]

🎉 This change has been released in version 5.3.0