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

package/src/elements/content-explorer/__tests__/MetadataQueryBuilder.test.ts

@@ -0,0 +1,419 @@
+import {
+    mergeQueryParams,
+    mergeQueries,
+    getStringFilter,
+    getRangeFilter,
+    getSelectFilter,
+    getMimeTypeFilter,
+} from '../MetadataQueryBuilder';
+
+describe('elements/content-explorer/MetadataQueryBuilder', () => {
+    describe('mergeQueryParams', () => {
+        test('should merge two objects', () => {
+            const target = { key1: 'value1' };
+            const source = { key2: 'value2' };
+            const result = mergeQueryParams(target, source);
+            expect(result).toEqual({ key1: 'value1', key2: 'value2' });
+        });
+
+        test('should override target values with source values', () => {
+            const target = { key1: 'value1', key2: 'old' };
+            const source = { key2: 'new', key3: 'value3' };
+            const result = mergeQueryParams(target, source);
+            expect(result).toEqual({ key1: 'value1', key2: 'new', key3: 'value3' });
+        });
+
+        test('should return source when target is empty', () => {
+            const target = {};
+            const source = { key1: 'value1' };
+            const result = mergeQueryParams(target, source);
+            expect(result).toEqual({ key1: 'value1' });
+        });
+
+        test('should return target when source is empty', () => {
+            const target = { key1: 'value1' };
+            const source = {};
+            const result = mergeQueryParams(target, source);
+            expect(result).toEqual({ key1: 'value1' });
+        });
+
+        test('should return empty object when both are empty', () => {
+            const result = mergeQueryParams({}, {});
+            expect(result).toEqual({});
+        });
+    });
+
+    describe('mergeQueries', () => {
+        test('should merge two arrays', () => {
+            const target = ['query1'];
+            const source = ['query2'];
+            const result = mergeQueries(target, source);
+            expect(result).toEqual(['query1', 'query2']);
+        });
+
+        test('should handle empty target array', () => {
+            const target: string[] = [];
+            const source = ['query1', 'query2'];
+            const result = mergeQueries(target, source);
+            expect(result).toEqual(['query1', 'query2']);
+        });
+
+        test('should handle empty source array', () => {
+            const target = ['query1', 'query2'];
+            const source: string[] = [];
+            const result = mergeQueries(target, source);
+            expect(result).toEqual(['query1', 'query2']);
+        });
+
+        test('should handle both empty arrays', () => {
+            const result = mergeQueries([], []);
+            expect(result).toEqual([]);
+        });
+    });
+
+    describe('getStringFilter', () => {
+        test('should generate string filter with ILIKE query', () => {
+            const result = getStringFilter('test', 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: '%test%' },
+                queries: ['(field_name ILIKE :arg_field_name_1)'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should escape special characters in value', () => {
+            const result = getStringFilter('test_value%123', 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: '%test\\_value\\%123%' },
+                queries: ['(field_name ILIKE :arg_field_name_1)'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should use correct arg index', () => {
+            const result = getStringFilter('test', 'field_name', 5);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_6: '%test%' },
+                queries: ['(field_name ILIKE :arg_field_name_6)'],
+                keysGenerated: 1,
+            });
+        });
+    });
+
+    describe('getRangeFilter', () => {
+        test('should generate range filter with both gt and lt', () => {
+            const filterValue = { range: { gt: 10, lt: 20 } };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: 10, arg_field_name_2: 20 },
+                queries: ['(field_name >= :arg_field_name_1 AND field_name <= :arg_field_name_2)'],
+                keysGenerated: 2,
+            });
+        });
+
+        test('should generate range filter with only gt', () => {
+            const filterValue = { range: { gt: 10, lt: '' } };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: 10 },
+                queries: ['(field_name >= :arg_field_name_1)'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should generate range filter with only lt', () => {
+            const filterValue = { range: { gt: '', lt: 20 } };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: 20 },
+                queries: ['(field_name <= :arg_field_name_1)'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should handle null values in range', () => {
+            const filterValue = { range: { gt: null, lt: 20 } };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: 20 },
+                queries: ['(field_name <= :arg_field_name_1)'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should handle undefined values in range', () => {
+            const filterValue = { range: { gt: undefined, lt: 20 } };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: 20 },
+                queries: ['(field_name <= :arg_field_name_1)'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should handle zero values in range', () => {
+            const filterValue = { range: { gt: 0, lt: 100 } };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: 0, arg_field_name_2: 100 },
+                queries: ['(field_name >= :arg_field_name_1 AND field_name <= :arg_field_name_2)'],
+                keysGenerated: 2,
+            });
+        });
+
+        test('should return empty result for invalid filter value', () => {
+            const result = getRangeFilter(null, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: {},
+                queries: [],
+                keysGenerated: 0,
+            });
+        });
+
+        test('should return empty result for filter value without range', () => {
+            const filterValue = { someOtherProperty: 'value' } as unknown as
+                | string[]
+                | { range: { gt: number | string; lt: number | string } };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: {},
+                queries: [],
+                keysGenerated: 0,
+            });
+        });
+
+        test('should return empty result for empty range', () => {
+            const filterValue = { range: { gt: '', lt: '' } };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: {},
+                queries: [],
+                keysGenerated: 0,
+            });
+        });
+
+        test('should return empty result for null range', () => {
+            const filterValue = { range: null };
+            const result = getRangeFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: {},
+                queries: [],
+                keysGenerated: 0,
+            });
+        });
+
+        test('should use correct arg index', () => {
+            const filterValue = { range: { gt: 10, lt: 20 } };
+            const result = getRangeFilter(filterValue, 'field_name', 5);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_6: 10, arg_field_name_7: 20 },
+                queries: ['(field_name >= :arg_field_name_6 AND field_name <= :arg_field_name_7)'],
+                keysGenerated: 2,
+            });
+        });
+    });
+
+    describe('getSelectFilter', () => {
+        test('should generate select filter for multiple values', () => {
+            const filterValue = ['value1', 'value2', 'value3'];
+            const result = getSelectFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_field_name_1: 'value1',
+                    arg_field_name_2: 'value2',
+                    arg_field_name_3: 'value3',
+                },
+                queries: ['(field_name HASANY (:arg_field_name_1, :arg_field_name_2, :arg_field_name_3))'],
+                keysGenerated: 3,
+            });
+        });
+
+        test('should handle mimetype-filter field key specially', () => {
+            const filterValue = ['pdf', 'doc'];
+            const result = getSelectFilter(filterValue, 'mimetype-filter', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_mimetype_filter_1: 'pdf',
+                    arg_mimetype_filter_2: 'doc',
+                },
+                queries: ['(item.extension HASANY (:arg_mimetype_filter_1, :arg_mimetype_filter_2))'],
+                keysGenerated: 2,
+            });
+        });
+
+        test('should handle single value array', () => {
+            const filterValue = ['single_value'];
+            const result = getSelectFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_1: 'single_value' },
+                queries: ['(field_name HASANY (:arg_field_name_1))'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should handle numeric values converted to strings', () => {
+            const filterValue = ['123', '456'];
+            const result = getSelectFilter(filterValue, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_field_name_1: '123',
+                    arg_field_name_2: '456',
+                },
+                queries: ['(field_name HASANY (:arg_field_name_1, :arg_field_name_2))'],
+                keysGenerated: 2,
+            });
+        });
+
+        test('should return empty result for empty array', () => {
+            const result = getSelectFilter([], 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: {},
+                queries: [],
+                keysGenerated: 0,
+            });
+        });
+
+        test('should return empty result for null/undefined', () => {
+            const result = getSelectFilter(null, 'field_name', 0);
+            expect(result).toEqual({
+                queryParams: {},
+                queries: [],
+                keysGenerated: 0,
+            });
+        });
+
+        test('should use correct arg index', () => {
+            const filterValue = ['value1'];
+            const result = getSelectFilter(filterValue, 'field_name', 5);
+            expect(result).toEqual({
+                queryParams: { arg_field_name_6: 'value1' },
+                queries: ['(field_name HASANY (:arg_field_name_6))'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should handle field names with special characters', () => {
+            const filterValue = ['value1', 'value2'];
+            const result = getSelectFilter(filterValue, 'field-name.with/special_chars', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_field_name_with_special_chars_1: 'value1',
+                    arg_field_name_with_special_chars_2: 'value2',
+                },
+                queries: [
+                    '(field-name.with/special_chars HASANY (:arg_field_name_with_special_chars_1, :arg_field_name_with_special_chars_2))',
+                ],
+                keysGenerated: 2,
+            });
+        });
+    });
+
+    describe('getMimeTypeFilter', () => {
+        test('should generate mime type filter and remove "Type" suffix', () => {
+            const filterValue = ['pdfType', 'docType', 'txtType'];
+            const result = getMimeTypeFilter(filterValue, 'mimetype', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_mimetype_1: 'pdf',
+                    arg_mimetype_2: 'doc',
+                    arg_mimetype_3: 'txt',
+                },
+                queries: ['(item.extension IN (:arg_mimetype_1, :arg_mimetype_2, :arg_mimetype_3))'],
+                keysGenerated: 3,
+            });
+        });
+
+        test('should handle values without "Type" suffix', () => {
+            const filterValue = ['pdf', 'doc'];
+            const result = getMimeTypeFilter(filterValue, 'mimetype', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_mimetype_1: 'pdf',
+                    arg_mimetype_2: 'doc',
+                },
+                queries: ['(item.extension IN (:arg_mimetype_1, :arg_mimetype_2))'],
+                keysGenerated: 2,
+            });
+        });
+
+        test('should handle mixed values with and without "Type" suffix', () => {
+            const filterValue = ['pdfType', 'doc', 'txtType'];
+            const result = getMimeTypeFilter(filterValue, 'mimetype', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_mimetype_1: 'pdf',
+                    arg_mimetype_2: 'doc',
+                    arg_mimetype_3: 'txt',
+                },
+                queries: ['(item.extension IN (:arg_mimetype_1, :arg_mimetype_2, :arg_mimetype_3))'],
+                keysGenerated: 3,
+            });
+        });
+
+        test('should handle single value array', () => {
+            const filterValue = ['pdfType'];
+            const result = getMimeTypeFilter(filterValue, 'mimetype', 0);
+            expect(result).toEqual({
+                queryParams: { arg_mimetype_1: 'pdf' },
+                queries: ['(item.extension IN (:arg_mimetype_1))'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should handle numeric values converted to strings', () => {
+            const filterValue = ['123', '456'];
+            const result = getMimeTypeFilter(filterValue, 'mimetype', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_mimetype_1: '123',
+                    arg_mimetype_2: '456',
+                },
+                queries: ['(item.extension IN (:arg_mimetype_1, :arg_mimetype_2))'],
+                keysGenerated: 2,
+            });
+        });
+
+        test('should return empty result for empty array', () => {
+            const result = getMimeTypeFilter([], 'mimetype', 0);
+            expect(result).toEqual({
+                queryParams: {},
+                queries: [],
+                keysGenerated: 0,
+            });
+        });
+
+        test('should return empty result for null/undefined', () => {
+            const result = getMimeTypeFilter(null, 'mimetype', 0);
+            expect(result).toEqual({
+                queryParams: {},
+                queries: [],
+                keysGenerated: 0,
+            });
+        });
+
+        test('should use correct arg index', () => {
+            const filterValue = ['pdfType'];
+            const result = getMimeTypeFilter(filterValue, 'mimetype', 5);
+            expect(result).toEqual({
+                queryParams: { arg_mimetype_6: 'pdf' },
+                queries: ['(item.extension IN (:arg_mimetype_6))'],
+                keysGenerated: 1,
+            });
+        });
+
+        test('should handle field names with special characters', () => {
+            const filterValue = ['pdfType', 'docType'];
+            const result = getMimeTypeFilter(filterValue, 'mime-type.with/special_chars', 0);
+            expect(result).toEqual({
+                queryParams: {
+                    arg_mime_type_with_special_chars_1: 'pdf',
+                    arg_mime_type_with_special_chars_2: 'doc',
+                },
+                queries: [
+                    '(item.extension IN (:arg_mime_type_with_special_chars_1, :arg_mime_type_with_special_chars_2))',
+                ],
+                keysGenerated: 2,
+            });
+        });
+    });
+});

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '../../../test-utils/testing-library';
+import { Notification } from '@box/blueprint-web';
+import { render, screen, waitFor } from '../../../test-utils/testing-library';
 import MetadataSidePanel, { type MetadataSidePanelProps } from '../MetadataSidePanel';
 
 // Mock scrollTo method
