feat: Add option to display header in ContentExplorerModalContainer (#3144)

* feat: Add option to display header in ContentExplorerModalContainer

* feat(content-explorer): Add additional props to modal container

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

Author: apieceofbart

src/features/content-explorer/content-explorer-modal-container/ContentExplorerModalContainer.js

@@ -8,6 +8,11 @@ import NewFolderModal from '../new-folder-modal';
 
 class ContentExplorerModalContainer extends Component {
     static propTypes = {
+        /**
+         * Extra columns displayed in the folders table after folder name column
+         * Each column has to be a Column element
+         */
+        additionalColumns: PropTypes.arrayOf(PropTypes.element),
         /** Breadcrumb component options */
         breadcrumbProps: BreadcrumbPropType,
         /** Adds class name. */
@@ -110,19 +115,20 @@ class ContentExplorerModalContainer extends Component {
         itemNameLinkRenderer: PropTypes.func,
         /** Used to render item buttons in the list. Overrides the default buttons. */
         itemButtonRenderer: PropTypes.func,
+        /** Height of an item row */
+        itemRowHeight: PropTypes.number,
+        /** Used to render the row element for items on the list */
+        itemRowRenderer: PropTypes.func,
+        /** Height of the item list header, defaults to 0, which makes header not visible */
+        listHeaderHeight: PropTypes.number,
+        /** Used to render the header row on the item list */
+        listHeaderRenderer: PropTypes.func,
         /** Whether the new folder button should be shown */
         showCreateNewFolderButton: PropTypes.bool,
         /** Props for the search input */
         searchInputProps: PropTypes.object,
         /** Custom text for the choose button */
         chooseButtonText: PropTypes.node,
-        /** Table row height */
-        rowHeight: PropTypes.number,
-        /**
-         * Extra columns displayed in the folders table after folder name column
-         * Each column has to be a Column element
-         */
-        additionalColumns: PropTypes.arrayOf(PropTypes.element),
     };
 
     static defaultProps = {

src/features/content-explorer/content-explorer-modal/ContentExplorerModal.js

@@ -18,10 +18,13 @@ type Props = {
     description?: string,
     isOpen?: boolean,
     isResponsive?: boolean,
+    itemRowHeight?: number,
+    itemRowRenderer?: Function,
+    listHeaderHeight?: number,
+    listHeaderRenderer?: Function,
     onRequestClose?: Function,
     onSelectItem?: (item: Object, index: number) => void,
     onSelectedClick?: () => void,
-    rowHeight?: number,
     title?: string,
 };
 

src/features/content-explorer/content-explorer/ContentExplorer.js

@@ -19,6 +19,11 @@ class ContentExplorer extends Component {
     static propTypes = {
         /** Props for the action buttons container */
         actionButtonsProps: PropTypes.object,
+        /**
+         * Extra columns displayed in the folders table after folder name column
+         * Each column has to be a Column element
+         */
+        additionalColumns: PropTypes.arrayOf(PropTypes.element),
         /** Props for breadcrumbs */
         breadcrumbProps: PropTypes.object,
         /** Props for the cancel button */
@@ -117,21 +122,20 @@ class ContentExplorer extends Component {
         itemNameLinkRenderer: PropTypes.func,
         /** Used to render item buttons in the list. Overrides the default buttons. */
         itemButtonRenderer: PropTypes.func,
+        /** Height of an item row */
+        itemRowHeight: PropTypes.number,
         /** Used to render the row element for items on the list. Allows row customizations such as adding tooltips, etc. */
         itemRowRenderer: PropTypes.func,
+        /** Height of the item list header, defaults to 0, which makes header not visible */
+        listHeaderHeight: PropTypes.number,
+        /** Used to render the header row on the item list */
+        listHeaderRenderer: PropTypes.func,
         /** Width of the item list */
         listWidth: PropTypes.number.isRequired,
         /** Height of the item list */
         listHeight: PropTypes.number.isRequired,
         /** Props for the search input */
         searchInputProps: PropTypes.object,
-        /** Height of the row */
-        rowHeight: PropTypes.number,
-        /**
-         * Extra columns displayed in the folders table after folder name column
-         * Each column has to be a Column element
-         */
-        additionalColumns: PropTypes.arrayOf(PropTypes.element),
     };
 
     static defaultProps = {
@@ -396,6 +400,7 @@ class ContentExplorer extends Component {
     render() {
         const {
             actionButtonsProps,
+            additionalColumns,
             breadcrumbProps,
             cancelButtonProps,
             chooseButtonProps,
@@ -424,12 +429,13 @@ class ContentExplorer extends Component {
             itemIconRenderer,
             itemNameLinkRenderer,
             itemButtonRenderer,
+            itemRowHeight,
             itemRowRenderer,
+            listHeaderHeight,
+            listHeaderRenderer,
             listWidth,
             listHeight,
             searchInputProps,
-            rowHeight,
-            additionalColumns,
             ...rest
         } = this.props;
         const { isInSearchMode, foldersPath, selectedItems, isSelectAllChecked } = this.state;
@@ -507,6 +513,8 @@ class ContentExplorer extends Component {
                 <ItemList
                     additionalColumns={additionalColumns}
                     contentExplorerMode={contentExplorerMode}
+                    headerHeight={listHeaderHeight}
+                    headerRenderer={listHeaderRenderer}
                     height={listHeight}
                     isResponsive={isResponsive}
                     itemButtonRenderer={itemButtonRenderer}
@@ -521,9 +529,9 @@ class ContentExplorer extends Component {
                     onItemDoubleClick={this.handleItemDoubleClick}
                     onItemNameClick={this.handleItemNameClick}
                     onLoadMoreItems={onLoadMoreItems}
+                    rowHeight={itemRowHeight}
                     selectedItems={selectedItems}
                     width={listWidth}
-                    rowHeight={rowHeight}
                 />
                 <ContentExplorerActionButtons
                     actionButtonsProps={actionButtonsProps}

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

@@ -137,6 +137,8 @@ const ItemList = ({
     onItemDoubleClick,
     onItemNameClick,
     onLoadMoreItems,
+    headerHeight,
+    headerRenderer,
     itemIconRenderer,
     itemNameLinkRenderer,
     itemButtonRenderer,
@@ -219,6 +221,8 @@ const ItemList = ({
                 headerClassName="table-header-item"
                 width={width}
                 height={height}
+                headerHeight={headerHeight}
+                headerRowRenderer={headerRenderer}
                 rowHeight={rowHeight}
                 rowCount={items.length}
                 onRowClick={onItemClick}
@@ -282,6 +286,8 @@ ItemList.propTypes = {
     onItemDoubleClick: PropTypes.func,
     onItemNameClick: PropTypes.func,
     onLoadMoreItems: PropTypes.func,
+    headerHeight: PropTypes.number,
+    headerRenderer: PropTypes.func,
     itemIconRenderer: PropTypes.func,
     itemNameLinkRenderer: PropTypes.func,
     itemButtonRenderer: PropTypes.func,

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

@@ -291,4 +291,26 @@ describe('features/content-explorer/item-list/ItemList', () => {
             expect(wrapper.find('.item-list-accessLevel-col').length).toBe(3);
         });
     });
+
+    describe('headerHeight', () => {
+        test('should display header row with specified height', () => {
+            const headerHeight = 30;
+            const wrapper = renderComponent({
+                headerHeight,
+            });
+
+            const header = wrapper.find('.ReactVirtualized__Table__headerRow');
+            expect(header.props().style.height).toBe(headerHeight);
+        });
+    });
+
+    describe('headerRenderer', () => {
+        test('should use headerRenderer when specified', () => {
+            const wrapper = renderComponent({
+                headerRenderer: () => <div data-testid="customHeader">Custom Header</div>,
+            });
+            const headerRow = wrapper.find("[data-testid='customHeader']");
+            expect(headerRow.length).toBe(1);
+        });
+    });
 });