Skip to content

Commit 28ab563

Browse files
authored
ref(search): Remove ui-search-on-change feature flag references (#93387)
Now that searching on change is GA'd, this removes all references to the feature flag. It also removes the `searchOnChange` prop and the `showUnsubmittedIndicator` prop as well as related code.
1 parent cda24a1 commit 28ab563

File tree

28 files changed

+34
-139
lines changed

28 files changed

+34
-139
lines changed

static/app/components/feedback/feedbackSearch.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,6 @@ export default function FeedbackSearch() {
276276

277277
return (
278278
<SearchQueryBuilder
279-
searchOnChange={organization.features.includes('ui-search-on-change')}
280279
initialQuery={decodeScalar(locationQuery.query, '')}
281280
fieldDefinitionGetter={getFeedbackFieldDefinition}
282281
filterKeys={filterKeys}
@@ -285,7 +284,6 @@ export default function FeedbackSearch() {
285284
onSearch={onSearch}
286285
searchSource={'feedback-list'}
287286
placeholder={t('Search Feedback')}
288-
showUnsubmittedIndicator
289287
/>
290288
);
291289
}

static/app/components/performance/spanSearchQueryBuilder.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,6 @@ function useSpanSearchQueryBuilderProps({
155155
disallowUnsupportedFilters: true,
156156
recentSearches: SavedSearchType.SPAN,
157157
showUnsubmittedIndicator: true,
158-
searchOnChange: organization.features.includes('ui-search-on-change'),
159158
};
160159
}
161160

static/app/components/performance/transactionSearchQueryBuilder.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ export function TransactionSearchQueryBuilder({
142142
recentSearches={SavedSearchType.EVENT}
143143
filterKeyMenuWidth={filterKeyMenuWidth}
144144
trailingItems={trailingItems}
145-
searchOnChange={organization.features.includes('ui-search-on-change')}
146145
/>
147146
);
148147
}

static/app/components/searchQueryBuilder/hooks/useOnChange.tsx

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ import {queryIsValid} from 'sentry/components/searchQueryBuilder/utils';
44
import {useEffectAfterFirstRender} from 'sentry/utils/useEffectAfterFirstRender';
55
import usePrevious from 'sentry/utils/usePrevious';
66

7-
export function useOnChange({
8-
onChange,
9-
searchOnChange,
10-
}: Pick<SearchQueryBuilderProps, 'onChange' | 'searchOnChange'>) {
7+
export function useOnChange({onChange}: Pick<SearchQueryBuilderProps, 'onChange'>) {
118
const {committedQuery, handleSearch, parseQuery} = useSearchQueryBuilder();
129

1310
const previousCommittedQuery = usePrevious(committedQuery);
@@ -19,16 +16,7 @@ export function useOnChange({
1916
onChange(committedQuery, {parsedQuery, queryIsValid: queryIsValid(parsedQuery)});
2017
}
2118

22-
if (searchOnChange) {
23-
handleSearch(committedQuery);
24-
}
19+
handleSearch(committedQuery);
2520
}
26-
}, [
27-
committedQuery,
28-
previousCommittedQuery,
29-
onChange,
30-
handleSearch,
31-
searchOnChange,
32-
parseQuery,
33-
]);
21+
}, [committedQuery, previousCommittedQuery, onChange, handleSearch, parseQuery]);
3422
}

