From 13d80a5e09213129f34d4b0495064e5ee9faac27 Mon Sep 17 00:00:00 2001
From: Joanne Wang <jowg@amazon.com>
Date: Wed, 18 Sep 2024 16:20:42 -0700
Subject: [PATCH] Fit and Finish UX Fixes Pt 2. (#270)

* add default pill to encryption method

Signed-off-by: Joanne Wang <jowg@amazon.com>

* make table filters separate

Signed-off-by: Joanne Wang <jowg@amazon.com>

* run yarn test:jest-u

Signed-off-by: Joanne Wang <jowg@amazon.com>

---------

Signed-off-by: Joanne Wang <jowg@amazon.com>
---
 .../__snapshots__/ChannelControls.test.tsx.snap        |  8 ++++++++
 .../__tests__/__snapshots__/Channels.test.tsx.snap     |  8 ++++++++
 public/pages/Channels/components/ChannelControls.tsx   |  4 ++++
 .../__tests__/__snapshots__/SendersTable.test.tsx.snap | 10 ++++++++--
 .../__snapshots__/SendersTableControls.test.tsx.snap   | 10 ++++++++--
 .../Emails/components/tables/SendersTableControls.tsx  |  3 +++
 .../Main/__tests__/__snapshots__/Main.test.tsx.snap    |  8 ++++++++
 7 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
index 4af9ef5d..dcd33374 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
@@ -91,6 +91,14 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
           </button>
         </div>
       </div>
+    </div>
+  </div>
+  <div
+    class="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <div
+      class="euiFilterGroup"
+    >
       <div
         class="euiPopover euiPopover--anchorDownCenter"
       >
diff --git a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
index 75b32f3c..9bebd4d1 100644
--- a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
@@ -195,6 +195,14 @@ exports[`<Channels/> spec renders the empty component 1`] = `
               </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          class="euiFilterGroup"
+        >
           <div
             class="euiPopover euiPopover--anchorDownCenter"
           >
diff --git a/public/pages/Channels/components/ChannelControls.tsx b/public/pages/Channels/components/ChannelControls.tsx
index 2de239f2..9c5f37e6 100644
--- a/public/pages/Channels/components/ChannelControls.tsx
+++ b/public/pages/Channels/components/ChannelControls.tsx
@@ -136,6 +136,10 @@ export const ChannelControls = (props: ChannelControlsProps) => {
               );
             })}
           </EuiPopover>
+        </EuiFilterGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFilterGroup>
           <EuiPopover
             button={
               <EuiSmallFilterButton
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
index e47b772a..e2d60a69 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon euiFilterButton--noGrow"
                 type="button"
               >
                 <span
@@ -181,7 +181,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
                     />
                   </svg>
                   <span
-                    class="euiButtonEmpty__text"
+                    class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
                   >
                     <span
                       class="euiFilterButton__textShift"
@@ -190,6 +190,12 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
                     >
                       Encryption method
                     </span>
+                    <span
+                      aria-label="0 available filters"
+                      class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFilterButton__notification"
+                    >
+                      0
+                    </span>
                   </span>
                 </span>
               </button>
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
index ce5ff41c..dfb6f8df 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon euiFilterButton--noGrow"
             type="button"
           >
             <span
@@ -78,7 +78,7 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
                 />
               </svg>
               <span
-                class="euiButtonEmpty__text"
+                class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
               >
                 <span
                   class="euiFilterButton__textShift"
@@ -87,6 +87,12 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
                 >
                   Encryption method
                 </span>
+                <span
+                  aria-label="0 available filters"
+                  class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFilterButton__notification"
+                >
+                  0
+                </span>
               </span>
             </span>
           </button>
diff --git a/public/pages/Emails/components/tables/SendersTableControls.tsx b/public/pages/Emails/components/tables/SendersTableControls.tsx
index e6cea6f1..8b7c19a5 100644
--- a/public/pages/Emails/components/tables/SendersTableControls.tsx
+++ b/public/pages/Emails/components/tables/SendersTableControls.tsx
@@ -78,6 +78,9 @@ export const SendersTableControls = (props: SendersTableControlsProps) => {
           <EuiPopover
             button={
               <EuiSmallFilterButton
+                numFilters={
+                  encryptionItems.filter((item) => item.checked === 'on').length
+                }
                 iconType="arrowDown"
                 grow={false}
                 onClick={() =>
diff --git a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
index 65eef144..9efd0ad0 100644
--- a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
+++ b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
@@ -300,6 +300,14 @@ exports[`<Main /> spec renders the component 1`] = `
                   </button>
                 </div>
               </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              class="euiFilterGroup"
+            >
               <div
                 class="euiPopover euiPopover--anchorDownCenter"
               >