feat(content-explorer-modal-container): add noItemsRenderer prop (#3945)

Author: psatala-box

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

@@ -153,6 +153,8 @@ class ContentExplorerModalContainer extends Component {
         chooseButtonText: PropTypes.node,
         /** Text for the informational notice, defaults to empty string, which makes notice not visible */
         infoNoticeText: PropTypes.string,
+        /** Used to render the no items state. Overrides the default no items state. */
+        noItemsRenderer: PropTypes.func,
     };
 
     static defaultProps = {

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

@@ -66,22 +66,25 @@ describe('features/content-explorer/content-explorer-modal-container/ContentExpl
             expect(wrapper.find('NewFolderModal').prop('parentFolderName')).toEqual(parentFolderName);
         });
 
-        test('should pass searchInputProps, chooseButtonText, onSelectItem, and onSelectedClick to ContentExplorerModal', () => {
+        test('should pass searchInputProps, chooseButtonText, onSelectItem, onSelectedClick and noItemsRenderer to ContentExplorerModal', () => {
             const searchInputProps = { placeholder: 'test' };
             const chooseButtonText = 'test';
             const onSelectedClick = () => {};
             const onSelectItem = () => {};
+            const noItemsRenderer = () => <div>No items</div>;
             const wrapper = renderComponent({
                 searchInputProps,
                 chooseButtonText,
                 onSelectedClick,
                 onSelectItem,
+                noItemsRenderer,
             });
 
             expect(wrapper.find('ContentExplorerModal').prop('searchInputProps')).toEqual(searchInputProps);
             expect(wrapper.find('ContentExplorerModal').prop('chooseButtonText')).toEqual(chooseButtonText);
             expect(wrapper.find('ContentExplorerModal').prop('onSelectedClick')).toEqual(onSelectedClick);
             expect(wrapper.find('ContentExplorerModal').prop('onSelectItem')).toEqual(onSelectItem);
+            expect(wrapper.find('ContentExplorerModal').prop('noItemsRenderer')).toEqual(noItemsRenderer);
         });
 
         test('should render ContentExplorerModal and NewFolderModal in Portal by default', () => {

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

@@ -36,6 +36,7 @@ type Props = {
     shouldNotUsePortal?: boolean,
     title?: string,
     infoNoticeText?: string,
+    noItemsRenderer?: Function,
 };
 
 const ContentExplorerModal = ({

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

@@ -63,18 +63,18 @@ describe('features/content-explorer/content-explorer-modal/ContentExplorerModal'
             expect(wrapper).toMatchSnapshot();
         });
 
-        test('should pass onSelectedClick and onSelectItem to ContentExplorer', () => {
+        test('should pass onSelectedClick, onSelectItem, infoNoticeText and noItemsRenderer to ContentExplorer', () => {
             const onSelectedClick = () => {};
             const onSelectItem = () => {};
-            const wrapper = renderComponent({ onSelectedClick, onSelectItem });
+            const infoNoticeText = 'info notice text';
+            const noItemsRenderer = () => <div>No items</div>;
+
+            const wrapper = renderComponent({ onSelectedClick, onSelectItem, infoNoticeText, noItemsRenderer });
+
             expect(wrapper.find('ContentExplorer').prop('onSelectedClick')).toEqual(onSelectedClick);
             expect(wrapper.find('ContentExplorer').prop('onSelectItem')).toEqual(onSelectItem);
-        });
-
-        test('should pass infoNoticeText to ContentExplorer', () => {
-            const infoNoticeText = 'info notice text';
-            const wrapper = renderComponent({ infoNoticeText });
             expect(wrapper.find('ContentExplorer').prop('infoNoticeText')).toEqual(infoNoticeText);
+            expect(wrapper.find('ContentExplorer').prop('noItemsRenderer')).toEqual(noItemsRenderer);
         });
     });
 });

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

@@ -161,6 +161,8 @@ class ContentExplorer extends Component {
         searchInputProps: PropTypes.object,
         /** Text for the informational notice, defaults to empty string, which makes notice not visible */
         infoNoticeText: PropTypes.string,
+        /** Used to render the no items state. Overrides the default no items state. */
+        noItemsRenderer: PropTypes.func,
     };
 
     static defaultProps = {
@@ -500,6 +502,7 @@ class ContentExplorer extends Component {
             listHeight,
             searchInputProps,
             infoNoticeText,
+            noItemsRenderer,
             ...rest
         } = this.props;
         const { isInSearchMode, foldersPath, isSelectAllChecked } = this.state;
@@ -600,7 +603,7 @@ class ContentExplorer extends Component {
                     itemNameLinkRenderer={itemNameLinkRenderer}
                     items={items}
                     itemRowRenderer={itemRowRenderer}
-                    noItemsRenderer={this.renderItemListEmptyState}
+                    noItemsRenderer={noItemsRenderer || this.renderItemListEmptyState}
                     numItemsPerPage={numItemsPerPage}
                     numTotalItems={numTotalItems}
                     onItemClick={this.handleItemClick}

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

@@ -579,6 +579,27 @@ describe('features/content-explorer/content-explorer/ContentExplorer', () => {
         });
     });
 
+    describe('noItemsRenderer', () => {
+        const customEmptyStateClassName = 'custom-empty-state';
+
+        test('should render custom empty state when specified', () => {
+            const wrapper = renderComponent(
+                { noItemsRenderer: () => <div className={customEmptyStateClassName} /> },
+                true,
+            );
+
+            expect(wrapper.exists(`.${customEmptyStateClassName}`)).toBe(true);
+            expect(wrapper.exists('ContentExplorerEmptyState')).toBe(false);
+        });
+
+        test('should render default empty state when not specified', () => {
+            const wrapper = renderComponent({}, true);
+
+            expect(wrapper.exists('ContentExplorerEmptyState')).toBe(true);
+            expect(wrapper.exists(`.${customEmptyStateClassName}`)).toBe(false);
+        });
+    });
+
     describe('handleDocumentClick', () => {
         test('should deselect when the click did not occur inside the content explorer and not in multi select mode', () => {
             const item = { id: 'id', name: 'name' };