static/app/components/searchQueryBuilder/hooks/useQueryBuilderState.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,7 @@ function removeExcessWhitespaceFromParts(...parts: string[]): string {
405405

406406
// Ensures that the replaced token is separated from the rest of the query
407407
// and cleans up any extra whitespace
408-
export function replaceTokensWithPadding(
408+
function replaceTokensWithPadding(
409409
query: string,
410410
tokens: Array<TokenResult<Token>>,
411411
value: string

static/app/components/searchQueryBuilder/index.spec.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,11 @@ describe('SearchQueryBuilder', function () {
134134
destroyAnnouncer();
135135

136136
MockApiClient.clearMockResponses();
137+
138+
MockApiClient.addMockResponse({
139+
url: '/organizations/org-slug/recent-searches/',
140+
method: 'POST',
141+
});
137142
});
138143

139144
afterEach(function () {
@@ -173,6 +178,10 @@ describe('SearchQueryBuilder', function () {
173178
);
174179

175180
await userEvent.click(getLastInput());
181+
182+
expect(mockOnChange).not.toHaveBeenCalled();
183+
expect(mockOnSearch).not.toHaveBeenCalled();
184+
176185
await userEvent.keyboard('b{enter}');
177186

178187
const expectedQueryState = expect.objectContaining({

static/app/components/searchQueryBuilder/index.stories.tsx

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -687,32 +687,6 @@ export default Storybook.story('SearchQueryBuilder', story => {
687687
);
688688
});
689689

690-
story('Unsubmitted search indicator', () => {
691-
const [query, setQuery] = useState('is:unresolved assigned:me');
692-
693-
return (
694-
<Fragment>
695-
<p>
696-
You can display an indicator when the search query has been modified but not
697-
fully submitted using the <code>showUnsubmittedIndicator</code> prop. This can
698-
be useful to remind the user that they have unsaved changes for use cases which
699-
require manual submission.
700-
</p>
701-
<p>
702-
Current query: <code>{query}</code>
703-
</p>
704-
<SearchQueryBuilder
705-
initialQuery={query}
706-
filterKeys={FILTER_KEYS}
707-
getTagValues={getTagValues}
708-
searchSource="storybook"
709-
showUnsubmittedIndicator
710-
onSearch={setQuery}
711-
/>
712-
</Fragment>
713-
);
714-
});
715-
716690
story('Disabled', () => {
717691
return (
718692
<SearchQueryBuilder

static/app/components/searchQueryBuilder/index.tsx

Lines changed: 4 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
33

44
import {Button} from 'sentry/components/core/button';
55
import {Input} from 'sentry/components/core/input';
6-
import {Tooltip} from 'sentry/components/core/tooltip';
76
import {
87
SearchQueryBuilderContext,
98
SearchQueryBuilderProvider,
@@ -136,47 +135,13 @@ export interface SearchQueryBuilderProps {
136135
* as an option, and so on with any other provided keys.
137136
*/
138137
replaceRawSearchKeys?: string[];
139-
/**
140-
* When true, will trigger the `onSearch` callback when the query changes.
141-
*/
142-
searchOnChange?: boolean;
143-
/**
144-
* When true, will display a visual indicator when there are unsaved changes.
145-
* This search is considered unsubmitted when query !== initialQuery.
146-
*/
147-
showUnsubmittedIndicator?: boolean;
148138
/**
149139
* Render custom content in the trailing section of the search bar, located
150140
* to the left of the clear button.
151141
*/
152142
trailingItems?: React.ReactNode;
153143
}
154144

155-
function SearchIndicator({
156-
initialQuery,
157-
showUnsubmittedIndicator,
158-
}: {
159-
initialQuery?: string;
160-
showUnsubmittedIndicator?: boolean;
161-
}) {
162-
const {query} = useSearchQueryBuilder();
163-
164-
const unSubmittedChanges = query !== initialQuery;
165-
const showIndicator = showUnsubmittedIndicator && unSubmittedChanges;
166-
167-
return (
168-
<PositionedSearchIconContainer>
169-
<Tooltip
170-
title={t('The current search query is not active. Press Enter to submit.')}
171-
disabled={!showIndicator}
172-
>
173-
<SearchIcon size="sm" />
174-
{showIndicator ? <UnSubmittedDot /> : null}
175-
</Tooltip>
176-
</PositionedSearchIconContainer>
177-
);
178-
}
179-
180145
function ActionButtons({
181146
ref,
182147
trailingItems = null,
@@ -217,15 +182,13 @@ function SearchQueryBuilderUI({
217182
initialQuery,
218183
onBlur,
219184
queryInterface = QueryInterfaceType.TOKENIZED,
220-
showUnsubmittedIndicator,
221185
trailingItems,
222186
onChange,
223-
searchOnChange,
224187
}: SearchQueryBuilderProps) {
225188
const {parsedQuery, query, dispatch, wrapperRef, actionBarRef, size} =
226189
useSearchQueryBuilder();
227190

228-
useOnChange({onChange, searchOnChange});
191+
useOnChange({onChange});
229192
useLayoutEffect(() => {
230193
dispatch({type: 'UPDATE_QUERY', query: initialQuery});
231194
}, [dispatch, initialQuery]);
@@ -243,10 +206,9 @@ function SearchQueryBuilderUI({
243206
data-test-id="search-query-builder"
244207
>
245208
<PanelProvider>
246-
<SearchIndicator
247-
initialQuery={initialQuery}
248-
showUnsubmittedIndicator={showUnsubmittedIndicator && !searchOnChange}
249-
/>
209+
<PositionedSearchIconContainer>
210+
<SearchIcon size="sm" />
211+
</PositionedSearchIconContainer>
250212
{!parsedQuery || queryInterface === QueryInterfaceType.TEXT ? (
251213
<PlainTextQueryInput label={label} />
252214
) : (
@@ -311,14 +273,3 @@ const SearchIcon = styled(IconSearch)`
311273
color: ${p => p.theme.subText};
312274
height: 22px;
313275
`;
314-
315-
const UnSubmittedDot = styled('div')`
316-
position: absolute;
317-
top: 0;
318-
right: 0;
319-
width: 9px;
320-
height: 9px;
321-
border-radius: 50%;
322-
background: ${p => p.theme.active};
323-
border: solid 2px ${p => p.theme.background};
324-
`;

static/app/components/searchQueryBuilder/tokens/freeText.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import type {KeyboardEvent, Node} from '@react-types/shared';
77

88
import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
99
import {useQueryBuilderGridItem} from 'sentry/components/searchQueryBuilder/hooks/useQueryBuilderGridItem';
10-
import {replaceTokensWithPadding} from 'sentry/components/searchQueryBuilder/hooks/useQueryBuilderState';
1110
import {SearchQueryBuilderCombobox} from 'sentry/components/searchQueryBuilder/tokens/combobox';
1211
import {useFilterKeyListBox} from 'sentry/components/searchQueryBuilder/tokens/filterKeyListBox/useFilterKeyListBox';
1312
import {InvalidTokenTooltip} from 'sentry/components/searchQueryBuilder/tokens/invalidTokenTooltip';
@@ -406,7 +405,6 @@ function SearchQueryBuilderInputInternal({
406405
query: option.value,
407406
focusOverride: {itemKey: 'end'},
408407
});
409-
handleSearch(option.value);
410408
return;
411409
}
412410

@@ -418,10 +416,6 @@ function SearchQueryBuilderInputInternal({
418416
shouldCommitQuery: true,
419417
});
420418
resetInputValue();
421-
422-
// Because the query does not change until a subsequent render,
423-
// we need to do the replacement that is does in the reducer here
424-
handleSearch(replaceTokensWithPadding(query, [token], option.value));
425419
return;
426420
}
427421

@@ -491,6 +485,13 @@ function SearchQueryBuilderInputInternal({
491485
resetInputValue();
492486
}}
493487
onCustomValueCommitted={value => {
488+
// if we haven't changed anything, just search
489+
if (value.trim() === trimmedTokenValue) {
490+
handleSearch(query);
491+
return;
492+
}
493+
494+
// Otherwise, commit the query (which will trigger a search)
494495
dispatch({
495496
type: 'UPDATE_FREE_TEXT',
496497
tokens: [token],
@@ -502,10 +503,6 @@ function SearchQueryBuilderInputInternal({
502503
shouldCommitQuery: true,
503504
});
504505
resetInputValue();
505-
506-
// Because the query does not change until a subsequent render,
507-
// we need to do the replacement that is does in the reducer here
508-
handleSearch(replaceTokensWithPadding(query, [token], value));
509506
}}
510507
onExit={() => {
511508
if (inputValue !== token.value.trim()) {

static/app/views/alerts/rules/metric/ruleConditionsForm.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -651,9 +651,6 @@ class RuleConditionsForm extends PureComponent<Props, State> {
651651
) : (
652652
<SearchContainer>
653653
<SearchQueryBuilder
654-
searchOnChange={organization.features.includes(
655-
'ui-search-on-change'
656-
)}
657654
initialQuery={initialData?.query ?? ''}
658655
getTagValues={this.getEventFieldValues}
659656
placeholder={this.searchPlaceholder}

0 commit comments

Comments
 (0)