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

package/i18n/zh-TW.properties

@@ -582,12 +582,18 @@ be.messageCenter.previewError = 很抱歉，顯示此影像時發生問題。
 be.messageCenter.product = 產品
 # Title for the message center modal
 be.messageCenter.title = 新增內容
+# Text shown in error notification banner
+be.metadataUpdateErrorNotification = Unable to save changes. Please try again.
+# Text shown in success notification banner
+be.metadataUpdateSuccessNotification =  {numSelected, plural, =1 {1 document updated} other {# documents updated} } 
 # Text for modified date with modified prefix.
 be.modifiedDate = 於 {date} 修改
 # Text for modified date with user with modified prefix.
 be.modifiedDateBy = {name} 於 {date} 修改
 # Label for a button that displays more options
 be.moreOptions = 更多選項
+# Display text for field when there are multiple items selected and have different value
+be.multipleValues = Multiple Values
 # Name ascending option shown in the share access drop down select.
 be.nameASC = 名稱：A → Z
 # Name descending option shown in the share access drop down select.
@@ -834,6 +840,8 @@ be.skillUnknownError = 執行這個技能或擷取其資料時發生錯誤。
 be.sort = 排序
 # Label for status skill card in the preview sidebar
 be.statusSkill = 狀態
+# Generic success label.
+be.success = Success
 # Shown instead of todays date.
 be.today = 今天
 # Label for keywords/topics skill section in the preview sidebar

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "24.0.0-beta.5",
+    "version": "24.0.0-beta.7",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -140,7 +140,7 @@
         "@box/languages": "^1.0.0",
         "@box/metadata-editor": "^0.122.12",
         "@box/metadata-filter": "^1.19.2",
-        "@box/metadata-view": "^0.41.2",
+        "@box/metadata-view": "^0.48.1",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/types": "^0.2.1",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
@@ -307,7 +307,7 @@
         "@box/item-icon": "^0.17.15",
         "@box/metadata-editor": "^0.122.12",
         "@box/metadata-filter": "^1.19.2",
-        "@box/metadata-view": "^0.41.2",
+        "@box/metadata-view": "^0.48.1",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/types": "^0.2.1",
         "@hapi/address": "^2.1.4",

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/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,7 @@ const Content = ({
                     isLoading={percentLoaded !== 100}
                     hasError={view === VIEW_ERROR}
                     metadataTemplate={metadataTemplate}
+                    onMetadataFilter={onMetadataFilter}
                     onSortChange={onSortChange}
                     {...metadataViewProps}
                 />

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

@@ -8,7 +8,6 @@ import getProp from 'lodash/get';
 import noop from 'lodash/noop';
 import throttle from 'lodash/throttle';
 import uniqueid from 'lodash/uniqueId';
-import { Notification, TooltipProvider } from '@box/blueprint-web';
 import { AxiosRequestConfig, AxiosResponse } from 'axios';
 import type { Key, Selection } from 'react-aria-components';
 import type { MetadataTemplateField } from '@box/metadata-editor';
@@ -35,7 +34,7 @@ import Content from './Content';
 import { isThumbnailAvailable } from '../common/utils';
 import { isFocusableElement, isInputElement, focus } from '../../utils/dom';
 import { FILE_SHARED_LINK_FIELDS_TO_FETCH } from '../../utils/fields';
-import CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH from './constants';
+import { CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH } from './constants';
 import LocalStore from '../../utils/LocalStore';
 import {
     withFeatureConsumer,
@@ -96,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;
@@ -127,6 +127,7 @@ export interface ContentExplorerProps {
     defaultView?: DefaultView;
     features?: FeatureConfig;
     fieldsToShow?: FieldsToShow;
+    hasProviders?: boolean;
     initialPage?: number;
     initialPageSize?: number;
     isLarge?: boolean;
@@ -140,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;
@@ -183,6 +187,7 @@ type State = {
     isUploadModalOpen: boolean;
     markers: Array<string | null | undefined>;
     metadataTemplate: MetadataTemplate;
+    metadataFilters: ExternalFilterValues;
     rootName: string;
     searchQuery: string;
     selected?: BoxItem;
@@ -213,7 +218,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
 
     store: LocalStore = new LocalStore();
 
-    metadataQueryAPIHelper: MetadataQueryAPIHelper;
+    metadataQueryAPIHelper: MetadataQueryAPIHelper | MetadataQueryAPIHelperV2;
 
     static defaultProps = {
         rootFolderId: DEFAULT_ROOT,
@@ -308,6 +313,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             isShareModalOpen: false,
             isUploadModalOpen: false,
             markers: [],
+            metadataFilters: {},
             metadataTemplate: {},
             rootName: '',
             selectedItemIds: new Set(),
@@ -391,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 = (
@@ -442,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) {
@@ -477,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 = [
                 {
@@ -485,13 +498,12 @@ 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,
-        );
     }
 
     /**
@@ -1725,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
      *
@@ -1750,6 +1766,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             contentUploaderProps,
             defaultView,
             features,
+            hasProviders,
             isMedium,
             isSmall,
             isTouch,
@@ -1819,193 +1836,191 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (
             <Internationalize language={language} messages={messages}>
-                <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}
-                                    />
+                <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}>
+                            <div className="bce-ContentExplorer-main">
+                                {!isDefaultViewMetadata && (
+                                    <Header view={view} logoUrl={logoUrl} onSearch={this.search} />
                                 )}
-                            </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}
+
+                                <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}
                                 />
-                            ) : 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}
+
+                                <Content
+                                    canDelete={canDelete}
                                     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}
+                                    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}
+                                    onMetadataFilter={this.filterMetadata}
+                                    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}
                                 />
-                            ) : null}
+                            )}
                         </div>
-                    </TooltipProvider>
-                </Notification.Provider>
+                        {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>
+                </Providers>
             </Internationalize>
         );
         /* eslint-enable jsx-a11y/no-static-element-interactions */