Skip to content

Commit

Permalink
[PBNTR-600] Filter Kit - Filter Kit displaying zero results (#3799)
Browse files Browse the repository at this point in the history
**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-600](https://runway.powerhrg.com/backlog_items/PBNTR-600)
improves the React Filter kit's UI so it more closely matches the Rails
side. Specifically, this code update allows for "Results: 0" to appear
in the context of the filter kit if there are no results for a filtered
search; previously, the "Results: " TitleCount component would just
disappear if there were no Results. If the Filter's results prop is
undefined, the "Results: " TitleCount component will not appear, which
is logical behavior.

**Screenshots:** Screenshots to visualize your addition/change
_Screenshots on their way_
Current production behavior: Results 1+ shows "Results: 1" (first
filter) but Results: 0 does not appear (second filter)
<img width="1489" alt="react filter doc ex current if 1 or 0"
src="https://github.com/user-attachments/assets/b13dfff8-2d22-4263-9009-dcc08c666ea3">
New behavior for default template Filter: "Results: 0" appears
<img width="1476" alt="react filter shows 0"
src="https://github.com/user-attachments/assets/413a29f4-0871-4654-bee3-7f7d0f4a9038">
New behavior for single template Filter - 0 Results and XXX Results both
appear now
<img width="1281" alt="0 or multiple results in single template"
src="https://github.com/user-attachments/assets/6271b730-2b4e-45e6-8b39-89176e2b5197">
If Results prop is undefined, "Results: " will not appear
<img width="1280" alt="undefined results in both templates"
src="https://github.com/user-attachments/assets/92f28284-dad2-4410-961c-264565310f78">
Screenshot from an alpha in nitro-web on local - Results: 0 now appears
on our React Basic Table Template filter
<img width="1553" alt="local alpha showing react results 0 in templates"
src="https://github.com/user-attachments/assets/9115ce0f-2206-4b9a-b156-3e8c1faff727">


**How to test?** Steps to confirm the desired behavior:
1. Go to review env [react filter kit default doc
example](https://pr3799.playbook.beta.gm.powerapp.cloud/kits/filter/react#default)-
see "Results: 0" in second filter in example.
2. Compare to current React Filter kit implementation - can test by
going to [React Basic Table
template](https://nitroqa.powerhrg.com/dev_docs/playbook/templates/demos/basic_table/react)
and searching something that will have no results like "first
name=elisashapiro". Observe how the "Results: " section just disappears.
3. Compare to Rails Filter kit behavior in current production Playbook
[Rails default doc
example](https://playbook.powerapp.cloud/kits/filter/rails#default) and
the [Rails Basic Table
template](https://nitroqa.powerhrg.com/dev_docs/playbook/templates/demos/basic_table/rails)
- "Results: 0" appears for in both places.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
~~- [ ] **TESTS** I have added test coverage to my code.~~
  • Loading branch information
ElisaShapiro authored Oct 16, 2024
1 parent 9ccb2f7 commit 88302fb
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ type ResultsCountProps = {
const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {

const resultTitle = () => {
if (results == null) return null
return (
<TitleCount
align="center"
Expand All @@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
}

const justResults = () => {
if (results == null) return null
return (
<Caption
className="filter-results"
Expand All @@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
}

const displayResultsCount = () => {
if (results && title) {
if (results != null && results >=0 && title) {
return (
<>
{resultTitle()}
</>
)
} else if (results) {
} else if (results !=null && results >=0 ) {
return (
<>
{justResults()}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const FilterDefault = (props) => {
double
minWidth="375px"
onSortChange={SortingChangeCallback}
results={1}
results={0}
sortOptions={{
popularity: 'Popularity',
// eslint-disable-next-line
Expand Down

0 comments on commit 88302fb

Please sign in to comment.