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

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

@@ -8,9 +8,10 @@ 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 { Notification, 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 +78,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 {
@@ -153,7 +155,7 @@ export interface ContentExplorerProps {
     rootFolderId?: string;
     sharedLink?: string;
     sharedLinkPassword?: string;
-    sortBy?: SortBy;
+    sortBy?: SortBy | Key;
     sortDirection?: SortDirection;
     staticHost?: string;
     staticPath?: string;
@@ -492,6 +494,38 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         );
     }
 
+    /**
+     * 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 +930,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,
@@ -1785,188 +1819,193 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (
             <Internationalize language={language} messages={messages}>
-                <TooltipProvider container={this.rootElement}>
-                    <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}>
-                            <div className="bce-ContentExplorer-main">
-                                {!isDefaultViewMetadata && (
-                                    <Header view={view} logoUrl={logoUrl} onSearch={this.search} />
+                <Notification.Provider>
+                    <Notification.Viewport />
+                    <TooltipProvider container={this.rootElement}>
+                        <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}>
+                                <div className="bce-ContentExplorer-main">
+                                    {!isDefaultViewMetadata && (
+                                        <Header view={view} logoUrl={logoUrl} onSearch={this.search} />
+                                    )}
+
+                                    <SubHeader
+                                        bulkItemActions={bulkItemActions}
+                                        view={view}
+                                        viewMode={viewMode}
+                                        rootId={rootFolderId}
+                                        isSmall={isSmall}
+                                        rootName={rootName}
+                                        currentCollection={currentCollection}
+                                        canUpload={allowUpload}
+                                        canCreateNewFolder={allowCreate}
+                                        gridColumnCount={gridColumnCount}
+                                        gridMaxColumns={GRID_VIEW_MAX_COLUMNS}
+                                        gridMinColumns={GRID_VIEW_MIN_COLUMNS}
+                                        maxGridColumnCountForWidth={maxGridColumnCount}
+                                        onUpload={this.upload}
+                                        onClearSelectedItemIds={this.clearSelectedItemIds}
+                                        onCreate={this.createFolder}
+                                        onGridViewSliderChange={this.onGridViewSliderChange}
+                                        onItemClick={this.fetchFolder}
+                                        onSortChange={this.sort}
+                                        onMetadataSidePanelToggle={this.onMetadataSidePanelToggle}
+                                        onViewModeChange={this.changeViewMode}
+                                        portalElement={this.rootElement}
+                                        selectedItemIds={selectedItemIds}
+                                        title={title}
+                                    />
+
+                                    <Content
+                                        canDelete={canDelete}
+                                        canDownload={canDownload}
+                                        canPreview={canPreview}
+                                        canRename={canRename}
+                                        canShare={canShare}
+                                        currentCollection={currentCollection}
+                                        features={features}
+                                        gridColumnCount={Math.min(gridColumnCount, maxGridColumnCount)}
+                                        isMedium={isMedium}
+                                        isSmall={isSmall}
+                                        isTouch={isTouch}
+                                        itemActions={itemActions}
+                                        fieldsToShow={fieldsToShow}
+                                        metadataTemplate={metadataTemplate}
+                                        metadataViewProps={metadataViewProps}
+                                        onItemClick={this.onItemClick}
+                                        onItemDelete={this.delete}
+                                        onItemDownload={this.download}
+                                        onItemPreview={this.preview}
+                                        onItemRename={this.rename}
+                                        onItemSelect={this.select}
+                                        onItemShare={this.share}
+                                        onMetadataUpdate={this.updateMetadata}
+                                        onSortChange={this.sort}
+                                        portalElement={this.rootElement}
+                                        view={view}
+                                        viewMode={viewMode}
+                                    />
+
+                                    {!isErrorView && (
+                                        <Footer>
+                                            <Pagination
+                                                hasNextMarker={hasNextMarker}
+                                                hasPrevMarker={hasPreviousMarker}
+                                                isSmall={isSmall}
+                                                offset={offset}
+                                                onOffsetChange={this.paginate}
+                                                pageSize={currentPageSize}
+                                                totalCount={totalCount}
+                                                onMarkerBasedPageChange={this.markerBasedPaginate}
+                                            />
+                                        </Footer>
+                                    )}
+                                </div>
+                                {isDefaultViewMetadata && isMetadataViewV2Feature && isMetadataSidePanelOpen && (
+                                    <MetadataSidePanel
+                                        currentCollection={currentCollection}
+                                        metadataTemplate={metadataTemplate}
+                                        onClose={this.closeMetadataSidePanel}
+                                        onUpdate={this.updateMetadataV2}
+                                        refreshCollection={this.refreshCollection}
+                                        selectedItemIds={selectedItemIds}
+                                    />
                                 )}
-
-                                <SubHeader
-                                    bulkItemActions={bulkItemActions}
-                                    view={view}
-                                    viewMode={viewMode}
-                                    rootId={rootFolderId}
-                                    isSmall={isSmall}
-                                    rootName={rootName}
-                                    currentCollection={currentCollection}
-                                    canUpload={allowUpload}
-                                    canCreateNewFolder={allowCreate}
-                                    gridColumnCount={gridColumnCount}
-                                    gridMaxColumns={GRID_VIEW_MAX_COLUMNS}
-                                    gridMinColumns={GRID_VIEW_MIN_COLUMNS}
-                                    maxGridColumnCountForWidth={maxGridColumnCount}
-                                    onUpload={this.upload}
-                                    onClearSelectedItemIds={this.clearSelectedItemIds}
-                                    onCreate={this.createFolder}
-                                    onGridViewSliderChange={this.onGridViewSliderChange}
-                                    onItemClick={this.fetchFolder}
-                                    onSortChange={this.sort}
-                                    onMetadataSidePanelToggle={this.onMetadataSidePanelToggle}
-                                    onViewModeChange={this.changeViewMode}
-                                    portalElement={this.rootElement}
-                                    selectedItemIds={selectedItemIds}
-                                    title={title}
+                            </div>
+                            {allowUpload && !!this.appElement ? (
+                                <UploadDialog
+                                    isOpen={isUploadModalOpen}
+                                    currentFolderId={id}
+                                    token={token}
+                                    sharedLink={sharedLink}
+                                    sharedLinkPassword={sharedLinkPassword}
+                                    apiHost={apiHost}
+                                    uploadHost={uploadHost}
+                                    onClose={this.uploadSuccessHandler}
+                                    parentElement={this.rootElement}
+                                    appElement={this.appElement}
+                                    onUpload={onUpload}
+                                    contentUploaderProps={contentUploaderProps}
+                                    requestInterceptor={requestInterceptor}
+                                    responseInterceptor={responseInterceptor}
                                 />
-
-                                <Content
-                                    canDelete={canDelete}
-                                    canDownload={canDownload}
-                                    canPreview={canPreview}
-                                    canRename={canRename}
-                                    canShare={canShare}
-                                    currentCollection={currentCollection}
-                                    features={features}
-                                    gridColumnCount={Math.min(gridColumnCount, maxGridColumnCount)}
-                                    isMedium={isMedium}
-                                    isSmall={isSmall}
-                                    isTouch={isTouch}
-                                    itemActions={itemActions}
-                                    fieldsToShow={fieldsToShow}
-                                    metadataTemplate={metadataTemplate}
-                                    metadataViewProps={metadataViewProps}
-                                    onItemClick={this.onItemClick}
-                                    onItemDelete={this.delete}
-                                    onItemDownload={this.download}
-                                    onItemPreview={this.preview}
-                                    onItemRename={this.rename}
-                                    onItemSelect={this.select}
-                                    onItemShare={this.share}
-                                    onMetadataUpdate={this.updateMetadata}
-                                    onSortChange={this.sort}
-                                    portalElement={this.rootElement}
-                                    view={view}
-                                    viewMode={viewMode}
+                            ) : null}
+                            {allowCreate && !!this.appElement ? (
+                                <CreateFolderDialog
+                                    isOpen={isCreateFolderModalOpen}
+                                    onCreate={this.throttledCreateFolderCallback}
+                                    onCancel={this.closeModals}
+                                    isLoading={isLoading}
+                                    errorCode={errorCode}
+                                    parentElement={this.rootElement}
+                                    appElement={this.appElement}
                                 />
-
-                                {!isErrorView && (
-                                    <Footer>
-                                        <Pagination
-                                            hasNextMarker={hasNextMarker}
-                                            hasPrevMarker={hasPreviousMarker}
-                                            isSmall={isSmall}
-                                            offset={offset}
-                                            onOffsetChange={this.paginate}
-                                            pageSize={currentPageSize}
-                                            totalCount={totalCount}
-                                            onMarkerBasedPageChange={this.markerBasedPaginate}
-                                        />
-                                    </Footer>
-                                )}
-                            </div>
-                            {isDefaultViewMetadata && isMetadataViewV2Feature && isMetadataSidePanelOpen && (
-                                <MetadataSidePanel
-                                    currentCollection={currentCollection}
-                                    onClose={this.closeMetadataSidePanel}
-                                    metadataTemplate={metadataTemplate}
-                                    selectedItemIds={selectedItemIds}
+                            ) : null}
+                            {canDelete && selected && !!this.appElement ? (
+                                <DeleteConfirmationDialog
+                                    isOpen={isDeleteModalOpen}
+                                    onDelete={this.deleteCallback}
+                                    onCancel={this.closeModals}
+                                    item={selected}
+                                    isLoading={isLoading}
+                                    parentElement={this.rootElement}
+                                    appElement={this.appElement}
+                                />
+                            ) : null}
+                            {canRename && selected && !!this.appElement ? (
+                                <RenameDialog
+                                    isOpen={isRenameModalOpen}
+                                    onRename={this.renameCallback}
+                                    onCancel={this.closeModals}
+                                    item={selected}
+                                    isLoading={isLoading}
+                                    errorCode={errorCode}
+                                    parentElement={this.rootElement}
+                                    appElement={this.appElement}
+                                />
+                            ) : null}
+                            {canShare && selected && !!this.appElement ? (
+                                <ShareDialog
+                                    isOpen={isShareModalOpen}
+                                    canSetShareAccess={canSetShareAccess}
+                                    onShareAccessChange={this.changeShareAccess}
+                                    onCancel={this.refreshCollection}
+                                    item={selected}
+                                    isLoading={isLoading}
+                                    parentElement={this.rootElement}
+                                    appElement={this.appElement}
+                                />
+                            ) : null}
+                            {canPreview && selected && !!this.appElement ? (
+                                <PreviewDialog
+                                    isOpen={isPreviewModalOpen}
+                                    isTouch={isTouch}
+                                    onCancel={this.closeModals}
+                                    item={selected}
+                                    currentCollection={cloneDeep(currentCollection)}
+                                    token={token}
+                                    parentElement={this.rootElement}
+                                    appElement={this.appElement}
+                                    onPreview={onPreview}
+                                    onDownload={onDownload}
+                                    canDownload={canDownload}
+                                    cache={this.api.getCache()}
+                                    apiHost={apiHost}
+                                    appHost={appHost}
+                                    staticHost={staticHost}
+                                    staticPath={staticPath}
+                                    previewLibraryVersion={previewLibraryVersion}
+                                    sharedLink={sharedLink}
+                                    sharedLinkPassword={sharedLinkPassword}
+                                    contentPreviewProps={contentPreviewProps}
+                                    requestInterceptor={requestInterceptor}
+                                    responseInterceptor={responseInterceptor}
                                 />
-                            )}
+                            ) : null}
                         </div>
-                        {allowUpload && !!this.appElement ? (
-                            <UploadDialog
-                                isOpen={isUploadModalOpen}
-                                currentFolderId={id}
-                                token={token}
-                                sharedLink={sharedLink}
-                                sharedLinkPassword={sharedLinkPassword}
-                                apiHost={apiHost}
-                                uploadHost={uploadHost}
-                                onClose={this.uploadSuccessHandler}
-                                parentElement={this.rootElement}
-                                appElement={this.appElement}
-                                onUpload={onUpload}
-                                contentUploaderProps={contentUploaderProps}
-                                requestInterceptor={requestInterceptor}
-                                responseInterceptor={responseInterceptor}
-                            />
-                        ) : null}
-                        {allowCreate && !!this.appElement ? (
-                            <CreateFolderDialog
-                                isOpen={isCreateFolderModalOpen}
-                                onCreate={this.throttledCreateFolderCallback}
-                                onCancel={this.closeModals}
-                                isLoading={isLoading}
-                                errorCode={errorCode}
-                                parentElement={this.rootElement}
-                                appElement={this.appElement}
-                            />
-                        ) : null}
-                        {canDelete && selected && !!this.appElement ? (
-                            <DeleteConfirmationDialog
-                                isOpen={isDeleteModalOpen}
-                                onDelete={this.deleteCallback}
-                                onCancel={this.closeModals}
-                                item={selected}
-                                isLoading={isLoading}
-                                parentElement={this.rootElement}
-                                appElement={this.appElement}
-                            />
-                        ) : null}
-                        {canRename && selected && !!this.appElement ? (
-                            <RenameDialog
-                                isOpen={isRenameModalOpen}
-                                onRename={this.renameCallback}
-                                onCancel={this.closeModals}
-                                item={selected}
-                                isLoading={isLoading}
-                                errorCode={errorCode}
-                                parentElement={this.rootElement}
-                                appElement={this.appElement}
-                            />
-                        ) : null}
-                        {canShare && selected && !!this.appElement ? (
-                            <ShareDialog
-                                isOpen={isShareModalOpen}
-                                canSetShareAccess={canSetShareAccess}
-                                onShareAccessChange={this.changeShareAccess}
-                                onCancel={this.refreshCollection}
-                                item={selected}
-                                isLoading={isLoading}
-                                parentElement={this.rootElement}
-                                appElement={this.appElement}
-                            />
-                        ) : null}
-                        {canPreview && selected && !!this.appElement ? (
-                            <PreviewDialog
-                                isOpen={isPreviewModalOpen}
-                                isTouch={isTouch}
-                                onCancel={this.closeModals}
-                                item={selected}
-                                currentCollection={cloneDeep(currentCollection)}
-                                token={token}
-                                parentElement={this.rootElement}
-                                appElement={this.appElement}
-                                onPreview={onPreview}
-                                onDownload={onDownload}
-                                canDownload={canDownload}
-                                cache={this.api.getCache()}
-                                apiHost={apiHost}
-                                appHost={appHost}
-                                staticHost={staticHost}
-                                staticPath={staticPath}
-                                previewLibraryVersion={previewLibraryVersion}
-                                sharedLink={sharedLink}
-                                sharedLinkPassword={sharedLinkPassword}
-                                contentPreviewProps={contentPreviewProps}
-                                requestInterceptor={requestInterceptor}
-                                responseInterceptor={responseInterceptor}
-                            />
-                        ) : null}
-                    </div>
-                </TooltipProvider>
+                    </TooltipProvider>
+                </Notification.Provider>
             </Internationalize>
         );
         /* eslint-enable jsx-a11y/no-static-element-interactions */

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

@@ -3,8 +3,10 @@ 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 +16,7 @@ import {
     METADATA_FIELD_TYPE_ENUM,
     METADATA_FIELD_TYPE_MULTISELECT,
 } from '../../common/constants';
-import { FIELD_NAME, FIELD_METADATA, FIELD_EXTENSION } from '../../constants';
+import { FIELD_NAME, FIELD_METADATA, FIELD_EXTENSION, FIELD_PERMISSIONS } from '../../constants';
 
 import type { MetadataQuery as MetadataQueryType, MetadataQueryResponseData } from '../../common/types/metadataQueries';
 import type {
@@ -57,13 +59,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 +177,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 });
@@ -205,6 +257,34 @@ 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);
+    };
+
     /**
      * 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"
@@ -225,6 +305,11 @@ export default class MetadataQueryAPIHelper {
             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;