feat(content-explorer): Allow selecting empty selection in ContentExplorer (#3175)

feat: Allow selecting empty selection in ContentExplorer

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: apieceofbart

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

@@ -13,6 +13,8 @@ class ContentExplorerModalContainer extends Component {
          * Each column has to be a Column element
          */
         additionalColumns: PropTypes.arrayOf(PropTypes.element),
+        /**  Allow users to choose no selections in MULTI_SELECT mode, defaults to false */
+        isNoSelectionAllowed: PropTypes.bool,
         /** Breadcrumb component options */
         breadcrumbProps: BreadcrumbPropType,
         /** Adds class name. */

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

@@ -16,6 +16,7 @@ type Props = {
     className?: string,
     customInput?: React.ComponentType<any>,
     description?: string,
+    isNoSelectionAllowed?: boolean,
     isOpen?: boolean,
     isResponsive?: boolean,
     itemRowHeight?: number,

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

@@ -24,6 +24,8 @@ class ContentExplorer extends Component {
          * Each column has to be a Column element
          */
         additionalColumns: PropTypes.arrayOf(PropTypes.element),
+        /**  Allow users to choose no selections in MULTI_SELECT mode, defaults to false  */
+        isNoSelectionAllowed: PropTypes.bool,
         /** Props for breadcrumbs */
         breadcrumbProps: PropTypes.object,
         /** Props for the cancel button */
@@ -401,6 +403,7 @@ class ContentExplorer extends Component {
         const {
             actionButtonsProps,
             additionalColumns,
+            isNoSelectionAllowed = false,
             breadcrumbProps,
             cancelButtonProps,
             chooseButtonProps,
@@ -459,7 +462,7 @@ class ContentExplorer extends Component {
             // NOTE: only expecting to have 1 (choose) button so as long as something
             // is selected and that item's isActionDisabled is false, we enable the action button
             areActionButtonsDisabled =
-                selectedItemsIds.length === 0 ||
+                (selectedItemsIds.length === 0 && !isNoSelectionAllowed) ||
                 (selectedItemsIds.length === 1 && selectedItems[selectedItemsIds[0]].isActionDisabled);
         } else if (isViewingSearchResults || contentExplorerMode === ContentExplorerModes.SELECT_FILE) {
             // Buttons are only enabled when an item is selected
@@ -552,6 +555,7 @@ class ContentExplorer extends Component {
                     onSelectedClick={onSelectedClick}
                     onMoveClick={onMoveItem}
                     selectedItems={selectedItems}
+                    isNoSelectionAllowed={isNoSelectionAllowed}
                 />
             </div>
         );

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

@@ -38,6 +38,7 @@ const ContentExplorerActionButtons = ({
     onMoveClick,
     onSelectedClick,
     selectedItems,
+    isNoSelectionAllowed,
 }) => {
     const handleChooseClick = () => {
         let chosenItems = getChosenItemsFromSelectedItems(selectedItems);
@@ -46,7 +47,7 @@ const ContentExplorerActionButtons = ({
             chosenItems = [currentFolder];
         }
 
-        if (onChooseClick && chosenItems.length > 0) {
+        if (onChooseClick && (chosenItems.length > 0 || isNoSelectionAllowed)) {
             onChooseClick(chosenItems);
         }
     };
@@ -164,6 +165,7 @@ ContentExplorerActionButtons.propTypes = {
     onMoveClick: PropTypes.func,
     onSelectedClick: PropTypes.func,
     selectedItems: ItemsMapPropType.isRequired,
+    isNoSelectionAllowed: PropTypes.bool,
 };
 
 export default ContentExplorerActionButtons;

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

@@ -240,6 +240,22 @@ describe('features/content-explorer/content-explorer/ContentExplorer', () => {
                 expect(wrapper.find('ContentExplorerActionButtons').prop('areButtonsDisabled')).toBe(true);
             });
         });
+
+        test('should render with action buttons enabled in MULTI_SELECT mode if there is no selection made when isNoSelectionAllowed is true', () => {
+            const items = [
+                { id: '1', name: 'item1' },
+                { id: '2', name: 'item2' },
+                { id: '3', name: 'item3' },
+            ];
+
+            const wrapper = renderComponent({
+                contentExplorerMode: ContentExplorerModes.MULTI_SELECT,
+                items,
+                isNoSelectionAllowed: true,
+            });
+
+            expect(wrapper.find('ContentExplorerActionButtons').prop('areButtonsDisabled')).toBe(false);
+        });
     });
 
     describe('onEnterFolder', () => {

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

@@ -230,6 +230,31 @@ describe('features/content-explorer/content-explorer/ContentExplorerActionButton
 
             expect(onChooseClickSpy.withArgs([currentFolder]).calledOnce).toBe(true);
         });
+
+        test('should not call onChooseClick in MULTI_SELECT mode if selection is empty', () => {
+            const onChooseClickSpy = sandbox.spy();
+            const wrapper = renderComponent({
+                contentExplorerMode: ContentExplorerModes.MULTI_SELECT,
+                onChooseClick: onChooseClickSpy,
+                selectedItems: {},
+            });
+            wrapper.find('.content-explorer-choose-button').simulate('click');
+
+            expect(onChooseClickSpy.calledOnce).toBe(false);
+        });
+
+        test('should call onChooseClick in MULTI_SELECT mode if selection is empty and isNoSelectionAllowed is true', () => {
+            const onChooseClickSpy = sandbox.spy();
+            const wrapper = renderComponent({
+                contentExplorerMode: ContentExplorerModes.MULTI_SELECT,
+                onChooseClick: onChooseClickSpy,
+                selectedItems: {},
+                isNoSelectionAllowed: true,
+            });
+            wrapper.find('.content-explorer-choose-button').simulate('click');
+
+            expect(onChooseClickSpy.withArgs([]).calledOnce).toBe(true);
+        });
     });
 
     describe('onMoveClick', () => {

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

@@ -50,6 +50,7 @@ exports[`features/content-explorer/content-explorer/ContentExplorer render() cus
         "name": "folder",
       }
     }
+    isNoSelectionAllowed={false}
     isResponsive={false}
     selectedItems={Object {}}
   />