fix(metadata-view): Hide keyword and location filters (#4260)

Author: greg-in-a-box

package.json

@@ -136,7 +136,7 @@
         "@box/languages": "^1.0.0",
         "@box/metadata-editor": "^0.122.12",
         "@box/metadata-filter": "^1.19.2",
-        "@box/metadata-view": "^0.48.1",
+        "@box/metadata-view": "^0.48.6",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/types": "^0.2.1",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
@@ -303,7 +303,7 @@
         "@box/item-icon": "^0.17.15",
         "@box/metadata-editor": "^0.122.12",
         "@box/metadata-filter": "^1.19.2",
-        "@box/metadata-view": "^0.48.1",
+        "@box/metadata-view": "^0.48.6",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/types": "^0.2.1",
         "@hapi/address": "^2.1.4",

src/elements/common/sub-header/__tests__/SubHeaderRight.test.tsx

@@ -118,8 +118,9 @@ describe('elements/common/sub-header/SubHeaderRight', () => {
         );
 
         test('should call onClick when a bulk item action is clicked', async () => {
-            const mockOnClick = jest.fn();
             const user = userEvent();
+            const mockOnClick = jest.fn();
+
             const features = {
                 contentExplorer: {
                     metadataViewV2: true, // enable the feature flag

src/elements/content-explorer/MetadataViewContainer.tsx

@@ -9,6 +9,7 @@ import {
 } from '@box/metadata-filter';
 import {
     MetadataView,
+    PredefinedFilterName,
     type FilterValues,
     type MetadataViewProps,
     type MetadataFieldType,
@@ -18,6 +19,7 @@ import { type Key } from '@react-types/shared';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { SortDescriptor } from 'react-aria-components';
+
 import { FIELD_ITEM_NAME } from '../../constants';
 import type { Collection } from '../../common/types/core';
 import type { MetadataTemplate, MetadataTemplateField } from '../../common/types/metadata';
@@ -207,6 +209,11 @@ const MetadataViewContainer = ({
             initialFilterValues,
             onFilterSubmit: handleFilterSubmit,
             filterGroups,
+
+            predefinedFilterOptions: {
+                [PredefinedFilterName.KeywordSearchFilterGroup]: { isDisabled: true },
+                [PredefinedFilterName.LocationFilterGroup]: { isDisabled: true },
+            },
         };
     }, [actionBarProps, initialFilterValues, handleFilterSubmit, filterGroups]);
 

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

@@ -519,20 +519,20 @@ describe('elements/content-explorer/ContentExplorer', () => {
                     },
                 });
 
-                const industryHeader = await screen.findByRole('columnheader', { name: 'Industry' });
-                expect(industryHeader).toBeInTheDocument();
+                const lastContactedAtHeader = await screen.findByRole('columnheader', { name: 'Last Contacted At' });
+                expect(lastContactedAtHeader).toBeInTheDocument();
 
                 const firstRow = await screen.findByRole('row', { name: /Child 2/i });
                 expect(firstRow).toBeInTheDocument();
 
-                await userEvent.click(industryHeader);
+                await userEvent.click(lastContactedAtHeader);
 
                 // Internal callback gets trimmed version for API calls
-                expect(mockOnSortChangeInternal).toHaveBeenCalledWith('industry', 'ASC');
+                expect(mockOnSortChangeInternal).toHaveBeenCalledWith('last_contacted_at', 'ASC');
 
                 // User callback gets full column ID with direction
                 expect(mockOnSortChangeExternal).toHaveBeenCalledWith({
-                    column: 'metadata.enterprise_0.templateName.industry',
+                    column: 'metadata.enterprise_0.templateName.last_contacted_at',
                     direction: 'ascending',
                 });
             });

src/elements/content-explorer/__tests__/MetadataViewContainer.test.tsx

@@ -9,6 +9,11 @@ import MetadataViewContainer, {
     type ExternalFilterValues,
 } from '../MetadataViewContainer';
 
+Object.defineProperty(Element.prototype, 'scrollTo', {
+    value: jest.fn(),
+    writable: true,
+});
+
 describe('elements/content-explorer/MetadataViewContainer', () => {
     const mockItems = [
         {
@@ -105,7 +110,10 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
         return render(<MetadataViewContainer {...defaultProps} {...props} />);
     };
 
+    let user;
+
     beforeEach(() => {
+        user = userEvent();
         jest.clearAllMocks();
     });
 
@@ -144,11 +152,11 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
             onMetadataFilter: jest.fn(),
         });
 
-        await userEvent().click(screen.getByRole('button', { name: /Contact Role/ }));
-        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Developer' }));
+        await user.click(screen.getByRole('button', { name: /Contact Role/ }));
+        await user.click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Developer' }));
         // Re-open the chip to select a second value (menu closes after submit)
-        await userEvent().click(screen.getByRole('button', { name: /Contact Role/ }));
-        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Marketing' }));
+        await user.click(screen.getByRole('button', { name: /Contact Role/ }));
+        await user.click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Marketing' }));
 
         await waitFor(() => expect(onFilterSubmit).toHaveBeenCalledTimes(2));
         const firstCall = onFilterSubmit.mock.calls[0][0];
@@ -183,8 +191,8 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
             onMetadataFilter,
         });
 
-        await userEvent().click(screen.getByRole('button', { name: /Status/ }));
-        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
+        await user.click(screen.getByRole('button', { name: /Status/ }));
+        await user.click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
 
         await waitFor(() => {
             expect(onMetadataFilter).toHaveBeenCalledTimes(1);
@@ -221,8 +229,8 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
             onMetadataFilter,
         });
 
-        await userEvent().click(screen.getByRole('button', { name: /Status/ }));
-        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
+        await user.click(screen.getByRole('button', { name: /Status/ }));
+        await user.click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
 
         await waitFor(() => {
             expect(onMetadataFilter).toHaveBeenCalledTimes(1);
@@ -382,8 +390,8 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
         });
 
         // Test enum filter
-        await userEvent().click(screen.getByRole('button', { name: /Status/ }));
-        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
+        await user.click(screen.getByRole('button', { name: /Status/ }));
+        await user.click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Active' }));
 
         await waitFor(() => {
             expect(onMetadataFilter).toHaveBeenCalledTimes(1);
@@ -519,4 +527,23 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
             expect(result['category-filter'].fieldType).toBe('multiSelect');
         });
     });
