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

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

@@ -5,6 +5,7 @@ import includes from 'lodash/includes';
 import isArray from 'lodash/isArray';
 import type { MetadataTemplateField } from '@box/metadata-editor';
 import type { MetadataFieldType } from '@box/metadata-view';
+
 import API from '../../api';
 import { areFieldValuesEqual, isEmptyValue, isMultiValuesField } from './utils';
 
@@ -16,7 +17,7 @@ import {
     METADATA_FIELD_TYPE_ENUM,
     METADATA_FIELD_TYPE_MULTISELECT,
 } from '../../common/constants';
-import { FIELD_NAME, FIELD_METADATA, FIELD_EXTENSION, FIELD_PERMISSIONS } from '../../constants';
+import { FIELD_ITEM_NAME, FIELD_METADATA, FIELD_EXTENSION, FIELD_PERMISSIONS } from '../../constants';
 
 import type { MetadataQuery as MetadataQueryType, MetadataQueryResponseData } from '../../common/types/metadataQueries';
 import type {
@@ -28,6 +29,15 @@ import type {
 } from '../../common/types/metadata';
 import type { ElementsXhrError, JSONPatchOperations } from '../../common/types/api';
 import type { Collection, BoxItem } from '../../common/types/core';
+import {
+    getMimeTypeFilter,
+    getRangeFilter,
+    getSelectFilter,
+    getStringFilter,
+    mergeQueries,
+    mergeQueryParams,
+} from './MetadataQueryBuilder';
+import type { ExternalFilterValues } from './MetadataViewContainer';
 
 type SuccessCallback = (metadataQueryCollection: Collection, metadataTemplate: MetadataTemplate) => void;
 type ErrorCallback = (e: ElementsXhrError) => void;
@@ -232,8 +242,10 @@ export default class MetadataQueryAPIHelper {
         metadataQuery: MetadataQueryType,
         successCallback: SuccessCallback,
         errorCallback: ErrorCallback,
+        fields?: ExternalFilterValues,
     ): Promise<void> => {
-        this.metadataQuery = this.verifyQueryFields(metadataQuery);
+        this.metadataQuery = this.verifyQueryFields(metadataQuery, fields);
+
         return this.queryMetadata()
             .then(this.getTemplateSchemaInfo)
             .then(this.getDataWithTypes)
@@ -285,20 +297,114 @@ export default class MetadataQueryAPIHelper {
             .bulkUpdateMetadata(items, this.metadataTemplate, operations, successCallback, errorCallback);
     };
 
+    buildMetadataQueryParams = (filters: ExternalFilterValues) => {
+        let argIndex = 0;
+        let queries: string[] = [];
+        let queryParams: { [key: string]: number | Date | string } = {};
+
+        if (filters) {
+            Object.keys(filters).forEach(key => {
+                const filter = filters[key];
+                if (!filter) {
+                    return;
+                }
+
+                const { fieldType, value } = filter;
+
+                switch (fieldType) {
+                    case 'date':
+                    case 'float': {
+                        if (typeof value === 'object' && value !== null && 'range' in value) {
+                            const result = getRangeFilter(value, key, argIndex);
+                            queryParams = mergeQueryParams(queryParams, result.queryParams);
+                            queries = mergeQueries(queries, result.queries);
+                            argIndex += result.keysGenerated;
+                            break;
+                        }
+                        break;
+                    }
+                    case 'enum':
+                    case 'multiSelect': {
+                        const arrayValue = Array.isArray(value) ? value.map(v => String(v)) : [String(value)];
+                        let result;
+                        if (key === 'mimetype-filter') {
+                            result = getMimeTypeFilter(arrayValue, key, argIndex);
+                        } else {
+                            result = getSelectFilter(arrayValue, key, argIndex);
+                        }
+                        queryParams = mergeQueryParams(queryParams, result.queryParams);
+                        queries = mergeQueries(queries, result.queries);
+                        argIndex += result.keysGenerated;
+                        break;
+                    }
+
+                    case 'string': {
+                        if (value && value[0]) {
+                            const result = getStringFilter(value[0], key, argIndex);
+                            queryParams = mergeQueryParams(queryParams, result.queryParams);
+                            queries = mergeQueries(queries, result.queries);
+                            argIndex += result.keysGenerated;
+                        }
+                        break;
+                    }
+
+                    default:
+                        break;
+                }
+            });
+        }
+
+        const query = queries.reduce((acc, curr, index) => {
+            if (index > 0) {
+                acc += ` AND ${curr}`;
+            } else {
+                acc = curr;
+            }
+            return acc;
+        }, '');
+
+        return {
+            queryParams,
+            query,
+        };
+    };
+
+    mergeQuery = (customQuery: string, filterQuery: string): string => {
+        if (!customQuery) {
+            return filterQuery;
+        }
+        if (!filterQuery) {
+            return customQuery;
+        }
+        // Merge queries with AND operator
+        return `${customQuery} AND ${filterQuery}`;
+    };
+
     /**
      * Verify that the metadata query has required fields and update it if necessary
      * For a file item, default fields included in the response are "type", "id", "etag"
      *
      * @param {MetadataQueryType} metadataQuery metadata query object
+     * @param {ExternalFilterValues} [fields] optional filter values to apply to the metadata query
      * @return {MetadataQueryType} updated metadata query object with required fields
      */
-    verifyQueryFields = (metadataQuery: MetadataQueryType): MetadataQueryType => {
+    verifyQueryFields = (metadataQuery: MetadataQueryType, fields?: ExternalFilterValues): MetadataQueryType => {
         const clonedQuery = cloneDeep(metadataQuery);
         const clonedFields = isArray(clonedQuery.fields) ? clonedQuery.fields : [];
 
+        if (fields) {
+            const { query: filterQuery, queryParams: filteredQueryParams } = this.buildMetadataQueryParams(fields);
+            const { query: customQuery, query_params: customQueryParams } = clonedQuery;
+            const query = this.mergeQuery(customQuery, filterQuery);
+            const queryParams = mergeQueryParams(filteredQueryParams, customQueryParams);
+            if (query) {
+                clonedQuery.query = query;
+                clonedQuery.query_params = queryParams;
+            }
+        }
         // Make sure the query fields array has "name" field which is necessary to display info.
-        if (!clonedFields.includes(FIELD_NAME)) {
-            clonedFields.push(FIELD_NAME);
+        if (!clonedFields.includes(FIELD_ITEM_NAME)) {
+            clonedFields.push(FIELD_ITEM_NAME);
         }
 
         if (!clonedFields.includes(FIELD_EXTENSION)) {

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

@@ -0,0 +1,194 @@
+import { BoxItemSelection } from '@box/box-item-type-selector';
+import isNil from 'lodash/isNil';
+import { mapFileTypes } from './utils';
+
+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} 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,
+        };
+    }
+
+    // Use mapFileTypes to get the correct extensions and handle special cases
+    const mappedExtensions = mapFileTypes(filterValue as BoxItemSelection);
+    if (mappedExtensions.length === 0) {
+        return {
+            queryParams: {},
+            queries: [],
+            keysGenerated: 0,
+        };
+    }
+
+    let currentArgIndex = argIndexStart;
+    const queryParams: { [key: string]: number | Date | string } = {};
+    const queries: string[] = [];
+
+    // Handle specific extensions and folder type
+    const extensions: string[] = [];
+    let hasFolder = false;
+
+    for (const extension of mappedExtensions) {
+        if (extension === 'folder') {
+            if (!hasFolder) {
+                currentArgIndex += 1;
+                const folderArgKey = generateArgKey('mime_folderType', currentArgIndex);
+                queryParams[folderArgKey] = 'folder';
+                queries.push(`(item.type = :${folderArgKey})`);
+                hasFolder = true;
+            }
+        } else {
+            extensions.push(extension);
+        }
+    }
+
+    // Handle extensions in batch if any exist
+    if (extensions.length > 0) {
+        const extensionQueryParams = Object.fromEntries(
+            extensions.map(extension => {
+                currentArgIndex += 1;
+                return [generateArgKey(fieldKey, currentArgIndex), extension];
+            }),
+        );
+
+        Object.assign(queryParams, extensionQueryParams);
+        queries.push(
+            `(item.extension IN (${Object.keys(extensionQueryParams)
+                .map(argKey => `:${argKey}`)
+                .join(', ')}))`,
+        );
+    }
+
+    // Combine queries with OR if multiple exist
+    const finalQueries = queries.length > 1 ? [`(${queries.join(' OR ')})`] : queries;
+
+    return {
+        queryParams,
+        queries: finalQueries,
+        keysGenerated: currentArgIndex - argIndexStart,
+    };
+};

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

@@ -1,20 +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;
     }
 >;
@@ -27,6 +46,8 @@ 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'
@@ -56,22 +77,36 @@ 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;
 }
