Fit and Finish UX Fixes Pt 2. (#270)

* add default pill to encryption method Signed-off-by: Joanne Wang <[email protected]> * make table filters separate Signed-off-by: Joanne Wang <[email protected]> * run yarn test:jest-u Signed-off-by: Joanne Wang <[email protected]> --------- Signed-off-by: Joanne Wang <[email protected]> (cherry picked from commit 13d80a5) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 18, 2024 · c79af95 · c79af95
1 parent b3dd31c
commit c79af95
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
               >