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.

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

feat(query-builder): Add basic support for selecting multiple values #71457

Merged
merged 3 commits into from
May 28, 2024

Conversation

malwilley
Copy link
Member

Ref #69791

For text and number filters, add checkboxes and allow multiple value selection. Other filter types retain the same functionality as before.

Behavior is as follows:

  • Clicking the row selects the value and exits the token
  • Clicking the checkbox selects the value and keeps focus inside the token
  • Pressing backspace will unselect the previous value
  • Selected values are always shown at the top of the flyout
CleanShot.2024-05-23.at.11.30.05.mp4

@malwilley malwilley requested a review from a team May 23, 2024 18:37
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 23, 2024
Copy link

codecov bot commented May 23, 2024

Codecov Report

Attention: Patch coverage is 66.25000% with 27 lines in your changes are missing coverage. Please review.

Project coverage is 77.88%. Comparing base (64d894d) to head (01ba07e).
Report is 81 commits behind head on master.

Additional details and impacted files
@@             Coverage Diff             @@
##           master   #71457       +/-   ##
===========================================
- Coverage   88.02%   77.88%   -10.14%     
===========================================
  Files        2870     6537     +3667     
  Lines      178471   291097   +112626     
  Branches    32036    50391    +18355     
===========================================
+ Hits       157093   226724    +69631     
- Misses      15496    58125    +42629     
- Partials     5882     6248      +366     
Files Coverage Δ
...tatic/app/components/searchQueryBuilder/filter.tsx 93.10% <100.00%> (ø)
...pp/components/searchQueryBuilder/valueCombobox.tsx 76.92% <81.13%> (ø)
...onents/searchQueryBuilder/useQueryBuilderState.tsx 64.28% <34.61%> (ø)

... and 3664 files with indirect coverage changes

@malwilley malwilley force-pushed the malwilley/feat/search-query-builder-multiple-values branch from 0766201 to 8b7bb09 Compare May 23, 2024 18:58
@malwilley malwilley requested a review from a team May 23, 2024 20:12
return {...state, query: replaceQueryToken(state.query, token.value, newValue)};
}

function mutliSelectTokenValue(
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
function mutliSelectTokenValue(
function multiSelectTokenValue(

last one I promise
(One usage of this function below too)

Copy link
Member Author

Choose a reason for hiding this comment

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

How do I keep messing this up hah

@@ -121,6 +198,10 @@ export function useQueryBuilderState({initialQuery}: {initialQuery: string}) {
return {
query: replaceQueryToken(state.query, action.token, action.value),
};
case 'TOGGLE_FILTER_VALUE':
return mutliSelectTokenValue(state, action);
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
return mutliSelectTokenValue(state, action);
return multiSelectTokenValue(state, action);

Copy link
Member

@MichaelSun48 MichaelSun48 left a comment

Choose a reason for hiding this comment

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

looks amazing! I would definitely get someone else to review too but the UI and the code layout are 👌

@malwilley malwilley merged commit 3f9ba9a into master May 28, 2024
42 checks passed
@malwilley malwilley deleted the malwilley/feat/search-query-builder-multiple-values branch May 28, 2024 16:35
volokluev pushed a commit that referenced this pull request May 28, 2024
…71457)

Ref #69791

For text and number filters, add checkboxes and allow multiple value
selection. Other filter types retain the same functionality as before.

Behavior is as follows:

- Clicking the row selects the value and exits the token
- Clicking the checkbox selects the value and keeps focus inside the
token
- Pressing backspace will unselect the previous value
- Selected values are always shown at the top of the flyout
Copy link

sentry-io bot commented May 31, 2024

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

  • ‼️ Error: ContextProvider.getChildContext(): key "organization" is not defined in childContextTypes. render(reactTestingLibrary.tsx) View Issue

Did you find this useful? React with a 👍 or 👎

@github-actions github-actions bot locked and limited conversation to collaborators Jun 15, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants