feat(metadata-view): Add Subheader for Metadata View v2 (#4202)

* feat(metadata-view): Add MetadataView V2

* feat: Add new subheader to ContentExplorer for MetadataViewV2

* fix: use Blueprint Text and i18n, remove logs

* fix: Show ancestor folder name if no title

* fix: Add shouldDestroy to getFolderAPI()

* fix: add tests for SubHeaderLeftMetadataViewV2

* fix: Move i18n from features to elements/common

* refactor: Move ancestor folder name to ContentExplorer

* chore: rename classnames to match SUIT CSS

* chore: Add missed files

* refactor: Rename SubHeaderLeftMetadataViewV2 to SubHeaderLeftV2

* chore: Remove unused api prop

* feat(metadata-view): Add Subheader for Metadata View v2

* feat(metadata-view): Add Subheader for Metadata View v2

---------

Co-authored-by: Greg Wong <gregorywong@box.com>

Author: jfox16

i18n/en-US.properties

@@ -92,6 +92,8 @@ be.breadcrumb.breadcrumbLabel = Breadcrumb
 be.cancel = Cancel
 # Label for choose action.
 be.choose = Choose
+# Aria label for the clear selection button.
+be.clearSelection = Clear selection
 # Label for close action.
 be.close = Close
 # Icon title for a Box item of type folder that has collaborators
@@ -602,6 +604,8 @@ be.noActivity = No activity to show
 be.noActivityAnnotationPrompt = Hover over the preview and use the controls at the bottom to annotate the file.
 # Message shown in
 be.noActivityCommentPrompt = Comment and @mention people to notify them.
+# Text shown to indicate the number of files selected
+be.numFilesSelected =  {numSelected, plural, =0 {0 files selected} one {1 file selected} other {# files selected} } 
 # Label for open action.
 be.open = Open
 # Next page button tooltip

src/api/APIFactory.js

@@ -470,8 +470,10 @@ class APIFactory {
      *
      * @return {FolderAPI} FolderAPI instance
      */
-    getFolderAPI(): FolderAPI {
-        this.destroy();
+    getFolderAPI(shouldDestroy: boolean = true): FolderAPI {
+        if (shouldDestroy) {
+            this.destroy();
+        }
         this.folderAPI = new FolderAPI(this.options);
         return this.folderAPI;
     }

src/elements/common/messages.js

@@ -387,6 +387,11 @@ const messages = defineMessages({
         description: 'Aria label for the clear button in the search box.',
         defaultMessage: 'Clear search',
     },
+    clearSelection: {
+        id: 'be.clearSelection',
+        description: 'Aria label for the clear selection button.',
+        defaultMessage: 'Clear selection',
+    },
     searchPlaceholder: {
         id: 'be.searchPlaceholder',
         description: 'Shown as a placeholder in the search box.',
@@ -1089,6 +1094,17 @@ const messages = defineMessages({
         description: 'Icon title for a Box item of type folder that is private and has no collaborators',
         defaultMessage: 'Personal Folder',
     },
+    numFilesSelected: {
+        id: 'be.numFilesSelected',
+        description: 'Text shown to indicate the number of files selected',
+        defaultMessage: `
+            {numSelected, plural,
+                =0 {0 files selected}
+                one {1 file selected}
+                other {# files selected}
+            }
+        `,
+    },
 });
 
 export default messages;

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

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

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

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;

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();
+        });
+    });
+});