feat(ui): Add actor toggling to DropdownAutocomplete (#11968)

I opted to make this a prop as to not break existing behavior (even though this seems like a reasonable default)

src/sentry/static/sentry/app/components/dropdownAutoComplete.jsx

@@ -7,6 +7,10 @@ import DropdownAutoCompleteMenu from 'app/components/dropdownAutoCompleteMenu';
 class DropdownAutoComplete extends React.Component {
   static propTypes = {
     ...DropdownAutoCompleteMenu.propTypes,
+
+    // Should clicking the actor toggle visibility?
+    allowActorToggle: PropTypes.bool,
+
     children: PropTypes.func,
   };
 
@@ -15,7 +19,7 @@ class DropdownAutoComplete extends React.Component {
   };
 
   render() {
-    const {children, ...props} = this.props;
+    const {children, allowActorToggle, ...props} = this.props;
 
     return (
       <DropdownAutoCompleteMenu {...props}>
@@ -31,7 +35,11 @@ class DropdownAutoComplete extends React.Component {
             <Actor
               isOpen={renderProps.isOpen}
               role="button"
-              onClick={renderProps.actions.open}
+              onClick={
+                renderProps.isOpen && allowActorToggle
+                  ? renderProps.actions.close
+                  : renderProps.actions.open
+              }
               {...actorProps}
             >
               {children(renderProps)}

src/sentry/static/sentry/app/components/organizations/multipleEnvironmentSelector.jsx

@@ -182,6 +182,7 @@ class MultipleEnvironmentSelector extends React.PureComponent {
           return (
             <StyledDropdownAutoComplete
               alignMenu="left"
+              allowActorToggle={true}
               closeOnSelect={true}
               blendCorner={false}
               searchPlaceholder={t('Filter environments')}

src/sentry/static/sentry/app/components/projectSelector.jsx

@@ -171,6 +171,7 @@ class ProjectSelector extends React.Component {
     return (
       <DropdownAutoComplete
         alignMenu="left"
+        allowActorToggle={true}
         closeOnSelect={true}
         blendCorner={false}
         searchPlaceholder={t('Filter projects')}

tests/js/spec/components/dropdownAutoComplete.spec.jsx

@@ -5,27 +5,24 @@ import DropdownAutoComplete from 'app/components/dropdownAutoComplete';
 
 describe('DropdownAutoComplete', function() {
   const routerContext = TestStubs.routerContext();
+  const items = [
+    {
+      value: 'apple',
+      label: <div>Apple</div>,
+    },
+    {
+      value: 'bacon',
+      label: <div>Bacon</div>,
+    },
+    {
+      value: 'corn',
+      label: <div>Corn</div>,
+    },
+  ];
 
   it('has actor wrapper', function() {
     const wrapper = mount(
-      <DropdownAutoComplete
-        items={[
-          {
-            value: 'apple',
-            label: <div>Apple</div>,
-          },
-          {
-            value: 'bacon',
-            label: <div>Bacon</div>,
-          },
-          {
-            value: 'corn',
-            label: <div>Corn</div>,
-          },
-        ]}
-      >
-        {() => 'Click Me!'}
-      </DropdownAutoComplete>,
+      <DropdownAutoComplete items={items}>{() => 'Click Me!'}</DropdownAutoComplete>,
       routerContext
     );
     expect(wrapper.find('div[role="button"]')).toHaveLength(1);
@@ -34,27 +31,26 @@ describe('DropdownAutoComplete', function() {
 
   it('opens dropdown menu when actor is clicked', function() {
     const wrapper = mount(
-      <DropdownAutoComplete
-        items={[
-          {
-            value: 'apple',
-            label: <div>Apple</div>,
-          },
-          {
-            value: 'bacon',
-            label: <div>Bacon</div>,
-          },
-          {
-            value: 'corn',
-            label: <div>Corn</div>,
-          },
-        ]}
-      >
+      <DropdownAutoComplete items={items}>{() => 'Click Me!'}</DropdownAutoComplete>,
+      routerContext
+    );
+    wrapper.find('Actor[role="button"]').simulate('click');
+    expect(wrapper.find('StyledMenu')).toHaveLength(1);
+
+    wrapper.find('Actor[role="button"]').simulate('click');
+    expect(wrapper.find('StyledMenu')).toHaveLength(1);
+  });
+
+  it('toggles dropdown menu when actor is clicked', function() {
+    const wrapper = mount(
+      <DropdownAutoComplete allowActorToggle items={items}>
         {() => 'Click Me!'}
       </DropdownAutoComplete>,
       routerContext
     );
     wrapper.find('Actor[role="button"]').simulate('click');
     expect(wrapper.find('StyledMenu')).toHaveLength(1);
+    wrapper.find('Actor[role="button"]').simulate('click');
+    expect(wrapper.find('StyledMenu')).toHaveLength(0);
   });
 });

tests/js/spec/views/userFeedback/__snapshots__/organizationUserFeedback.spec.jsx.snap

@@ -717,6 +717,7 @@ exports[`OrganizationUserFeedback renders 1`] = `
                               >
                                 <DropdownAutoComplete
                                   alignMenu="left"
+                                  allowActorToggle={true}
                                   blendCorner={false}
                                   className="ewlipse0 css-11ijjr3-StyledProjectSelector"
                                   closeOnSelect={true}
@@ -1326,6 +1327,7 @@ exports[`OrganizationUserFeedback renders 1`] = `
                                 >
                                   <StyledDropdownAutoComplete
                                     alignMenu="left"
+                                    allowActorToggle={true}
                                     blendCorner={false}
                                     closeOnSelect={true}
                                     emptyHidesInput={true}
@@ -1357,6 +1359,7 @@ exports[`OrganizationUserFeedback renders 1`] = `
                                   >
                                     <DropdownAutoComplete
                                       alignMenu="left"
+                                      allowActorToggle={true}
                                       blendCorner={false}
                                       className="css-qn89t6-StyledDropdownAutoComplete e1gsuvme2"
                                       closeOnSelect={true}