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

package/src/elements/common/__mocks__/mockMetadata.ts

@@ -9,7 +9,6 @@ const mockMetadata = {
                         role: ['Business Owner', 'Marketing'],
                         $template: 'templateName',
                         $parent: 'file_1188899160835',
-                        name: 'something',
                         industry: 'Technology',
                         last_contacted_at: '2023-11-16T00:00:00.000Z',
                         $version: 9,
@@ -31,7 +30,6 @@ const mockMetadata = {
                         role: ['Developer'],
                         $template: 'templateName',
                         $parent: 'file_1318276254035',
-                        name: '1',
                         industry: 'Technology',
                         last_contacted_at: '2023-11-01T00:00:00.000Z',
                         $version: 3,
@@ -94,7 +92,6 @@ const mockMetadata = {
                         $scope: 'enterprise_0',
                         $template: 'templateName',
                         $parent: 'file_1812508470016',
-                        name: 'in folder 3 that doesnt have metadata',
                         $version: 0,
                     },
                 },
@@ -154,14 +151,6 @@ const mockSchema = {
     hidden: false,
     copyInstanceOnItemCopy: false,
     fields: [
-        {
-            id: '56b6f00e-5db3-4875-a31d-14b20f63c0ea',
-            type: 'string',
-            key: 'name',
-            displayName: 'Name',
-            hidden: false,
-            description: 'The customer name',
-        },
         {
             id: '07d3c06c-5db4-4f3f-821e-19219ba70ed3',
             type: 'date',
@@ -220,6 +209,13 @@ const mockSchema = {
                 },
             ],
         },
+        {
+            id: 'c3f87bb0-44df-4689-aafe-b9ed4aecbb01',
+            type: 'float',
+            key: 'number',
+            displayName: 'Merit Count',
+            hidden: false,
+        },
     ],
 };
 

package/src/elements/common/messages.js

