box-ui-elements 23.5.0-beta.3 → 24.0.0-beta.1

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

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../test-utils/testing-library';
+import MetadataSidePanel, { type MetadataSidePanelProps } from '../MetadataSidePanel';
+
+// Mock scrollTo method
+Object.defineProperty(Element.prototype, 'scrollTo', {
+    value: jest.fn(),
+    writable: true,
+});
+
+const mockCollection = {
+    items: [
+        {
+            id: '1',
+            name: 'Test File 1.pdf',
+            type: 'file',
+            metadata: {
+                enterprise_123: {
+                    mockTemplate: {
+                        alias: 'mock-alias-1',
+                    },
+                },
+            },
+        },
+        {
+            id: '2',
+            name: 'Test File 2.docx',
+            type: 'file',
+            metadata: {
+                enterprise_123: {
+                    mockTemplate: {
+                        alias: 'mock-alias-2',
+                    },
+                },
+            },
+        },
+    ],
+    nextMarker: null,
+    offset: 0,
+    totalCount: 2,
+};
+
+const mockMetadataTemplate = {
+    id: 'template-id',
+    displayName: 'Mock Template',
+    scope: 'enterprise_123',
+    templateKey: 'mockTemplate',
+    type: 'metadata_template',
+    hidden: false,
+    fields: [
+        {
+            id: '123',
+            key: 'alias',
+            displayName: 'Alias',
+            type: 'string',
+            hidden: false,
+            options: [],
+        },
+    ],
+};
+
+const mockOnClose = jest.fn();
+
+describe('elements/content-explorer/MetadataSidePanel', () => {
+    const defaultProps: MetadataSidePanelProps = {
+        currentCollection: mockCollection,
+        onClose: mockOnClose,
+        metadataTemplate: mockMetadataTemplate,
+        selectedItemIds: new Set(['1']),
+    };
+
+    const renderComponent = (props: Partial<MetadataSidePanelProps> = {}) =>
+        render(<MetadataSidePanel {...defaultProps} {...props} />);
+
+    test('renders the metadata title', () => {
+        renderComponent();
+        expect(screen.getByText('Metadata')).toBeInTheDocument();
+    });
+
+    test('renders the close button with proper aria-label', () => {
+        renderComponent();
+        const closeButton = screen.getByLabelText('Close');
+        expect(closeButton).toBeInTheDocument();
+    });
+
+    test('renders the selected item text', () => {
+        renderComponent();
+        expect(screen.getByText('Test File 1.pdf')).toBeInTheDocument();
+    });
+
+    test('renders metadata instance (view mode) by default', () => {
+        renderComponent();
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        expect(editTemplateButton).toBeInTheDocument();
+    });
+
+    test('renders field value of selected item', () => {
+        renderComponent();
+        const fieldValue = screen.getByText('mock-alias-1');
+        expect(fieldValue).toBeInTheDocument();
+    });
+
+    test('call onClose when close button is clicked', async () => {
+        renderComponent();
+        const closeButton = screen.getByLabelText('Close');
+        await userEvent.click(closeButton);
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    test('render correct subtitle when multiple items are selected', () => {
+        renderComponent({ selectedItemIds: new Set(['1', '2']) });
+        const subtitle = screen.getByText('2 files selected');
+        expect(subtitle).toBeInTheDocument();
+    });
+
+    test('render cancel and submit button when in edit mode', async () => {
+        renderComponent();
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        await userEvent.click(editTemplateButton);
+
+        const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+        expect(cancelButton).toBeInTheDocument();
+        const submitButton = screen.getByRole('button', { name: 'Save' });
+        expect(submitButton).toBeInTheDocument();
+    });
+});

package/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx

@@ -21,7 +21,7 @@ const metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;
 const metadataQuery = {
     from: metadataScopeAndKey,
     ancestor_folder_id: '0',
-    sort_by: [
+    order_by: [
         {
             field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema
             direction: 'asc',
@@ -49,7 +49,7 @@ const columns = [
         textValue: 'Name',
         id: 'name',
         type: 'string',
-        allowSorting: true,
+        allowsSorting: true,
         minWidth: 150,
         maxWidth: 150,
     },
@@ -57,7 +57,7 @@ const columns = [
         textValue: field.displayName,
         id: `${metadataFieldNamePrefix}.${field.key}`,
         type: field.type,
-        allowSorting: true,
+        allowsSorting: true,
         minWidth: 150,
         maxWidth: 150,
     })),
@@ -94,6 +94,20 @@ export const metadataViewV2: Story = {
     args: metadataViewV2ElementProps,
 };
 
+// @TODO Assert that rows are actually sorted in a different order, once handleSortChange is implemented
+export const metadataViewV2SortsFromHeader: Story = {
+    args: metadataViewV2ElementProps,
+    play: async ({ canvas }) => {
+        await waitFor(() => {
+            expect(canvas.getByRole('row', { name: /Industry/i })).toBeInTheDocument();
+        });
+
+        const firstRow = canvas.getByRole('row', { name: /Industry/i });
+        const industryHeader = within(firstRow).getByRole('columnheader', { name: 'Industry' });
+        userEvent.click(industryHeader);
+    },
+};
+
 export const metadataViewV2WithCustomActions: Story = {
     args: {
         ...metadataViewV2ElementProps,
@@ -164,6 +178,32 @@ export const metadataViewV2WithInitialFilterValues: Story = {
     },
 };
 
+export const sidePanelOpenWithSingleItemSelected: Story = {
+    args: {
+        ...metadataViewV2ElementProps,
+        metadataViewProps: {
+            columns,
+            tableProps: {
+                isSelectAllEnabled: true,
+            },
+        },
+    },
+
+    play: async ({ canvas }) => {
+        await waitFor(() => {
+            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
+        });
+
+        // Select the first row by clicking its checkbox
+        const firstRow = canvas.getByRole('row', { name: /Child 2/i });
+        const checkbox = within(firstRow).getByRole('checkbox');
+        await userEvent.click(checkbox);
+
+        const metadataButton = canvas.getByRole('button', { name: 'Metadata' });
+        await userEvent.click(metadataButton);
+    },
+};
+
 const meta: Meta<typeof ContentExplorer> = {
     title: 'Elements/ContentExplorer/tests/MetadataView/visual',
     component: ContentExplorer,

package/src/elements/content-explorer/utils.ts

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+import type { MetadataTemplate } from '@box/metadata-editor';
+import type { Selection } from 'react-aria-components';
+import type { BoxItem, Collection } from '../../common/types/core';
+
+import messages from '../common/messages';
+
+// Get selected item text
+export function useSelectedItemText(currentCollection: Collection, selectedItemIds: Selection): string {
+    const { formatMessage } = useIntl();
+
+    return 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
+        return formatMessage(messages.numFilesSelected, { numSelected: selectedCount });
+    }, [currentCollection.items, formatMessage, selectedItemIds]);
+}
+
+// Get template instance based on metadata template and selected items
+export function getTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[]) {
+    const { displayName, fields, hidden, id, scope, templateKey, type } = metadataTemplate;
+
+    const selectedItemsFields = fields.map(
+        ({ displayName: fieldDisplayName, hidden: fieldHidden, id: fieldId, key, options, type: fieldType }) => ({
+            displayName: fieldDisplayName,
+            hidden: fieldHidden,
+            id: fieldId,
+            key,
+            options,
+            type: fieldType,
+            // TODO: Add support for multiple selected items
+            value: selectedItems[0].metadata[scope][templateKey][key],
+        }),
+    );
+
+    return {
+        canEdit: true,
+        displayName,
+        hidden,
+        id,
+        fields: selectedItemsFields,
+        scope,
+        templateKey,
+        type,
+    };
+}

package/src/elements/content-sidebar/BoxAISidebar.tsx

@@ -45,7 +45,6 @@ export interface BoxAISidebarProps {
     isFeedbackFormEnabled: boolean;
     isIntelligentQueryMode: boolean;
     isMarkdownEnabled: boolean;
-    isResetChatEnabled: boolean;
     isStopResponseEnabled?: boolean;
     isStreamingEnabled: boolean;
     items: Array<ItemType>;

package/src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -50,7 +50,6 @@ function BoxAISidebarContent(
         hostAppName,
         isAIStudioAgentSelectorEnabled,
         isLoading,
-        isResetChatEnabled,
         onSelectAgent,
         questions,
         shouldShowLandingPage,
@@ -191,7 +190,7 @@ function BoxAISidebarContent(
     const renderActions = () => (
         <>
             {renderBoxAISidebarTitle()}
-            {isResetChatEnabled && <ClearConversationButton onClick={onClearAction} />}
+            <ClearConversationButton onClick={onClearAction} />
             <Tooltip content={formatMessage(messages.sidebarBoxAISwitchToModalView)} variant="standard">
                 <IconButton
                     aria-label={formatMessage(messages.sidebarBoxAISwitchToModalView)}
@@ -248,7 +247,6 @@ function BoxAISidebarContent(
                 isAIStudioAgentSelectorEnabled={isAIStudioAgentSelectorEnabled}
                 isFeedbackEnabled={isFeedbackEnabled}
                 isFeedbackFormEnabled={isFeedbackFormEnabled}
-                isResetChatEnabled={isResetChatEnabled}
                 isStopResponseEnabled={isStopResponseEnabled}
                 items={items}
                 itemSize={itemSize}

package/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx

@@ -36,7 +36,6 @@ jest.mock('@box/box-ai-content-answers', () => ({
             isMarkdownEnabled={props.isMarkdownEnabled}
             isLoading={props.isLoading}
             isOpen
-            isResetChatEnabled={props.isResetChatEnabled}
             isStreamingEnabled={props.isStreamingEnabled}
             itemID={props.itemID}
             itemIDs={props.itemIDs}
@@ -120,7 +119,6 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
         isFeedbackFormEnabled: true,
         isIntelligentQueryMode: true,
         isMarkdownEnabled: true,
-        isResetChatEnabled: true,
         isStopResponseEnabled: true,
         isStreamingEnabled: true,
         onFeedbackFormSubmit: jest.fn(),
@@ -186,12 +184,6 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
         expect(screen.getByRole('button', { name: 'Clear conversation' })).toBeInTheDocument();
     });
 
-    test('should not have accessible "Clear" button if isResetChatEnabled is false', async () => {
-        await renderComponent({ isResetChatEnabled: false });
-
-        expect(screen.queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument();
-    });
-
     test('should call recordAction on load if provided', async () => {
         const mockRecordAction = jest.fn();
         await renderComponent({ recordAction: mockRecordAction });

package/src/elements/content-sidebar/stories/BoxAISidebar.stories.tsx

@@ -43,7 +43,6 @@ export default {
             isFeedbackEnabled: true,
             isIntelligentQueryMode: false,
             isMarkdownEnabled: true,
-            isResetChatEnabled: true,
             isStopResponseEnabled: true,
             isStreamingEnabled: false,
             items: [{ id: '123', name: 'Document (PDF).pdf', type: 'file', fileType: 'pdf', status: 'supported' }],

package/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx

@@ -49,7 +49,6 @@ const meta: Meta<typeof ContentSidebar> & { parameters: { msw: { handlers: HttpH
             isDebugModeEnabled: true,
             isIntelligentQueryMode: false,
             isMarkdownEnabled: true,
-            isResetChatEnabled: true,
             isStopResponseEnabled: true,
             isStreamingEnabled: false,
             items: [{ id: '123', name: 'Document (PDF).pdf', type: 'file', fileType: 'pdf', status: 'supported' }],