box-ui-elements 23.5.0-beta.2 → 23.5.0-beta.4

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Button } from '@box/blueprint-web';
 import { Pencil } from '@box/blueprint-web-assets/icons/Fill';
 import { useIntl } from 'react-intl';
+import type { Selection } from 'react-aria-components';
 import Sort from './Sort';
 import Add from './Add';
 import GridViewSlider from '../../../components/grid-view/GridViewSlider';
@@ -27,9 +28,11 @@ export interface SubHeaderRightProps {
     onCreate: () => void;
     onGridViewSliderChange: (newSliderValue: number) => void;
     onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;
+    onMetadataSidePanelToggle?: () => void;
     onUpload: () => void;
     onViewModeChange?: (viewMode: ViewMode) => void;
     portalElement?: HTMLElement;
+    selectedItemIds?: Selection;
     view: View;
     viewMode: ViewMode;
 }
@@ -45,9 +48,11 @@ const SubHeaderRight = ({
     onCreate,
     onGridViewSliderChange,
     onSortChange,
+    onMetadataSidePanelToggle,
     onUpload,
     onViewModeChange,
     portalElement,
+    selectedItemIds,
     view,
     viewMode,
 }: SubHeaderRightProps) => {
@@ -60,6 +65,7 @@ const SubHeaderRight = ({
     const showSort: boolean = isFolder && hasItems;
     const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;
     const isMetadataView: boolean = view === VIEW_METADATA;
+    const hasSelectedItems: boolean = !!(selectedItemIds && (selectedItemIds === 'all' || selectedItemIds.size > 0));
     return (
         <div className="be-sub-header-right">
             {!isMetadataView && (
@@ -90,8 +96,8 @@ const SubHeaderRight = ({
                 </>
             )}
 
-            {isMetadataView && isMetadataViewV2Feature && (
-                <Button icon={Pencil} size="large" variant="primary">
+            {isMetadataView && isMetadataViewV2Feature && hasSelectedItems && (
+                <Button icon={Pencil} size="large" variant="primary" onClick={onMetadataSidePanelToggle}>
                     {formatMessage(messages.metadata)}
                 </Button>
             )}

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

@@ -7,5 +7,17 @@
         .bcpr {
             z-index: 1; // Prevents overlay issues with list-item when a file is previewed
         }
+
+        .be-app-element {
+            flex-direction: row;
+            gap: var(--space-4);
+        }
+
+        .bce-ContentExplorer-main {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            min-width: 0;
+        }
     }
 }

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

@@ -24,6 +24,7 @@ import ThemingStyles from '../common/theming';
 import API from '../../api';
 import MetadataQueryAPIHelperV2 from './MetadataQueryAPIHelper';
 import MetadataQueryAPIHelper from '../../features/metadata-based-view/MetadataQueryAPIHelper';
+import MetadataSidePanel from './MetadataSidePanel';
 import Footer from './Footer';
 import PreviewDialog from '../common/preview-dialog/PreviewDialog';
 import ShareDialog from './ShareDialog';
@@ -169,6 +170,7 @@ type State = {
     isCreateFolderModalOpen: boolean;
     isDeleteModalOpen: boolean;
     isLoading: boolean;
+    isMetadataSidePanelOpen: boolean;
     isPreviewModalOpen: boolean;
     isRenameModalOpen: boolean;
     isShareModalOpen: boolean;
@@ -294,6 +296,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             isCreateFolderModalOpen: false,
             isDeleteModalOpen: false,
             isLoading: false,
+            isMetadataSidePanelOpen: false,
             isPreviewModalOpen: false,
             isRenameModalOpen: false,
             isShareModalOpen: false,
@@ -1562,7 +1565,11 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                 selectedKeys: selectedItemIds,
                 onSelectionChange: (ids: Selection) => {
                     onSelectionChange?.(ids);
-                    this.setState({ selectedItemIds: ids });
+                    const isSelectionEmpty = ids !== 'all' && ids.size === 0;
+                    this.setState({
+                        selectedItemIds: ids,
+                        ...(isSelectionEmpty && { isMetadataSidePanelOpen: false }),
+                    });
                 },
             },
         };
@@ -1644,7 +1651,32 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
     };
 
     clearSelectedItemIds = () => {
-        this.setState({ selectedItemIds: new Set() });
+        this.setState({
+            selectedItemIds: new Set(),
+            isMetadataSidePanelOpen: false,
+        });
+    };
+
+    /**
+     * Toggle metadata side panel visibility
+     *
+     * @private
+     * @return {void}
+     */
+    onMetadataSidePanelToggle = () => {
+        this.setState(prevState => ({
+            isMetadataSidePanelOpen: !prevState.isMetadataSidePanelOpen,
+        }));
+    };
+
+    /**
+     * Close metadata side panel
+     *
+     * @private
+     * @return {void}
+     */
+    closeMetadataSidePanel = () => {
+        this.setState({ isMetadataSidePanelOpen: false });
     };
 
     /**
@@ -1706,6 +1738,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             isCreateFolderModalOpen,
             isDeleteModalOpen,
             isLoading,
+            isMetadataSidePanelOpen,
             isPreviewModalOpen,
             isRenameModalOpen,
             isShareModalOpen,
@@ -1714,6 +1747,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             metadataTemplate,
             rootName,
             selected,
+            selectedItemIds,
             view,
         }: State = this.state;
 
@@ -1723,6 +1757,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         const allowUpload: boolean = canUpload && !!can_upload;
         const allowCreate: boolean = canCreateNewFolder && !!can_upload;
         const isDefaultViewMetadata: boolean = defaultView === DEFAULT_VIEW_METADATA;
+        const isMetadataViewV2Feature = isFeatureEnabled(features, 'contentExplorer.metadataViewV2');
         const isErrorView: boolean = view === VIEW_ERROR;
 
         const viewMode = this.getViewMode();
@@ -1741,75 +1776,89 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                     <div id={this.id} className={styleClassName} ref={measureRef} data-testid="content-explorer">
                         <ThemingStyles selector={`#${this.id}`} theme={theme} />
                         <div className="be-app-element" onKeyDown={this.onKeyDown} tabIndex={0}>
-                            {!isDefaultViewMetadata && <Header view={view} logoUrl={logoUrl} onSearch={this.search} />}
-
-                            <SubHeader
-                                view={view}
-                                viewMode={viewMode}
-                                rootId={rootFolderId}
-                                isSmall={isSmall}
-                                rootName={rootName}
-                                currentCollection={currentCollection}
-                                canUpload={allowUpload}
-                                canCreateNewFolder={allowCreate}
-                                gridColumnCount={gridColumnCount}
-                                gridMaxColumns={GRID_VIEW_MAX_COLUMNS}
-                                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
-                                canDelete={canDelete}
-                                canDownload={canDownload}
-                                canPreview={canPreview}
-                                canRename={canRename}
-                                canShare={canShare}
-                                currentCollection={currentCollection}
-                                features={features}
-                                gridColumnCount={Math.min(gridColumnCount, maxGridColumnCount)}
-                                isMedium={isMedium}
-                                isSmall={isSmall}
-                                isTouch={isTouch}
-                                itemActions={itemActions}
-                                fieldsToShow={fieldsToShow}
-                                metadataTemplate={metadataTemplate}
-                                metadataViewProps={metadataViewProps}
-                                onItemClick={this.onItemClick}
-                                onItemDelete={this.delete}
-                                onItemDownload={this.download}
-                                onItemPreview={this.preview}
-                                onItemRename={this.rename}
-                                onItemSelect={this.select}
-                                onItemShare={this.share}
-                                onMetadataUpdate={this.updateMetadata}
-                                onSortChange={this.sort}
-                                portalElement={this.rootElement}
-                                view={view}
-                                viewMode={viewMode}
-                            />
-                            {!isErrorView && (
-                                <Footer>
-                                    <Pagination
-                                        hasNextMarker={hasNextMarker}
-                                        hasPrevMarker={hasPreviousMarker}
-                                        isSmall={isSmall}
-                                        offset={offset}
-                                        onOffsetChange={this.paginate}
-                                        pageSize={currentPageSize}
-                                        totalCount={totalCount}
-                                        onMarkerBasedPageChange={this.markerBasedPaginate}
-                                    />
-                                </Footer>
+                            <div className="bce-ContentExplorer-main">
+                                {!isDefaultViewMetadata && (
+                                    <Header view={view} logoUrl={logoUrl} onSearch={this.search} />
+                                )}
+
+                                <SubHeader
+                                    view={view}
+                                    viewMode={viewMode}
+                                    rootId={rootFolderId}
+                                    isSmall={isSmall}
+                                    rootName={rootName}
+                                    currentCollection={currentCollection}
+                                    canUpload={allowUpload}
+                                    canCreateNewFolder={allowCreate}
+                                    gridColumnCount={gridColumnCount}
+                                    gridMaxColumns={GRID_VIEW_MAX_COLUMNS}
+                                    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}
+                                    onMetadataSidePanelToggle={this.onMetadataSidePanelToggle}
+                                    onViewModeChange={this.changeViewMode}
+                                    portalElement={this.rootElement}
+                                    selectedItemIds={selectedItemIds}
+                                    title={title}
+                                />
+
+                                <Content
+                                    canDelete={canDelete}
+                                    canDownload={canDownload}
+                                    canPreview={canPreview}
+                                    canRename={canRename}
+                                    canShare={canShare}
+                                    currentCollection={currentCollection}
+                                    features={features}
+                                    gridColumnCount={Math.min(gridColumnCount, maxGridColumnCount)}
+                                    isMedium={isMedium}
+                                    isSmall={isSmall}
+                                    isTouch={isTouch}
+                                    itemActions={itemActions}
+                                    fieldsToShow={fieldsToShow}
+                                    metadataTemplate={metadataTemplate}
+                                    metadataViewProps={metadataViewProps}
+                                    onItemClick={this.onItemClick}
+                                    onItemDelete={this.delete}
+                                    onItemDownload={this.download}
+                                    onItemPreview={this.preview}
+                                    onItemRename={this.rename}
+                                    onItemSelect={this.select}
+                                    onItemShare={this.share}
+                                    onMetadataUpdate={this.updateMetadata}
+                                    onSortChange={this.sort}
+                                    portalElement={this.rootElement}
+                                    view={view}
+                                    viewMode={viewMode}
+                                />
+
+                                {!isErrorView && (
+                                    <Footer>
+                                        <Pagination
+                                            hasNextMarker={hasNextMarker}
+                                            hasPrevMarker={hasPreviousMarker}
+                                            isSmall={isSmall}
+                                            offset={offset}
+                                            onOffsetChange={this.paginate}
+                                            pageSize={currentPageSize}
+                                            totalCount={totalCount}
+                                            onMarkerBasedPageChange={this.markerBasedPaginate}
+                                        />
+                                    </Footer>
+                                )}
+                            </div>
+                            {isDefaultViewMetadata && isMetadataViewV2Feature && isMetadataSidePanelOpen && (
+                                <MetadataSidePanel
+                                    currentCollection={currentCollection}
+                                    onClose={this.closeMetadataSidePanel}
+                                    metadataTemplate={metadataTemplate}
+                                    selectedItemIds={selectedItemIds}
+                                />
                             )}
                         </div>
                         {allowUpload && !!this.appElement ? (

package/src/elements/content-explorer/MetadataSidePanel.scss

@@ -0,0 +1,12 @@
+.bce-MetadataSidePanel-subtitle {
+    display: flex;
+    align-items: center;
+}
+
+.bce-MetadataSidePanel-content {
+    padding: var(--space-4);
+
+    [data-target-id='TextButton-deleteButton'] {
+        visibility: hidden;
+    }
+}

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

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
+
+import { IconButton, SidePanel, Text } from '@box/blueprint-web';
+import { XMark } from '@box/blueprint-web-assets/icons/Fill/index';
+import { FileDefault } from '@box/blueprint-web-assets/icons/Line/index';
+import {
+    AutofillContextProvider,
+    FormValues,
+    JSONPatchOperations,
+    MetadataInstance,
+    MetadataInstanceForm,
+} from '@box/metadata-editor';
+
+import type { Selection } from 'react-aria-components';
+import type { Collection } from '../../common/types/core';
+import type { MetadataTemplate } from '../../common/types/metadata';
+import { getTemplateInstance, useSelectedItemText } from './utils';
+
+import messages from '../common/messages';
+
+import './MetadataSidePanel.scss';
+
+export interface MetadataSidePanelProps {
+    currentCollection: Collection;
+    onClose: () => void;
+    metadataTemplate: MetadataTemplate;
+    selectedItemIds: Selection;
+}
+
+const MetadataSidePanel = ({
+    currentCollection,
+    onClose,
+    selectedItemIds,
+    metadataTemplate,
+}: MetadataSidePanelProps) => {
+    const { formatMessage } = useIntl();
+    const [isEditing, setIsEditing] = useState<boolean>(false);
+    const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = useState<boolean>(false);
+
+    const selectedItemText = useSelectedItemText(currentCollection, selectedItemIds);
+    const selectedItems =
+        selectedItemIds === 'all'
+            ? currentCollection.items
+            : currentCollection.items.filter(item => selectedItemIds.has(item.id));
+    const templateInstance = getTemplateInstance(metadataTemplate, selectedItems);
+
+    const handleMetadataInstanceEdit = () => {
+        setIsEditing(true);
+    };
+
+    const handleMetadataInstanceFormCancel = () => {
+        setIsEditing(false);
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const handleMetadataInstanceFormChange = (values: FormValues) => {
+        // TODO: Implement on form change
+    };
+
+    const handleMetadataInstanceFormDiscardUnsavedChanges = () => {
+        setIsUnsavedChangesModalOpen(false);
+        setIsEditing(false);
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const handleMetadataInstanceFormSubmit = async (values: FormValues, operations: JSONPatchOperations) => {
+        // TODO: Implement onSave callback
+    };
+
+    return (
+        <SidePanel variant="persistent">
+            <SidePanel.Header>
+                <div>
+                    <Text as="span" variant="titleLarge">
+                        {formatMessage(messages.sidebarMetadataTitle)}
+                    </Text>
+                    <div className="bce-MetadataSidePanel-subtitle">
+                        <FileDefault />
+                        <Text as="span" color="textOnLightSecondary" variant="subtitle">
+                            {selectedItemText}
+                        </Text>
+                    </div>
+                </div>
+                <IconButton aria-label={formatMessage(messages.close)} icon={XMark} onClick={onClose} size="large" />
+            </SidePanel.Header>
+            <SidePanel.ScrollableContainer>
+                <div className="bce-MetadataSidePanel-content">
+                    <AutofillContextProvider fetchSuggestions={null} isAiSuggestionsFeatureEnabled={false}>
+                        {isEditing ? (
+                            <MetadataInstanceForm
+                                areAiSuggestionsAvailable={false}
+                                isAiSuggestionsFeatureEnabled={false}
+                                isBetaLanguageEnabled={false}
+                                isDeleteButtonDisabled={true}
+                                isDeleteConfirmationModalCheckboxEnabled={false}
+                                isLargeFile={false}
+                                isMultilevelTaxonomyFieldEnabled={false}
+                                isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}
+                                selectedTemplateInstance={templateInstance}
+                                onCancel={handleMetadataInstanceFormCancel}
+                                onChange={handleMetadataInstanceFormChange}
+                                onDelete={null}
+                                onDiscardUnsavedChanges={handleMetadataInstanceFormDiscardUnsavedChanges}
+                                onSubmit={handleMetadataInstanceFormSubmit}
+                                setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
+                                taxonomyOptionsFetcher={null}
+                            />
+                        ) : (
+                            <MetadataInstance
+                                areAiSuggestionsAvailable={false}
+                                isAiSuggestionsFeatureEnabled={false}
+                                isBetaLanguageEnabled={false}
+                                onEdit={handleMetadataInstanceEdit}
+                                templateInstance={templateInstance}
+                                taxonomyNodeFetcher={null}
+                            />
+                        )}
+                    </AutofillContextProvider>
+                </div>
+            </SidePanel.ScrollableContainer>
+        </SidePanel>
+    );
+};
+
+export default MetadataSidePanel;

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import type { MetadataFieldType } from '@box/metadata-view';
+
 import { render, screen, waitFor, within } from '../../../test-utils/testing-library';
 import { ContentExplorerComponent as ContentExplorer, ContentExplorerProps } from '../ContentExplorer';
 import { mockRecentItems, mockRootFolder, mockRootFolderSharedLink } from '../../common/__mocks__/mockRootFolder';
@@ -77,7 +79,13 @@ describe('elements/content-explorer/ContentExplorer', () => {
     const renderComponent = ({ features, ...props }: Partial<ContentExplorerProps> = {}) => {
         return render(
             <FeatureProvider features={features}>
-                <ContentExplorer defaultView="list" rootFolderId="69083462919" token="token" {...props} />
+                <ContentExplorer
+                    defaultView="list"
+                    features={features}
+                    rootFolderId="69083462919"
+                    token="token"
+                    {...props}
+                />
             </FeatureProvider>,
         );
     };
@@ -414,31 +422,87 @@ describe('elements/content-explorer/ContentExplorer', () => {
             expect(screen.getByText('Technology')).toBeInTheDocument();
             expect(screen.getByText('November 16, 2023')).toBeInTheDocument();
         });
+
         describe('Metadata View V2', () => {
-            test('should render metadata view button', async () => {
-                renderComponent({
-                    defaultView: 'metadata',
-                    features: {
-                        contentExplorer: {
-                            metadataViewV2: true,
-                        },
+            const { scope: templateScope, templateKey } = mockSchema;
+            const metadataScopeAndKey = `${templateScope}.${templateKey}`;
+            const metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;
+            const metadataQuery = {
+                from: metadataScopeAndKey,
+                ancestor_folder_id: '69083462919',
+                sort_by: [
+                    {
+                        field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema
+                        direction: 'asc',
+                    },
+                ],
+                fields: [
+                    // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field
+                    ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),
+                    'name',
+                ],
+            };
+            const fieldsToShow = [
+                { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },
+                { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },
+                { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },
+                { key: `${metadataFieldNamePrefix}.role`, canEdit: true },
+            ];
+            const columns = [
+                {
+                    // Always include the name column
+                    textValue: 'Name',
+                    id: 'name',
+                    type: 'string' as const,
+                    allowSorting: true,
+                    minWidth: 150,
+                    maxWidth: 150,
+                },
+                ...mockSchema.fields.map(field => ({
+                    textValue: field.displayName,
+                    id: `${metadataFieldNamePrefix}.${field.key}`,
+                    type: field.type as MetadataFieldType,
+                    allowSorting: true,
+                    minWidth: 150,
+                    maxWidth: 150,
+                })),
+            ];
+            const defaultView = 'metadata';
+            const metadataViewV2ElementProps = {
+                metadataViewProps: {
+                    columns,
+                    metadataTemplate: mockSchema,
+                    tableProps: {
+                        isSelectAllEnabled: true,
                     },
+                },
+                metadataQuery,
+                fieldsToShow,
+                defaultView,
+                features: {
+                    contentExplorer: {
+                        metadataViewV2: true,
+                    },
+                },
+            };
+
+            test('should render metadata view button', async () => {
+                renderComponent(metadataViewV2ElementProps);
+                await waitFor(() => {
+                    expect(screen.getByTestId('content-explorer')).toBeInTheDocument();
                 });
 
-                // two separate promises need to be resolved before the component is ready
                 await waitFor(() => {
-                    expect(screen.getByText('Please wait while the items load...')).toBeInTheDocument();
+                    expect(screen.queryByRole('button', { name: 'Switch to Grid View' })).toBeInTheDocument();
                 });
 
                 await waitFor(() => {
-                    expect(screen.getByTestId('content-explorer')).toBeInTheDocument();
+                    expect(screen.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
                 });
 
-                expect(screen.queryByRole('searchbox', { name: 'Search files and folders' })).not.toBeInTheDocument();
-                expect(screen.queryByRole('button', { name: 'Preview Test Folder' })).not.toBeInTheDocument();
-                expect(screen.queryByRole('button', { name: 'Switch to Grid View' })).not.toBeInTheDocument();
-                expect(screen.queryByRole('button', { name: 'Sort' })).not.toBeInTheDocument();
-                expect(screen.queryByRole('button', { name: 'Add' })).not.toBeInTheDocument();
+                const selectAllCheckbox = screen.getByLabelText('Select all');
+                await userEvent.click(selectAllCheckbox);
+
                 expect(screen.getByRole('button', { name: 'Metadata' })).toBeInTheDocument();
             });
         });