box-ui-elements 23.4.0-beta.26 → 23.4.0-beta.27

package/i18n/en-x-pseudo.js

@@ -607,8 +607,6 @@ export default {
   "boxui.media.menuButtonArialLabel": "⟦萬萬 ΌΡτïσйŝ 國國⟧",
   "boxui.metadataInstanceEditor.aiAutofillDescription": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬 Ũѕє Бŏ× ÁÌ τő ǻũťömāτіĉāľĺý êхŧřàćť mεťáďāţā νăļµèś. 國國國國國國國國國國國國國國國⟧",
   "boxui.metadataInstanceEditor.aiAutofillLearnMore": "⟦萬萬 Ľёάŕņ möŗê 國國⟧",
-  "boxui.metadataInstanceEditor.aiAutofillNotice": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬 Èńåвļіήğ τĥίş ƒєãťúŕé mäỳ ìπνσľνё ǻďďïτίőηąĺ ¢ĥáŕĝèś. Pĺėάşέ ѓένïеш όµг {pricingLink} ƒóŕ móѓĕ іήƒόŗmäťįőп. 國國國國國國國國國國國國國國國國國國國國國國國國國國國國國⟧",
-  "boxui.metadataInstanceEditor.aiAutofillPricingDetails": "⟦萬萬萬萬 Ρŕîċїηġ ďéŧãϊľѕ 國國國國⟧",
   "boxui.metadataInstanceEditor.allAttributesAreHidden": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬 Ãľĺ àţŧříьűťèś īń ţħїѕ ŧεmΡļåţè нâνĕ ьєěл ĥíďďèň. 國國國國國國國國國國國國國國⟧",
   "boxui.metadataInstanceEditor.applyCascadePolicyText": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬 ĀΡΡľý ťémΡļāŧĕ äňď ϊŧŝ νáļúěş ţō âĺĺ ηέш ăŋď ê×ĩŝτīпğ íťєmś ĩл ťĥĩś ƒоĺďéѓ åήď іţś ŝцьƒöľďєгŝ. 國國國國國國國國國國國國國國國國國國國國國國國國國國國國⟧",
   "boxui.metadataInstanceEditor.cannotApplyCascadePolicyText": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬 Ċąѕĉąďè Ρôľìçў ċǻŋйōτ ьē ǻΡΡļĩєď ťô ċũşťőm měťåďãťâ åŧ ťĥĭѕ ţĩmê. 國國國國國國國國國國國國國國國國國國國⟧",
@@ -908,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "⟦萬萬萬 Ѕĥσŕť¢ŭť Õňĺγ 國國國⟧",
   "boxui.shareMenu.viewAndDownload": "⟦萬萬萬萬萬 Vîéω åŋď Ďōŵπĺôāď 國國國國國⟧",
   "boxui.shareMenu.viewOnly": "⟦萬萬 Víеш Οʼnļў 國國⟧",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬 Яėqüíŗėď ƒīёľď. Ėňτêŕ â ťϊmê ίņ ťħέ ƒôгmāŧ ĤĦ:ММ Α. 國國國國國國國國國國國國國國國⟧",
   "boxui.timeInput.invalidTimeError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬 Іŋνάļίď ťìmĕ ƒōґmατ. Σņţεґ á τιmё ïń τнė ƒŏяmāť ΉΗ:МΜ Å. 國國國國國國國國國國國國國國國國⟧",
   "boxui.unifiedShare.collabAccess": "⟦萬萬萬萬萬 çōľľáвóŗǻŧοŕ āсćèŝѕ 國國國國國⟧",
@@ -1022,5 +1021,7 @@ export default {
   "boxui.validation.invalidUserError": "⟦萬萬萬 İňνâļįď Üѕëя 國國國⟧",
   "boxui.validation.requiredError": "⟦萬萬萬萬 Ѓεqµĭгęď ₣ϊèĺď 國國國國⟧",
   "boxui.validation.tooLongError": "⟦萬萬萬萬萬萬萬萬萬萬 ĮʼnΡûť ¢άпйöţ ē×¢εéď {max} čħăѓãçťěґş 國國國國國國國國國國⟧",
-  "boxui.validation.tooShortError": "⟦萬萬萬萬萬萬萬萬萬萬萬 ΊńΡúŧ mûŝţ ьє äţ ĺęáśţ {min} ĉħąгāčτёґѕ 國國國國國國國國國國國⟧"
+  "boxui.validation.tooShortError": "⟦萬萬萬萬萬萬萬萬萬萬萬 ΊńΡúŧ mûŝţ ьє äţ ĺęáśţ {min} ĉħąгāčτёґѕ 國國國國國國國國國國國⟧",
+  "boxui.metadataInstanceEditor.aiAutofillNotice": "⟦萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬萬 Èńåвļіήğ τĥίş ƒєãťúŕé mäỳ ìπνσľνё ǻďďïτίőηąĺ ¢ĥáŕĝèś. Pĺėάşέ ѓένïеш όµг {pricingLink} ƒóŕ móѓĕ іήƒόŗmäťįőп. 國國國國國國國國國國國國國國國國國國國國國國國國國國國國國⟧",
+  "boxui.metadataInstanceEditor.aiAutofillPricingDetails": "⟦萬萬萬萬 Ρŕîċїηġ ďéŧãϊľѕ 國國國國⟧"
 }

package/i18n/es-419.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Solo acceso directo",
   "boxui.shareMenu.viewAndDownload": "Visualización y descarga",
   "boxui.shareMenu.viewOnly": "Solo visualización",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Campo obligatorio. Introduzca una hora con el formato HH:MM A.",
   "boxui.timeInput.invalidTimeError": "Formato de hora no válido. Introduzca una hora con el formato HH:MM A.",
   "boxui.unifiedShare.collabAccess": "acceso de colaborador",

package/i18n/es-ES.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Solo acceso directo",
   "boxui.shareMenu.viewAndDownload": "Visualización y descarga",
   "boxui.shareMenu.viewOnly": "Solo visualización",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Campo obligatorio. Introduzca una hora con el formato HH:MM A.",
   "boxui.timeInput.invalidTimeError": "Formato de hora no válido. Introduzca una hora con el formato HH:MM A.",
   "boxui.unifiedShare.collabAccess": "acceso de colaborador",

package/i18n/fi-FI.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Vain pikakuvake",
   "boxui.shareMenu.viewAndDownload": "Luku ja lataus",
   "boxui.shareMenu.viewOnly": "Vain luku",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Pakollinen kenttä. Kirjoita aika muodossa HH:MM A.",
   "boxui.timeInput.invalidTimeError": "Virheellinen ajan muoto. Kirjoita aika muodossa HH:MM A.",
   "boxui.unifiedShare.collabAccess": "yhteistyökumppanin käyttöoikeustaso",

package/i18n/fr-CA.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Raccourci uniquement",
   "boxui.shareMenu.viewAndDownload": "Afficher et télécharger",
   "boxui.shareMenu.viewOnly": "Uniquement pour consultation",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Champ obligatoire. Entrez un horaire au format HH h MM.",
   "boxui.timeInput.invalidTimeError": "Format d'horaire non valide. Entrez un horaire au format HH h MM.",
   "boxui.unifiedShare.collabAccess": "Accès collaborateur",

package/i18n/fr-FR.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Raccourci uniquement",
   "boxui.shareMenu.viewAndDownload": "Afficher et télécharger",
   "boxui.shareMenu.viewOnly": "Uniquement pour consultation",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Champ obligatoire. Entrez un horaire au format HH h MM.",
   "boxui.timeInput.invalidTimeError": "Format d'horaire non valide. Entrez un horaire au format HH h MM.",
   "boxui.unifiedShare.collabAccess": "Accès collaborateur",

package/i18n/hi-IN.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "केवल शॉर्टकट",
   "boxui.shareMenu.viewAndDownload": "देखें और डाउनलोड करें",
   "boxui.shareMenu.viewOnly": "केवल देखें",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "आवश्यक क्षेत्र. HH:MM A फ़ॉर्मेट में समय दर्ज करें.",
   "boxui.timeInput.invalidTimeError": "अमान्य समय फ़ॉर्मेट. HH:MM A फ़ॉर्मेट में समय दर्ज करें.",
   "boxui.unifiedShare.collabAccess": "सहयोगी एक्सेस",

package/i18n/it-IT.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Solo tasti di scelta rapida",
   "boxui.shareMenu.viewAndDownload": "Visualizzazione e download",
   "boxui.shareMenu.viewOnly": "Sola visualizzazione",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Campo obbligatorio. Immetti un orario nel formato HH:MM A.",
   "boxui.timeInput.invalidTimeError": "Formato ora non valido. Immetti un orario nel formato HH:MM A.",
   "boxui.unifiedShare.collabAccess": "accesso collaboratore",

package/i18n/ja-JP.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "ショートカットのみ",
   "boxui.shareMenu.viewAndDownload": "表示とダウンロード",
   "boxui.shareMenu.viewOnly": "表示のみ",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "必須フィールドです。HH:MM AM/PM形式で時間を入力してください。",
   "boxui.timeInput.invalidTimeError": "時間の形式が無効です。HH:MM AM/PM形式で時間を入力してください。",
   "boxui.unifiedShare.collabAccess": "コラボレータのアクセス権限",

package/i18n/ko-KR.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "바로 가기 전용",
   "boxui.shareMenu.viewAndDownload": "보기 및 다운로드",
   "boxui.shareMenu.viewOnly": "보기 전용",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "필수 필드입니다. HH:MM A 형식으로 시간을 입력하십시오.",
   "boxui.timeInput.invalidTimeError": "올바르지 않은 시간 형식입니다. HH:MM A 형식으로 시간을 입력하십시오.",
   "boxui.unifiedShare.collabAccess": "공동 작업자 액세스",

package/i18n/nb-NO.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Bare snarvei",
   "boxui.shareMenu.viewAndDownload": "Vise og laste ned",
   "boxui.shareMenu.viewOnly": "Bare vis",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Obligatorisk felt. Oppgi klokkeslettet i formatet TT.MM.",
   "boxui.timeInput.invalidTimeError": "Ugyldig tidsformat. Oppgi klokkeslettet i formatet HH:MM A.",
   "boxui.unifiedShare.collabAccess": "samarbeidspartner-tilgang",

package/i18n/nl-NL.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Alleen snelkoppeling",
   "boxui.shareMenu.viewAndDownload": "Bekijken en downloaden",
   "boxui.shareMenu.viewOnly": "Alleen bekijken",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Vereist veld. Voer een tijd in de notatie UU:MM in.",
   "boxui.timeInput.invalidTimeError": "Ongeldige tijdnotatie. Voer een tijd in de notatie UU:MM in.",
   "boxui.unifiedShare.collabAccess": "medebewerker toegang",

package/i18n/pl-PL.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Tylko skrót",
   "boxui.shareMenu.viewAndDownload": "Przeglądanie i pobieranie",
   "boxui.shareMenu.viewOnly": "Tylko przeglądanie",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Pole wymagane. Wprowadź godzinę w formacie GG:MM.",
   "boxui.timeInput.invalidTimeError": "Nieprawidłowy format godziny. Wprowadź godzinę w formacie GG:MM.",
   "boxui.unifiedShare.collabAccess": "dostęp dla współpracownika",

package/i18n/pt-BR.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Apenas atalho",
   "boxui.shareMenu.viewAndDownload": "Visualização e download",
   "boxui.shareMenu.viewOnly": "Apenas visualização",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Campo obrigatório. Informe uma hora no formato HH:MM AM/PM.",
   "boxui.timeInput.invalidTimeError": "Formato de hora inválido. Informe uma hora no formato HH:MM A.",
   "boxui.unifiedShare.collabAccess": "acesso de colaborador",

package/i18n/ru-RU.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Только ярлык",
   "boxui.shareMenu.viewAndDownload": "Просмотр и скачивание",
   "boxui.shareMenu.viewOnly": "Только просмотр",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Обязательное поле. Введите время в 12-часовом формате ЧЧ:ММ.",
   "boxui.timeInput.invalidTimeError": "Неверный формат времени. Введите время в 12-часовом формате ЧЧ:ММ.",
   "boxui.unifiedShare.collabAccess": "доступ соавтора",

package/i18n/sv-SE.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Endast genväg",
   "boxui.shareMenu.viewAndDownload": "Visa och hämta",
   "boxui.shareMenu.viewOnly": "Endast visning",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Obligatoriskt fält. Ange en tid i formatet TT:MM.",
   "boxui.timeInput.invalidTimeError": "Ogiltigt tidsformat. Ange en tid i formatet TT:MM.",
   "boxui.unifiedShare.collabAccess": "åtkomst för medarbetare",

package/i18n/tr-TR.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "Yalnızca Kısayol",
   "boxui.shareMenu.viewAndDownload": "Görüntüleme ve İndirme",
   "boxui.shareMenu.viewOnly": "Yalnızca Görüntüleme",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "Gerekli alan. Saati SS.DD biçiminde girin.",
   "boxui.timeInput.invalidTimeError": "Geçersiz saat biçimi. Saati SS.DD biçiminde girin.",
   "boxui.unifiedShare.collabAccess": "işbirlikçi erişimi",

package/i18n/zh-CN.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "仅快捷键",
   "boxui.shareMenu.viewAndDownload": "查看和下载",
   "boxui.shareMenu.viewOnly": "仅查看",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "必填字段。请以“上午小时:分钟”格式输入时间。",
   "boxui.timeInput.invalidTimeError": "时间格式无效。请以“上午小时:分钟”格式输入时间。",
   "boxui.unifiedShare.collabAccess": "协作者访问",

package/i18n/zh-TW.js

@@ -906,6 +906,7 @@ export default {
   "boxui.shareMenu.shortcutOnly": "僅捷徑",
   "boxui.shareMenu.viewAndDownload": "檢視與下載",
   "boxui.shareMenu.viewOnly": "僅檢視",
+  "boxui.subHeader.metadata": "Metadata",
   "boxui.timeInput.emptyTimeError": "必填欄位。請以「上午 時時:分分」的格式輸入時間。",
   "boxui.timeInput.invalidTimeError": "無效的時間格式。請以「上午 時時:分分」的格式輸入時間。",
   "boxui.unifiedShare.collabAccess": "共同作業者存取",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.26",
+    "version": "23.4.0-beta.27",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/elements/common/sub-header/SubHeader.tsx

@@ -5,7 +5,8 @@ import SubHeaderLeft from './SubHeaderLeft';
 import SubHeaderRight from './SubHeaderRight';
 import type { ViewMode } from '../flowTypes';
 import type { View, Collection } from '../../../common/types/core';
-import { VIEW_MODE_LIST } from '../../../constants';
+import { VIEW_MODE_LIST, VIEW_METADATA } from '../../../constants';
+import { useFeatureEnabled } from '../feature-checking';
 
 import './SubHeader.scss';
 
@@ -51,39 +52,49 @@ const SubHeader = ({
     rootName,
     view,
     viewMode = VIEW_MODE_LIST,
-}: SubHeaderProps) => (
-    <PageHeader.Root className="be-sub-header" data-testid="be-sub-header" variant="inline">
-        <PageHeader.StartElements>
-            <SubHeaderLeft
-                currentCollection={currentCollection}
-                isSmall={isSmall}
-                onItemClick={onItemClick}
-                portalElement={portalElement}
-                rootId={rootId}
-                rootName={rootName}
-                view={view}
-            />
-        </PageHeader.StartElements>
-        <PageHeader.EndElements>
-            <SubHeaderRight
-                canCreateNewFolder={canCreateNewFolder}
-                canUpload={canUpload}
-                currentCollection={currentCollection}
-                gridColumnCount={gridColumnCount}
-                gridMaxColumns={gridMaxColumns}
-                gridMinColumns={gridMinColumns}
-                maxGridColumnCountForWidth={maxGridColumnCountForWidth}
-                onCreate={onCreate}
-                onGridViewSliderChange={onGridViewSliderChange}
-                onSortChange={onSortChange}
-                onUpload={onUpload}
-                onViewModeChange={onViewModeChange}
-                portalElement={portalElement}
-                view={view}
-                viewMode={viewMode}
-            />
-        </PageHeader.EndElements>
-    </PageHeader.Root>
-);
+}: SubHeaderProps) => {
+    const isMetadataViewV2Feature = useFeatureEnabled('contentExplorer.metadataViewV2');
+
+    if (view === VIEW_METADATA && !isMetadataViewV2Feature) {
+        return null;
+    }
+
+    return (
+        <PageHeader.Root className="be-sub-header" data-testid="be-sub-header" variant="inline">
+            <PageHeader.StartElements>
+                {view !== VIEW_METADATA && !isMetadataViewV2Feature && (
+                    <SubHeaderLeft
+                        currentCollection={currentCollection}
+                        isSmall={isSmall}
+                        onItemClick={onItemClick}
+                        portalElement={portalElement}
+                        rootId={rootId}
+                        rootName={rootName}
+                        view={view}
+                    />
+                )}
+            </PageHeader.StartElements>
+            <PageHeader.EndElements>
+                <SubHeaderRight
+                    canCreateNewFolder={canCreateNewFolder}
+                    canUpload={canUpload}
+                    currentCollection={currentCollection}
+                    gridColumnCount={gridColumnCount}
+                    gridMaxColumns={gridMaxColumns}
+                    gridMinColumns={gridMinColumns}
+                    maxGridColumnCountForWidth={maxGridColumnCountForWidth}
+                    onCreate={onCreate}
+                    onGridViewSliderChange={onGridViewSliderChange}
+                    onSortChange={onSortChange}
+                    onUpload={onUpload}
+                    onViewModeChange={onViewModeChange}
+                    portalElement={portalElement}
+                    view={view}
+                    viewMode={viewMode}
+                />
+            </PageHeader.EndElements>
+        </PageHeader.Root>
+    );
+};
 
 export default SubHeader;

