fix(core): boolean value in search shows actual value (#7623)

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",

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,20 +80,27 @@ export function FilterLabel({filter, fontSize = 1, showContent = true}: FilterLa
         t={t}
         i18nKey={operator?.descriptionKey}
         components={components}
-        values={getFilterValues(filter)}
+        values={getFilterValues(filter, t)}
       />
     </Flex>
   )
 }
 
-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
   }
   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
   }

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(
+      <TestProvider>
+        <SearchProvider>
+          <FilterLabel filter={mockFilter} />
+        </SearchProvider>
+      </TestProvider>,
+    )
+
+    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(
+      <TestProvider>
+        <SearchProvider>
+          <FilterLabel filter={mockFilter} showContent={false} />
+        </SearchProvider>
+      </TestProvider>,
+    )
+
+    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(
+      <TestProvider>
+        <SearchProvider>
+          <FilterLabel filter={filterWithoutDescription} />
+        </SearchProvider>
+      </TestProvider>,
+    )
+
+    expect(screen.getByText('Title')).toBeInTheDocument()
+    expect(screen.queryByText('is')).not.toBeInTheDocument()
+    expect(screen.queryByText('True')).not.toBeInTheDocument()
+  })
+})

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'