@@ -81,20 +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 filterGroups = React.useMemo(
-        () => [
+    const { initialFilterValues: initialFilterValuesProp, onFilterSubmit } = actionBarProps ?? {};
+
+    const newColumns = React.useMemo(() => {
+        let clonedColumns = cloneDeep(columns);
+
+        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) || [],
@@ -102,38 +182,33 @@ 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]);
-
-    // Extract the original tableProps.onSortChange from rest
-    const { tableProps, ...otherRest } = rest;
-    const onSortChangeExternal = tableProps?.onSortChange;
+    }, [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(
@@ -144,7 +219,7 @@ const MetadataViewContainer = ({
                 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) {
@@ -154,7 +229,7 @@ const MetadataViewContainer = ({
                 });
             }
         },
-        [onSortChangeInternal, onSortChangeExternal],
+        [onSortChangeInternal, tableProps],
     );
 
     // Create new tableProps with our wrapper function
@@ -166,10 +241,10 @@ const MetadataViewContainer = ({
     return (
         <MetadataView
             actionBarProps={transformedActionBarProps}
-            columns={columns}
+            columns={newColumns}
             items={items}
             tableProps={newTableProps}
-            {...otherRest}
+            {...rest}
         />
     );
 };

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

@@ -468,10 +468,9 @@ describe('elements/content-explorer/ContentExplorer', () => {
                 })),
             ];
             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);