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

package/src/elements/common/__tests__/withBlueprintModernization.test.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { BlueprintModernizationContext } from '@box/blueprint-web';
+import { render } from '../../../test-utils/testing-library';
+import { withBlueprintModernization } from '../withBlueprintModernization';
+
+// Mock the Blueprint Web package with simple components
+jest.mock('@box/blueprint-web', () => {
+    const ReactMock = jest.requireActual('react');
+    const mockContext = ReactMock.createContext({ enableModernizedComponents: false });
+
+    return {
+        BlueprintModernizationContext: mockContext,
+        BlueprintModernizationProvider: ({ children, enableModernizedComponents }) =>
+            ReactMock.createElement(
+                'div',
+                {
+                    'data-testid': 'blueprint-provider',
+                    'data-enabled': String(enableModernizedComponents),
+                },
+                children,
+            ),
+        TooltipProvider: ({ children }) =>
+            ReactMock.createElement('div', { 'data-testid': 'tooltip-provider' }, children),
+        BlueprintModernizationContextValue: {},
+    };
+});
+
+type TestComponentProps = {
+    value?: string;
+    enableModernizedComponents?: boolean;
+};
+
+describe('src/elements/common/withBlueprintModernization', () => {
+    const TestComponent = ({ value }: TestComponentProps) => (
+        <div data-testid="test-component">{`Test ${value || 'default'}`}</div>
+    );
+
+    const WrappedComponent = withBlueprintModernization(TestComponent);
+
+    const renderComponent = (props?: TestComponentProps) => render(<WrappedComponent {...props} />);
+
+    test('should wrap component with BlueprintModernizationProvider', () => {
+        const { getByTestId } = renderComponent();
+
+        expect(getByTestId('test-component')).toBeInTheDocument();
+        expect(getByTestId('test-component')).toHaveTextContent('Test default');
+        expect(getByTestId('blueprint-provider')).toBeInTheDocument();
+        expect(getByTestId('blueprint-provider')).toHaveAttribute('data-enabled', 'false');
+    });
+
+    test('should pass props to wrapped component', () => {
+        const { getByTestId } = renderComponent({ value: 'test-value' });
+
+        expect(getByTestId('test-component')).toBeInTheDocument();
+        expect(getByTestId('test-component')).toHaveTextContent('Test test-value');
+    });
+
+    test('should handle enableModernizedComponents prop', () => {
+        const { getByTestId } = renderComponent({
+            value: 'modernized',
+            enableModernizedComponents: true,
+        });
+
+        expect(getByTestId('test-component')).toBeInTheDocument();
+        expect(getByTestId('test-component')).toHaveTextContent('Test modernized');
+        expect(getByTestId('blueprint-provider')).toBeInTheDocument();
+        expect(getByTestId('blueprint-provider')).toHaveAttribute('data-enabled', 'true');
+    });
+
+    test('should not wrap component when upstream BlueprintModernizationProvider exists', () => {
+        // Create a parent component with existing BlueprintModernizationContext
+        const ParentWithContext = ({ children }) => (
+            <BlueprintModernizationContext.Provider value={{ enableModernizedComponents: true }}>
+                {children}
+            </BlueprintModernizationContext.Provider>
+        );
+
+        const { getByTestId, queryByTestId } = render(
+            <ParentWithContext>
+                <WrappedComponent value="with-context" enableModernizedComponents={false} />
+            </ParentWithContext>,
+        );
+
+        // Component should render
+        expect(getByTestId('test-component')).toBeInTheDocument();
+        expect(getByTestId('test-component')).toHaveTextContent('Test with-context');
+
+        // HOC should NOT add its own BlueprintModernizationProvider since upstream context exists
+        expect(queryByTestId('blueprint-provider')).not.toBeInTheDocument();
+    });
+});

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/common/withBlueprintModernization.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import {
+    BlueprintModernizationContext,
+    BlueprintModernizationContextValue,
+    BlueprintModernizationProvider,
+} from '@box/blueprint-web';
+
+export function withBlueprintModernization<P>(
+    Component: React.ComponentType<P & BlueprintModernizationContextValue>,
+): React.FC<(P & BlueprintModernizationContextValue) | P> {
+    return function WithBlueprintModernization(props: P & BlueprintModernizationContextValue) {
+        const context = useContext(BlueprintModernizationContext);
+        // no context found from the parent component, so we need to provide our own
+        if (!context.enableModernizedComponents) {
+            return (
+                <BlueprintModernizationProvider enableModernizedComponents={!!props.enableModernizedComponents}>
+                    <Component {...props} />
+                </BlueprintModernizationProvider>
+            );
+        }
+        // context found, so load the component with the existing context
+        return <Component {...props} />;
+    };
+}

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

@@ -89,6 +89,7 @@ const Content = ({
                     isLoading={percentLoaded !== 100}
                     hasError={view === VIEW_ERROR}
                     metadataTemplate={metadataTemplate}
+                    onSortChange={onSortChange}
                     {...metadataViewProps}
                 />
             )}

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 {
@@ -100,6 +102,7 @@ import '../common/fonts.scss';
 import '../common/base.scss';
 import '../common/modal.scss';
 import './ContentExplorer.scss';
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 
 const GRID_VIEW_MAX_COLUMNS = 7;
 const GRID_VIEW_MIN_COLUMNS = 1;
@@ -152,7 +155,7 @@ export interface ContentExplorerProps {
     rootFolderId?: string;
     sharedLink?: string;
     sharedLinkPassword?: string;
-    sortBy?: SortBy;
+    sortBy?: SortBy | Key;
     sortDirection?: SortDirection;
     staticHost?: string;
     staticPath?: string;
@@ -491,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
      *
@@ -895,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,
@@ -1784,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 */
@@ -1974,4 +2014,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
 }
 
 export { ContentExplorer as ContentExplorerComponent };
-export default flow([makeResponsive, withFeatureConsumer, withFeatureProvider])(ContentExplorer);
+export default flow([makeResponsive, withFeatureConsumer, withFeatureProvider, withBlueprintModernization])(
+    ContentExplorer,
+);