From e3933c8bc78f1d289b87206a7522b012f8379ab7 Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Fri, 10 Oct 2025 13:38:21 -0300 Subject: [PATCH 1/4] :bug: Fix color states for case sensitive toggle --- static/app/components/searchQueryBuilder/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/static/app/components/searchQueryBuilder/index.tsx b/static/app/components/searchQueryBuilder/index.tsx index c2de97ba5d99cf..ee068606b26490 100644 --- a/static/app/components/searchQueryBuilder/index.tsx +++ b/static/app/components/searchQueryBuilder/index.tsx @@ -198,19 +198,21 @@ function ActionButtons({ return null; } + const isCaseInsensitive = caseInsensitive === 1; + return ( {trailingItems} {defined(onCaseInsensitiveClick) && hasCaseSensitiveSearch ? ( } + icon={} borderless - active={caseInsensitive === 1} + active={!isCaseInsensitive} onClick={() => { - onCaseInsensitiveClick?.(caseInsensitive === 1 ? null : 1); + onCaseInsensitiveClick?.(isCaseInsensitive ? null : 1); }} /> ) : null} From 95fee65bd4ce6ac197174260a42aff500e1f580a Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Fri, 10 Oct 2025 13:46:43 -0300 Subject: [PATCH 2/4] :sparkles: Add in tooltip for case sensitive toggle --- .../components/searchQueryBuilder/index.tsx | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/static/app/components/searchQueryBuilder/index.tsx b/static/app/components/searchQueryBuilder/index.tsx index ee068606b26490..900625aef80370 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, @@ -199,22 +201,25 @@ function ActionButtons({ } const isCaseInsensitive = caseInsensitive === 1; + const caseInsensitiveLabel = isCaseInsensitive ? t('Ignore case') : t('Match case'); return ( {trailingItems} {defined(onCaseInsensitiveClick) && hasCaseSensitiveSearch ? ( - } - borderless - active={!isCaseInsensitive} - onClick={() => { - onCaseInsensitiveClick?.(isCaseInsensitive ? null : 1); - }} - /> + + } + borderless + active={!isCaseInsensitive} + onClick={() => { + onCaseInsensitiveClick?.(isCaseInsensitive ? null : 1); + }} + /> + ) : null} {query === '' ? null : ( Date: Fri, 10 Oct 2025 14:07:19 -0300 Subject: [PATCH 3/4] :bug: Swap tooltip labels --- static/app/components/searchQueryBuilder/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/searchQueryBuilder/index.tsx b/static/app/components/searchQueryBuilder/index.tsx index 900625aef80370..bf71d64ec0aa5d 100644 --- a/static/app/components/searchQueryBuilder/index.tsx +++ b/static/app/components/searchQueryBuilder/index.tsx @@ -201,7 +201,7 @@ function ActionButtons({ } const isCaseInsensitive = caseInsensitive === 1; - const caseInsensitiveLabel = isCaseInsensitive ? t('Ignore case') : t('Match case'); + const caseInsensitiveLabel = isCaseInsensitive ? t('Match case') : t('Ignore case'); return ( From ff4d4daf48bc854fea56f3feabd57f959266620c Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Fri, 10 Oct 2025 14:08:40 -0300 Subject: [PATCH 4/4] :white_check_mark: Fix up tests --- static/app/components/searchQueryBuilder/index.spec.tsx | 4 +--- static/app/views/explore/logs/logsTab.spec.tsx | 2 +- static/app/views/explore/spans/spansTab.spec.tsx | 6 +++--- 3 files changed, 5 insertions(+), 7 deletions(-) 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/views/explore/logs/logsTab.spec.tsx b/static/app/views/explore/logs/logsTab.spec.tsx index eb28626501cc3c..71aed9e216ddb9 100644 --- a/static/app/views/explore/logs/logsTab.spec.tsx +++ b/static/app/views/explore/logs/logsTab.spec.tsx @@ -259,7 +259,7 @@ describe('LogsTabContent', () => { 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);