+
+    describe('predefined filter options', () => {
+        test('should only show metadata template filters in sidepanel', async () => {
+            renderComponent();
+
+            expect(screen.getByRole('button', { name: 'All Filters' })).toBeInTheDocument();
+
+            await user.click(screen.getByRole('button', { name: 'All Filters' }));
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+            expect(within(screen.getByRole('dialog')).getByRole('button', { name: 'File Type' })).toBeInTheDocument();
+
+            // Should NOT show predefined filters that are disabled
+            expect(within(screen.getByRole('dialog')).queryByPlaceholderText('Enter keywords')).not.toBeInTheDocument();
+            expect(
+                within(screen.getByRole('dialog')).queryByRole('button', { name: /location/i }),
+            ).not.toBeInTheDocument();
+        });
+    });
 });

yarn.lock

@@ -1517,10 +1517,10 @@
   resolved "https://registry.yarnpkg.com/@box/metadata-filter/-/metadata-filter-1.19.3.tgz#87364bea4cbb1417866e65639f3b1e137a6d9b6a"
   integrity sha512-5cSY8yLW7S1zsiqBHAuKkHjcyHFBuBUBHGTnYigV0eKyLH4Dm9ozjon23P3Z9HXVB5IMHwTM3I9TRDFAZuP7vw==
 
-"@box/metadata-view@^0.48.1":
-  version "0.48.1"
-  resolved "https://registry.yarnpkg.com/@box/metadata-view/-/metadata-view-0.48.1.tgz#58cab5153cf343726aa9718debccdca88e8fb10f"
-  integrity sha512-+OeSLT5AEqgSDz1p61mV/VVPb/qGAmlC/+GOyqSZ/aSu2D8owUUS0BO/rPVIF1DA56NrPoeGfQA8GgxdKzNisA==
+"@box/metadata-view@^0.48.6":
+  version "0.48.6"
+  resolved "https://registry.yarnpkg.com/@box/metadata-view/-/metadata-view-0.48.6.tgz#c1c5735280f368a15e418c1128c8b0d63b5f5ecb"
+  integrity sha512-HbUEffdbJawUwkBWxoZoC3AbhG2Agzis3ehcXBDJSeDIypRN+UZSWqHnG1fNJ7f3ngK8JAu/s+FMl/i0nCZAnA==
 
 "@box/react-virtualized@^9.22.3-rc-box.10":
   version "9.22.3-rc-box.10"