box-ui-elements 23.4.0-beta.35 → 23.4.0-beta.36

package/src/elements/common/sub-header/SubHeader.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import noop from 'lodash/noop';
+import classNames from 'classnames';
 import { PageHeader } from '@box/blueprint-web';
+import type { Selection } from 'react-aria-components';
+
 import SubHeaderLeft from './SubHeaderLeft';
+import SubHeaderLeftV2 from './SubHeaderLeftV2';
 import SubHeaderRight from './SubHeaderRight';
 import type { ViewMode } from '../flowTypes';
 import type { View, Collection } from '../../../common/types/core';
@@ -19,6 +23,7 @@ export interface SubHeaderProps {
     gridMinColumns?: number;
     isSmall: boolean;
     maxGridColumnCountForWidth?: number;
+    onClearSelectedItemIds: () => void;
     onCreate: () => void;
     onGridViewSliderChange?: (newSliderValue: number) => void;
     onItemClick: (id: string | null, triggerNavigationEvent: boolean | null) => void;
@@ -28,6 +33,8 @@ export interface SubHeaderProps {
     portalElement?: HTMLElement;
     rootId: string;
     rootName?: string;
+    selectedItemIds: Selection;
+    title?: string;
     view: View;
     viewMode?: ViewMode;
 }
@@ -42,6 +49,7 @@ const SubHeader = ({
     maxGridColumnCountForWidth = 0,
     onGridViewSliderChange = noop,
     isSmall,
+    onClearSelectedItemIds,
     onCreate,
     onItemClick,
     onSortChange,
@@ -50,6 +58,8 @@ const SubHeader = ({
     portalElement,
     rootId,
     rootName,
+    selectedItemIds,
+    title,
     view,
     viewMode = VIEW_MODE_LIST,
 }: SubHeaderProps) => {
@@ -60,7 +70,11 @@ const SubHeader = ({
     }
 
     return (
-        <PageHeader.Root className="be-sub-header" data-testid="be-sub-header" variant="inline">
+        <PageHeader.Root
+            className={classNames({ 'be-sub-header': !isMetadataViewV2Feature })}
+            data-testid="be-sub-header"
+            variant="inline"
+        >
             <PageHeader.StartElements>
                 {view !== VIEW_METADATA && !isMetadataViewV2Feature && (
                     <SubHeaderLeft
@@ -73,6 +87,15 @@ const SubHeader = ({
                         view={view}
                     />
                 )}
+                {isMetadataViewV2Feature && (
+                    <SubHeaderLeftV2
+                        currentCollection={currentCollection}
+                        onClearSelectedItemIds={onClearSelectedItemIds}
+                        rootName={rootName}
+                        selectedItemIds={selectedItemIds}
+                        title={title}
+                    />
+                )}
             </PageHeader.StartElements>
             <PageHeader.EndElements>
                 <SubHeaderRight

package/src/elements/common/sub-header/SubHeaderLeftV2.scss

@@ -0,0 +1,3 @@
+.be-SubHeaderLeftV2--selection {
+    gap: var(--space-3);
+}

package/src/elements/common/sub-header/SubHeaderLeftV2.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { XMark } from '@box/blueprint-web-assets/icons/Fill/index';
+import { IconButton, PageHeader, Text } from '@box/blueprint-web';
+import type { Selection } from 'react-aria-components';
+import type { Collection } from '../../../common/types/core';
+import messages from '../messages';
+
+import './SubHeaderLeftV2.scss';
+
+export interface SubHeaderLeftV2Props {
+    currentCollection: Collection;
+    onClearSelectedItemIds?: () => void;
+    rootName?: string;
+    selectedItemIds: Selection;
+    title?: string;
+}
+
+const SubHeaderLeftV2 = (props: SubHeaderLeftV2Props) => {
+    const { currentCollection, onClearSelectedItemIds, rootName, selectedItemIds, title } = props;
+    const { formatMessage } = useIntl();
+
+    // Generate selected item text based on selected keys
+    const selectedItemText: string = useMemo(() => {
+        const selectedCount = selectedItemIds === 'all' ? currentCollection.items.length : selectedItemIds.size;
+
+        if (selectedCount === 0) {
+            return '';
+        }
+
+        // Case 1: Single selected item - show item name
+        if (selectedCount === 1) {
+            const selectedKey =
+                selectedItemIds === 'all' ? currentCollection.items[0].id : selectedItemIds.values().next().value;
+            const selectedItem = currentCollection.items.find(item => item.id === selectedKey);
+            return selectedItem?.name ?? '';
+        }
+        // Case 2: Multiple selected items - show count
+        if (selectedCount > 1) {
+            return formatMessage(messages.numFilesSelected, { numSelected: selectedCount });
+        }
+        return '';
+    }, [currentCollection.items, formatMessage, selectedItemIds]);
+
+    // Case 1 and 2: selected item text with X button
+    if (selectedItemText) {
+        return (
+            <PageHeader.Root className="be-SubHeaderLeftV2--selection" variant="default">
+                <PageHeader.Corner>
+                    <IconButton
+                        aria-label={formatMessage(messages.clearSelection)}
+                        icon={XMark}
+                        onClick={onClearSelectedItemIds}
+                        variant="small-utility"
+                    />
+                </PageHeader.Corner>
+
+                <PageHeader.StartElements>
+                    <Text as="span">{selectedItemText}</Text>
+                </PageHeader.StartElements>
+            </PageHeader.Root>
+        );
+    }
+
+    // Case 3: No selected items - show title if provided, otherwise show root name
+    return (
+        <Text as="h1" variant="titleXLarge">
+            {title ?? rootName}
+        </Text>
+    );
+};
+
+export default SubHeaderLeftV2;

package/src/elements/common/sub-header/__tests__/SubHeaderLeftV2.test.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { render, screen } from '../../../../test-utils/testing-library';
+import SubHeaderLeftV2 from '../SubHeaderLeftV2';
+import type { Collection } from '../../../../common/types/core';
+import type { SubHeaderLeftV2Props } from '../SubHeaderLeftV2';
+
+const mockCollection: Collection = {
+    items: [
+        { id: '1', name: 'file1.txt' },
+        { id: '2', name: 'file2.txt' },
+        { id: '3', name: 'file3.txt' },
+    ],
+};
+
+const defaultProps: SubHeaderLeftV2Props = {
+    currentCollection: mockCollection,
+    selectedItemIds: new Set(),
+};
+
+const renderComponent = (props: Partial<SubHeaderLeftV2Props> = {}) =>
+    render(<SubHeaderLeftV2 {...defaultProps} {...props} />);
+
+describe('elements/common/sub-header/SubHeaderLeftV2', () => {
+    describe('when no items are selected', () => {
+        test('should render title if provided', () => {
+            renderComponent({
+                rootName: 'Custom Folder',
+                title: 'Custom Title',
+                selectedItemIds: new Set(),
+            });
+
+            expect(screen.getByText('Custom Title')).toBeInTheDocument();
+        });
+
+        test('should render root name if no title is provided', () => {
+            renderComponent({
+                rootName: 'Custom Folder',
+                title: undefined,
+                selectedItemIds: new Set(),
+            });
+
+            expect(screen.getByText('Custom Folder')).toBeInTheDocument();
+        });
+    });
+
+    describe('when items are selected', () => {
+        test('should render single selected item name', () => {
+            renderComponent({
+                selectedItemIds: new Set(['1']),
+            });
+
+            expect(screen.getByText('file1.txt')).toBeInTheDocument();
+            expect(screen.getByRole('button')).toBeInTheDocument(); // Close button
+        });
+
+        test('should render multiple selected items count', () => {
+            renderComponent({
+                selectedItemIds: new Set(['1', '2']),
+            });
+
+            expect(screen.getByText('2 files selected')).toBeInTheDocument();
+            expect(screen.getByRole('button')).toBeInTheDocument(); // Close button
+        });
+
+        test('should render all items selected count', () => {
+            renderComponent({
+                selectedItemIds: 'all',
+            });
+
+            expect(screen.getByText('3 files selected')).toBeInTheDocument();
+            expect(screen.getByRole('button')).toBeInTheDocument(); // Close button
+        });
+
+        test('should call onClearSelectedItemIds when close button is clicked', () => {
+            const mockOnClearSelectedItemIds = jest.fn();
+
+            renderComponent({
+                selectedItemIds: new Set(['1']),
+                onClearSelectedItemIds: mockOnClearSelectedItemIds,
+            });
+
+            const closeButton = screen.getByRole('button');
+            closeButton.click();
+
+            expect(mockOnClearSelectedItemIds).toHaveBeenCalledTimes(1);
+        });
+
+        test('should handle selected item not found in collection', () => {
+            renderComponent({
+                selectedItemIds: new Set(['999']), // Non-existent ID
+            });
+
+            // Should not crash and should not render any selected item text
+            expect(screen.queryByText('file1.txt')).not.toBeInTheDocument();
+            expect(screen.queryByText('file2.txt')).not.toBeInTheDocument();
+            expect(screen.queryByText('file3.txt')).not.toBeInTheDocument();
+        });
+
+        test('should handle empty collection with selected items', () => {
+            renderComponent({
+                currentCollection: { items: [] },
+                selectedItemIds: new Set(['1']),
+            });
+
+            // Should not crash and should not render any selected item text
+            expect(screen.queryByText('file1.txt')).not.toBeInTheDocument();
+        });
+    });
+});

package/src/elements/content-explorer/ContentExplorer.tsx

@@ -10,6 +10,8 @@ import throttle from 'lodash/throttle';
 import uniqueid from 'lodash/uniqueId';
 import { TooltipProvider } from '@box/blueprint-web';
 import { AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { Selection } from 'react-aria-components';
+
 import CreateFolderDialog from '../common/create-folder-dialog';
 import UploadDialog from '../common/upload-dialog';
 import Header from '../common/header';
@@ -151,6 +153,7 @@ export interface ContentExplorerProps {
     staticHost?: string;
     staticPath?: string;
     theme?: Theme;
+    title?: string;
     token: Token;
     uploadHost?: string;
 }
@@ -175,6 +178,7 @@ type State = {
     rootName: string;
     searchQuery: string;
     selected?: BoxItem;
+    selectedItemIds: Selection;
     sortBy: SortBy | string;
     sortDirection: SortDirection;
     view: View;
@@ -297,6 +301,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             markers: [],
             metadataTemplate: {},
             rootName: '',
+            selectedItemIds: new Set(),
             searchQuery: '',
             sortBy,
             sortDirection,
@@ -333,7 +338,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
      * @return {void}
      */
     componentDidMount() {
-        const { currentFolderId, defaultView }: ContentExplorerProps = this.props;
+        const { currentFolderId, defaultView, metadataQuery }: ContentExplorerProps = this.props;
         this.rootElement = document.getElementById(this.id) as HTMLElement;
         this.appElement = this.rootElement.firstElementChild as HTMLElement;
 
@@ -343,6 +348,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                 break;
             case DEFAULT_VIEW_METADATA:
                 this.showMetadataQueryResults();
+                this.fetchFolderName(metadataQuery?.ancestor_folder_id);
                 break;
             default:
                 this.fetchFolder(currentFolderId);
@@ -1524,6 +1530,25 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         return maxWidthColumns;
     };
 
+    getMetadataViewProps = (): ContentExplorerProps['metadataViewProps'] => {
+        const { metadataViewProps } = this.props;
+        const { tableProps } = metadataViewProps ?? {};
+        const { onSelectionChange } = tableProps ?? {};
+        const { selectedItemIds } = this.state;
+
+        return {
+            ...metadataViewProps,
+            tableProps: {
+                ...tableProps,
+                selectedKeys: selectedItemIds,
+                onSelectionChange: (ids: Selection) => {
+                    onSelectionChange?.(ids);
+                    this.setState({ selectedItemIds: ids });
+                },
+            },
+        };
+    };
+
     /**
      * Change the current view mode
      *
@@ -1599,6 +1624,31 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         });
     };
 
+    clearSelectedItemIds = () => {
+        this.setState({ selectedItemIds: new Set() });
+    };
+
+    /**
+     * Fetches the folder name and stores it in state rootName if successful
+     *
+     * @private
+     * @return {void}
+     */
+    fetchFolderName = (folderId?: string) => {
+        if (!folderId) {
+            return;
+        }
+
+        this.api.getFolderAPI(false).getFolderFields(
+            folderId,
+            ({ name }) => {
+                this.setState({ rootName: name });
+            },
+            this.errorCallback,
+            { fields: [FIELD_NAME] },
+        );
+    };
+
     /**
      * Renders the file picker
      *
@@ -1632,7 +1682,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             measureRef,
             messages,
             fieldsToShow,
-            metadataViewProps,
             onDownload,
             onPreview,
             onUpload,
@@ -1645,6 +1694,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             staticPath,
             previewLibraryVersion,
             theme,
+            title,
             token,
             uploadHost,
         }: ContentExplorerProps = this.props;
@@ -1683,6 +1733,8 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         const hasNextMarker: boolean = !!markers[currentPageNumber + 1];
         const hasPreviousMarker: boolean = currentPageNumber === 1 || !!markers[currentPageNumber - 1];
 
+        const metadataViewProps = this.getMetadataViewProps();
+
         /* eslint-disable jsx-a11y/no-static-element-interactions */
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (
@@ -1707,12 +1759,15 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                                 gridMinColumns={GRID_VIEW_MIN_COLUMNS}
                                 maxGridColumnCountForWidth={maxGridColumnCount}
                                 onUpload={this.upload}
+                                onClearSelectedItemIds={this.clearSelectedItemIds}
                                 onCreate={this.createFolder}
                                 onGridViewSliderChange={this.onGridViewSliderChange}
                                 onItemClick={this.fetchFolder}
                                 onSortChange={this.sort}
                                 onViewModeChange={this.changeViewMode}
                                 portalElement={this.rootElement}
+                                selectedItemIds={this.state.selectedItemIds}
+                                title={title}
                             />
 
                             <Content