diff --git a/static/app/components/searchQueryBuilder/index.spec.tsx b/static/app/components/searchQueryBuilder/index.spec.tsx index 4160fad689d866..2e392ba9ffb5ac 100644 --- a/static/app/components/searchQueryBuilder/index.spec.tsx +++ b/static/app/components/searchQueryBuilder/index.spec.tsx @@ -4147,9 +4147,7 @@ describe('SearchQueryBuilder', () => { {organization: {features: ['search-query-builder-case-insensitivity']}} ); - expect( - await screen.findByRole('button', {name: 'Toggle case sensitivity'}) - ).toBeInTheDocument(); + expect(await screen.findByRole('button', {name: 'Match case'})).toBeInTheDocument(); }); }); diff --git a/static/app/components/searchQueryBuilder/index.tsx b/static/app/components/searchQueryBuilder/index.tsx index c2de97ba5d99cf..bf71d64ec0aa5d 100644 --- a/static/app/components/searchQueryBuilder/index.tsx +++ b/static/app/components/searchQueryBuilder/index.tsx @@ -2,8 +2,10 @@ import {useContext, useLayoutEffect} from 'react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; -import {Button} from 'sentry/components/core/button'; -import {Input} from 'sentry/components/core/input'; +import {Button} from '@sentry/scraps/button'; +import {Input} from '@sentry/scraps/input'; +import {Tooltip} from '@sentry/scraps/tooltip'; + import { SearchQueryBuilderContext, SearchQueryBuilderProvider, @@ -198,21 +200,26 @@ function ActionButtons({ return null; } + const isCaseInsensitive = caseInsensitive === 1; + const caseInsensitiveLabel = isCaseInsensitive ? t('Match case') : t('Ignore case'); + return ( {trailingItems} {defined(onCaseInsensitiveClick) && hasCaseSensitiveSearch ? ( - } - borderless - active={caseInsensitive === 1} - onClick={() => { - onCaseInsensitiveClick?.(caseInsensitive === 1 ? null : 1); - }} - /> + + } + borderless + active={!isCaseInsensitive} + onClick={() => { + onCaseInsensitiveClick?.(isCaseInsensitive ? null : 1); + }} + /> + ) : null} {query === '' ? null : ( { expect(eventTableMock).toHaveBeenCalled(); const caseInsensitiveBtn = await screen.findByRole('button', { - name: 'Toggle case sensitivity', + name: 'Ignore case', }); await userEvent.click(caseInsensitiveBtn); diff --git a/static/app/views/explore/spans/spansTab.spec.tsx b/static/app/views/explore/spans/spansTab.spec.tsx index 7bbf656fdfe764..d333df331fb07a 100644 --- a/static/app/views/explore/spans/spansTab.spec.tsx +++ b/static/app/views/explore/spans/spansTab.spec.tsx @@ -261,7 +261,7 @@ describe('SpansTabContent', () => { ); const caseSensitivityToggle = screen.getByRole('button', { - name: 'Toggle case sensitivity', + name: 'Ignore case', }); expect(caseSensitivityToggle).toBeInTheDocument(); }); @@ -275,7 +275,7 @@ describe('SpansTabContent', () => { ); const caseSensitivityToggle = screen.getByRole('button', { - name: 'Toggle case sensitivity', + name: 'Ignore case', }); expect(caseSensitivityToggle).toBeInTheDocument(); await userEvent.click(caseSensitivityToggle); @@ -304,7 +304,7 @@ describe('SpansTabContent', () => { ); const caseSensitivityToggle = screen.getByRole('button', { - name: 'Toggle case sensitivity', + name: 'Ignore case', }); expect(caseSensitivityToggle).toBeInTheDocument(); await userEvent.click(caseSensitivityToggle);