box-ui-elements 23.5.0-beta.3 → 24.0.0-beta.1

package/es/elements/common/sub-header/SubHeaderRight.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeaderRight.js","names":["React","Button","Pencil","useIntl","Sort","Add","GridViewSlider","ViewModeChangeButton","VIEW_FOLDER","VIEW_MODE_GRID","VIEW_METADATA","useFeatureEnabled","messages","SubHeaderRight","canCreateNewFolder","canUpload","currentCollection","gridColumnCount","gridMaxColumns","gridMinColumns","maxGridColumnCountForWidth","onCreate","onGridViewSliderChange","onSortChange","onUpload","onViewModeChange","portalElement","view","viewMode","formatMessage","isMetadataViewV2Feature","items","hasGridView","hasItems","length","isFolder","showSort","showAdd","isMetadataView","createElement","className","Fragment","columnCount","maxColumnCount","onChange","isDisabled","showCreate","showUpload","icon","size","variant","metadata"],"sources":["../../../../src/elements/common/sub-header/SubHeaderRight.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button } from '@box/blueprint-web';\nimport { Pencil } from '@box/blueprint-web-assets/icons/Fill';\nimport { useIntl } from 'react-intl';\nimport Sort from './Sort';\nimport Add from './Add';\nimport GridViewSlider from '../../../components/grid-view/GridViewSlider';\nimport ViewModeChangeButton from './ViewModeChangeButton';\nimport { VIEW_FOLDER, VIEW_MODE_GRID, VIEW_METADATA } from '../../../constants';\nimport { useFeatureEnabled } from '../feature-checking';\n\nimport type { ViewMode } from '../flowTypes';\nimport type { SortBy, SortDirection, View, Collection } from '../../../common/types/core';\n\nimport messages from './messages';\n\nimport './SubHeaderRight.scss';\n\nexport interface SubHeaderRightProps {\n    canCreateNewFolder: boolean;\n    canUpload: boolean;\n    currentCollection: Collection;\n    gridColumnCount: number;\n    gridMaxColumns: number;\n    gridMinColumns: number;\n    maxGridColumnCountForWidth: number;\n    onCreate: () => void;\n    onGridViewSliderChange: (newSliderValue: number) => void;\n    onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;\n    onUpload: () => void;\n    onViewModeChange?: (viewMode: ViewMode) => void;\n    portalElement?: HTMLElement;\n    view: View;\n    viewMode: ViewMode;\n}\n\nconst SubHeaderRight = ({\n    canCreateNewFolder,\n    canUpload,\n    currentCollection,\n    gridColumnCount,\n    gridMaxColumns,\n    gridMinColumns,\n    maxGridColumnCountForWidth,\n    onCreate,\n    onGridViewSliderChange,\n    onSortChange,\n    onUpload,\n    onViewModeChange,\n    portalElement,\n    view,\n    viewMode,\n}: SubHeaderRightProps) => {\n    const { formatMessage } = useIntl();\n    const isMetadataViewV2Feature = useFeatureEnabled('contentExplorer.metadataViewV2');\n    const { items = [] }: Collection = currentCollection;\n    const hasGridView: boolean = !!gridColumnCount;\n    const hasItems: boolean = items.length > 0;\n    const isFolder: boolean = view === VIEW_FOLDER;\n    const showSort: boolean = isFolder && hasItems;\n    const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;\n    const isMetadataView: boolean = view === VIEW_METADATA;\n    return (\n        <div className=\"be-sub-header-right\">\n            {!isMetadataView && (\n                <>\n                    {hasItems && viewMode === VIEW_MODE_GRID && (\n                        <GridViewSlider\n                            columnCount={gridColumnCount}\n                            gridMaxColumns={gridMaxColumns}\n                            gridMinColumns={gridMinColumns}\n                            maxColumnCount={maxGridColumnCountForWidth}\n                            onChange={onGridViewSliderChange}\n                        />\n                    )}\n                    {hasItems && hasGridView && (\n                        <ViewModeChangeButton viewMode={viewMode} onViewModeChange={onViewModeChange} />\n                    )}\n                    {showSort && <Sort onSortChange={onSortChange} portalElement={portalElement} />}\n                    {showAdd && (\n                        <Add\n                            isDisabled={!isFolder}\n                            onCreate={onCreate}\n                            onUpload={onUpload}\n                            portalElement={portalElement}\n                            showCreate={canCreateNewFolder}\n                            showUpload={canUpload}\n                        />\n                    )}\n                </>\n            )}\n\n            {isMetadataView && isMetadataViewV2Feature && (\n                <Button icon={Pencil} size=\"large\" variant=\"primary\">\n                    {formatMessage(messages.metadata)}\n                </Button>\n            )}\n        </div>\n    );\n};\n\nexport default SubHeaderRight;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,MAAM,QAAQ,sCAAsC;AAC7D,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,GAAG,MAAM,OAAO;AACvB,OAAOC,cAAc,MAAM,8CAA8C;AACzE,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,SAASC,WAAW,EAAEC,cAAc,EAAEC,aAAa,QAAQ,oBAAoB;AAC/E,SAASC,iBAAiB,QAAQ,qBAAqB;AAKvD,OAAOC,QAAQ,MAAM,YAAY;AAEjC,OAAO,uBAAuB;AAoB9B,MAAMC,cAAc,GAAGA,CAAC;EACpBC,kBAAkB;EAClBC,SAAS;EACTC,iBAAiB;EACjBC,eAAe;EACfC,cAAc;EACdC,cAAc;EACdC,0BAA0B;EAC1BC,QAAQ;EACRC,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;EACRC,gBAAgB;EAChBC,aAAa;EACbC,IAAI;EACJC;AACiB,CAAC,KAAK;EACvB,MAAM;IAAEC;EAAc,CAAC,GAAG1B,OAAO,CAAC,CAAC;EACnC,MAAM2B,uBAAuB,GAAGnB,iBAAiB,CAAC,gCAAgC,CAAC;EACnF,MAAM;IAAEoB,KAAK,GAAG;EAAe,CAAC,GAAGf,iBAAiB;EACpD,MAAMgB,WAAoB,GAAG,CAAC,CAACf,eAAe;EAC9C,MAAMgB,QAAiB,GAAGF,KAAK,CAACG,MAAM,GAAG,CAAC;EAC1C,MAAMC,QAAiB,GAAGR,IAAI,KAAKnB,WAAW;EAC9C,MAAM4B,QAAiB,GAAGD,QAAQ,IAAIF,QAAQ;EAC9C,MAAMI,OAAgB,GAAG,CAAC,CAAC,CAACtB,SAAS,IAAI,CAAC,CAACD,kBAAkB,KAAKqB,QAAQ;EAC1E,MAAMG,cAAuB,GAAGX,IAAI,KAAKjB,aAAa;EACtD,oBACIV,KAAA,CAAAuC,aAAA;IAAKC,SAAS,EAAC;EAAqB,GAC/B,CAACF,cAAc,iBACZtC,KAAA,CAAAuC,aAAA,CAAAvC,KAAA,CAAAyC,QAAA,QACKR,QAAQ,IAAIL,QAAQ,KAAKnB,cAAc,iBACpCT,KAAA,CAAAuC,aAAA,CAACjC,cAAc;IACXoC,WAAW,EAAEzB,eAAgB;IAC7BC,cAAc,EAAEA,cAAe;IAC/BC,cAAc,EAAEA,cAAe;IAC/BwB,cAAc,EAAEvB,0BAA2B;IAC3CwB,QAAQ,EAAEtB;EAAuB,CACpC,CACJ,EACAW,QAAQ,IAAID,WAAW,iBACpBhC,KAAA,CAAAuC,aAAA,CAAChC,oBAAoB;IAACqB,QAAQ,EAAEA,QAAS;IAACH,gBAAgB,EAAEA;EAAiB,CAAE,CAClF,EACAW,QAAQ,iBAAIpC,KAAA,CAAAuC,aAAA,CAACnC,IAAI;IAACmB,YAAY,EAAEA,YAAa;IAACG,aAAa,EAAEA;EAAc,CAAE,CAAC,EAC9EW,OAAO,iBACJrC,KAAA,CAAAuC,aAAA,CAAClC,GAAG;IACAwC,UAAU,EAAE,CAACV,QAAS;IACtBd,QAAQ,EAAEA,QAAS;IACnBG,QAAQ,EAAEA,QAAS;IACnBE,aAAa,EAAEA,aAAc;IAC7BoB,UAAU,EAAEhC,kBAAmB;IAC/BiC,UAAU,EAAEhC;EAAU,CACzB,CAEP,CACL,EAEAuB,cAAc,IAAIR,uBAAuB,iBACtC9B,KAAA,CAAAuC,aAAA,CAACtC,MAAM;IAAC+C,IAAI,EAAE9C,MAAO;IAAC+C,IAAI,EAAC,OAAO;IAACC,OAAO,EAAC;EAAS,GAC/CrB,aAAa,CAACjB,QAAQ,CAACuC,QAAQ,CAC5B,CAEX,CAAC;AAEd,CAAC;AAED,eAAetC,cAAc","ignoreList":[]}
+{"version":3,"file":"SubHeaderRight.js","names":["React","Button","Pencil","useIntl","Sort","Add","GridViewSlider","ViewModeChangeButton","VIEW_FOLDER","VIEW_MODE_GRID","VIEW_METADATA","useFeatureEnabled","messages","SubHeaderRight","canCreateNewFolder","canUpload","currentCollection","gridColumnCount","gridMaxColumns","gridMinColumns","maxGridColumnCountForWidth","onCreate","onGridViewSliderChange","onSortChange","onMetadataSidePanelToggle","onUpload","onViewModeChange","portalElement","selectedItemIds","view","viewMode","formatMessage","isMetadataViewV2Feature","items","hasGridView","hasItems","length","isFolder","showSort","showAdd","isMetadataView","hasSelectedItems","size","createElement","className","Fragment","columnCount","maxColumnCount","onChange","isDisabled","showCreate","showUpload","icon","variant","onClick","metadata"],"sources":["../../../../src/elements/common/sub-header/SubHeaderRight.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button } from '@box/blueprint-web';\nimport { Pencil } from '@box/blueprint-web-assets/icons/Fill';\nimport { useIntl } from 'react-intl';\nimport type { Selection } from 'react-aria-components';\nimport Sort from './Sort';\nimport Add from './Add';\nimport GridViewSlider from '../../../components/grid-view/GridViewSlider';\nimport ViewModeChangeButton from './ViewModeChangeButton';\nimport { VIEW_FOLDER, VIEW_MODE_GRID, VIEW_METADATA } from '../../../constants';\nimport { useFeatureEnabled } from '../feature-checking';\n\nimport type { ViewMode } from '../flowTypes';\nimport type { SortBy, SortDirection, View, Collection } from '../../../common/types/core';\n\nimport messages from './messages';\n\nimport './SubHeaderRight.scss';\n\nexport interface SubHeaderRightProps {\n    canCreateNewFolder: boolean;\n    canUpload: boolean;\n    currentCollection: Collection;\n    gridColumnCount: number;\n    gridMaxColumns: number;\n    gridMinColumns: number;\n    maxGridColumnCountForWidth: number;\n    onCreate: () => void;\n    onGridViewSliderChange: (newSliderValue: number) => void;\n    onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;\n    onMetadataSidePanelToggle?: () => void;\n    onUpload: () => void;\n    onViewModeChange?: (viewMode: ViewMode) => void;\n    portalElement?: HTMLElement;\n    selectedItemIds?: Selection;\n    view: View;\n    viewMode: ViewMode;\n}\n\nconst SubHeaderRight = ({\n    canCreateNewFolder,\n    canUpload,\n    currentCollection,\n    gridColumnCount,\n    gridMaxColumns,\n    gridMinColumns,\n    maxGridColumnCountForWidth,\n    onCreate,\n    onGridViewSliderChange,\n    onSortChange,\n    onMetadataSidePanelToggle,\n    onUpload,\n    onViewModeChange,\n    portalElement,\n    selectedItemIds,\n    view,\n    viewMode,\n}: SubHeaderRightProps) => {\n    const { formatMessage } = useIntl();\n    const isMetadataViewV2Feature = useFeatureEnabled('contentExplorer.metadataViewV2');\n    const { items = [] }: Collection = currentCollection;\n    const hasGridView: boolean = !!gridColumnCount;\n    const hasItems: boolean = items.length > 0;\n    const isFolder: boolean = view === VIEW_FOLDER;\n    const showSort: boolean = isFolder && hasItems;\n    const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;\n    const isMetadataView: boolean = view === VIEW_METADATA;\n    const hasSelectedItems: boolean = !!(selectedItemIds && (selectedItemIds === 'all' || selectedItemIds.size > 0));\n    return (\n        <div className=\"be-sub-header-right\">\n            {!isMetadataView && (\n                <>\n                    {hasItems && viewMode === VIEW_MODE_GRID && (\n                        <GridViewSlider\n                            columnCount={gridColumnCount}\n                            gridMaxColumns={gridMaxColumns}\n                            gridMinColumns={gridMinColumns}\n                            maxColumnCount={maxGridColumnCountForWidth}\n                            onChange={onGridViewSliderChange}\n                        />\n                    )}\n                    {hasItems && hasGridView && (\n                        <ViewModeChangeButton viewMode={viewMode} onViewModeChange={onViewModeChange} />\n                    )}\n                    {showSort && <Sort onSortChange={onSortChange} portalElement={portalElement} />}\n                    {showAdd && (\n                        <Add\n                            isDisabled={!isFolder}\n                            onCreate={onCreate}\n                            onUpload={onUpload}\n                            portalElement={portalElement}\n                            showCreate={canCreateNewFolder}\n                            showUpload={canUpload}\n                        />\n                    )}\n                </>\n            )}\n\n            {isMetadataView && isMetadataViewV2Feature && hasSelectedItems && (\n                <Button icon={Pencil} size=\"large\" variant=\"primary\" onClick={onMetadataSidePanelToggle}>\n                    {formatMessage(messages.metadata)}\n                </Button>\n            )}\n        </div>\n    );\n};\n\nexport default SubHeaderRight;\n"],"mappings":"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","ignoreList":[]}

package/es/elements/content-explorer/ContentExplorer.js

@@ -27,6 +27,7 @@ import ThemingStyles from '../common/theming';
 import API from '../../api';
 import MetadataQueryAPIHelperV2 from './MetadataQueryAPIHelper';
 import MetadataQueryAPIHelper from '../../features/metadata-based-view/MetadataQueryAPIHelper';
+import MetadataSidePanel from './MetadataSidePanel';
 import Footer from './Footer';
 import PreviewDialog from '../common/preview-dialog/PreviewDialog';
 import ShareDialog from './ShareDialog';
@@ -39,7 +40,7 @@ import { FILE_SHARED_LINK_FIELDS_TO_FETCH } from '../../utils/fields';
 import CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH from './constants';
 import LocalStore from '../../utils/LocalStore';
 import { withFeatureConsumer, withFeatureProvider, isFeatureEnabled } from '../common/feature-checking';
-import { DEFAULT_HOSTNAME_UPLOAD, DEFAULT_HOSTNAME_API, DEFAULT_HOSTNAME_APP, DEFAULT_HOSTNAME_STATIC, DEFAULT_SEARCH_DEBOUNCE, SORT_ASC, FIELD_NAME, FIELD_PERMISSIONS_CAN_SHARE, FIELD_SHARED_LINK, DEFAULT_ROOT, VIEW_SEARCH, VIEW_FOLDER, VIEW_ERROR, VIEW_RECENTS, VIEW_METADATA, VIEW_MODE_LIST, TYPE_FILE, TYPE_WEBLINK, TYPE_FOLDER, CLIENT_NAME_CONTENT_EXPLORER, DEFAULT_PAGE_NUMBER, DEFAULT_PAGE_SIZE, DEFAULT_VIEW_FILES, DEFAULT_VIEW_RECENTS, DEFAULT_VIEW_METADATA, ERROR_CODE_ITEM_NAME_INVALID, ERROR_CODE_ITEM_NAME_TOO_LONG, TYPED_ID_FOLDER_PREFIX, VIEW_MODE_GRID } from '../../constants';
+import { DEFAULT_HOSTNAME_UPLOAD, DEFAULT_HOSTNAME_API, DEFAULT_HOSTNAME_APP, DEFAULT_HOSTNAME_STATIC, DEFAULT_SEARCH_DEBOUNCE, SORT_ASC, FIELD_ITEM_NAME, FIELD_NAME, FIELD_PERMISSIONS_CAN_SHARE, FIELD_SHARED_LINK, DEFAULT_ROOT, VIEW_SEARCH, VIEW_FOLDER, VIEW_ERROR, VIEW_RECENTS, VIEW_METADATA, VIEW_MODE_LIST, TYPE_FILE, TYPE_WEBLINK, TYPE_FOLDER, CLIENT_NAME_CONTENT_EXPLORER, DEFAULT_PAGE_NUMBER, DEFAULT_PAGE_SIZE, DEFAULT_VIEW_FILES, DEFAULT_VIEW_RECENTS, DEFAULT_VIEW_METADATA, ERROR_CODE_ITEM_NAME_INVALID, ERROR_CODE_ITEM_NAME_TOO_LONG, TYPED_ID_FOLDER_PREFIX, VIEW_MODE_GRID } from '../../constants';
 import '../common/fonts.scss';
 import '../common/base.scss';
 import '../common/modal.scss';
@@ -1087,9 +1088,12 @@ class ContentExplorer extends Component {
           selectedKeys: selectedItemIds,
           onSelectionChange: ids => {
             onSelectionChange?.(ids);
-            this.setState({
+            const isSelectionEmpty = ids !== 'all' && ids.size === 0;
+            this.setState(_objectSpread({
               selectedItemIds: ids
-            });
+            }, isSelectionEmpty && {
+              isMetadataSidePanelOpen: false
+            }));
           }
         })
       });
