From 8a692bb2d2d80294f7c016e07dfa4f72226c94d1 Mon Sep 17 00:00:00 2001
From: Marco Montalbano <marco.montalbano@commercelayer.io>
Date: Tue, 5 Nov 2024 18:10:06 +0100
Subject: [PATCH] fix: dropdown when empty is no more visible

---
 .../PageHeading/PageHeadingToolbar.test.tsx   | 24 +++++++++++++++++++
 .../atoms/PageHeading/PageHeadingToolbar.tsx  |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.test.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.test.tsx
index ae85d5466..b6da1b86b 100644
--- a/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.test.tsx
+++ b/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.test.tsx
@@ -61,6 +61,9 @@ describe('PageHeadingToolbar', () => {
 
     expect(queryAllByTestId('toolbar-button').length).toEqual(2)
     expect(queryAllByTestId('toolbar-dropdown-button').length).toEqual(1)
+    expect(queryByTestId('toolbar-dropdown-button')).not.toHaveClass(
+      'md:hidden'
+    )
     const dropDownButton = queryByTestId('toolbar-dropdown-button')
     if (dropDownButton != null) {
       act(() => {
@@ -73,4 +76,25 @@ describe('PageHeadingToolbar', () => {
       })
     }
   })
+
+  it('Should not display the dropdown button when empty', async () => {
+    const { queryAllByTestId, queryByTestId } = render(
+      <PageHeadingToolbar
+        buttons={[
+          {
+            label: 'Primary',
+            size: 'small',
+            onClick: () => {
+              console.log('Primary')
+            }
+          }
+        ]}
+        dropdownItems={[[]]}
+      />
+    )
+
+    expect(queryAllByTestId('toolbar-button').length).toEqual(1)
+    expect(queryAllByTestId('toolbar-dropdown-button').length).toEqual(1)
+    expect(queryByTestId('toolbar-dropdown-button')).toHaveClass('md:hidden')
+  })
 })
diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.tsx
index 17105dc2e..1fe86c9c2 100644
--- a/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.tsx
+++ b/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.tsx
@@ -50,7 +50,7 @@ export const PageHeadingToolbar = withSkeletonTemplate<PageHeadingToolbarProps>(
         icon: 'dotsThree',
         size: 'small',
         variant: 'secondary',
-        className: dropdownItems.length > 0 ? '' : 'flex md:hidden',
+        className: dropdownItems.flat().length > 0 ? '' : 'flex md:hidden',
         dropdownItems: combinedDropdownItems
       })
     }