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

Multiselect table filter #1523

Merged
merged 6 commits into from
Aug 21, 2020
Merged

Multiselect table filter #1523

merged 6 commits into from
Aug 21, 2020

Conversation

JoelArmendariz
Copy link
Contributor

@JoelArmendariz JoelArmendariz commented Aug 20, 2020

Summary

Closes #1432

Relevant ticket item: https://github.ibm.com/wiotp/monitoring-dashboard/issues/728

Adds the ability to filter a table based on a multiselect dropdown.

Change List (commits, features, bugs, etc)

Add isMultiselect option on the filter prop for Table
Render Multiselect for filtering in the FilterHeaderRow
Update TableReducer logic to handle multiselect filters.

Acceptance Test (how to verify the PR)

Go to the Table example with multiselect filtering story in storybook and confirm that the multiselect properly filters the table.

Screen Shot 2020-08-20 at 12 56 52 PM

@netlify
Copy link

netlify bot commented Aug 20, 2020

Deploy preview for carbon-addons-iot-react ready!

Built with commit 0007502

https://deploy-preview-1523--carbon-addons-iot-react.netlify.app

@netlify
Copy link

netlify bot commented Aug 20, 2020

Deploy preview for carbon-addons-iot-react ready!

Built with commit a0936b1

https://deploy-preview-1523--carbon-addons-iot-react.netlify.app

@tay1orjones
Copy link
Member

I've added a link to close the relevant issue on this repo

Copy link
Member

@tay1orjones tay1orjones 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! Functionally, the search results update, pagination reflects the changes, keyboard navigation looks solid - you can focus to deselect all options at once or individually inside the menu. Code is 👍

I think it would be beneficial to add some RTL tests that cover the general interaction though. Something like:

  • render table with preselected filters
    • deselect one filter, add one filter, remove all filters - assert between each that the search results are updated in the dom and the pagination component displays the proper result count
  • render table without preselected filters
    • do similar flow as above, maybe modify to deselect all filters first then add new ones or something

I know this will overlap some of the tests that Carbon has on Multiselect, but as they make changes (and we update to accept them) it would be great to ensure the table functions aren't impacted. They recently upgraded downshift for instance (#1462 WIP) and I've found some problems were caught by tests, while others were not. We've also seen changes where reducer tests pass but functionally things have broken. Trying to avoid these things as much as possible, particularly with the Table

@JoelArmendariz
Copy link
Contributor Author

Thanks @tay1orjones . That does sound very beneficial to hopefully catch some bugs with this as versions change. I will add some RTL test cases.

@JoelArmendariz
Copy link
Contributor Author

@tay1orjones I have added some RTL test cases to cover preselected filters, non-preselected filters, adding filters, removing filters, and clearing the multiselect box.

Copy link
Contributor

@sstone2423 sstone2423 left a comment

Choose a reason for hiding this comment

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

Great job!

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

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

Thanks for adding those tests! 🎉

@tay1orjones tay1orjones merged commit 2cc7a63 into master Aug 21, 2020
@tay1orjones tay1orjones deleted the multiselect-table-filter branch August 21, 2020 16:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Data Table] Enhancement - Apply multiple filters to a column using checkboxes
3 participants