@@ -27,6 +27,11 @@ const messages = defineMessages({
         description: 'Generic error label.',
         defaultMessage: 'Error',
     },
+    success: {
+        id: 'be.success',
+        description: 'Generic success label.',
+        defaultMessage: 'Success',
+    },
     preview: {
         id: 'be.preview',
         description: 'Label for preview action.',
@@ -1105,6 +1110,26 @@ const messages = defineMessages({
             }
         `,
     },
+    multipleValues: {
+        id: 'be.multipleValues',
+        description: 'Display text for field when there are multiple items selected and have different value',
+        defaultMessage: 'Multiple Values',
+    },
+    metadataUpdateErrorNotification: {
+        id: 'be.metadataUpdateErrorNotification',
+        description: 'Text shown in error notification banner',
+        defaultMessage: 'Unable to save changes. Please try again.',
+    },
+    metadataUpdateSuccessNotification: {
+        id: 'be.metadataUpdateSuccessNotification',
+        description: 'Text shown in success notification banner',
+        defaultMessage: `
+            {numSelected, plural,
+                =1 {1 document updated}
+                other {# documents updated}
+            }
+        `,
+    },
 });
 
 export default messages;

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

@@ -4,7 +4,7 @@ import ItemGrid from '../common/item-grid';
 import ItemList from '../common/item-list';
 import ProgressBar from '../common/progress-bar';
 import MetadataBasedItemList from '../../features/metadata-based-view';
-import MetadataViewContainer, { MetadataViewContainerProps } from './MetadataViewContainer';
+import MetadataViewContainer, { ExternalFilterValues, MetadataViewContainerProps } from './MetadataViewContainer';
 import { isFeatureEnabled, type FeatureConfig } from '../common/feature-checking';
 import { VIEW_ERROR, VIEW_METADATA, VIEW_MODE_LIST, VIEW_MODE_GRID, VIEW_SELECTED } from '../../constants';
 import type { ViewMode } from '../common/flowTypes';
@@ -37,7 +37,11 @@ export interface ContentProps extends Required<ItemEventHandlers>, Required<Item
     isTouch: boolean;
     itemActions?: ItemAction[];
     metadataTemplate?: MetadataTemplate;
-    metadataViewProps?: Omit<MetadataViewContainerProps, 'currentCollection'>;
+    metadataViewProps?: Omit<
+        MetadataViewContainerProps,
+        'hasError' | 'currentCollection' | 'metadataTemplate' | 'onMetadataFilter'
+    >;
+    onMetadataFilter?: (fields: ExternalFilterValues) => void;
     onMetadataUpdate: (
         item: BoxItem,
         field: string,
@@ -57,6 +61,7 @@ const Content = ({
     gridColumnCount,
     metadataTemplate,
     metadataViewProps,
+    onMetadataFilter,
     onMetadataUpdate,
     onSortChange,
     view,
@@ -89,6 +94,8 @@ const Content = ({
                     isLoading={percentLoaded !== 100}
                     hasError={view === VIEW_ERROR}
                     metadataTemplate={metadataTemplate}
+                    onMetadataFilter={onMetadataFilter}
+                    onSortChange={onSortChange}
                     {...metadataViewProps}
                 />
             )}

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

@@ -8,9 +8,9 @@ import getProp from 'lodash/get';
 import noop from 'lodash/noop';
 import throttle from 'lodash/throttle';
 import uniqueid from 'lodash/uniqueId';
-import { TooltipProvider } from '@box/blueprint-web';
 import { AxiosRequestConfig, AxiosResponse } from 'axios';
-import type { Selection } from 'react-aria-components';
+import type { Key, Selection } from 'react-aria-components';
+import type { MetadataTemplateField } from '@box/metadata-editor';
 
 import CreateFolderDialog from '../common/create-folder-dialog';
 import UploadDialog from '../common/upload-dialog';
@@ -77,6 +77,7 @@ import {
 import type { ViewMode } from '../common/flowTypes';
 import type { ItemAction } from '../common/item';
 import type { Theme } from '../common/theming';
+import type { JSONPatchOperations } from '../../common/types/api';
 import type { MetadataQuery, FieldsToShow } from '../../common/types/metadataQueries';
 import type { MetadataFieldValue, MetadataTemplate } from '../../common/types/metadata';
 import type {
@@ -94,13 +95,14 @@ import type {
 import type { BulkItemAction } from '../common/sub-header/BulkItemActionMenu';
 import type { ContentPreviewProps } from '../content-preview';
 import type { ContentUploaderProps } from '../content-uploader';
-import type { MetadataViewContainerProps } from './MetadataViewContainer';
+import type { ExternalFilterValues, MetadataViewContainerProps } from './MetadataViewContainer';
 
 import '../common/fonts.scss';
 import '../common/base.scss';
 import '../common/modal.scss';
 import './ContentExplorer.scss';
 import { withBlueprintModernization } from '../common/withBlueprintModernization';
+import Providers from '../common/Providers';
 
 const GRID_VIEW_MAX_COLUMNS = 7;
 const GRID_VIEW_MIN_COLUMNS = 1;
@@ -125,6 +127,7 @@ export interface ContentExplorerProps {
     defaultView?: DefaultView;
     features?: FeatureConfig;
     fieldsToShow?: FieldsToShow;
+    hasProviders?: boolean;
     initialPage?: number;
     initialPageSize?: number;
     isLarge?: boolean;
@@ -138,7 +141,10 @@ export interface ContentExplorerProps {
     measureRef?: (ref: Element | null) => void;
     messages?: StringMap;
     metadataQuery?: MetadataQuery;
-    metadataViewProps?: Omit<MetadataViewContainerProps, 'hasError' | 'currentCollection'>;
+    metadataViewProps?: Omit<
+        MetadataViewContainerProps,
+        'hasError' | 'currentCollection' | 'metadataTemplate' | 'onMetadataFilter'
+    >;
     onCreate?: (item: BoxItem) => void;
     onDelete?: (item: BoxItem) => void;
     onDownload?: (item: BoxItem) => void;
@@ -153,7 +159,7 @@ export interface ContentExplorerProps {
     rootFolderId?: string;
     sharedLink?: string;
     sharedLinkPassword?: string;
-    sortBy?: SortBy;
+    sortBy?: SortBy | Key;
     sortDirection?: SortDirection;
     staticHost?: string;
     staticPath?: string;
@@ -181,6 +187,7 @@ type State = {
     isUploadModalOpen: boolean;
     markers: Array<string | null | undefined>;
     metadataTemplate: MetadataTemplate;
+    metadataFilters: ExternalFilterValues;
     rootName: string;
     searchQuery: string;
     selected?: BoxItem;
@@ -211,7 +218,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
 
     store: LocalStore = new LocalStore();
 
-    metadataQueryAPIHelper: MetadataQueryAPIHelper;
+    metadataQueryAPIHelper: MetadataQueryAPIHelper | MetadataQueryAPIHelperV2;
 
     static defaultProps = {
         rootFolderId: DEFAULT_ROOT,
@@ -306,6 +313,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             isShareModalOpen: false,
             isUploadModalOpen: false,
             markers: [],
+            metadataFilters: {},
             metadataTemplate: {},
             rootName: '',
             selectedItemIds: new Set(),
@@ -389,6 +397,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
      *
      * @private
      * @param {Object} metadataQueryCollection - Metadata query response collection
+     * @param {Object} metadataTemplate - Metadata template object
      * @return {void}
      */
     showMetadataQueryResultsSuccessCallback = (
@@ -440,7 +449,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
      */
     showMetadataQueryResults() {
         const { features, metadataQuery = {} }: ContentExplorerProps = this.props;
-        const { currentPageNumber, markers, sortBy, sortDirection }: State = this.state;
+        const { currentPageNumber, markers, metadataFilters, sortBy, sortDirection }: State = this.state;
         const metadataQueryClone = cloneDeep(metadataQuery);
 
         if (currentPageNumber === 0) {
@@ -475,6 +484,12 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             ];
 
             this.metadataQueryAPIHelper = new MetadataQueryAPIHelperV2(this.api);
+            this.metadataQueryAPIHelper.fetchMetadataQueryResults(
+                metadataQueryClone,
+                this.showMetadataQueryResultsSuccessCallback,
+                this.errorCallback,
+                metadataFilters,
+            );
         } else {
             metadataQueryClone.order_by = [
                 {
@@ -483,15 +498,46 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                 },
             ];
             this.metadataQueryAPIHelper = new MetadataQueryAPIHelper(this.api);
+            this.metadataQueryAPIHelper.fetchMetadataQueryResults(
+                metadataQueryClone,
+                this.showMetadataQueryResultsSuccessCallback,
+                this.errorCallback,
+            );
         }
-
-        this.metadataQueryAPIHelper.fetchMetadataQueryResults(
-            metadataQueryClone,
-            this.showMetadataQueryResultsSuccessCallback,
-            this.errorCallback,
-        );
     }
 
+    /**
+     * Update selected items' metadata instances based on original and new field values in the metadata instance form
+     *
+     * @private
+     * @return {void}
+     */
+    updateMetadataV2 = async (
+        items: BoxItem[],
+        operations: JSONPatchOperations,
+        templateOldFields: MetadataTemplateField[],
+        templateNewFields: MetadataTemplateField[],
+        successCallback: () => void,
+        errorCallback: ErrorCallback,
+    ) => {
+        if (items.length === 1) {
+            await this.metadataQueryAPIHelper.updateMetadataWithOperations(
+                items[0],
+                operations,
+                successCallback,
+                errorCallback,
+            );
+        } else {
+            await this.metadataQueryAPIHelper.bulkUpdateMetadata(
+                items,
+                templateOldFields,
+                templateNewFields,
+                successCallback,
+                errorCallback,
+            );
+        }
+    };
+
     /**
      * Resets the collection so that the loading bar starts showing
      *
@@ -896,7 +942,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
      * @param {string} sortDirection - sort direction
      * @return {void}
      */
-    sort = (sortBy: SortBy, sortDirection: SortDirection) => {
+    sort = (sortBy: SortBy | Key, sortDirection: SortDirection) => {
         const {
             currentCollection: { id },
             view,
@@ -1691,6 +1737,10 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         this.setState({ isMetadataSidePanelOpen: false });
     };
 
+    filterMetadata = (fields: ExternalFilterValues) => {
+        this.setState({ metadataFilters: fields }, this.refreshCollection);
+    };
+
     /**
      * Renders the file picker
      *
@@ -1716,6 +1766,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             contentUploaderProps,
             defaultView,
             features,
+            hasProviders,
             isMedium,
             isSmall,
             isTouch,
@@ -1785,7 +1836,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (
             <Internationalize language={language} messages={messages}>
-                <TooltipProvider container={this.rootElement}>
+                <Providers hasProviders={hasProviders}>
                     <div id={this.id} className={styleClassName} ref={measureRef} data-testid="content-explorer">
                         <ThemingStyles selector={`#${this.id}`} theme={theme} />
                         <div className="be-app-element" onKeyDown={this.onKeyDown} tabIndex={0}>
@@ -1844,6 +1895,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                                     onItemRename={this.rename}
                                     onItemSelect={this.select}
                                     onItemShare={this.share}
+                                    onMetadataFilter={this.filterMetadata}
                                     onMetadataUpdate={this.updateMetadata}
                                     onSortChange={this.sort}
                                     portalElement={this.rootElement}
@@ -1869,8 +1921,10 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                             {isDefaultViewMetadata && isMetadataViewV2Feature && isMetadataSidePanelOpen && (
                                 <MetadataSidePanel
                                     currentCollection={currentCollection}
-                                    onClose={this.closeMetadataSidePanel}
                                     metadataTemplate={metadataTemplate}
+                                    onClose={this.closeMetadataSidePanel}
+                                    onUpdate={this.updateMetadataV2}
+                                    refreshCollection={this.refreshCollection}
                                     selectedItemIds={selectedItemIds}
                                 />
                             )}
@@ -1966,7 +2020,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                             />
                         ) : null}
                     </div>
-                </TooltipProvider>
+                </Providers>
             </Internationalize>
         );
         /* eslint-enable jsx-a11y/no-static-element-interactions */

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

@@ -3,8 +3,11 @@ import find from 'lodash/find';
 import getProp from 'lodash/get';
 import includes from 'lodash/includes';
 import isArray from 'lodash/isArray';
-import isNil from 'lodash/isNil';
+import type { MetadataTemplateField } from '@box/metadata-editor';
+import type { MetadataFieldType } from '@box/metadata-view';
+
 import API from '../../api';
+import { areFieldValuesEqual, isEmptyValue, isMultiValuesField } from './utils';
 
 import {
     JSON_PATCH_OP_ADD,
@@ -14,7 +17,7 @@ import {
     METADATA_FIELD_TYPE_ENUM,
     METADATA_FIELD_TYPE_MULTISELECT,
 } from '../../common/constants';
-import { FIELD_NAME, FIELD_METADATA, FIELD_EXTENSION } 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 {
@@ -26,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;
@@ -57,13 +69,18 @@ export default class MetadataQueryAPIHelper {
         oldValue: MetadataFieldValue | null,
         newValue: MetadataFieldValue | null,
     ): JSONPatchOperations => {
+        // check if two values are the same, return empty operations if so
+        if (areFieldValuesEqual(oldValue, newValue)) {
+            return [];
+        }
+
         let operation = JSON_PATCH_OP_REPLACE;
 
-        if (isNil(oldValue) && newValue) {
+        if (isEmptyValue(oldValue) && !isEmptyValue(newValue)) {
             operation = JSON_PATCH_OP_ADD;
         }
 
-        if (oldValue && isNil(newValue)) {
+        if (!isEmptyValue(oldValue) && isEmptyValue(newValue)) {
             operation = JSON_PATCH_OP_REMOVE;
         }
 
@@ -170,6 +187,51 @@ export default class MetadataQueryAPIHelper {
         return this.api.getMetadataAPI(true).getSchemaByTemplateKey(this.templateKey);
     };
 
+    /**
+     * Generate operations for all fields update in the metadata sidepanel
+     *
+     * @private
+     * @return {JSONPatchOperations}
+     */
+    generateOperations = (
+        item: BoxItem,
+        templateOldFields: MetadataTemplateField[],
+        templateNewFields: MetadataTemplateField[],
+    ): JSONPatchOperations => {
+        const { scope, templateKey } = this.metadataTemplate;
+        const itemFields = item.metadata[scope][templateKey];
+        const operations = templateNewFields.flatMap(newField => {
+            let newFieldValue = newField.value;
+            const { key, type } = newField;
+            // when retrieve value from float type field, it gives a string instead
+            if (type === 'float' && newFieldValue !== '') {
+                newFieldValue = Number(newFieldValue);
+            }
+            const oldField = templateOldFields.find(f => f.key === key);
+            const oldFieldValue = oldField.value;
+
+            /*
+                Generate operations array based on all the fields' orignal value and the incoming updated value.
+
+                Edge Case:
+                    If there are multiple items shared different value for enum or multi-select field, the form will
+                    return 'Multiple values' as the value. In this case, it needs to generate operation based on the
+                    actual item's field value.
+            */
+            const shouldUseItemFieldValue =
+                isMultiValuesField(type as MetadataFieldType, oldFieldValue) &&
+                !isMultiValuesField(type as MetadataFieldType, newFieldValue);
+
+            return this.createJSONPatchOperations(
+                key,
+                shouldUseItemFieldValue ? itemFields[key] : oldFieldValue,
+                newFieldValue,
+            );
+        });
+
+        return operations;
+    };
+
     queryMetadata = (): Promise<MetadataQueryResponseData> => {
         return new Promise((resolve, reject) => {
             this.api.getMetadataQueryAPI().queryMetadata(this.metadataQuery, resolve, reject, { forceFetch: true });
@@ -180,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)
@@ -205,26 +269,153 @@ export default class MetadataQueryAPIHelper {
             .updateMetadata(file, this.metadataTemplate, operations, successCallback, errorCallback);
     };
 
+    updateMetadataWithOperations = (
+        item: BoxItem,
+        operations: JSONPatchOperations,
+        successCallback: () => void,
+        errorCallback: ErrorCallback,
+    ): Promise<void> => {
+        return this.api
+            .getMetadataAPI(true)
+            .updateMetadata(item, this.metadataTemplate, operations, successCallback, errorCallback);
+    };
+
+    bulkUpdateMetadata = (
+        items: BoxItem[],
+        templateOldFields: MetadataTemplateField[],
+        templateNewFields: MetadataTemplateField[],
+        successCallback: () => void,
+        errorCallback: ErrorCallback,
+    ): Promise<void> => {
+        const operations: JSONPatchOperations = [];
+        items.forEach(item => {
+            const operation = this.generateOperations(item, templateOldFields, templateNewFields);
+            operations.push(operation);
+        });
+        return this.api
+            .getMetadataAPI(true)
+            .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)) {
             clonedFields.push(FIELD_EXTENSION);
         }
 
+        // This field is necessary to check if the user has permission to update metadata
+        if (!clonedFields.includes(FIELD_PERMISSIONS)) {
+            clonedFields.push(FIELD_PERMISSIONS);
+        }
+
         clonedQuery.fields = clonedFields;
 
         return clonedQuery;