[CPT-1479] Enable select clear button for the qb

[angelinastavniiciuc]

CPT-1479

Description

Describe the changes and motivations for the pull request.

How to test

• Temploy
• Open Query builder story
• On the Default story select Also plays rule
• Check if enableReset property is working as expected

Screenshots

Before.	After.

Development checks

• Add changeset according to guidelines (if needed)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• n/a codemod is created and showcased in the changeset
• test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 65b1162

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@toptal/picasso-query-builder	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[angelinastavniiciuc]

@toptal-bot run package:alpha-release

[toptal-devbot]

Greetings from FX team, @angelinastavniiciuc 👋

Thank you so much for contributing 🙇

We have got high priority ticket generated on our Kanban board so we will do our best to make your experience supreme!

What's next? We will collaborate using this workflow. For you this practically means making sure DONE criteria is met and responding promptly to code review comments 😉

🙏 please, help us improve, rate your contributing experience after merge

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@53.0.1-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.36+d9c4e10a5
yarn add @toptal/picasso@42.3.2-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.0+d9c4e10a5
yarn add @toptal/picasso-charts@56.0.2-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.0+d9c4e10a5
yarn add @toptal/picasso-codemod@5.6.4-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.86+d9c4e10a5
yarn add @toptal/picasso-forms@66.1.3-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.0+d9c4e10a5
yarn add @toptal/picasso-pictograms@2.0.1-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.156+d9c4e10a5
yarn add @toptal/picasso-provider@3.4.3-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.28+d9c4e10a5
yarn add @toptal/picasso-query-builder@1.3.1-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.2+d9c4e10a5
yarn add @toptal/picasso-rich-text-editor@10.0.1-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.36+d9c4e10a5
yarn add @toptal/picasso-shared@13.1.3-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.9+d9c4e10a5
yarn add @toptal/picasso-tailwind@1.0.2-alpha-CPT-1479-enable-select-clear-button-for-the-qb-d9c4e10a5.16+d9c4e10a5

[sashuk]

Looks good, added suggestion in https://github.com/toptal/picasso/pull/4084/files#r1447127783

[angelinastavniiciuc]

@toptal-anvil ping reviewers

[toptalwadiibasmi]

The behavior works correctly. Good job. However, do we have a ticket where we will introduce this in the documentation? I need help finding the property listed somewhere.

[angelinastavniiciuc]

The behavior works correctly. Good job. However, do we have a ticket where we will introduce this in the documentation? I need help finding the property listed somewhere.

@toptalwadiibasmi The property is provided from Picasso Select and it is listed there,
we were following the same approach for enableResetSearch prop - example for it is stored in Picasso Select
🤔
https://picasso.toptal.net/?path=/story/forms-select--select

[toptalwadiibasmi]

The behavior works correctly. Good job. However, do we have a ticket where we will introduce this in the documentation? I need help finding the property listed somewhere.

@toptalwadiibasmi The property is provided from Picasso Select and it is listed there, we were following the same approach for enableResetSearch prop - example for it is stored in Picasso Select 🤔 https://picasso.toptal.net/?path=/story/forms-select--select

Okey! I thought we would also have to update the field property documentation, but apparently, it wasn't typed in the documentation in the first place. I will approve as the code looks good and the test passes.

[toptalwadiibasmi]

Looks good. Tested and works as expected.

[karlavdelgadof]

QA tested, and almost everything works as expected 🥸 in exception to the following scenarios:

• Assuming enableReset property is provided for this filter, the filter should have the ability to clear the choices and reset the field to the default state (only the first option is selected)

  • It does not reset to the first option ❌

• When only the first option is selected, you may not reset (the button is not present or it does nothing)
  - The button is still present and I can still clear the option ❌

Also this scenario is not clear enough to me:

• The field is selected regardless of the number of option selected (check with 1 and more than 10)
  - When should this field be selected and why?

CC @mkasperowicz

[mkasperowicz]

@karlavdelgadof

We synced with Rasit and established that it is not a reset functionality but actually clearing functionality so indeed the implementation did not match scenarios. So that answers to your first 2 questions

When it comes to this

The field is selected regardless of the number of option selected (check with 1 and more than 10)

It's a typo. I was thinking too hard about selecting. 😂 The word should be cleared so The field is **cleared** regardless of the number of option selected (check with 1 and more than 10)

[karlavdelgadof]

After some clarification, this is tested and good to go 🚀