feat(content-explorer): include subfolders toggle (#3242)

* feat(content-explorer): include subfolders toggle

* feat(content explorer include subfolders): remove obsolete css

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

* feat(content-explorer): include subfolders toggle

---------

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

Author: pusch-e

i18n/en-US.properties

@@ -904,6 +904,8 @@ boxui.contentExplorer.emptySearch = Sorry, we couldn't find what you're looking
 boxui.contentExplorer.filepath = File path
 # Text shown for the current folder and its number of items next to the folder tree breadcrumbs
 boxui.contentExplorer.folderTreeBreadcrumbsText = {folderName} ({totalItems})
+# Label text shown next to the Include Subfolders toggle
+boxui.contentExplorer.includeSubfolders = Include Subfolders
 # Text shown on button used to move an item to a different folder
 boxui.contentExplorer.move = Move
 # Text shown as the header for a column of item names in the list

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

@@ -62,6 +62,8 @@ class ContentExplorerModalContainer extends Component {
         createFolderError: PropTypes.string,
         /** Configures the content explorer based on the user's intended action (ex. select file or move/copy) */
         contentExplorerMode: ContentExplorerModePropType.isRequired,
+        /** Props for the include subfolders toggle */
+        includeSubfoldersProps: PropTypes.object,
         /** Initial path of folders. The last folder in the array is the current folder. */
         initialFoldersPath: FoldersPathPropType.isRequired,
         /** Initial items that will show up as selected */
@@ -73,6 +75,16 @@ class ContentExplorerModalContainer extends Component {
          * @param {Array} newFoldersPath
          */
         onEnterFolder: PropTypes.func.isRequired,
+        /** Called when the folders path is updated
+         *
+         * @param {Array} newFoldersPath
+         */
+        onFoldersPathUpdate: PropTypes.func,
+        /** Called whenever the selected items list changes
+         *
+         * @param {Object} selectedItems
+         */
+        onSelectedItemsUpdate: PropTypes.func,
         /**
          * Called when items are chosen.
          *

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

@@ -17,16 +17,20 @@ type Props = {
     customInput?: React.ComponentType<any>,
     description?: string,
     hasFolderTreeBreadcrumbs: boolean,
+    includeSubfoldersProps?: Object,
     isNoSelectionAllowed?: boolean,
     isOpen?: boolean,
     isResponsive?: boolean,
+    itemButtonRenderer: Function,
     itemRowHeight?: number,
     itemRowRenderer?: Function,
     listHeaderHeight?: number,
     listHeaderRenderer?: Function,
+    onFoldersPathUpdate?: Function,
     onRequestClose?: Function,
     onSelectItem?: (item: Object, index: number) => void,
     onSelectedClick?: () => void,
+    onSelectedItemsUpdate?: Function,
     title?: string,
 };
 

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

@@ -7,6 +7,7 @@ import ContentExplorerHeaderActions from './ContentExplorerHeaderActions';
 import ContentExplorerEmptyState from './ContentExplorerEmptyState';
 import ContentExplorerActionButtons from './ContentExplorerActionButtons';
 import ContentExplorerSelectAll from './ContentExplorerSelectAll';
+import ContentExplorerIncludeSubfolders from './ContentExplorerIncludeSubfolders';
 
 import ItemList from '../item-list';
 import { ContentExplorerModePropType, FoldersPathPropType, ItemsPropType } from '../prop-types';
@@ -45,6 +46,8 @@ class ContentExplorer extends Component {
         hasFolderTreeBreadcrumbs: PropTypes.bool,
         /** Any extra items in the header to the right of the search input (and new folder button) */
         headerActionsAccessory: PropTypes.node,
+        /** Props for the include subfolders toggle */
+        includeSubfoldersProps: PropTypes.object,
         /** Initial path of folders. The last folder in the array is the current folder. */
         initialFoldersPath: FoldersPathPropType.isRequired,
         /** Initial items that will show up as selected */
@@ -58,6 +61,16 @@ class ContentExplorer extends Component {
          * @param {Array} newFoldersPath
          */
         onEnterFolder: PropTypes.func.isRequired,
+        /** Called when the folders path is updated
+         *
+         * @param {Array} newFoldersPath
+         */
+        onFoldersPathUpdate: PropTypes.func,
+        /** Called whenever the selected items list changes
+         *
+         * @param {Object} selectedItems
+         */
+        onSelectedItemsUpdate: PropTypes.func,
         /**
          * Called when an item is selected
          *
@@ -169,9 +182,7 @@ class ContentExplorer extends Component {
         const { initialFoldersPath } = this.props;
 
         if (prevInitialFoldersPath !== initialFoldersPath) {
-            this.setState({
-                foldersPath: initialFoldersPath,
-            });
+            this.handleFoldersPathUpdated(initialFoldersPath);
         }
     }
 
@@ -231,13 +242,17 @@ class ContentExplorer extends Component {
     };
 
     deselectItems() {
+        const { onSelectedItemsUpdate } = this.props;
         this.setState({
             selectedItems: {},
         });
+        if (onSelectedItemsUpdate) {
+            onSelectedItemsUpdate({});
+        }
     }
 
     enterFolder = enteredFolder => {
-        const { contentExplorerMode, onEnterFolder } = this.props;
+        const { contentExplorerMode, onEnterFolder, onFoldersPathUpdate } = this.props;
         const { foldersPath } = this.state;
 
         const folderIndex = foldersPath.findIndex(folder => folder.id === enteredFolder.id);
@@ -261,14 +276,22 @@ class ContentExplorer extends Component {
         }
 
         this.setState(newState);
+        if (onFoldersPathUpdate) {
+            onFoldersPathUpdate(newFoldersPath);
+        }
 
         onEnterFolder(enteredFolder, newFoldersPath);
     };
 
     handleFoldersPathUpdated = newFoldersPath => {
+        const { onFoldersPathUpdate } = this.props;
+
         this.setState({
             foldersPath: newFoldersPath,
         });
+        if (onFoldersPathUpdate) {
+            onFoldersPathUpdate(newFoldersPath);
+        }
     };
 
     handleSearchSubmit = searchQuery => {
@@ -286,11 +309,11 @@ class ContentExplorer extends Component {
     };
 
     handleItemClick = ({ event, index }) => {
-        const { contentExplorerMode, items, onSelectItem } = this.props;
+        const { contentExplorerMode, items, onSelectItem, onSelectedItemsUpdate } = this.props;
         const { selectedItems } = this.state;
         const item = items[index];
 
-        if (item.isDisabled || item.isLoading) {
+        if (item.isDisabled || item.isLoading || item.isActionDisabled) {
             return;
         }
 
@@ -306,6 +329,10 @@ class ContentExplorer extends Component {
 
         this.setState({ selectedItems: newSelectedItems, isSelectAllChecked: false });
 
+        if (onSelectedItemsUpdate) {
+            onSelectedItemsUpdate(newSelectedItems);
+        }
+
         if (onSelectItem) {
             onSelectItem(item, index);
         }
@@ -321,7 +348,7 @@ class ContentExplorer extends Component {
 
         if (item.type === TYPE_FOLDER) {
             this.enterFolder(item);
-        } else {
+        } else if (!item.isActionDisabled) {
             onChooseItems([item]);
         }
         this.setState({ isSelectAllChecked: false });
@@ -385,14 +412,16 @@ class ContentExplorer extends Component {
     };
 
     handleSelectAllClick = async () => {
-        // check if the items list is still loading
-        const { items } = this.props;
+        const { items, onSelectedItemsUpdate } = this.props;
         if (items && items[0] && items[0].isLoading) {
             return;
         }
         const { isSelectAllChecked } = this.state;
         const newSelectedItems = isSelectAllChecked ? this.unselectAll() : this.selectAll();
         this.setState({ selectedItems: newSelectedItems, isSelectAllChecked: !isSelectAllChecked });
+        if (onSelectedItemsUpdate) {
+            onSelectedItemsUpdate(newSelectedItems);
+        }
     };
 
     renderItemListEmptyState = () => {
@@ -433,6 +462,7 @@ class ContentExplorer extends Component {
             numItemsPerPage,
             numTotalItems,
             onLoadMoreItems,
+            includeSubfoldersProps,
             itemIconRenderer,
             itemNameLinkRenderer,
             itemButtonRenderer,
@@ -513,13 +543,17 @@ class ContentExplorer extends Component {
                 >
                     {headerActionsAccessory}
                 </ContentExplorerHeaderActions>
-                {isSelectAllAllowed && (
-                    <ContentExplorerSelectAll
-                        numTotalItems={numTotalItems}
-                        isSelectAllChecked={isSelectAllChecked}
-                        handleSelectAllClick={this.handleSelectAllClick}
-                    />
-                )}
+                <div className="bdl-ContentExplorer-subheader">
+                    {includeSubfoldersProps && <ContentExplorerIncludeSubfolders {...includeSubfoldersProps} />}
+                    {isSelectAllAllowed && (
+                        <ContentExplorerSelectAll
+                            handleSelectAllClick={this.handleSelectAllClick}
+                            isLabelHidden={!!includeSubfoldersProps}
+                            isSelectAllChecked={isSelectAllChecked}
+                            numTotalItems={numTotalItems}
+                        />
+                    )}
+                </div>
                 <ItemList
                     additionalColumns={additionalColumns}
                     contentExplorerMode={contentExplorerMode}

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

@@ -56,7 +56,7 @@
         align-items: center;
         height: 30px;
         margin-top: 15px;
-        margin-bottom: 15px;
+        margin-bottom: 5px;
 
         .bdl-ContentExplorerFolderTreeBreadcrumbs-button {
             margin: 0 10px 0 0;
@@ -72,22 +72,52 @@
         }
     }
 
+    .bdl-ContentExplorer-subheader {
+        display: flex;
+        align-items: center;
+        height: 10 * $bdl-grid-unit;
+
+        .checkbox-container,
+        .toggle-container {
+            margin: 0;
+        }
+
+        .toggle-simple-label {
+            display: flex;
+            align-items: center;
+            min-width: auto;
+        }
+
+        .content-explorer-select-all-checkbox {
+            margin-right: 18px;
+
+            &:first-child {
+                margin-left: auto;
+            }
+        }
+    }
+
     .content-explorer-select-all-container {
-        display: block;
-        height: 8 * $bdl-grid-unit;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        height: 10 * $bdl-grid-unit;
 
         .content-explorer-select-all-items-counter {
             margin-left: 2px;
         }
 
         .content-explorer-select-all-checkbox-label {
-            float: right;
-            margin-right: 42px;
+            margin-right: 10px;
+            margin-left: auto;
         }
+    }
 
-        .content-explorer-select-all-checkbox {
-            float: right;
-            margin-right: -21 * $bdl-grid-unit;
+    .bdl-ContentExplorerIncludeSubfolders-icon {
+        margin-left: 4px;
+
+        path {
+            fill: $bdl-box-blue;
         }
     }
 

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import InfoBadge16 from '../../../icon/fill/InfoBadge16';
+import Toggle from '../../../components/toggle';
+import Tooltip from '../../../components/tooltip';
+import messages from '../messages';
+
+const ContentExplorerIncludeSubfolders = ({ isDisabled, onChange, tooltipMessage }) => {
+    const label = (
+        <>
+            <FormattedMessage {...messages.includeSubfolders} />
+            {tooltipMessage && (
+                <Tooltip text={<FormattedMessage {...tooltipMessage} />}>
+                    <InfoBadge16 className="bdl-ContentExplorerIncludeSubfolders-icon" fill="blue" />
+                </Tooltip>
+            )}
+        </>
+    );
+    return <Toggle label={label} isDisabled={isDisabled} onChange={onChange} />;
+};
+
+ContentExplorerIncludeSubfolders.propTypes = {
+    isDisabled: PropTypes.bool,
+    onChange: PropTypes.func,
+    tooltipMessage: PropTypes.object,
+};
+
+export { ContentExplorerIncludeSubfolders as ContentExplorerIncludeSubfoldersBase };
+export default injectIntl(ContentExplorerIncludeSubfolders);

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

@@ -2,35 +2,49 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import Checkbox from '../../../components/checkbox/Checkbox';
-
+import Tooltip from '../../../components/tooltip';
 import messages from '../messages';
 
-const ContentExplorerSelectAll = ({ intl, numTotalItems = 0, isSelectAllChecked, handleSelectAllClick }) => (
+const ContentExplorerSelectAll = ({
+    handleSelectAllClick,
+    intl,
+    isLabelHidden,
+    isSelectAllChecked,
+    numTotalItems = 0,
+}) => (
     <div className="content-explorer-select-all-container">
-        <label className="content-explorer-select-all-items-counter">
-            {numTotalItems === 1 ? (
-                <FormattedMessage {...messages.result} values={{ itemsCount: intl.formatNumber(numTotalItems) }} />
-            ) : (
-                <FormattedMessage {...messages.results} values={{ itemsCount: intl.formatNumber(numTotalItems) }} />
-            )}
-        </label>
-        <label className="content-explorer-select-all-checkbox-label">
-            <FormattedMessage {...messages.selectAll} />
-        </label>
-        <Checkbox
-            hideLabel
-            className="content-explorer-select-all-checkbox"
-            onChange={handleSelectAllClick}
-            isChecked={isSelectAllChecked}
-        />
+        {!isLabelHidden && (
+            <label className="content-explorer-select-all-items-counter">
+                {numTotalItems === 1 ? (
+                    <FormattedMessage {...messages.result} values={{ itemsCount: intl.formatNumber(numTotalItems) }} />
+                ) : (
+                    <FormattedMessage {...messages.results} values={{ itemsCount: intl.formatNumber(numTotalItems) }} />
+                )}
+            </label>
+        )}
+        {!isLabelHidden && (
+            <label className="content-explorer-select-all-checkbox-label">
+                <FormattedMessage {...messages.selectAll} />
+            </label>
+        )}
+        <Tooltip isShown={isLabelHidden ? undefined : false} text={<FormattedMessage {...messages.selectAll} />}>
+            <Checkbox
+                hideLabel
+                className="content-explorer-select-all-checkbox"
+                onChange={handleSelectAllClick}
+                isChecked={isSelectAllChecked}
+            />
+        </Tooltip>
     </div>
 );
 
 ContentExplorerSelectAll.propTypes = {
+    handleSelectAllClick: PropTypes.func,
     intl: PropTypes.any,
-    numTotalItems: PropTypes.number,
     isSelectAllChecked: PropTypes.bool,
-    handleSelectAllClick: PropTypes.func,
+    isLabelHidden: PropTypes.bool,
+    numTotalItems: PropTypes.number,
 };
+
 export { ContentExplorerSelectAll as ContentExplorerSelectAllBase };
 export default injectIntl(ContentExplorerSelectAll);