fix(content-explorer): add file selection validation callback

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

@@ -91,6 +91,12 @@ class ContentExplorer extends Component {
         onSelectedClick: PropTypes.func,
         /** Called when the number of items selected text is clicked */
         onViewSelectedClick: PropTypes.func,
+        /**
+         * Called before finalizing item selection to validate the selection
+         * @param {Array<Object>} selectedItems - Array of selected items
+         * @returns {boolean} - Return false to prevent selection, true or undefined to allow
+         */
+        onSelection: PropTypes.func,
         /**
          * Called when a destination folder has been selected for moving an item to
          *
@@ -168,6 +174,7 @@ class ContentExplorer extends Component {
         cancelButtonProps: {},
         chooseButtonProps: {},
         className: '',
+        onSelection: undefined,
         searchInputProps: {},
     };
 
@@ -355,6 +362,14 @@ class ContentExplorer extends Component {
             newSelectedItems[item.id] = item;
         }
 
+        // Validate selection if callback provided
+        if (this.props.onSelection) {
+            const isValid = this.props.onSelection(Object.values(newSelectedItems));
+            if (isValid === false) {
+                return; // Prevent selection if validation fails
+            }
+        }
+
         this.setState({ selectedItems: newSelectedItems });
         if (onSelectedItemsUpdate) {
             onSelectedItemsUpdate(newSelectedItems);
@@ -376,6 +391,13 @@ class ContentExplorer extends Component {
         if (item.type === TYPE_FOLDER) {
             this.enterFolder(item);
         } else if (!item.isActionDisabled) {
+            // Validate selection if callback provided
+            if (this.props.onSelection) {
+                const isValid = this.props.onSelection([item]);
+                if (isValid === false) {
+                    return; // Prevent selection if validation fails
+                }
+            }
             onChooseItems([item]);
         }
     };
@@ -435,13 +457,21 @@ class ContentExplorer extends Component {
     };
 
     handleSelectAllClick = async () => {
-        const { onSelectedItemsUpdate } = this.props;
+        const { onSelectedItemsUpdate, onSelection } = this.props;
         if (this.isLoadingItems()) {
             return;
         }
         const { isSelectAllChecked } = this.state;
         const newSelectedItems = isSelectAllChecked ? this.unselectAll() : this.selectAll();
 
+        // Validate selection if callback provided
+        if (onSelection) {
+            const isValid = onSelection(Object.values(newSelectedItems));
+            if (isValid === false) {
+                return; // Prevent selection if validation fails
+            }
+        }
+
         this.setState({ selectedItems: newSelectedItems, isSelectAllChecked: !isSelectAllChecked });
         if (onSelectedItemsUpdate) {
             onSelectedItemsUpdate(newSelectedItems);

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

@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react';
+import type { BoxItem } from '../../../common/types/core';
+
+type Props = {
+    onSelection?: (selectedItems: Array<BoxItem>) => boolean,
+    ...React$ElementConfig<typeof React.Component>,
+};
+
+declare export default class ContentExplorer extends React.Component<Props> {
+    static defaultProps: {
+        onSelection: void,
+    };
+}

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

@@ -531,6 +531,26 @@ describe('features/content-explorer/content-explorer/ContentExplorer', () => {
 
             expect(onChooseItemsSpy.withArgs(items).calledOnce).toBe(true);
         });
+
+        test('should block file selection if onSelection returns false', () => {
+            const items = [{ id: '1', name: 'item1', type: 'file' }];
+            const onSelection = sandbox.stub().returns(false);
+            const wrapper = renderComponent({ items, onSelection, onChooseItems: onChooseItemsSpy }, true);
+
+            wrapper.find('.table-row').simulate('doubleClick');
+            expect(onSelection.calledOnce).toBe(true);
+            expect(onChooseItemsSpy.notCalled).toBe(true);
+        });
+
+        test('should allow file selection if onSelection returns true', () => {
+            const items = [{ id: '1', name: 'item1', type: 'file' }];
+            const onSelection = sandbox.stub().returns(true);
+            const wrapper = renderComponent({ items, onSelection, onChooseItems: onChooseItemsSpy }, true);
+
+            wrapper.find('.table-row').simulate('doubleClick');
+            expect(onSelection.calledOnce).toBe(true);
+            expect(onChooseItemsSpy.calledOnce).toBe(true);
+        });
     });
 
     describe('handleExitSearch()', () => {
@@ -797,5 +817,79 @@ describe('features/content-explorer/content-explorer/ContentExplorer', () => {
             wrapper.instance().handleItemClick({ event: mockEvent, index: 1 });
             expect(Object.keys(wrapper.state('selectedItems')).length).toBe(2);
         });
+
+        test('should block selection if onSelection returns false', () => {
+            const items = [{ id: 'item1', name: 'name1' }];
+            const onSelection = sandbox.stub().returns(false);
+            const mockEvent = { stopPropagation: () => {} };
+
+            const wrapper = renderComponent({
+                items,
+                onSelection,
+                contentExplorerMode: ContentExplorerModes.SELECT_FILE,
+            });
+
+            wrapper.instance().handleItemClick({ event: mockEvent, index: 0 });
+            expect(onSelection.calledOnce).toBe(true);
+            expect(Object.keys(wrapper.state('selectedItems')).length).toBe(0);
+        });
+
+        test('should allow selection if onSelection returns true', () => {
+            const items = [{ id: 'item1', name: 'name1' }];
+            const onSelection = sandbox.stub().returns(true);
+            const mockEvent = { stopPropagation: () => {} };
+
+            const wrapper = renderComponent({
+                items,
+                onSelection,
+                contentExplorerMode: ContentExplorerModes.SELECT_FILE,
+            });
+
+            wrapper.instance().handleItemClick({ event: mockEvent, index: 0 });
+            expect(onSelection.calledOnce).toBe(true);
+            expect(Object.keys(wrapper.state('selectedItems')).length).toBe(1);
+        });
+
+        test('should allow selection if onSelection is undefined', () => {
+            const items = [{ id: 'item1', name: 'name1' }];
+            const mockEvent = { stopPropagation: () => {} };
+
+            const wrapper = renderComponent({
+                items,
+                contentExplorerMode: ContentExplorerModes.SELECT_FILE,
+            });
+
+            wrapper.instance().handleItemClick({ event: mockEvent, index: 0 });
+            expect(Object.keys(wrapper.state('selectedItems')).length).toBe(1);
+        });
+    });
+
+    describe('handleSelectAllClick() with onSelection', () => {
+        const items = [
+            { id: 'item1', name: 'name1' },
+            { id: 'item2', name: 'name2' },
+        ];
+
+        test('should block select all if onSelection returns false', () => {
+            const onSelection = sandbox.stub().returns(false);
+            const wrapper = renderComponent({ items, onSelection });
+            wrapper.setState({ isSelectAllChecked: false });
+
+            wrapper.instance().handleSelectAllClick();
+            expect(onSelection.calledOnce).toBe(true);
+            expect(wrapper.state('isSelectAllChecked')).toBe(false);
+            expect(Object.keys(wrapper.state('selectedItems')).length).toBe(0);
+        });
+
+        test('should allow select all if onSelection returns true', () => {
+            const onSelection = sandbox.stub().returns(true);
+            const wrapper = renderComponent({ items, onSelection });
+            wrapper.setState({ isSelectAllChecked: false });
+
+            wrapper.instance().handleSelectAllClick();
+            expect(onSelection.calledOnce).toBe(true);
+            expect(wrapper.state('isSelectAllChecked')).toBe(true);
+            expect(Object.keys(wrapper.state('selectedItems')).length).toBe(2);
+        });
     });
 });