package/src/elements/common/sub-header/SubHeaderRight.tsx

@@ -1,11 +1,19 @@
 import * as React from 'react';
+import { Button } from '@box/blueprint-web';
+import { Pencil } from '@box/blueprint-web-assets/icons/Fill';
+import { useIntl } from 'react-intl';
 import Sort from './Sort';
 import Add from './Add';
 import GridViewSlider from '../../../components/grid-view/GridViewSlider';
 import ViewModeChangeButton from './ViewModeChangeButton';
-import { VIEW_FOLDER, VIEW_MODE_GRID } from '../../../constants';
+import { VIEW_FOLDER, VIEW_MODE_GRID, VIEW_METADATA } from '../../../constants';
+import { useFeatureEnabled } from '../feature-checking';
+
 import type { ViewMode } from '../flowTypes';
 import type { SortBy, SortDirection, View, Collection } from '../../../common/types/core';
+
+import messages from './messages';
+
 import './SubHeaderRight.scss';
 
 export interface SubHeaderRightProps {
@@ -43,36 +51,49 @@ const SubHeaderRight = ({
     view,
     viewMode,
 }: SubHeaderRightProps) => {
+    const { formatMessage } = useIntl();
+    const isMetadataViewV2Feature = useFeatureEnabled('contentExplorer.metadataViewV2');
     const { items = [] }: Collection = currentCollection;
     const hasGridView: boolean = !!gridColumnCount;
     const hasItems: boolean = items.length > 0;
     const isFolder: boolean = view === VIEW_FOLDER;
     const showSort: boolean = isFolder && hasItems;
     const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;
+    const isMetadataView: boolean = view === VIEW_METADATA;
     return (
         <div className="be-sub-header-right">
-            {hasItems && viewMode === VIEW_MODE_GRID && (
-                <GridViewSlider
-                    columnCount={gridColumnCount}
-                    gridMaxColumns={gridMaxColumns}
-                    gridMinColumns={gridMinColumns}
-                    maxColumnCount={maxGridColumnCountForWidth}
-                    onChange={onGridViewSliderChange}
-                />
+            {!isMetadataView && (
+                <>
+                    {hasItems && viewMode === VIEW_MODE_GRID && (
+                        <GridViewSlider
+                            columnCount={gridColumnCount}
+                            gridMaxColumns={gridMaxColumns}
+                            gridMinColumns={gridMinColumns}
+                            maxColumnCount={maxGridColumnCountForWidth}
+                            onChange={onGridViewSliderChange}
+                        />
+                    )}
+                    {hasItems && hasGridView && (
+                        <ViewModeChangeButton viewMode={viewMode} onViewModeChange={onViewModeChange} />
+                    )}
+                    {showSort && <Sort onSortChange={onSortChange} portalElement={portalElement} />}
+                    {showAdd && (
+                        <Add
+                            isDisabled={!isFolder}
+                            onCreate={onCreate}
+                            onUpload={onUpload}
+                            portalElement={portalElement}
+                            showCreate={canCreateNewFolder}
+                            showUpload={canUpload}
+                        />
+                    )}
+                </>
             )}
-            {hasItems && hasGridView && (
-                <ViewModeChangeButton viewMode={viewMode} onViewModeChange={onViewModeChange} />
-            )}
-            {showSort && <Sort onSortChange={onSortChange} portalElement={portalElement} />}
-            {showAdd && (
-                <Add
-                    isDisabled={!isFolder}
-                    onCreate={onCreate}
-                    onUpload={onUpload}
-                    portalElement={portalElement}
-                    showCreate={canCreateNewFolder}
-                    showUpload={canUpload}
-                />
+
+            {isMetadataView && isMetadataViewV2Feature && (
+                <Button icon={Pencil} size="large" variant="primary">
+                    {formatMessage(messages.metadata)}
+                </Button>
             )}
         </div>
     );

package/src/elements/common/sub-header/messages.ts

@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    metadata: {
+        defaultMessage: 'Metadata',
+        description: 'Text for metadata button that will open the metadata side panel',
+        id: 'boxui.subHeader.metadata',
+    },
+});
+
+export default messages;

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

@@ -65,13 +65,13 @@ const Content = ({
     const isMetadataBasedView = view === VIEW_METADATA;
     const isListView = !isMetadataBasedView && viewMode === VIEW_MODE_LIST; // Folder view or Recents view
     const isGridView = !isMetadataBasedView && viewMode === VIEW_MODE_GRID; // Folder view or Recents view
-
+    const isMetadataViewV2Feature = isFeatureEnabled(features, 'contentExplorer.metadataViewV2');
     return (
         <div className="bce-content">
             {view === VIEW_ERROR || view === VIEW_SELECTED ? null : <ProgressBar percent={percentLoaded} />}
 
             {isViewEmpty && <EmptyView view={view} isLoading={percentLoaded !== 100} />}
-            {!isFeatureEnabled(features, 'contentExplorer.metadataViewV2') && !isViewEmpty && isMetadataBasedView && (
+            {!isMetadataViewV2Feature && !isViewEmpty && isMetadataBasedView && (
                 <MetadataBasedItemList
                     currentCollection={currentCollection}
                     fieldsToShow={fieldsToShow}
@@ -79,9 +79,7 @@ const Content = ({
                     {...rest}
                 />
             )}
-            {isFeatureEnabled(features, 'contentExplorer.metadataViewV2') && !isViewEmpty && isMetadataBasedView && (
-                <MetadataView />
-            )}
+            {isMetadataViewV2Feature && !isViewEmpty && isMetadataBasedView && <MetadataView />}
             {!isViewEmpty && isListView && (
                 <ItemList
                     items={items}

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

@@ -1649,32 +1649,30 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                     <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}>
-                            {!isDefaultViewMetadata && (
-                                <>
-                                    <Header view={view} logoUrl={logoUrl} onSearch={this.search} />
-                                    <SubHeader
-                                        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}
-                                        onCreate={this.createFolder}
-                                        onGridViewSliderChange={this.onGridViewSliderChange}
-                                        onItemClick={this.fetchFolder}
-                                        onSortChange={this.sort}
-                                        onViewModeChange={this.changeViewMode}
-                                        portalElement={this.rootElement}
-                                    />
-                                </>
-                            )}
+                            {!isDefaultViewMetadata && <Header view={view} logoUrl={logoUrl} onSearch={this.search} />}
+
+                            <SubHeader
+                                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}
+                                onCreate={this.createFolder}
+                                onGridViewSliderChange={this.onGridViewSliderChange}
+                                onItemClick={this.fetchFolder}
+                                onSortChange={this.sort}
+                                onViewModeChange={this.changeViewMode}
+                                portalElement={this.rootElement}
+                            />
+
                             <Content
                                 canDelete={canDelete}
                                 canDownload={canDownload}

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

@@ -5,6 +5,7 @@ import { ContentExplorerComponent as ContentExplorer, ContentExplorerProps } fro
 import { mockRecentItems, mockRootFolder, mockRootFolderSharedLink } from '../../common/__mocks__/mockRootFolder';
 import { mockMetadata, mockSchema } from '../../common/__mocks__/mockMetadata';
 import mockSubFolder from '../../common/__mocks__/mockSubfolder';
+import { FeatureProvider } from '../../common/feature-checking';
 
 jest.mock('../../../utils/Xhr', () => {
     return jest.fn().mockImplementation(() => {
@@ -71,8 +72,12 @@ jest.mock('../../common/preview-dialog/PreviewDialog', () => props => {
 describe('elements/content-explorer/ContentExplorer', () => {
     let rootElement: HTMLDivElement;
 
-    const renderComponent = (props: Partial<ContentExplorerProps> = {}) => {
-        return render(<ContentExplorer defaultView="list" rootFolderId="69083462919" token="token" {...props} />);
+    const renderComponent = ({ features, ...props }: Partial<ContentExplorerProps> = {}) => {
+        return render(
+            <FeatureProvider features={features}>
+                <ContentExplorer defaultView="list" rootFolderId="69083462919" token="token" {...props} />
+            </FeatureProvider>,
+        );
     };
 
     beforeEach(() => {
@@ -410,6 +415,34 @@ describe('elements/content-explorer/ContentExplorer', () => {
             expect(screen.getByText('Healthcare')).toBeInTheDocument();
             expect(screen.getByText('November 1, 2023')).toBeInTheDocument();
         });
+        describe('Metadata View V2', () => {
+            test('should render metadata view button', async () => {
+                renderComponent({
+                    defaultView: 'metadata',
+                    features: {
+                        contentExplorer: {
+                            metadataViewV2: true,
+                        },
+                    },
+                });
+
+                // two separate promises need to be resolved before the component is ready
+                await waitFor(() => {
+                    expect(screen.getByText('Please wait while the items load...')).toBeInTheDocument();
+                });
+
+                await waitFor(() => {
+                    expect(screen.getByTestId('content-explorer')).toBeInTheDocument();
+                });
+
+                expect(screen.queryByRole('searchbox', { name: 'Search files and folders' })).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', { name: 'Preview Test Folder' })).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', { name: 'Switch to Grid View' })).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', { name: 'Sort' })).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', { name: 'Add' })).not.toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Metadata' })).toBeInTheDocument();
+            });
+        });
     });
 
     describe('Preview', () => {