ref(notification settings): Style search bar (#26274)

* ref(notification settings: Style search bar

static/app/views/settings/account/notifications/notificationSettingsByProjects.tsx

@@ -15,6 +15,10 @@ import {
   getParentField,
   groupByOrganization,
 } from 'app/views/settings/account/notifications/utils';
+import {
+  RenderSearch,
+  SearchWrapper,
+} from 'app/views/settings/components/defaultSearchBar';
 import EmptyMessage from 'app/views/settings/components/emptyMessage';
 import Form from 'app/views/settings/components/forms/form';
 import JsonForm from 'app/views/settings/components/forms/jsonForm';
@@ -72,6 +76,10 @@ class NotificationSettingsByProjects extends AsyncComponent<Props, State> {
     const canSearch = this.getProjectCount() >= MIN_PROJECTS_FOR_SEARCH;
     const shouldPaginate = projects.length >= MIN_PROJECTS_FOR_PAGINATION;
 
+    // eslint-disable-next-line react/prop-types
+    const renderSearch: RenderSearch = ({defaultSearchBar}) => (
+      <SearchWrapper>{defaultSearchBar}</SearchWrapper>
+    );
     return (
       <React.Fragment>
         {canSearch &&
@@ -79,6 +87,7 @@ class NotificationSettingsByProjects extends AsyncComponent<Props, State> {
             stateKey: 'projects',
             url: '/projects/',
             placeholder: t('Search Projects'),
+            children: renderSearch,
           })}
         <Form
           saveOnBlur

static/app/views/settings/components/defaultSearchBar.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import space from 'app/styles/space';
+import AsyncView from 'app/views/asyncView';
+
+export type RenderSearch = React.ComponentProps<
+  typeof AsyncView.prototype.renderSearchInput
+>['children'];
+
+export const SearchWrapper = styled('div')`
+  display: flex;
+  * {
+    width: 100%;
+  }
+  grid-template-columns: 1fr max-content;
+  grid-gap: ${space(1.5)};
+  margin-top: ${space(4)};
+  margin-bottom: ${space(1)};
+  position: relative;
+`;

static/app/views/settings/organizationMembers/organizationMembersList.tsx

@@ -15,12 +15,15 @@ import {MEMBER_ROLES} from 'app/constants';
 import {IconSliders} from 'app/icons';
 import {t, tct} from 'app/locale';
 import ConfigStore from 'app/stores/configStore';
-import space from 'app/styles/space';
 import {Member, MemberRole, Organization} from 'app/types';
 import routeTitleGen from 'app/utils/routeTitle';
 import theme from 'app/utils/theme';
 import withOrganization from 'app/utils/withOrganization';
 import AsyncView from 'app/views/asyncView';
+import {
+  RenderSearch,
+  SearchWrapper,
+} from 'app/views/settings/components/defaultSearchBar';
 import EmptyMessage from 'app/views/settings/components/emptyMessage';
 
 import MembersFilter from './components/membersFilter';
@@ -155,13 +158,9 @@ class OrganizationMembersList extends AsyncView<Props, State> {
     // Only admins/owners can remove members
     const requireLink = !!this.state.authProvider && this.state.authProvider.require_link;
 
-    type RenderSearch = React.ComponentProps<
-      typeof AsyncView.prototype.renderSearchInput
-    >['children'];
-
     // eslint-disable-next-line react/prop-types
     const renderSearch: RenderSearch = ({defaultSearchBar, value, handleChange}) => (
-      <SearchWrapper>
+      <SearchWrapperWithFilter>
         {defaultSearchBar}
         <DropdownMenu closeOnEscape>
           {({getActorProps, isOpen}) => (
@@ -179,7 +178,7 @@ class OrganizationMembersList extends AsyncView<Props, State> {
             </FilterWrapper>
           )}
         </DropdownMenu>
-      </SearchWrapper>
+      </SearchWrapperWithFilter>
     );
 
     return (
@@ -229,12 +228,8 @@ class OrganizationMembersList extends AsyncView<Props, State> {
   }
 }
 
-const SearchWrapper = styled('div')`
+const SearchWrapperWithFilter = styled(SearchWrapper)`
   display: grid;
-  grid-template-columns: 1fr max-content;
-  grid-gap: ${space(1.5)};
-  margin-bottom: ${space(3)};
-  position: relative;
 `;
 
 const FilterWrapper = styled('div')`

tests/js/spec/views/settings/organizationMembers/organizationMembersList.spec.jsx

@@ -314,7 +314,7 @@ describe('OrganizationMembersList', function () {
       })
     );
 
-    wrapper.find('SearchWrapper form').simulate('submit');
+    wrapper.find('SearchWrapperWithFilter form').simulate('submit');
 
     expect(routerContext.context.router.push).toHaveBeenCalledTimes(1);
   });