box-ui-elements 24.0.0-beta.5 → 24.0.0-beta.7

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/constants.ts

@@ -2,7 +2,7 @@ import { FIELD_FILE_VERSION, FIELD_SHA1, FIELD_SHARED_LINK, FIELD_WATERMARK_INFO
 import { FOLDER_FIELDS_TO_FETCH } from '../../utils/fields';
 
 // Fields needed for Content Explorer folder requests
-const CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH = [
+export const CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH = [
     ...FOLDER_FIELDS_TO_FETCH,
     FIELD_FILE_VERSION,
     FIELD_SHA1,
@@ -10,4 +10,41 @@ const CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH = [
     FIELD_WATERMARK_INFO,
 ];
 
-export default CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH;
+export const NON_FOLDER_FILE_TYPES_MAP = new Map([
+    ['boxnoteType', ['boxnote']],
+    ['boxcanvasType', ['boxcanvas']],
+    ['pdfType', ['pdf']],
+    ['documentType', ['doc', 'docx', 'gdoc', 'rtf', 'txt']],
+    ['spreadsheetType', ['xls', 'xlsx', 'xlsm', 'csv', 'gsheet']],
+    ['presentationType', ['ppt', 'pptx', 'odp']],
+    ['imageType', ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tif', 'tiff']],
+    ['audioType', ['mp3', 'm4a', 'm4p', 'wav', 'mid', 'wma']],
+    [
+        'videoType',
+        [
+            'mp4',
+            'mpeg',
+            'mpg',
+            'wmv',
+            '3g2',
+            '3gp',
+            'avi',
+            'm2v',
+            'm4v',
+            'mkv',
+            'mov',
+            'ogg',
+            'mts',
+            'qt',
+            'ts',
+            'flv',
+            'rm',
+        ],
+    ],
+    ['drawingType', ['dwg', 'dxf']],
+    ['threedType', ['obj', 'fbx', 'stl', 'amf', 'iges']],
+]);
+
+export const FILE_FOLDER_TYPES_MAP = new Map(NON_FOLDER_FILE_TYPES_MAP).set('folderType', ['folder']);
+
+export const NON_FOLDER_FILE_TYPES = Array.from(NON_FOLDER_FILE_TYPES_MAP.keys());

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

@@ -32,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 },
@@ -46,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}`,
@@ -167,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'] },
     },
 };
 

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

@@ -11,9 +11,11 @@ import {
 } from '@box/metadata-editor';
 import type { MetadataFieldType } from '@box/metadata-view';
 import type { Selection } from 'react-aria-components';
+import { BoxItemSelection } from '@box/box-item-type-selector';
 import type { BoxItem, Collection } from '../../common/types/core';
 
 import messages from '../common/messages';
+import { FILE_FOLDER_TYPES_MAP, NON_FOLDER_FILE_TYPES } from './constants';
 
 // Specific type for metadata field value in the item
 // Note: Item doesn't have field value in metadata object if that field is not set, so the value will be undefined in this case
@@ -193,3 +195,18 @@ export function useTemplateInstance(metadataTemplate: MetadataTemplate, selected
         type,
     };
 }
+
+export const mapFileTypes = (selectedFileTypes: BoxItemSelection) => {
+    const selectedFileTypesSet = new Set(selectedFileTypes);
+
+    const areAllNonFolderFileTypesSelected = NON_FOLDER_FILE_TYPES.every(key => selectedFileTypesSet.has(key));
+
+    if (areAllNonFolderFileTypesSelected) {
+        if (selectedFileTypes.includes('folderType')) {
+            return [];
+        }
+        return ['file'];
+    }
+
+    return selectedFileTypes.map(fileType => FILE_FOLDER_TYPES_MAP.get(fileType as string) || []).flat();
+};