box-ui-elements 24.0.0-beta.4 → 24.0.0-beta.6

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

@@ -3,18 +3,34 @@ import * as React from 'react';
 import type { Collection } from '../../../common/types/core';
 import type { MetadataTemplate, MetadataTemplateField } from '../../../common/types/metadata';
 import { render, screen, userEvent, waitFor, within } from '../../../test-utils/testing-library';
-import MetadataViewContainer, { type MetadataViewContainerProps } from '../MetadataViewContainer';
+import MetadataViewContainer, {
+    type MetadataViewContainerProps,
+    convertFilterValuesToExternal,
+    type ExternalFilterValues,
+} from '../MetadataViewContainer';
 
 describe('elements/content-explorer/MetadataViewContainer', () => {
     const mockItems = [
-        { id: '1', name: 'File 1.txt', type: 'file' },
-        { id: '2', name: 'File 2.pdf', type: 'file' },
+        {
+            id: '1',
+            name: 'File 1.txt',
+            type: 'file',
+            'item.name': 'File 1.txt',
+            industry: 'tech',
+        },
+        {
+            id: '2',
+            name: 'File 2.pdf',
+            type: 'file',
+            'item.name': 'File 2.pdf',
+            industry: 'finance',
+        },
     ];
 
     const mockMetadataTemplateFields: MetadataTemplateField[] = [
         {
             id: 'field1',
-            key: ' name',
+            key: 'item.name',
             displayName: 'Name',
             type: 'string',
         },
@@ -28,6 +44,22 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
                 { key: 'finance', id: 'finance1' },
             ],
         },
+        {
+            id: 'field3',
+            key: 'price',
+            displayName: 'Price',
+            type: 'float',
+        },
+        {
+            id: 'field4',
+            key: 'category',
+            displayName: 'Category',
+            type: 'multiSelect',
+            options: [
+                { key: 'category1', id: 'cat1' },
+                { key: 'category2', id: 'cat2' },
+            ],
+        },
     ];
 
     const mockMetadataTemplate: MetadataTemplate = {
@@ -49,7 +81,7 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
         columns: [
             {
                 textValue: 'Name',
-                id: 'name',
+                id: 'item.name',
                 type: 'string',
                 allowsSorting: true,
                 minWidth: 250,
@@ -66,17 +98,22 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
             },
         ],
         metadataTemplate: mockMetadataTemplate,
+        onMetadataFilter: jest.fn(),
     };
 
     const renderComponent = (props: Partial<MetadataViewContainerProps> = {}) => {
         return render(<MetadataViewContainer {...defaultProps} {...props} />);
     };
 
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     test('should render MetadataView component', () => {
         renderComponent();
 
         expect(screen.getByRole('button', { name: 'All Filters' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Name' })).toBeInTheDocument();
+        expect(screen.getAllByRole('button', { name: 'Name' })).toHaveLength(2); // One in filter bar, one in table header
         expect(screen.getByRole('button', { name: 'Industry' })).toBeInTheDocument();
         expect(screen.getByText('File 1.txt')).toBeInTheDocument();
         expect(screen.getByText('File 2.pdf')).toBeInTheDocument();
@@ -101,7 +138,11 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
             ],
         };
 
-        renderComponent({ metadataTemplate: template, actionBarProps: { onFilterSubmit } });
+        renderComponent({
+            metadataTemplate: template,
+            actionBarProps: { onFilterSubmit },
+            onMetadataFilter: jest.fn(),
+        });
 
         await userEvent().click(screen.getByRole('button', { name: /Contact Role/ }));
         await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Developer' }));
@@ -112,7 +153,370 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
         await waitFor(() => expect(onFilterSubmit).toHaveBeenCalledTimes(2));
         const firstCall = onFilterSubmit.mock.calls[0][0];
         const secondCall = onFilterSubmit.mock.calls[1][0];
-        expect(firstCall['role-filter'].value).toEqual(['Developer']);
-        expect(secondCall['role-filter'].value).toEqual(['Developer', 'Marketing']);
+
+        expect(firstCall.role.value).toEqual(['Developer']);
+        expect(secondCall.role.value).toEqual(['Developer', 'Marketing']);
+    });
+
+    test('should call onMetadataFilter and onFilterSubmit when filter is submitted', async () => {
+        const onFilterSubmit = jest.fn();
+        const onMetadataFilter = jest.fn();
+        const template: MetadataTemplate = {
+            ...mockMetadataTemplate,
+            fields: [
+                {
+                    id: 'field1',
+                    key: 'status',
+                    displayName: 'Status',
+                    type: 'enum',
+                    options: [
+                        { id: 's1', key: 'Active' },
+                        { id: 's2', key: 'Inactive' },
+                    ],
+                },
+            ],
+        };
+
+        renderComponent({
+            metadataTemplate: template,
+            actionBarProps: { onFilterSubmit },
+            onMetadataFilter,
+        });
+
+        await userEvent().click(screen.getByRole('button', { name: /Status/ }));
+        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
+
+        await waitFor(() => {
+            expect(onMetadataFilter).toHaveBeenCalledTimes(1);
+            expect(onFilterSubmit).toHaveBeenCalledTimes(1);
+        });
+
+        const filterCall = onMetadataFilter.mock.calls[0][0];
+        const submitCall = onFilterSubmit.mock.calls[0][0];
+
+        expect(filterCall.status.value).toEqual(['Active']);
+        expect(submitCall.status.value).toEqual(['Active']);
+    });
+
+    test('should only call onMetadataFilter when onFilterSubmit is not provided', async () => {
+        const onMetadataFilter = jest.fn();
+        const template: MetadataTemplate = {
+            ...mockMetadataTemplate,
+            fields: [
+                {
+                    id: 'field1',
+                    key: 'status',
+                    displayName: 'Status',
+                    type: 'enum',
+                    options: [
+                        { id: 's1', key: 'Active' },
+                        { id: 's2', key: 'Inactive' },
+                    ],
+                },
+            ],
+        };
+
+        renderComponent({
+            metadataTemplate: template,
+            onMetadataFilter,
+        });
+
+        await userEvent().click(screen.getByRole('button', { name: /Status/ }));
+        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
+
+        await waitFor(() => {
+            expect(onMetadataFilter).toHaveBeenCalledTimes(1);
+        });
+
+        const filterCall = onMetadataFilter.mock.calls[0][0];
+        expect(filterCall.status.value).toEqual(['Active']);
+    });
+
+    test('should handle initial filter values transformation', () => {
+        const initialFilterValues = {
+            industry: {
+                fieldType: 'enum' as const,
+                value: ['tech'],
+            },
+            price: {
+                fieldType: 'float' as const,
+                value: { range: { gt: 10, lt: 100 } },
+            },
+            name: {
+                fieldType: 'string' as const,
+                value: ['search term'],
+            },
+            category: {
+                fieldType: 'multiSelect' as const,
+                value: ['category1', 'category2'],
+            },
+        } as unknown as ExternalFilterValues;
+
+        renderComponent({
+            actionBarProps: { initialFilterValues },
+        });
+
+        expect(screen.getByRole('button', { name: 'All Filters 3' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Industry/i })).toHaveTextContent(/\(1\)/);
+        expect(screen.getByRole('button', { name: /Category/i })).toHaveTextContent(/\(2\)/);
+    });
+
+    test('should handle empty metadata template fields', () => {
+        const emptyTemplate: MetadataTemplate = {
+            ...mockMetadataTemplate,
+            fields: [],
+        };
+
+        renderComponent({ metadataTemplate: emptyTemplate });
+
+        expect(screen.getByRole('button', { name: 'All Filters' })).toBeInTheDocument();
+        expect(screen.getByText('File 1.txt')).toBeInTheDocument();
+        expect(screen.getByText('File 2.pdf')).toBeInTheDocument();
+    });
+
+    test('should handle undefined metadata template', () => {
+        renderComponent({ metadataTemplate: undefined as unknown as MetadataTemplate });
+
+        expect(screen.getByRole('button', { name: 'All Filters' })).toBeInTheDocument();
+        expect(screen.getByText('File 1.txt')).toBeInTheDocument();
+        expect(screen.getByText('File 2.pdf')).toBeInTheDocument();
+    });
+
+    test('should handle empty collection items', () => {
+        const emptyCollection: Collection = {
+            id: '0',
+            items: [],
+            percentLoaded: 100,
+        };
+
+        renderComponent({ currentCollection: emptyCollection });
+
+        expect(screen.getByRole('button', { name: 'All Filters' })).toBeInTheDocument();
+    });
+
+    test('should handle undefined collection items', () => {
+        const collectionWithoutItems: Collection = {
+            id: '0',
+            percentLoaded: 100,
+        };
+
+        renderComponent({ currentCollection: collectionWithoutItems });
+
+        expect(screen.getByRole('button', { name: 'All Filters' })).toBeInTheDocument();
+    });
+
+    test('should memoize filterGroups when metadataTemplate changes', () => {
+        const { rerender } = renderComponent();
+
+        // Re-render with same template
+        rerender(<MetadataViewContainer {...defaultProps} />);
+
+        // Re-render with different template
+        const newTemplate: MetadataTemplate = {
+            ...mockMetadataTemplate,
+            id: 'template2',
+            displayName: 'New Template',
+        };
+        rerender(<MetadataViewContainer {...defaultProps} metadataTemplate={newTemplate} />);
+
+        expect(screen.getByRole('button', { name: 'All Filters' })).toBeInTheDocument();
+    });
+
+    test('should handle fields with no options', () => {
+        const templateWithoutOptions: MetadataTemplate = {
+            ...mockMetadataTemplate,
+            fields: [
+                {
+                    id: 'field1',
+                    key: 'name',
+                    displayName: 'File Name',
+                    type: 'string',
+                },
+                {
+                    id: 'field2',
+                    key: 'industry',
+                    displayName: 'Industry',
+                    type: 'enum',
+                    // No options defined
+                },
+            ],
+        };
+
+        renderComponent({ metadataTemplate: templateWithoutOptions });
+
+        expect(screen.getByRole('button', { name: 'All Filters' })).toBeInTheDocument();
+        expect(screen.getAllByRole('button', { name: 'Name' })).toHaveLength(1); // Only the one added by component
+        expect(screen.getByRole('button', { name: 'File Name' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Industry' })).toBeInTheDocument();
+    });
+
+    test('should handle multiple field types in filter submission', async () => {
+        const onFilterSubmit = jest.fn();
+        const onMetadataFilter = jest.fn();
+        const template: MetadataTemplate = {
+            ...mockMetadataTemplate,
+            fields: [
+                {
+                    id: 'field1',
+                    key: 'status',
+                    displayName: 'Status',
+                    type: 'enum',
+                    options: [
+                        { id: 's1', key: 'Active' },
+                        { id: 's2', key: 'Inactive' },
+                    ],
+                },
+                {
+                    id: 'field2',
+                    key: 'price',
+                    displayName: 'Price',
+                    type: 'float',
+                },
+            ],
+        };
+
+        renderComponent({
+            metadataTemplate: template,
+            actionBarProps: { onFilterSubmit },
+            onMetadataFilter,
+        });
+
+        // Test enum filter
+        await userEvent().click(screen.getByRole('button', { name: /Status/ }));
+        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
+
+        await waitFor(() => {
+            expect(onMetadataFilter).toHaveBeenCalledTimes(1);
+            expect(onFilterSubmit).toHaveBeenCalledTimes(1);
+        });
+
+        const filterCall = onMetadataFilter.mock.calls[0][0];
+        expect(filterCall.status.value).toEqual(['Active']);
+        expect(filterCall.status.fieldType).toBe('enum');
+    });
+
+    describe('convertFilterValuesToExternal', () => {
+        test('should convert enum values to string arrays', () => {
+            const internalFilters = {
+                'status-filter': {
+                    fieldType: 'enum' as const,
+                    options: [
+                        { key: 'active', id: 'active1' },
+                        { key: 'inactive', id: 'inactive1' },
+                    ],
+                    value: { enum: ['active', 'inactive'] },
+                },
+            };
+
+            const result = convertFilterValuesToExternal(internalFilters);
+
+            expect(result['status-filter'].value).toEqual(['active', 'inactive']);
+            expect(result['status-filter'].fieldType).toBe('enum');
+            expect(result['status-filter'].options).toEqual([
+                { key: 'active', id: 'active1' },
+                { key: 'inactive', id: 'inactive1' },
+            ]);
+        });
+
+        test('should keep range values unchanged', () => {
+            const internalFilters = {
+                'price-filter': {
+                    fieldType: 'float' as const,
+                    value: { range: { gt: 10, lt: 100 }, advancedFilterOption: 'range' },
+                },
+            };
+
+            const result = convertFilterValuesToExternal(internalFilters);
+
+            expect(result['price-filter'].value).toEqual({ range: { gt: 10, lt: 100 }, advancedFilterOption: 'range' });
+            expect(result['price-filter'].fieldType).toBe('float');
+        });
+
+        test('should keep float values unchanged', () => {
+            const internalFilters = {
+                'rating-filter': {
+                    fieldType: 'float' as const,
+                    value: { range: { gt: 4.5, lt: 5.0 }, advancedFilterOption: 'range' },
+                },
+            };
+
+            const result = convertFilterValuesToExternal(internalFilters);
+
+            expect(result['rating-filter'].value).toEqual({
+                range: { gt: 4.5, lt: 5.0 },
+                advancedFilterOption: 'range',
+            });
+            expect(result['rating-filter'].fieldType).toBe('float');
+        });
+
+        test('should handle mixed field types', () => {
+            const internalFilters = {
+                'status-filter': {
+                    fieldType: 'enum' as const,
+                    options: [
+                        { key: 'active', id: 'active1' },
+                        { key: 'inactive', id: 'inactive1' },
+                    ],
+                    value: { enum: ['active'] },
+                },
+                'price-filter': {
+                    fieldType: 'float' as const,
+                    value: { range: { gt: 0, lt: 50 }, advancedFilterOption: 'range' },
+                },
+                'category-filter': {
+                    fieldType: 'multiSelect' as const,
+                    options: [
+                        { key: 'tech', id: 'tech1' },
+                        { key: 'finance', id: 'finance1' },
+                        { key: 'healthcare', id: 'healthcare1' },
+                    ],
+                    value: { enum: ['tech', 'finance'] },
+                },
+            };
+
+            const result = convertFilterValuesToExternal(internalFilters);
+
+            expect(result['status-filter'].value).toEqual(['active']);
+            expect(result['price-filter'].value).toEqual({ range: { gt: 0, lt: 50 }, advancedFilterOption: 'range' });
+            expect(result['category-filter'].value).toEqual(['tech', 'finance']);
+        });
+
+        test('should handle empty filter object', () => {
+            const result = convertFilterValuesToExternal({});
+            expect(result).toEqual({});
+        });
+
+        test('should handle enum values with empty array', () => {
+            const internalFilters = {
+                'status-filter': {
+                    fieldType: 'enum' as const,
+                    options: [{ key: 'active', id: 'active1' }],
+                    value: { enum: [] },
+                },
+            };
+
+            const result = convertFilterValuesToExternal(internalFilters);
+
+            expect(result['status-filter'].value).toEqual([]);
+            expect(result['status-filter'].fieldType).toBe('enum');
+        });
+
+        test('should handle multiSelect values', () => {
+            const internalFilters = {
+                'category-filter': {
+                    fieldType: 'multiSelect' as const,
+                    options: [
+                        { key: 'tech', id: 'tech1' },
+                        { key: 'finance', id: 'finance1' },
+                    ],
+                    value: { enum: ['tech', 'finance'] },
+                },
+            };
+
+            const result = convertFilterValuesToExternal(internalFilters);
+
+            expect(result['category-filter'].value).toEqual(['tech', 'finance']);
+            expect(result['category-filter'].fieldType).toBe('multiSelect');
+        });
     });
 });

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

@@ -23,37 +23,19 @@ const metadataQuery = {
 
     ancestor_folder_id: '0',
     fields: [
-        `name`,
         `${metadataSourceFieldName}.industry`,
         `${metadataSourceFieldName}.last_contacted_at`,
         `${metadataSourceFieldName}.role`,
+        `${metadataSourceFieldName}.number`,
     ],
 };
 
-const fieldsToShow = [
-    { key: `name` },
-    { key: `${metadataSourceFieldName}.industry`, canEdit: true },
-    { key: `${metadataSourceFieldName}.last_contacted_at`, canEdit: true },
-    { key: `${metadataSourceFieldName}.role`, canEdit: true },
-];
-
 const columns = mockSchema.fields.map(field => {
-    if (field.key === 'name') {
-        return {
-            textValue: field.displayName,
-            id: 'name',
-            type: 'string',
-            allowsSorting: true,
-            minWidth: 250,
-            maxWidth: 250,
-            isRowHeader: true,
-        };
-    }
-
     if (field.type === 'date') {
         return {
             textValue: field.displayName,
             id: `${metadataSourceFieldName}.${field.key}`,
+            key: `${metadataSourceFieldName}.${field.key}`,
             type: field.type,
             allowsSorting: true,
             minWidth: 200,
@@ -68,6 +50,7 @@ const columns = mockSchema.fields.map(field => {
     return {
         textValue: field.displayName,
         id: `${metadataSourceFieldName}.${field.key}`,
+        key: `${metadataSourceFieldName}.${field.key}`,
         type: field.type,
         allowsSorting: true,
         minWidth: 200,
@@ -87,7 +70,6 @@ export const metadataView: Story = {
             },
         },
         metadataQuery,
-        fieldsToShow,
         defaultView,
         features: {
             contentExplorer: {

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

@@ -3,7 +3,9 @@ import { http, HttpResponse } from 'msw';
 import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';
 import { Sign } from '@box/blueprint-web-assets/icons/Line';
 import { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';
+
 import noop from 'lodash/noop';
+import orderBy from 'lodash/orderBy';
 
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
@@ -30,13 +32,11 @@ const metadataQuery = {
     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',
     ],
 };
 
 // Used for metadata view v1
 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 },
@@ -44,15 +44,6 @@ const fieldsToShow = [
 
 // Used for metadata view v2
 const columns = [
-    {
-        // Always include the name column
-        textValue: 'Name',
-        id: 'name',
-        type: 'string',
-        allowsSorting: true,
-        minWidth: 150,
-        maxWidth: 150,
-    },
     ...mockSchema.fields.map(field => ({
         textValue: field.displayName,
         id: `${metadataFieldNamePrefix}.${field.key}`,
@@ -138,17 +129,16 @@ 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 industryHeader = await canvas.findByRole('columnheader', { name: 'Industry' });
+        expect(industryHeader).toBeInTheDocument();
+
+        const firstRow = await canvas.findByRole('row', { name: /Child 2/i });
+        expect(firstRow).toBeInTheDocument();
 
-        const firstRow = canvas.getByRole('row', { name: /Industry/i });
-        const industryHeader = within(firstRow).getByRole('columnheader', { name: 'Industry' });
-        userEvent.click(industryHeader);
+        await userEvent.click(industryHeader);
     },
 };
 
@@ -166,9 +156,9 @@ export const metadataViewV2WithCustomActions: Story = {
 
 const initialFilterActionBarProps = {
     initialFilterValues: {
-        'industry-filter': { value: ['Legal'] },
+        industry: { value: ['Legal'] },
         'mimetype-filter': { value: ['boxnoteType', 'documentType', 'threedType'] },
-        'role-filter': { value: ['Developer', 'Business Owner', 'Marketing'] },
+        role: { value: ['Developer', 'Business Owner', 'Marketing'] },
     },
 };
 
@@ -237,6 +227,37 @@ export const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {
     },
 };
 
+export const sidePanelOpenWithMultipleItemsSelected: 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 firstItem = canvas.getByRole('row', { name: /Child 2/i });
+        const checkbox = within(firstItem).getByRole('checkbox');
+        await userEvent.click(checkbox);
+
+        // Select the second row by clicking its checkbox
+        const secondItem = canvas.getAllByRole('row', { name: /Child 1/i })[0];
+        const secondCheckbox = within(secondItem).getByRole('checkbox');
+        await userEvent.click(secondCheckbox);
+
+        const metadataButton = canvas.getByRole('button', { name: 'Metadata' });
+        await userEvent.click(metadataButton);
+    },
+};
+
 const meta: Meta<typeof ContentExplorer> = {
     title: 'Elements/ContentExplorer/tests/MetadataView/visual',
     component: ContentExplorer,
@@ -248,7 +269,21 @@ const meta: Meta<typeof ContentExplorer> = {
     parameters: {
         msw: {
             handlers: [
-                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {
+                // Note that the Metadata API backend normally handles the sorting. The mocks below simulate the sorting for specific cases, but may not 100% accurately reflect the backend behavior.
+                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, async ({ request }) => {
+                    const body = await request.clone().json();
+                    const orderByDirection = body.order_by[0].direction;
+                    const orderByFieldKey = body.order_by[0].field_key;
+
+                    // Hardcoded case for sorting by industry
+                    if (orderByFieldKey === `industry` && orderByDirection === 'ASC') {
+                        const sortedMetadata = orderBy(
+                            mockMetadata.entries,
+                            'metadata.enterprise_0.templateName.industry',
+                            'asc',
+                        );
+                        return HttpResponse.json({ ...mockMetadata, entries: sortedMetadata });
+                    }
                     return HttpResponse.json(mockMetadata);
                 }),
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {