feat(content-explorer): clickable status message for include subfolders (#3266)

* feat(content-explorer): clickable status message for include subfolders

* feat(content-explorer): clickable status message for include subfolders

* feat(content-explorer): clickable status message for include subfolders

* feat(content-explorer): clickable status message for include subfolders

* feat(content-explorer): clickable status message for include subfolders

* feat(content-explorer): clickable status message for include subfolders

---------

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

Author: pusch-e

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

@@ -54,6 +54,8 @@ class ContentExplorerModalContainer extends Component {
          * @param {number} selectedItemIndex
          */
         onSelectItem: PropTypes.func,
+        /** Called when the number of items selected text is clicked */
+        onViewSelectedClick: PropTypes.func,
         /** Folder is in the process of being created. */
         isCreatingFolder: PropTypes.bool,
         /** Whether the user can see select all checkbox */

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

@@ -31,6 +31,7 @@ type Props = {
     onSelectItem?: (item: Object, index: number) => void,
     onSelectedClick?: () => void,
     onSelectedItemsUpdate?: Function,
+    onViewSelectedClick?: Function,
     title?: string,
 };
 

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

@@ -86,6 +86,8 @@ class ContentExplorer extends Component {
         onChooseItems: PropTypes.func,
         /** Called when selected button is clicked */
         onSelectedClick: PropTypes.func,
+        /** Called when the number of items selected text is clicked */
+        onViewSelectedClick: PropTypes.func,
         /**
          * Called when a destination folder has been selected for moving an item to
          *
@@ -451,6 +453,7 @@ class ContentExplorer extends Component {
             onCancelButtonClick,
             onCreateNewFolderButtonClick,
             onSelectedClick,
+            onViewSelectedClick,
             showCreateNewFolderButton,
             isChooseButtonLoading,
             isCopyButtonLoading,
@@ -598,8 +601,10 @@ class ContentExplorer extends Component {
                     onCancelClick={onCancelButtonClick}
                     onChooseClick={onChooseItems}
                     onCopyClick={onCopyItem}
+                    onFoldersPathUpdated={this.handleFoldersPathUpdated}
                     onSelectedClick={onSelectedClick}
                     onMoveClick={onMoveItem}
+                    onViewSelectedClick={onViewSelectedClick}
                     selectedItems={selectedItems}
                     isNoSelectionAllowed={isNoSelectionAllowed}
                 />

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

@@ -147,6 +147,15 @@
             margin-top: 5px;
         }
 
+        .status-message-link {
+            position: absolute;
+            left: 0;
+            margin-top: 5px;
+            color: $bdl-box-blue;
+            font-size: $bdl-fontSize--dejaBlue;
+            line-height: $bdl-line-height;
+        }
+
         .content-explorer-copy-button {
             margin-right: 0;
         }

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Button from '../../../components/button';
+import PlainButton from '../../../components/plain-button';
 import PrimaryButton from '../../../components/primary-button';
 
 import { ContentExplorerModePropType, FolderPropType, ItemsMapPropType } from '../prop-types';
@@ -37,8 +38,10 @@ const ContentExplorerActionButtons = ({
     onCancelClick,
     onChooseClick,
     onCopyClick,
+    onFoldersPathUpdated,
     onMoveClick,
     onSelectedClick,
+    onViewSelectedClick,
     selectedItems,
     isNoSelectionAllowed,
 }) => {
@@ -74,6 +77,34 @@ const ContentExplorerActionButtons = ({
         }
     };
 
+    const getStatusElement = statusMessage => {
+        let statusElement = <span className="status-message">{statusMessage}</span>;
+
+        if (onViewSelectedClick) {
+            statusElement = (
+                <PlainButton
+                    className="status-message-link"
+                    onClick={() => {
+                        const foldersPath = onViewSelectedClick();
+                        if (foldersPath) {
+                            onFoldersPathUpdated(foldersPath);
+                        }
+                    }}
+                    type="button"
+                >
+                    {statusMessage}
+                </PlainButton>
+            );
+        } else if (onSelectedClick) {
+            statusElement = (
+                <Button className="status-message" onClick={onSelectedClick} type="button">
+                    {statusMessage}
+                </Button>
+            );
+        }
+        return statusElement;
+    };
+
     const renderStatus = () => {
         const numSelected = getChosenItemsFromSelectedItems(selectedItems).length;
 
@@ -87,13 +118,7 @@ const ContentExplorerActionButtons = ({
             );
         }
 
-        const statusElement = onSelectedClick ? (
-            <Button className="status-message" onClick={onSelectedClick}>
-                {statusMessage}
-            </Button>
-        ) : (
-            <span className="status-message">{statusMessage}</span>
-        );
+        const statusElement = getStatusElement(statusMessage);
 
         return contentExplorerMode === ContentExplorerModes.MULTI_SELECT && statusElement;
     };
@@ -173,8 +198,10 @@ ContentExplorerActionButtons.propTypes = {
     onCancelClick: PropTypes.func,
     onChooseClick: PropTypes.func,
     onCopyClick: PropTypes.func,
+    onFoldersPathUpdated: PropTypes.func,
     onMoveClick: PropTypes.func,
     onSelectedClick: PropTypes.func,
+    onViewSelectedClick: PropTypes.func,
     selectedItems: ItemsMapPropType.isRequired,
     isNoSelectionAllowed: PropTypes.bool,
 };

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

@@ -370,6 +370,37 @@ describe('features/content-explorer/content-explorer/ContentExplorerActionButton
             expect(statusMessageId).toBe('boxui.contentExplorer.numFoldersSelected');
         });
 
+        test('should show status element as PlainButton for multi select when onViewSelectedClick is provided', () => {
+            const wrapper = renderComponent({
+                contentExplorerMode: ContentExplorerModes.MULTI_SELECT,
+                selectedItems,
+                onViewSelectedClick: jest.fn(),
+            });
+            expect(wrapper.find('PlainButton').prop('className')).toBe('status-message-link');
+        });
+
+        test('should show status element as Button when onSelectedClick is provided but onViewSelectedClick is not', () => {
+            const wrapper = renderComponent({
+                contentExplorerMode: ContentExplorerModes.MULTI_SELECT,
+                onSelectedClick: jest.fn(),
+                selectedItems,
+            });
+            expect(
+                wrapper
+                    .find('Button')
+                    .at(0)
+                    .prop('className'),
+            ).toBe('status-message');
+        });
+
+        test('should show status element as span when onSelectedClick is not provided nor is onViewSelectedClick', () => {
+            const wrapper = renderComponent({
+                contentExplorerMode: ContentExplorerModes.MULTI_SELECT,
+                selectedItems,
+            });
+            expect(wrapper.find('span').prop('className')).toBe('status-message');
+        });
+
         [
             {
                 contentExplorerMode: ContentExplorerModes.SELECT_FILE,

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

@@ -54,6 +54,7 @@ exports[`features/content-explorer/content-explorer/ContentExplorer render() cus
     }
     isNoSelectionAllowed={false}
     isResponsive={false}
+    onFoldersPathUpdated={[Function]}
     selectedItems={Object {}}
   />
 </div>