From b2ec0bbb9c129c610398a82b6e6a046ad3d45173 Mon Sep 17 00:00:00 2001 From: Greg Wong Date: Tue, 2 Sep 2025 15:35:04 -0400 Subject: [PATCH] fix(metadata-view): Hide keyword and location filters --- package.json | 4 +- .../__tests__/SubHeaderRight.test.tsx | 3 +- .../MetadataViewContainer.tsx | 7 +++ .../__tests__/ContentExplorer.test.tsx | 10 ++-- .../__tests__/MetadataViewContainer.test.tsx | 47 +++++++++++++++---- yarn.lock | 8 ++-- 6 files changed, 57 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 18ab314739..7d39816133 100644 --- a/package.json +++ b/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", diff --git a/src/elements/common/sub-header/__tests__/SubHeaderRight.test.tsx b/src/elements/common/sub-header/__tests__/SubHeaderRight.test.tsx index 8471957c78..e06dbedbb5 100644 --- a/src/elements/common/sub-header/__tests__/SubHeaderRight.test.tsx +++ b/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 diff --git a/src/elements/content-explorer/MetadataViewContainer.tsx b/src/elements/content-explorer/MetadataViewContainer.tsx index 6ec4a69cec..2c1e31e2e6 100644 --- a/src/elements/content-explorer/MetadataViewContainer.tsx +++ b/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]); diff --git a/src/elements/content-explorer/__tests__/ContentExplorer.test.tsx b/src/elements/content-explorer/__tests__/ContentExplorer.test.tsx index 2433d4b7c4..8e9684e56a 100644 --- a/src/elements/content-explorer/__tests__/ContentExplorer.test.tsx +++ b/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', }); }); diff --git a/src/elements/content-explorer/__tests__/MetadataViewContainer.test.tsx b/src/elements/content-explorer/__tests__/MetadataViewContainer.test.tsx index 142cd6233d..bcea2d7aff 100644 --- a/src/elements/content-explorer/__tests__/MetadataViewContainer.test.tsx +++ b/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(); }; + 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(); + }); + }); }); diff --git a/yarn.lock b/yarn.lock index 29019f6442..bb4a65224a 100644 --- a/yarn.lock +++ b/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"