From 88302fb76475937ac9c57acccab95be273f436e3 Mon Sep 17 00:00:00 2001
From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com>
Date: Wed, 16 Oct 2024 10:24:25 -0400
Subject: [PATCH] [PBNTR-600] Filter Kit - Filter Kit displaying zero results
 (#3799)

**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.~~
---
 .../app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx  | 6 ++++--
 .../app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
index 922324ed08..de66e3ed24 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
@@ -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"
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
+    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -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()}
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
index b670c057a5..f57bfa097d 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={1}
+          results={0}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line