ref(platformPicker): Use SearchBar component (#38067)

Same as https://github.com/getsentry/sentry/pull/37963 but for
`PlatformPicker`.

**Before:**
<img width="969" alt="Screen Shot 2022-08-19 at 1 29 00 PM"
src="https://user-images.githubusercontent.com/44172267/185702156-e7185770-1a7e-475d-8db4-a37112915c59.png">

**After:**
<img width="969" alt="Screen Shot 2022-08-19 at 1 29 31 PM"
src="https://user-images.githubusercontent.com/44172267/185702238-d34509ae-57f4-49c9-9c1a-a64c088ded87.png">

static/app/components/platformPicker.tsx

@@ -8,12 +8,12 @@ import EmptyMessage from 'sentry/components/emptyMessage';
 import ExternalLink from 'sentry/components/links/externalLink';
 import ListLink from 'sentry/components/links/listLink';
 import NavTabs from 'sentry/components/navTabs';
+import SearchBar from 'sentry/components/searchBar';
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
 import categoryList, {filterAliases, PlatformKey} from 'sentry/data/platformCategories';
 import platforms from 'sentry/data/platforms';
-import {IconClose, IconProject, IconSearch} from 'sentry/icons';
+import {IconClose, IconProject} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
-import {inputStyles} from 'sentry/styles/input';
 import space from 'sentry/styles/space';
 import {Organization, PlatformIntegration} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
@@ -117,15 +117,12 @@ class PlatformPicker extends Component<PlatformPickerProps, State> {
               </ListLink>
             ))}
           </CategoryNav>
-          <SearchBar>
-            <IconSearch size="xs" />
-            <input
-              type="text"
-              value={filter}
-              placeholder={t('Filter Platforms')}
-              onChange={e => this.setState({filter: e.target.value}, this.logSearch)}
-            />
-          </SearchBar>
+          <StyledSearchBar
+            size="sm"
+            query={filter}
+            placeholder={t('Filter Platforms')}
+            onChange={val => this.setState({filter: val}, this.logSearch)}
+          />
         </NavContainer>
         <PlatformList className={listClassName} {...listProps}>
           {platformList.map(platform => (
@@ -182,27 +179,14 @@ const NavContainer = styled('div')`
   border-bottom: 1px solid ${p => p.theme.border};
 `;
 
-const SearchBar = styled('div')`
-  ${p => inputStyles(p)};
-  padding: 0 8px;
-  color: ${p => p.theme.subText};
-  display: flex;
-  align-items: center;
-  font-size: 15px;
-  margin-top: -${space(0.75)};
-
-  input {
-    border: none;
-    background: none;
-    padding: 2px 4px;
-    width: 100%;
-    /* Ensure a consistent line height to keep the input the desired height */
-    line-height: 24px;
-
-    &:focus {
-      outline: none;
-    }
-  }
+const StyledSearchBar = styled(SearchBar)`
+  min-width: 6rem;
+  max-width: 12rem;
+  margin-top: -${space(0.25)};
+  margin-left: auto;
+  flex-shrink: 0;
+  flex-basis: 0;
+  flex-grow: 1;
 `;
 
 const CategoryNav = styled(NavTabs)`

tests/js/spec/components/platformPicker.spec.jsx

@@ -62,7 +62,7 @@ describe('PlatformPicker', function () {
       setPlatform: jest.fn(),
     };
 
-    render(<PlatformPicker {...props} />);
+    render(<PlatformPicker noAutoFilter {...props} />);
 
     userEvent.click(screen.getByRole('button', {name: 'Clear'}));
     expect(props.setPlatform).toHaveBeenCalledWith(null);