fix(ui): Fix Issue Owners CSS and add snapshot [ISSUE-667] (#16416)

The "Select owners" select menu was squished and unusable.

Fixes ISSUE-667

src/sentry/static/sentry/app/views/settings/project/projectOwnership/ruleBuilder.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
-import {Flex} from 'reflexbox';
 
 import {t} from 'app/locale';
 import memberListStore from 'app/stores/memberListStore';
@@ -137,7 +136,7 @@ class RuleBuilder extends React.Component {
             }
           />
           <Divider src="icon-chevron-right" />
-          <Flex flex="1" alignItems="center" mr={1}>
+          <SelectOwnersWrapper>
             <SelectOwners
               organization={organization}
               project={project}
@@ -145,7 +144,7 @@ class RuleBuilder extends React.Component {
               onChange={this.handleChangeOwners}
               disabled={disabled}
             />
-          </Flex>
+          </SelectOwnersWrapper>
 
           <AddButton
             priority="primary"
@@ -214,6 +213,12 @@ const Divider = styled(InlineSvg)`
   margin-right: 5px;
 `;
 
+const SelectOwnersWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  margin-right: ${space(1)};
+`;
+
 const AddButton = styled(Button)`
   padding: ${space(0.5)}; /* this sizes the button up to align with the inputs */
 `;

tests/acceptance/test_project_ownership.py

@@ -0,0 +1,19 @@
+from __future__ import absolute_import
+
+from sentry.testutils import AcceptanceTestCase
+
+
+class ProjectOwnershipTest(AcceptanceTestCase):
+    def setUp(self):
+        super(ProjectOwnershipTest, self).setUp()
+        self.login_as(self.user)
+        self.path = u"/settings/{}/projects/{}/ownership/".format(
+            self.organization.slug, self.project.slug
+        )
+
+    def test_simple(self):
+        self.browser.get(self.path)
+        self.browser.wait_until_not(".loading")
+        self.browser.wait_until('[name="select-type"]')
+        self.browser.wait_until_not(".Select-loading")
+        self.browser.snapshot("project ownership")

tests/js/spec/views/__snapshots__/ownershipInput.spec.jsx.snap

@@ -515,13 +515,9 @@ exports[`Project Ownership Input renders 1`] = `
             </svg>
           </ForwardRef>
         </Divider>
-        <Styled(div)
-          alignItems="center"
-          flex="1"
-          mr={1}
-        >
+        <SelectOwnersWrapper>
           <div
-            className="css-1379u9y"
+            className="css-1518iv7-SelectOwnersWrapper e1hyuoc79"
           >
             <SelectOwners
               onChange={[Function]}
@@ -869,7 +865,7 @@ exports[`Project Ownership Input renders 1`] = `
               </EmotionCssPropInternal>
             </SelectOwners>
           </div>
-        </Styled(div)>
+        </SelectOwnersWrapper>
         <AddButton
           align="center"
           disabled={true}
@@ -880,7 +876,7 @@ exports[`Project Ownership Input renders 1`] = `
         >
           <Button
             align="center"
-            className="css-f6y09s-AddButton e1hyuoc79"
+            className="css-f6y09s-AddButton e1hyuoc710"
             disabled={true}
             icon="icon-circle-add"
             onClick={[Function]}
@@ -889,7 +885,7 @@ exports[`Project Ownership Input renders 1`] = `
           >
             <StyledButton
               aria-disabled={true}
-              className="css-f6y09s-AddButton e1hyuoc79"
+              className="css-f6y09s-AddButton e1hyuoc710"
               disabled={true}
               onClick={[Function]}
               priority="primary"
@@ -898,7 +894,7 @@ exports[`Project Ownership Input renders 1`] = `
             >
               <ForwardRef
                 aria-disabled={true}
-                className="e1hyuoc79 css-1vf07fg-StyledButton-AddButton edwq9my0"
+                className="e1hyuoc710 css-1vf07fg-StyledButton-AddButton edwq9my0"
                 disabled={true}
                 onClick={[Function]}
                 priority="primary"
@@ -907,7 +903,7 @@ exports[`Project Ownership Input renders 1`] = `
               >
                 <button
                   aria-disabled={true}
-                  className="e1hyuoc79 css-1vf07fg-StyledButton-AddButton edwq9my0"
+                  className="e1hyuoc710 css-1vf07fg-StyledButton-AddButton edwq9my0"
                   onClick={[Function]}
                   role="button"
                   size="small"

tests/js/spec/views/__snapshots__/ruleBuilder.spec.jsx.snap

@@ -488,13 +488,9 @@ exports[`RuleBuilder renders 1`] = `
           </svg>
         </ForwardRef>
       </Divider>
-      <Styled(div)
-        alignItems="center"
-        flex="1"
-        mr={1}
-      >
+      <SelectOwnersWrapper>
         <div
-          className="css-1379u9y"
+          className="css-1518iv7-SelectOwnersWrapper e1hyuoc79"
         >
           <SelectOwners
             onChange={[Function]}
@@ -980,7 +976,7 @@ exports[`RuleBuilder renders 1`] = `
             </EmotionCssPropInternal>
           </SelectOwners>
         </div>
-      </Styled(div)>
+      </SelectOwnersWrapper>
       <AddButton
         align="center"
         disabled={true}
@@ -991,7 +987,7 @@ exports[`RuleBuilder renders 1`] = `
       >
         <Button
           align="center"
-          className="css-f6y09s-AddButton e1hyuoc79"
+          className="css-f6y09s-AddButton e1hyuoc710"
           disabled={true}
           icon="icon-circle-add"
           onClick={[Function]}
@@ -1000,7 +996,7 @@ exports[`RuleBuilder renders 1`] = `
         >
           <StyledButton
             aria-disabled={true}
-            className="css-f6y09s-AddButton e1hyuoc79"
+            className="css-f6y09s-AddButton e1hyuoc710"
             disabled={true}
             onClick={[Function]}
             priority="primary"
@@ -1009,7 +1005,7 @@ exports[`RuleBuilder renders 1`] = `
           >
             <ForwardRef
               aria-disabled={true}
-              className="e1hyuoc79 css-1vf07fg-StyledButton-AddButton edwq9my0"
+              className="e1hyuoc710 css-1vf07fg-StyledButton-AddButton edwq9my0"
               disabled={true}
               onClick={[Function]}
               priority="primary"
@@ -1018,7 +1014,7 @@ exports[`RuleBuilder renders 1`] = `
             >
               <button
                 aria-disabled={true}
-                className="e1hyuoc79 css-1vf07fg-StyledButton-AddButton edwq9my0"
+                className="e1hyuoc710 css-1vf07fg-StyledButton-AddButton edwq9my0"
                 onClick={[Function]}
                 role="button"
                 size="small"
@@ -1756,13 +1752,9 @@ exports[`RuleBuilder renders with suggestions 1`] = `
           </svg>
         </ForwardRef>
       </Divider>
-      <Styled(div)
-        alignItems="center"
-        flex="1"
-        mr={1}
-      >
+      <SelectOwnersWrapper>
         <div
-          className="css-1379u9y"
+          className="css-1518iv7-SelectOwnersWrapper e1hyuoc79"
         >
           <SelectOwners
             onChange={[Function]}
@@ -2848,7 +2840,7 @@ exports[`RuleBuilder renders with suggestions 1`] = `
             </EmotionCssPropInternal>
           </SelectOwners>
         </div>
-      </Styled(div)>
+      </SelectOwnersWrapper>
       <AddButton
         align="center"
         disabled={false}
@@ -2859,7 +2851,7 @@ exports[`RuleBuilder renders with suggestions 1`] = `
       >
         <Button
           align="center"
-          className="css-f6y09s-AddButton e1hyuoc79"
+          className="css-f6y09s-AddButton e1hyuoc710"
           disabled={false}
           icon="icon-circle-add"
           onClick={[Function]}
@@ -2868,7 +2860,7 @@ exports[`RuleBuilder renders with suggestions 1`] = `
         >
           <StyledButton
             aria-disabled={false}
-            className="css-f6y09s-AddButton e1hyuoc79"
+            className="css-f6y09s-AddButton e1hyuoc710"
             disabled={false}
             onClick={[Function]}
             priority="primary"
@@ -2877,7 +2869,7 @@ exports[`RuleBuilder renders with suggestions 1`] = `
           >
             <ForwardRef
               aria-disabled={false}
-              className="e1hyuoc79 css-cdfv3-StyledButton-AddButton edwq9my0"
+              className="e1hyuoc710 css-cdfv3-StyledButton-AddButton edwq9my0"
               disabled={false}
               onClick={[Function]}
               priority="primary"
@@ -2886,7 +2878,7 @@ exports[`RuleBuilder renders with suggestions 1`] = `
             >
               <button
                 aria-disabled={false}
-                className="e1hyuoc79 css-cdfv3-StyledButton-AddButton edwq9my0"
+                className="e1hyuoc710 css-cdfv3-StyledButton-AddButton edwq9my0"
                 onClick={[Function]}
                 role="button"
                 size="small"