@@ -65,13 +66,20 @@ const mockOnClose = jest.fn();
 describe('elements/content-explorer/MetadataSidePanel', () => {
     const defaultProps: MetadataSidePanelProps = {
         currentCollection: mockCollection,
-        onClose: mockOnClose,
         metadataTemplate: mockMetadataTemplate,
+        onClose: mockOnClose,
+        onUpdate: jest.fn(),
+        refreshCollection: jest.fn(),
         selectedItemIds: new Set(['1']),
     };
 
     const renderComponent = (props: Partial<MetadataSidePanelProps> = {}) =>
-        render(<MetadataSidePanel {...defaultProps} {...props} />);
+        render(
+            <Notification.Provider>
+                <Notification.Viewport />
+                <MetadataSidePanel {...defaultProps} {...props} />
+            </Notification.Provider>,
+        );
 
     test('renders the metadata title', () => {
         renderComponent();
@@ -124,4 +132,138 @@ describe('elements/content-explorer/MetadataSidePanel', () => {
         const submitButton = screen.getByRole('button', { name: 'Save' });
         expect(submitButton).toBeInTheDocument();
     });
+
+    test('switches back to view mode when cancel button is clicked', async () => {
+        renderComponent();
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        await userEvent.click(editTemplateButton);
+
+        const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+        await userEvent.click(cancelButton);
+
+        // Should be back in view mode
+        expect(screen.getByLabelText('Edit Mock Template')).toBeInTheDocument();
+    });
+
+    test('calls onUpdate when form is submitted for single item', async () => {
+        const mockUpdateMetadata = jest.fn().mockResolvedValue(undefined);
+        renderComponent({ onUpdate: mockUpdateMetadata });
+
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        await userEvent.click(editTemplateButton);
+
+        const submitButton = screen.getByRole('button', { name: 'Save' });
+        await userEvent.click(submitButton);
+
+        expect(mockUpdateMetadata).toHaveBeenCalledWith(
+            [mockCollection.items[0]],
+            expect.any(Array),
+            expect.any(Array),
+            expect.any(Array),
+            expect.any(Function),
+            expect.any(Function),
+        );
+    });
+
+    test('calls onUpdate when multiple items are selected', async () => {
+        const mockUpdateMetadata = jest.fn().mockResolvedValue(undefined);
+
+        renderComponent({
+            selectedItemIds: new Set(['1', '2']),
+            onUpdate: mockUpdateMetadata,
+        });
+
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        await userEvent.click(editTemplateButton);
+
+        const submitButton = screen.getByRole('button', { name: 'Save' });
+        await userEvent.click(submitButton);
+
+        await waitFor(() => {
+            expect(mockUpdateMetadata).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    test('displays success notification when metadata update succeeds', async () => {
+        const mockUpdateMetadata = jest.fn().mockImplementation((_, __, ___, ____, successCallback) => {
+            successCallback();
+            return Promise.resolve();
+        });
+        const mockRefreshCollection = jest.fn();
+
+        renderComponent({
+            onUpdate: mockUpdateMetadata,
+            refreshCollection: mockRefreshCollection,
+        });
+
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        await userEvent.click(editTemplateButton);
+
+        const submitButton = screen.getByRole('button', { name: 'Save' });
+        await userEvent.click(submitButton);
+
+        expect(screen.getByText('1 document updated')).toBeInTheDocument();
+        expect(mockRefreshCollection).toHaveBeenCalledTimes(1);
+        expect(screen.getByLabelText('Edit Mock Template')).toBeInTheDocument(); // Back to view mode
+    });
+
+    test('displays error notification when metadata update fails', async () => {
+        const mockUpdateMetadata = jest.fn().mockImplementation((_, __, ___, ____, _____, errorCallback) => {
+            errorCallback();
+            return Promise.resolve();
+        });
+
+        renderComponent({ onUpdate: mockUpdateMetadata });
+
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        await userEvent.click(editTemplateButton);
+
+        const submitButton = screen.getByRole('button', { name: 'Save' });
+        await userEvent.click(submitButton);
+
+        await waitFor(() => {
+            expect(screen.getByText('Unable to save changes. Please try again.')).toBeInTheDocument();
+        });
+    });
+
+    test('handles "all" selection correctly', () => {
+        renderComponent({ selectedItemIds: 'all' });
+        const subtitle = screen.getByText('2 files selected');
+        expect(subtitle).toBeInTheDocument();
+    });
+
+    test('displays "Multiple Values" for items with different field values', () => {
+        const collectionWithDifferentValues = {
+            ...mockCollection,
+            items: [
+                {
+                    ...mockCollection.items[0],
+                    metadata: {
+                        enterprise_123: {
+                            mockTemplate: {
+                                alias: 'value-1',
+                            },
+                        },
+                    },
+                },
+                {
+                    ...mockCollection.items[1],
+                    metadata: {
+                        enterprise_123: {
+                            mockTemplate: {
+                                alias: 'value-2',
+                            },
+                        },
+                    },
+                },
+            ],
+        };
+
+        renderComponent({
+            currentCollection: collectionWithDifferentValues,
+            selectedItemIds: new Set(['1', '2']),
+        });
+
+        expect(screen.getByText('Multiple Values')).toBeInTheDocument();
+    });
 });