@@ -1160,7 +1164,30 @@ class ContentExplorer extends Component {
     });
     _defineProperty(this, "clearSelectedItemIds", () => {
       this.setState({
-        selectedItemIds: new Set()
+        selectedItemIds: new Set(),
+        isMetadataSidePanelOpen: false
+      });
+    });
+    /**
+     * Toggle metadata side panel visibility
+     *
+     * @private
+     * @return {void}
+     */
+    _defineProperty(this, "onMetadataSidePanelToggle", () => {
+      this.setState(prevState => ({
+        isMetadataSidePanelOpen: !prevState.isMetadataSidePanelOpen
+      }));
+    });
+    /**
+     * Close metadata side panel
+     *
+     * @private
+     * @return {void}
+     */
+    _defineProperty(this, "closeMetadataSidePanel", () => {
+      this.setState({
+        isMetadataSidePanelOpen: false
       });
     });
     const {
@@ -1202,6 +1229,7 @@ class ContentExplorer extends Component {
       isCreateFolderModalOpen: false,
       isDeleteModalOpen: false,
       isLoading: false,
+      isMetadataSidePanelOpen: false,
       isPreviewModalOpen: false,
       isRenameModalOpen: false,
       isShareModalOpen: false,
@@ -1320,10 +1348,7 @@ class ContentExplorer extends Component {
       // Set limit to the query for pagination support
       metadataQueryClone.limit = DEFAULT_PAGE_SIZE;
     }
-    metadataQueryClone.order_by = [{
-      field_key: sortBy,
-      direction: sortDirection
-    }];
+
     // Reset search state, the view and show busy indicator
     this.setState({
       searchQuery: '',
@@ -1331,8 +1356,17 @@ class ContentExplorer extends Component {
       view: VIEW_METADATA
     });
     if (isFeatureEnabled(features, 'contentExplorer.metadataViewV2')) {
+      metadataQueryClone.order_by = [{
+        // Default to the prefixed name field for metadata view v2 only, while not touching the default sortBy for other views.
+        field_key: sortBy === FIELD_NAME ? FIELD_ITEM_NAME : sortBy,
+        direction: sortDirection
+      }];
       this.metadataQueryAPIHelper = new MetadataQueryAPIHelperV2(this.api);
     } else {
+      metadataQueryClone.order_by = [{
+        field_key: sortBy,
+        direction: sortDirection
+      }];
       this.metadataQueryAPIHelper = new MetadataQueryAPIHelper(this.api);
     }
     this.metadataQueryAPIHelper.fetchMetadataQueryResults(metadataQueryClone, this.showMetadataQueryResultsSuccessCallback, this.errorCallback);
@@ -1572,6 +1606,7 @@ class ContentExplorer extends Component {
       isCreateFolderModalOpen,
       isDeleteModalOpen,
       isLoading,
+      isMetadataSidePanelOpen,
       isPreviewModalOpen,
       isRenameModalOpen,
       isShareModalOpen,
@@ -1580,6 +1615,7 @@ class ContentExplorer extends Component {
       metadataTemplate,
       rootName,
       selected,
+      selectedItemIds,
       view
     } = this.state;
     const {
@@ -1595,6 +1631,7 @@ class ContentExplorer extends Component {
     const allowUpload = canUpload && !!can_upload;
     const allowCreate = canCreateNewFolder && !!can_upload;
     const isDefaultViewMetadata = defaultView === DEFAULT_VIEW_METADATA;
+    const isMetadataViewV2Feature = isFeatureEnabled(features, 'contentExplorer.metadataViewV2');
     const isErrorView = view === VIEW_ERROR;
     const viewMode = this.getViewMode();
     const maxGridColumnCount = this.getMaxNumberOfGridViewColumnsForWidth();
@@ -1621,6 +1658,8 @@ class ContentExplorer extends Component {
       className: "be-app-element",
       onKeyDown: this.onKeyDown,
       tabIndex: 0
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "bce-ContentExplorer-main"
     }, !isDefaultViewMetadata && /*#__PURE__*/React.createElement(Header, {
       view: view,
       logoUrl: logoUrl,
@@ -1644,9 +1683,10 @@ class ContentExplorer extends Component {
       onGridViewSliderChange: this.onGridViewSliderChange,
       onItemClick: this.fetchFolder,
       onSortChange: this.sort,
+      onMetadataSidePanelToggle: this.onMetadataSidePanelToggle,
       onViewModeChange: this.changeViewMode,
       portalElement: this.rootElement,
-      selectedItemIds: this.state.selectedItemIds,
+      selectedItemIds: selectedItemIds,
       title: title
     }), /*#__PURE__*/React.createElement(Content, {
       canDelete: canDelete,
@@ -1685,7 +1725,12 @@ class ContentExplorer extends Component {
       pageSize: currentPageSize,
       totalCount: totalCount,
       onMarkerBasedPageChange: this.markerBasedPaginate
-    }))), allowUpload && !!this.appElement ? /*#__PURE__*/React.createElement(UploadDialog, {
+    }))), isDefaultViewMetadata && isMetadataViewV2Feature && isMetadataSidePanelOpen && /*#__PURE__*/React.createElement(MetadataSidePanel, {
+      currentCollection: currentCollection,
+      onClose: this.closeMetadataSidePanel,
+      metadataTemplate: metadataTemplate,
+      selectedItemIds: selectedItemIds
+    })), allowUpload && !!this.appElement ? /*#__PURE__*/React.createElement(UploadDialog, {
       isOpen: isUploadModalOpen,
       currentFolderId: id,
       token: token,