feat(saved-searches): Use SmartSearchBar in save search creation modal (#40658)

static/app/components/modals/createSavedSearchModal.spec.jsx

@@ -27,6 +27,16 @@ describe('CreateSavedSearchModal', function () {
       method: 'POST',
       body: {id: '1', name: 'test', query: 'is:unresolved assigned:lyn@sentry.io'},
     });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/recent-searches/',
+      method: 'GET',
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/recent-searches/',
+      method: 'POST',
+      body: [],
+    });
   });
 
   it('saves a search when query is not changed', async function () {
@@ -55,8 +65,8 @@ describe('CreateSavedSearchModal', function () {
     render(<CreateSavedSearchModal {...defaultProps} />);
 
     userEvent.type(screen.getByRole('textbox', {name: 'Name'}), 'new search name');
-    userEvent.clear(screen.getByRole('textbox', {name: 'Query'}));
-    userEvent.type(screen.getByRole('textbox', {name: 'Query'}), 'is:resolved');
+    userEvent.clear(screen.getByTestId('smart-search-input'));
+    userEvent.type(screen.getByTestId('smart-search-input'), 'is:resolved{enter}');
     await selectEvent.select(screen.getByText('Last Seen'), 'Priority');
     userEvent.click(screen.getByRole('button', {name: 'Save'}));
 

static/app/components/modals/createSavedSearchModal.tsx

@@ -5,10 +5,12 @@ import {ModalRenderProps} from 'sentry/actionCreators/modal';
 import {createSavedSearch} from 'sentry/actionCreators/savedSearches';
 import Alert from 'sentry/components/alert';
 import {Form, SelectField, TextField} from 'sentry/components/forms';
+import FormField from 'sentry/components/forms/formField';
 import {OnSubmitCallback} from 'sentry/components/forms/types';
 import {t} from 'sentry/locale';
 import {Organization} from 'sentry/types';
 import useApi from 'sentry/utils/useApi';
+import IssueListSearchBar from 'sentry/views/issueList/searchBar';
 import {getSortLabel, IssueSortOptions} from 'sentry/views/issueList/utils';
 
 type Props = ModalRenderProps & {
@@ -119,7 +121,7 @@ function CreateSavedSearchModal({
           flexibleControlStateSize
           required
         />
-        <TextField
+        <FormField
           key="query"
           name="query"
           label={t('Query')}
@@ -127,7 +129,20 @@ function CreateSavedSearchModal({
           stacked
           flexibleControlStateSize
           required
-        />
+        >
+          {({onChange, onBlur, disabled, value}) => (
+            <IssueListSearchBar
+              organization={organization}
+              onClose={newValue => {
+                onChange(newValue, {});
+                onBlur(newValue, {});
+              }}
+              useFormWrapper={false}
+              disabled={disabled}
+              query={value}
+            />
+          )}
+        </FormField>
         <SelectField
           key="sort"
           name="sort"

static/app/views/issueList/searchBar.tsx

@@ -78,6 +78,7 @@ function IssueListSearchBar({organization, tags, ...props}: Props) {
       excludedTags={EXCLUDED_TAGS}
       maxMenuHeight={500}
       supportedTags={getSupportedTags(tags)}
+      organization={organization}
       {...props}
     />
   );