From 4ffa0799876f4793d425e84d5d0417f4944b8bd6 Mon Sep 17 00:00:00 2001 From: Binoy Patel Date: Tue, 15 Oct 2024 21:48:57 -0400 Subject: [PATCH] fix(core): boolean value in search shows actual value (#7623) --- package.json | 1 + .../search/components/common/FilterLabel.tsx | 13 ++- .../common/__tests__/FilterLabel.test.tsx | 110 ++++++++++++++++++ .../sanity/test/testUtils/TestProvider.tsx | 4 +- 4 files changed, 123 insertions(+), 5 deletions(-) create mode 100644 packages/sanity/src/core/studio/components/navbar/search/components/common/__tests__/FilterLabel.test.tsx diff --git a/package.json b/package.json index 1d0eba56e52..b6ff8d0b8f0 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "test": "run-s test:vitest test:jest", "test:jest": "jest --forceExit", "test:vitest": "vitest --run", + "test:vitest:watch": "vitest --watch", "test:e2e": "playwright test", "test:exports": "turbo run test --filter=@repo/test-exports", "tsdoc:dev": "sanity-tsdoc dev", diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx index 6d3953b8bf3..e476a67cc96 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx +++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/FilterLabel.tsx @@ -3,7 +3,7 @@ import {useMemo} from 'react' import {styled} from 'styled-components' import {TextWithTone} from '../../../../../../components' -import {useTranslation} from '../../../../../../i18n' +import {type TFunction, useTranslation} from '../../../../../../i18n' import {Translate, type TranslateComponentMap} from '../../../../../../i18n/Translate' import {isRecord} from '../../../../../../util' import {useSearchState} from '../../contexts/search/useSearchState' @@ -80,13 +80,16 @@ export function FilterLabel({filter, fontSize = 1, showContent = true}: FilterLa t={t} i18nKey={operator?.descriptionKey} components={components} - values={getFilterValues(filter)} + values={getFilterValues(filter, t)} /> ) } -function getFilterValues(filter: SearchFilter): SearchFilterValues { +function getFilterValues( + filter: SearchFilter, + t: TFunction<'translation', undefined>, +): SearchFilterValues { const values: SearchFilterValues = {} if (typeof filter.value === 'number') { values.count = filter.value @@ -94,6 +97,10 @@ function getFilterValues(filter: SearchFilter): SearchFilterValues { if (isStringOrNumber(filter.value)) { values.value = filter.value } + if (typeof filter.value === 'boolean') { + // Cast boolean into a string value + values.value = filter.value ? t('search.filter-boolean-true') : t('search.filter-boolean-false') + } if (isRecord(filter.value) && 'from' in filter.value && isStringOrNumber(filter.value.from)) { values.from = filter.value.from } diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/common/__tests__/FilterLabel.test.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/common/__tests__/FilterLabel.test.tsx new file mode 100644 index 00000000000..eb965468127 --- /dev/null +++ b/packages/sanity/src/core/studio/components/navbar/search/components/common/__tests__/FilterLabel.test.tsx @@ -0,0 +1,110 @@ +import {render, screen} from '@testing-library/react' +import {type SanityClient} from 'sanity' +import {describe, expect, test} from 'vitest' + +import {createMockSanityClient} from '../../../../../../../../../test/mocks/mockSanityClient' +import {createTestProvider} from '../../../../../../../../../test/testUtils/TestProvider' +import {SearchProvider} from '../../../contexts/search/SearchProvider' +import {type SearchFilter} from '../../../types' +import {FilterLabel} from '../FilterLabel' + +describe('FilterLabel', () => { + const mockFilter: SearchFilter = { + fieldId: 'boolean-title-boolean-test', + filterName: 'boolean', + operatorType: 'booleanEqual', + value: true, + } + + const schema = { + types: [ + { + name: 'test', + type: 'document', + fields: [ + { + name: 'title', + type: 'boolean', + }, + ], + }, + ], + } + + const client = createMockSanityClient() as unknown as SanityClient + + test('renders the filter label with field, operator, and value', async () => { + const TestProvider = await createTestProvider({ + client, + config: { + name: 'default', + projectId: 'test', + dataset: 'test', + schema, + }, + }) + render( + + + + + , + ) + + expect(screen.getByText('Title')).toBeInTheDocument() + expect(screen.getByText('is')).toBeInTheDocument() + expect(screen.getByText('True')).toBeInTheDocument() + }) + + test('renders only the field when showContent is false', async () => { + const TestProvider = await createTestProvider({ + client, + config: { + name: 'default', + projectId: 'test', + dataset: 'test', + schema, + }, + }) + render( + + + + + , + ) + + expect(screen.getByText('Title')).toBeInTheDocument() + expect(screen.queryByText('is')).not.toBeInTheDocument() + expect(screen.queryByText('True')).not.toBeInTheDocument() + }) + + test('handles missing operator descriptionKey', async () => { + const filterWithoutDescription: SearchFilter = { + ...mockFilter, + operatorType: 'unknown', + } + + const TestProvider = await createTestProvider({ + client, + config: { + name: 'default', + projectId: 'test', + dataset: 'test', + schema, + }, + }) + + render( + + + + + , + ) + + expect(screen.getByText('Title')).toBeInTheDocument() + expect(screen.queryByText('is')).not.toBeInTheDocument() + expect(screen.queryByText('True')).not.toBeInTheDocument() + }) +}) diff --git a/packages/sanity/test/testUtils/TestProvider.tsx b/packages/sanity/test/testUtils/TestProvider.tsx index f83eaf358be..b0baad0deaf 100644 --- a/packages/sanity/test/testUtils/TestProvider.tsx +++ b/packages/sanity/test/testUtils/TestProvider.tsx @@ -6,16 +6,16 @@ import {AddonDatasetContext} from 'sanity/_singletons' import { CopyPasteProvider, - LocaleProviderBase, type LocaleResourceBundle, ResourceCacheProvider, type SingleWorkspace, SourceProvider, - usEnglishLocale, WorkspaceProvider, } from '../../src/core' import {studioDefaultLocaleResources} from '../../src/core/i18n/bundles/studio' +import {LocaleProviderBase} from '../../src/core/i18n/components/LocaleProvider' import {prepareI18n} from '../../src/core/i18n/i18nConfig' +import {usEnglishLocale} from '../../src/core/i18n/locales' import {route, RouterProvider} from '../../src/router' import {getMockWorkspace} from './getMockWorkspaceFromConfig'