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

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

@@ -0,0 +1,159 @@
+import isNil from 'lodash/isNil';
+
+type QueryResult = {
+    queryParams: { [key: string]: number | Date | string };
+    queries: string[];
+    keysGenerated: number;
+};
+
+// Custom type for range filters
+type SimpleRangeType = {
+    range: {
+        gt: number | string;
+        lt: number | string;
+    };
+};
+
+// Union type for filter values
+type SimpleFilterValue = string[] | SimpleRangeType;
+
+export const mergeQueryParams = (
+    targetParams: { [key: string]: number | Date | string },
+    sourceParams: { [key: string]: number | Date | string },
+): { [key: string]: number | Date | string } => {
+    return { ...targetParams, ...sourceParams };
+};
+
+export const mergeQueries = (targetQueries: string[], sourceQueries: string[]): string[] => {
+    return [...targetQueries, ...sourceQueries];
+};
+
+const generateArgKey = (key: string, index: number): string => {
+    const purifyKey = key.replace(/[^\w]/g, '_');
+    return `arg_${purifyKey}_${index}`;
+};
+
+const escapeValue = (value: string): string => value.replace(/([_%])/g, '\\$1');
+
+export const getStringFilter = (filterValue: string, fieldKey: string, argIndexStart: number): QueryResult => {
+    let currentArgIndex = argIndexStart;
+
+    const argKey = generateArgKey(fieldKey, (currentArgIndex += 1));
+    return {
+        queryParams: { [argKey]: `%${escapeValue(filterValue)}%` },
+        queries: [`(${fieldKey} ILIKE :${argKey})`],
+        keysGenerated: currentArgIndex - argIndexStart,
+    };
+};
+
+const isInvalid = (value: number | string) => {
+    return isNil(value) || value === '';
+};
+
+export const getRangeFilter = (
+    filterValue: SimpleFilterValue,
+    fieldKey: string,
+    argIndexStart: number,
+): QueryResult => {
+    let currentArgIndex = argIndexStart;
+
+    if (filterValue && typeof filterValue === 'object' && 'range' in filterValue && filterValue.range) {
+        const { gt, lt } = filterValue.range;
+        const queryParams: { [key: string]: number | string } = {};
+        const queries: string[] = [];
+
+        if (!isInvalid(gt) && !isInvalid(lt)) {
+            // Both gt and lt: between values
+            const argKeyGt = generateArgKey(fieldKey, (currentArgIndex += 1));
+            const argKeyLt = generateArgKey(fieldKey, (currentArgIndex += 1));
+            queryParams[argKeyGt] = gt;
+            queryParams[argKeyLt] = lt;
+            queries.push(`(${fieldKey} >= :${argKeyGt} AND ${fieldKey} <= :${argKeyLt})`);
+        } else if (!isInvalid(gt)) {
+            // Only gt: greater than
+            const argKey = generateArgKey(fieldKey, (currentArgIndex += 1));
+            queryParams[argKey] = gt;
+            queries.push(`(${fieldKey} >= :${argKey})`);
+        } else if (!isInvalid(lt)) {
+            // Only lt: less than
+            const argKey = generateArgKey(fieldKey, (currentArgIndex += 1));
+            queryParams[argKey] = lt;
+            queries.push(`(${fieldKey} <= :${argKey})`);
+        }
+
+        return {
+            queryParams,
+            queries,
+            keysGenerated: currentArgIndex - argIndexStart,
+        };
+    }
+    return {
+        queryParams: {},
+        queries: [],
+        keysGenerated: 0,
+    };
+};
+
+export const getSelectFilter = (filterValue: string[], fieldKey: string, argIndexStart: number): QueryResult => {
+    if (!Array.isArray(filterValue) || filterValue.length === 0) {
+        return {
+            queryParams: {},
+            queries: [],
+            keysGenerated: 0,
+        };
+    }
+
+    let currentArgIndex = argIndexStart;
+
+    const multiSelectQueryParams = Object.fromEntries(
+        filterValue.map(value => {
+            currentArgIndex += 1;
+            return [generateArgKey(fieldKey, currentArgIndex), String(value)];
+        }),
+    );
+
+    return {
+        queryParams: multiSelectQueryParams,
+        queries: [
+            `(${fieldKey === 'mimetype-filter' ? 'item.extension' : fieldKey} HASANY (${Object.keys(
+                multiSelectQueryParams,
+            )
+                .map(argKey => `:${argKey}`)
+                .join(', ')}))`,
+        ],
+        keysGenerated: currentArgIndex - argIndexStart,
+    };
+};
+
+export const getMimeTypeFilter = (filterValue: string[], fieldKey: string, argIndexStart: number): QueryResult => {
+    if (!Array.isArray(filterValue) || filterValue.length === 0) {
+        return {
+            queryParams: {},
+            queries: [],
+            keysGenerated: 0,
+        };
+    }
+
+    let currentArgIndex = argIndexStart;
+
+    const multiSelectQueryParams = Object.fromEntries(
+        filterValue.map(value => {
+            currentArgIndex += 1;
+            // the item-type-selector is returning the extensions with the suffix 'Type', so we remove it for the query
+            return [
+                generateArgKey(fieldKey, currentArgIndex),
+                String(value.endsWith('Type') ? value.slice(0, -4) : value),
+            ];
+        }),
+    );
+
+    return {
+        queryParams: multiSelectQueryParams,
+        queries: [
+            `(item.extension IN (${Object.keys(multiSelectQueryParams)
+                .map(argKey => `:${argKey}`)
+                .join(', ')}))`,
+        ],
+        keysGenerated: currentArgIndex - argIndexStart,
+    };
+};

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { IconButton, SidePanel, Text } from '@box/blueprint-web';
+import { IconButton, SidePanel, Text, useNotification } 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 {
@@ -10,12 +10,13 @@ import {
     JSONPatchOperations,
     MetadataInstance,
     MetadataInstanceForm,
+    type MetadataTemplateField,
 } from '@box/metadata-editor';
 
 import type { Selection } from 'react-aria-components';
-import type { Collection } from '../../common/types/core';
+import type { BoxItem, Collection } from '../../common/types/core';
 import type { MetadataTemplate } from '../../common/types/metadata';
-import { getTemplateInstance, useSelectedItemText } from './utils';
+import { useTemplateInstance, useSelectedItemText } from './utils';
 
 import messages from '../common/messages';
 
@@ -23,17 +24,29 @@ import './MetadataSidePanel.scss';
 
 export interface MetadataSidePanelProps {
     currentCollection: Collection;
-    onClose: () => void;
     metadataTemplate: MetadataTemplate;
+    onClose: () => void;
+    onUpdate: (
+        items: BoxItem[],
+        operations: JSONPatchOperations,
+        templateOldFields: MetadataTemplateField[],
+        templateNewFields: MetadataTemplateField[],
+        successCallback: () => void,
+        errorCallback: ErrorCallback,
+    ) => Promise<void>;
+    refreshCollection: () => void;
     selectedItemIds: Selection;
 }
 
 const MetadataSidePanel = ({
     currentCollection,
+    metadataTemplate,
     onClose,
+    onUpdate,
+    refreshCollection,
     selectedItemIds,
-    metadataTemplate,
 }: MetadataSidePanelProps) => {
+    const { addNotification } = useNotification();
     const { formatMessage } = useIntl();
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = useState<boolean>(false);
@@ -43,7 +56,7 @@ const MetadataSidePanel = ({
         selectedItemIds === 'all'
             ? currentCollection.items
             : currentCollection.items.filter(item => selectedItemIds.has(item.id));
-    const templateInstance = getTemplateInstance(metadataTemplate, selectedItems);
+    const templateInstance = useTemplateInstance(metadataTemplate, selectedItems, isEditing);
 
     const handleMetadataInstanceEdit = () => {
         setIsEditing(true);
@@ -53,19 +66,47 @@ const MetadataSidePanel = ({
         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 handleUpdateMetadataSuccess = () => {
+        addNotification({
+            closeButtonAriaLabel: formatMessage(messages.close),
+            sensitivity: 'foreground',
+            styledText: formatMessage(messages.metadataUpdateSuccessNotification, {
+                numSelected: selectedItems.length,
+            }),
+            typeIconAriaLabel: formatMessage(messages.success),
+            variant: 'success',
+        });
+        setIsEditing(false);
+        refreshCollection();
+    };
+
+    const handleUpdateMetadataError = () => {
+        addNotification({
+            closeButtonAriaLabel: formatMessage(messages.close),
+            sensitivity: 'foreground',
+            styledText: formatMessage(messages.metadataUpdateErrorNotification),
+            typeIconAriaLabel: formatMessage(messages.error),
+            variant: 'error',
+        });
+    };
+
     const handleMetadataInstanceFormSubmit = async (values: FormValues, operations: JSONPatchOperations) => {
-        // TODO: Implement onSave callback
+        const { fields: templateNewFields } = values.metadata;
+        const { fields: templateOldFields } = templateInstance;
+
+        await onUpdate(
+            selectedItems,
+            operations,
+            templateOldFields,
+            templateNewFields,
+            handleUpdateMetadataSuccess,
+            handleUpdateMetadataError,
+        );
     };
 
     return (
@@ -99,7 +140,7 @@ const MetadataSidePanel = ({
                                 isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}
                                 selectedTemplateInstance={templateInstance}
                                 onCancel={handleMetadataInstanceFormCancel}
-                                onChange={handleMetadataInstanceFormChange}
+                                onChange={null}
                                 onDelete={null}
                                 onDiscardUnsavedChanges={handleMetadataInstanceFormDiscardUnsavedChanges}
                                 onSubmit={handleMetadataInstanceFormSubmit}

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

@@ -1,18 +1,39 @@
 import * as React from 'react';
-import type { EnumType, FloatType, MetadataFormFieldValue, RangeType } from '@box/metadata-filter';
-import { MetadataView, type MetadataViewProps } from '@box/metadata-view';
+import { useIntl } from 'react-intl';
+import {
+    EnumType,
+    FloatType,
+    MetadataFormFieldValue,
+    MetadataTemplateFieldOption,
+    RangeType,
+} from '@box/metadata-filter';
+import {
+    MetadataView,
+    type FilterValues,
+    type MetadataViewProps,
+    type MetadataFieldType,
+    type Column,
+} from '@box/metadata-view';
+import { type Key } from '@react-types/shared';
+import cloneDeep from 'lodash/cloneDeep';
 
+import { SortDescriptor } from 'react-aria-components';
+import { FIELD_ITEM_NAME } from '../../constants';
 import type { Collection } from '../../common/types/core';
-import type { MetadataTemplate } from '../../common/types/metadata';
+import type { MetadataTemplate, MetadataTemplateField } from '../../common/types/metadata';
+
+import messages from '../common/messages';
 
 // Public-friendly version of MetadataFormFieldValue from @box/metadata-filter
 // (string[] for enum type, range/float objects stay the same)
 type EnumToStringArray<T> = T extends EnumType ? string[] : T;
 type ExternalMetadataFormFieldValue = EnumToStringArray<MetadataFormFieldValue>;
 
-type ExternalFilterValues = Record<
+export type ExternalFilterValues = Record<
     string,
     {
+        options?: FilterValues[string]['options'] | MetadataTemplateFieldOption[];
+        fieldType: FilterValues[string]['fieldType'] | MetadataFieldType;
         value: ExternalMetadataFormFieldValue;
     }
 >;
@@ -25,6 +46,23 @@ type ActionBarProps = Omit<
     onFilterSubmit?: (filterValues: ExternalFilterValues) => void;
 };
 
+const ITEM_FILTER_NAME = 'item_name';
+
+/**
+ * Helper function to trim metadataFieldNamePrefix from column names
+ * For example: 'metadata.enterprise_1515946.mdViewTemplate1.industry' -> 'industry'
+ */
+function trimMetadataFieldPrefix(column: string): string {
+    // Check if the column starts with 'metadata.' and contains at least 2 dots
+    if (column.startsWith('metadata.') && column.split('.').length >= 3) {
+        // Split by dots and take everything after the first 3 parts
+        // metadata.enterprise_1515946.mdViewTemplate1.industry -> industry
+        const parts = column.split('.');
+        return parts.slice(3).join('.');
+    }
+    return column;
+}
+
 function transformInitialFilterValuesToInternal(
     publicValues?: ExternalFilterValues,
 ): Record<string, { value: MetadataFormFieldValue }> | undefined {
@@ -39,22 +77,38 @@ function transformInitialFilterValuesToInternal(
     );
 }
 
-function transformInternalFieldsToPublic(
-    fields: Record<string, { value: MetadataFormFieldValue }>,
-): ExternalFilterValues {
-    return Object.entries(fields).reduce<ExternalFilterValues>((acc, [key, { value }]) => {
-        acc[key] =
+export function convertFilterValuesToExternal(fields: FilterValues): ExternalFilterValues {
+    return Object.entries(fields).reduce<ExternalFilterValues>((acc, [key, field]) => {
+        const { value, options, fieldType } = field;
+
+        // Transform the value based on its type
+        const transformedValue: ExternalMetadataFormFieldValue =
             'enum' in value && Array.isArray(value.enum)
-                ? { value: value.enum }
-                : { value: value as RangeType | FloatType };
+                ? value.enum // Convert enum type to string array
+                : (value as RangeType | FloatType); // Keep range/float objects as-is
+
+        acc[key === ITEM_FILTER_NAME ? FIELD_ITEM_NAME : key] = {
+            options,
+            fieldType,
+            value: transformedValue,
+        };
+
         return acc;
     }, {});
 }
 
+// Internal helper function for component use
+function transformInternalFieldsToPublic(fields: FilterValues): ExternalFilterValues {
+    return convertFilterValuesToExternal(fields);
+}
+
 export interface MetadataViewContainerProps extends Omit<MetadataViewProps, 'items' | 'actionBarProps'> {
     actionBarProps?: ActionBarProps;
     currentCollection: Collection;
     metadataTemplate: MetadataTemplate;
+    onMetadataFilter: (fields: ExternalFilterValues) => void;
+    /* Internally controlled onSortChange prop for the MetadataView component. */
+    onSortChange?: (sortBy: Key, sortDirection: string) => void;
 }
 
 const MetadataViewContainer = ({
@@ -62,19 +116,65 @@ const MetadataViewContainer = ({
     columns,
     currentCollection,
     metadataTemplate,
+    onMetadataFilter,
+    onSortChange: onSortChangeInternal,
+    tableProps,
     ...rest
 }: MetadataViewContainerProps) => {
+    const { formatMessage } = useIntl();
     const { items = [] } = currentCollection;
-    const { initialFilterValues: initialFilterValuesProp, onFilterSubmit: onFilterSubmitProp } = actionBarProps ?? {};
+    const { initialFilterValues: initialFilterValuesProp, onFilterSubmit } = actionBarProps ?? {};
+
+    const newColumns = React.useMemo(() => {
+        let clonedColumns = cloneDeep(columns);
 
-    const filterGroups = React.useMemo(
-        () => [
+        const hasItemNameField = clonedColumns.some((col: Column) => col.id === FIELD_ITEM_NAME);
+
+        if (!hasItemNameField) {
+            clonedColumns = [
+                {
+                    allowsSorting: true,
+                    id: FIELD_ITEM_NAME,
+                    isItemMetadata: true,
+                    isRowHeader: true,
+                    minWidth: 250,
+                    maxWidth: 250,
+                    textValue: formatMessage(messages.name),
+                    type: 'string',
+                },
+                ...clonedColumns,
+            ];
+        }
+
+        return clonedColumns;
+    }, [columns, formatMessage]);
+
+    const filterGroups = React.useMemo(() => {
+        const clonedTemplate = cloneDeep(metadataTemplate);
+        let fields = clonedTemplate?.fields || [];
+
+        // Check if item_name field already exists to avoid duplicates
+        const hasItemNameField = fields.some((field: MetadataTemplateField) => field.key === ITEM_FILTER_NAME);
+
+        if (!hasItemNameField) {
+            fields = [
+                {
+                    key: ITEM_FILTER_NAME,
+                    displayName: formatMessage(messages.name),
+                    type: 'string',
+                    shouldRenderChip: true,
+                },
+                ...fields,
+            ];
+        }
+
+        return [
             {
                 toggleable: true,
                 filters:
-                    metadataTemplate?.fields?.map(field => {
+                    fields?.map(field => {
                         return {
-                            id: `${field.key}-filter`,
+                            id: field.key,
                             name: field.displayName,
                             fieldType: field.type,
                             options: field.options?.map(({ key }) => key) || [],
@@ -82,36 +182,71 @@ const MetadataViewContainer = ({
                         };
                     }) || [],
             },
-        ],
-        [metadataTemplate],
-    );
+        ];
+    }, [formatMessage, metadataTemplate]);
 
-    // Transform initial filter values to internal field format
     const initialFilterValues = React.useMemo(
         () => transformInitialFilterValuesToInternal(initialFilterValuesProp),
         [initialFilterValuesProp],
     );
 
-    // Transform field values to public-friendly format
-    const onFilterSubmit = React.useCallback(
-        (fields: Record<string, { value: MetadataFormFieldValue }>) => {
-            if (!onFilterSubmitProp) return;
+    const handleFilterSubmit = React.useCallback(
+        (fields: FilterValues) => {
             const transformed = transformInternalFieldsToPublic(fields);
-            onFilterSubmitProp(transformed);
+            onMetadataFilter(transformed);
+            if (onFilterSubmit) {
+                onFilterSubmit(transformed);
+            }
         },
-        [onFilterSubmitProp],
+        [onFilterSubmit, onMetadataFilter],
     );
 
     const transformedActionBarProps = React.useMemo(() => {
         return {
             ...actionBarProps,
             initialFilterValues,
-            onFilterSubmit,
+            onFilterSubmit: handleFilterSubmit,
             filterGroups,
         };
-    }, [actionBarProps, initialFilterValues, onFilterSubmit, filterGroups]);
+    }, [actionBarProps, initialFilterValues, handleFilterSubmit, filterGroups]);
+
+    // Create a wrapper function that calls both. The wrapper function should follow the signature of onSortChange from RAC
+    const handleSortChange = React.useCallback(
+        ({ column, direction }: SortDescriptor) => {
+            // Call the internal onSortChange first
+            // API accepts asc/desc "https://developer.box.com/reference/post-metadata-queries-execute-read/"
+            if (onSortChangeInternal) {
+                const trimmedColumn = trimMetadataFieldPrefix(String(column));
+                onSortChangeInternal(trimmedColumn, direction === 'ascending' ? 'ASC' : 'DESC');
+            }
+            const onSortChangeExternal = tableProps?.onSortChange;
+            // Then call the original customer-provided onSortChange if it exists
+            // Accepts "ascending" / "descending" (https://react-spectrum.adobe.com/react-aria/Table.html)
+            if (onSortChangeExternal) {
+                onSortChangeExternal({
+                    column,
+                    direction,
+                });
+            }
+        },
+        [onSortChangeInternal, tableProps],
+    );
+
+    // Create new tableProps with our wrapper function
+    const newTableProps = {
+        ...tableProps,
+        onSortChange: handleSortChange,
+    };
 
-    return <MetadataView actionBarProps={transformedActionBarProps} columns={columns} items={items} {...rest} />;
+    return (
+        <MetadataView
+            actionBarProps={transformedActionBarProps}
+            columns={newColumns}
+            items={items}
+            tableProps={newTableProps}
+            {...rest}
+        />
+    );
 };
 
 export default MetadataViewContainer;

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

@@ -30,6 +30,7 @@ const mockProps: ContentProps = {
     onItemRename: jest.fn(),
     onItemSelect: jest.fn(),
     onItemShare: jest.fn(),
+    onMetadataFilter: jest.fn(),
     onMetadataUpdate: jest.fn(),
     onSortChange: jest.fn(),
     portalElement: null,

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

@@ -454,7 +454,7 @@ describe('elements/content-explorer/ContentExplorer', () => {
                     textValue: 'Name',
                     id: 'name',
                     type: 'string' as const,
-                    allowSorting: true,
+                    allowsSorting: true,
                     minWidth: 150,
                     maxWidth: 150,
                 },
@@ -462,16 +462,15 @@ describe('elements/content-explorer/ContentExplorer', () => {
                     textValue: field.displayName,
                     id: `${metadataFieldNamePrefix}.${field.key}`,
                     type: field.type as MetadataFieldType,
-                    allowSorting: true,
+                    allowsSorting: true,
                     minWidth: 150,
                     maxWidth: 150,
                 })),
             ];
             const defaultView = 'metadata';
-            const metadataViewV2ElementProps = {
+            const metadataViewV2ElementProps: Partial<ContentExplorerProps> = {
                 metadataViewProps: {
                     columns,
-                    metadataTemplate: mockSchema,
                     tableProps: {
                         isSelectAllEnabled: true,
                     },
@@ -496,9 +495,7 @@ describe('elements/content-explorer/ContentExplorer', () => {
                     expect(screen.queryByRole('button', { name: 'Switch to Grid View' })).toBeInTheDocument();
                 });
 
-                await waitFor(() => {
-                    expect(screen.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
-                });
+                expect(screen.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
 
                 const selectAllCheckbox = screen.getByLabelText('Select all');
                 await userEvent.click(selectAllCheckbox);
@@ -506,6 +503,40 @@ describe('elements/content-explorer/ContentExplorer', () => {
                 expect(screen.getByRole('button', { name: 'Metadata' })).toBeInTheDocument();
             });
 
+            test('should call both internal and user onSortChange callbacks when sorting by a metadata field', async () => {
+                const mockOnSortChangeInternal = jest.fn();
+                const mockOnSortChangeExternal = jest.fn();
+
+                renderComponent({
+                    ...metadataViewV2ElementProps,
+                    metadataViewProps: {
+                        ...metadataViewV2ElementProps.metadataViewProps,
+                        onSortChange: mockOnSortChangeInternal, // Internal callback - receives trimmed column name
+                        tableProps: {
+                            ...metadataViewV2ElementProps.metadataViewProps.tableProps,
+                            onSortChange: mockOnSortChangeExternal, // User callback - receives full column ID
+                        },
+                    },
+                });
+
+                const industryHeader = await screen.findByRole('columnheader', { name: 'Industry' });
+                expect(industryHeader).toBeInTheDocument();
+
+                const firstRow = await screen.findByRole('row', { name: /Child 2/i });
+                expect(firstRow).toBeInTheDocument();
+
+                await userEvent.click(industryHeader);
+
+                // Internal callback gets trimmed version for API calls
+                expect(mockOnSortChangeInternal).toHaveBeenCalledWith('industry', 'ASC');
+
+                // User callback gets full column ID with direction
+                expect(mockOnSortChangeExternal).toHaveBeenCalledWith({
+                    column: 'metadata.enterprise_0.templateName.industry',
+                    direction: 'ascending',
+                });
+            });
+
             test('should call onClick when bulk item action is clicked', async () => {
                 let mockOnClickArg;
                 const mockOnClick = jest.fn(arg => {