fix(itemlist): Remove header section when list is empty (#3224)

* fix(itemlist): Remove header section when list is empty

* fix(itemlist): Update as per PR comment

Co-authored-by: Trevor <7311041+tjuanitas@users.noreply.github.com>

* fix(itemlist): Remove headerProps const

* fix(itemlist): Add condition for checking noItemsRenderer

---------

Co-authored-by: Trevor <7311041+tjuanitas@users.noreply.github.com>

Author: SkyisAakash

src/features/content-explorer/item-list/ItemList.js

@@ -210,6 +210,11 @@ const ItemList = ({
         };
     }
 
+    if (!noItemsRenderer || items.length > 0) {
+        tableProps.headerHeight = headerHeight;
+        tableProps.headerRowRenderer = headerRenderer;
+    }
+
     return (
         <div
             className={classNames('content-explorer-item-list table', className, {
@@ -221,8 +226,6 @@ const ItemList = ({
                 headerClassName="table-header-item"
                 width={width}
                 height={height}
-                headerHeight={headerHeight}
-                headerRowRenderer={headerRenderer}
                 rowHeight={rowHeight}
                 rowCount={items.length}
                 onRowClick={onItemClick}

src/features/content-explorer/item-list/__tests__/ItemList.test.js

@@ -293,24 +293,50 @@ describe('features/content-explorer/item-list/ItemList', () => {
     });
 
     describe('headerHeight', () => {
-        test('should display header row with specified height', () => {
+        const items = [{ id: '1', name: 'item1' }];
+        test('should display header row with specified height when item list is not empty', () => {
             const headerHeight = 30;
             const wrapper = renderComponent({
                 headerHeight,
+                items,
             });
 
             const header = wrapper.find('.ReactVirtualized__Table__headerRow');
             expect(header.props().style.height).toBe(headerHeight);
         });
+
+        test('should not display header row with specified height when item list is empty and noItemsRenderer is present', () => {
+            const headerHeight = 30;
+            const noItemsRenderer = () => <></>;
+            const wrapper = renderComponent({
+                headerHeight,
+                noItemsRenderer,
+            });
+
+            const header = wrapper.find('.ReactVirtualized__Table__headerRow');
+            expect(header.props().style.height).not.toBe(headerHeight);
+        });
     });
 
     describe('headerRenderer', () => {
-        test('should use headerRenderer when specified', () => {
+        const items = [{ id: '1', name: 'item1' }];
+        test('should use headerRenderer when specified if item list is not empty', () => {
             const wrapper = renderComponent({
                 headerRenderer: () => <div data-testid="customHeader">Custom Header</div>,
+                items,
             });
             const headerRow = wrapper.find("[data-testid='customHeader']");
             expect(headerRow.length).toBe(1);
         });
+
+        test('should not use headerRenderer when specified if item list is empty and noItemsRenderer is present', () => {
+            const noItemsRenderer = () => <></>;
+            const wrapper = renderComponent({
+                headerRenderer: () => <div data-testid="customHeader">Custom Header</div>,
+                noItemsRenderer,
+            });
+            const headerRow = wrapper.find("[data-testid='customHeader']");
+            expect(headerRow.length).not.toBe(1);
+        });
     });
 });