fix(settings): Fix padding issue in data scrubbing method dropdown (#36867)

static/app/views/settings/components/dataScrubbing/modals/form/selectField.tsx

@@ -1,9 +1,6 @@
 import {Component, createRef} from 'react';
-import {components, OptionProps} from 'react-select';
-import styled from '@emotion/styled';
 
 import SelectControl, {ControlProps} from 'sentry/components/forms/selectControl';
-import space from 'sentry/styles/space';
 
 type Props = Pick<
   ControlProps,
@@ -29,6 +26,10 @@ class SelectField extends Component<Props> {
       <SelectControl
         {...this.props}
         isSearchable={false}
+        options={this.props.options.map(opt => ({
+          ...opt,
+          details: `(${opt.description})`,
+        }))}
         styles={{
           control: (provided: {[x: string]: string | number | boolean}) => ({
             ...provided,
@@ -37,24 +38,6 @@ class SelectField extends Component<Props> {
           }),
         }}
         ref={this.selectRef}
-        components={{
-          Option: ({
-            data: {label, description, ...data},
-            isSelected,
-            ...props
-          }: OptionProps<{
-            label: React.ReactNode;
-            value: string;
-            description?: string;
-          }>) => (
-            <components.Option isSelected={isSelected} data={data} {...props}>
-              <Wrapper>
-                <div data-test-id="label">{label}</div>
-                {description && <Description>{`(${description})`}</Description>}
-              </Wrapper>
-            </components.Option>
-          ),
-        }}
         openOnFocus
       />
     );
@@ -62,13 +45,3 @@ class SelectField extends Component<Props> {
 }
 
 export default SelectField;
-
-const Description = styled('div')`
-  color: ${p => p.theme.gray300};
-`;
-
-const Wrapper = styled('div')`
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: ${space(1)};
-`;

tests/js/spec/views/settings/components/dataScrubbing/addModal.spec.tsx

@@ -127,16 +127,13 @@ describe('Add Modal', () => {
     methodFieldInput.simulate('keyDown', {key: 'ArrowDown'});
 
     const methodFieldMenuOptions = wrapper.find(
-      '[data-test-id="method-field"] MenuList Option Wrapper'
+      '[data-test-id="method-field"] MenuList Option'
     );
     expect(methodFieldMenuOptions).toHaveLength(4);
     const replaceOption = methodFieldMenuOptions.at(3);
 
-    expect(replaceOption.find('[data-test-id="label"]').text()).toEqual('Replace');
-
-    expect(replaceOption.find('Description').text()).toEqual(
-      '(Replace with Placeholder)'
-    );
+    expect(replaceOption.find('Label').text()).toEqual('Replace');
+    expect(replaceOption.find('Details').text()).toEqual('(Replace with Placeholder)');
 
     // After the click the placeholder field MUST be in the DOM
     replaceOption.simulate('click');
@@ -169,7 +166,7 @@ describe('Add Modal', () => {
       .simulate('keyDown', {key: 'ArrowDown'});
 
     const hashOption = wrapper
-      .find('[data-test-id="method-field"] MenuList Option Wrapper')
+      .find('[data-test-id="method-field"] MenuList Option')
       .at(0);
 
     hashOption.simulate('click');
@@ -197,13 +194,13 @@ describe('Add Modal', () => {
     typeFieldInput.simulate('keyDown', {key: 'ArrowDown'});
 
     const typeFieldMenuOptions = wrapper.find(
-      '[data-test-id="type-field"] MenuList Option Wrapper'
+      '[data-test-id="type-field"] MenuList Option'
     );
 
     expect(typeFieldMenuOptions).toHaveLength(13);
     const regexOption = typeFieldMenuOptions.at(7);
 
-    expect(regexOption.find('[data-test-id="label"]').text()).toEqual('Regex matches');
+    expect(regexOption.find('Label').text()).toEqual('Regex matches');
 
     // After the click, the regex matches field MUST be in the DOM
     regexOption.simulate('click');
@@ -231,7 +228,7 @@ describe('Add Modal', () => {
       .simulate('keyDown', {key: 'ArrowDown'});
 
     const creditCardOption = wrapper
-      .find('[data-test-id="type-field"] MenuList Option Wrapper')
+      .find('[data-test-id="type-field"] MenuList Option')
       .at(1);
 
     creditCardOption.simulate('click');

tests/js/spec/views/settings/components/dataScrubbing/editModal.spec.tsx

@@ -156,7 +156,7 @@ describe('Edit Modal', () => {
     const methodFieldInput = methodField.find('input').at(0);
     methodFieldInput.simulate('keyDown', {key: 'ArrowDown'});
     const methodFieldMenuOptions = wrapper.find(
-      '[data-test-id="method-field"] MenuList Option Wrapper'
+      '[data-test-id="method-field"] MenuList Option'
     );
     const maskOption = methodFieldMenuOptions.at(1);
     maskOption.simulate('click');
@@ -170,7 +170,7 @@ describe('Edit Modal', () => {
     const typeFieldInput = typeField.find('input').at(0);
     typeFieldInput.simulate('keyDown', {key: 'ArrowDown'});
     const typeFieldMenuOptions = wrapper.find(
-      '[data-test-id="type-field"] MenuList Option Wrapper'
+      '[data-test-id="type-field"] MenuList Option'
     );
     const anythingOption = typeFieldMenuOptions.at(0);
     anythingOption.simulate('click');