ref(releasesList): Use CompactSelect in releasesDropdown (#34455)

* ref(releasesList): Use CompactSelect in releasesDropdown

* ref(tests): Remove unnecessary awaits & use userEvent.click

* ref(releases): Transfer disabled props to CompactSelect

* ref(releasesDropdown): Make trigger buttons span full width in mobile

static/app/views/releases/list/releasesDropdown.tsx

@@ -1,58 +1,34 @@
-import DropdownControl, {DropdownItem} from 'sentry/components/dropdownControl';
-import Tooltip from 'sentry/components/tooltip';
+import CompactSelect from 'sentry/components/forms/compactSelect';
 
-type DropdownItemProps = Pick<
-  React.ComponentProps<typeof DropdownItem>,
-  'disabled' | 'title'
-> & {
-  label: string;
-  tooltip?: string;
-};
+type DropdownItemProps = Omit<
+  React.ComponentProps<typeof CompactSelect>['options'][0],
+  'value'
+>;
 
 type Props = {
   label: string;
   onSelect: (key: string) => void;
   options: Record<string, DropdownItemProps>;
   selected: string;
-  className?: string;
 };
 
-const ReleasesDropdown = ({
-  label: prefix,
-  options,
-  selected,
-  onSelect,
-  className,
-}: Props) => {
-  const optionEntries = Object.entries(options);
-  const selectedLabel = optionEntries.find(([key, _value]) => key === selected)?.[1];
+const ReleasesDropdown = ({label: prefix, options, selected, onSelect}: Props) => {
+  const mappedOptions = Object.entries(options).map(
+    ([key, {label, tooltip, disabled}]) => ({
+      value: key,
+      label,
+      tooltip,
+      isDisabled: disabled,
+    })
+  );
 
   return (
-    <DropdownControl
-      alwaysRenderMenu={false}
-      buttonProps={{prefix, style: {width: '100%'}}}
-      label={selectedLabel?.label}
-      className={className}
-    >
-      {optionEntries.map(([key, {label, tooltip, ...props}]) => (
-        <Tooltip
-          key={key}
-          containerDisplayMode="block"
-          title={tooltip}
-          delay={500}
-          disabled={!tooltip}
-        >
-          <DropdownItem
-            onSelect={onSelect}
-            eventKey={key}
-            isActive={selected === key}
-            {...props}
-          >
-            {label}
-          </DropdownItem>
-        </Tooltip>
-      ))}
-    </DropdownControl>
+    <CompactSelect
+      options={mappedOptions}
+      onChange={opt => onSelect(opt.value)}
+      value={selected}
+      triggerProps={{prefix, style: {width: '100%'}}}
+    />
   );
 };
 

tests/js/spec/views/releases/list/index.spec.jsx

@@ -279,12 +279,10 @@ describe('ReleasesList', () => {
       )
     );
 
-    const sortDropdown = await screen.findByText('Sort By');
-    const sortByOptions = within(sortDropdown.closest('div')).getAllByTestId('menu-item');
+    userEvent.click(screen.getByText('Sort By'));
 
-    const dateCreatedOption = sortByOptions.at(0);
-    expect(sortByOptions).toHaveLength(7);
-    expect(dateCreatedOption).toHaveTextContent('Date Created');
+    const dateCreatedOption = screen.getByText('Date Created');
+    expect(dateCreatedOption).toBeInTheDocument();
 
     userEvent.click(dateCreatedOption);
 
@@ -316,25 +314,24 @@ describe('ReleasesList', () => {
     expect(sortDropdown.parentElement).toHaveTextContent('Sort ByDate Created');
   });
 
-  it('display the right Crash Free column', async () => {
+  it('display the right Crash Free column', () => {
     render(<ReleasesList {...props} />, {
       context: routerContext,
       organization,
     });
-    const displayDropdown = await screen.findByText('Display');
-
-    expect(displayDropdown.parentElement).toHaveTextContent('DisplaySessions');
 
-    const displayOptions = within(displayDropdown.closest('div')).getAllByTestId(
-      'menu-item'
-    );
-    expect(displayOptions).toHaveLength(2);
-
-    const crashFreeSessionsOption = displayOptions.at(0);
-    expect(crashFreeSessionsOption).toHaveTextContent('Sessions');
+    // Find and click on the display menu's trigger button
+    const statusTriggerButton = screen.getByRole('button', {
+      name: 'Display Sessions',
+    });
+    expect(statusTriggerButton).toBeInTheDocument();
+    userEvent.click(statusTriggerButton);
 
-    const crashFreeUsersOption = displayOptions.at(1);
-    expect(crashFreeUsersOption).toHaveTextContent('Users');
+    // Expect to have 2 options in the status dropdown
+    const crashFreeSessionsOption = screen.getAllByText('Sessions')[1];
+    const crashFreeUsersOption = screen.getByText('Users');
+    expect(crashFreeSessionsOption).toBeInTheDocument();
+    expect(crashFreeUsersOption).toBeInTheDocument();
 
     userEvent.click(crashFreeUsersOption);
 
@@ -370,21 +367,18 @@ describe('ReleasesList', () => {
       await screen.findByText('These releases have been archived.')
     ).toBeInTheDocument();
 
-    const statusDropdown = screen.getByText('Status');
-
-    expect(statusDropdown.parentElement).toHaveTextContent('StatusArchived');
-
-    const statusOptions = within(statusDropdown.closest('div')).getAllByTestId(
-      'menu-item'
-    );
-    expect(statusOptions).toHaveLength(2);
-
-    const statusActiveOption = statusOptions.at(0);
-    const statusArchivedOption = statusOptions.at(1);
+    // Find and click on the status menu's trigger button
+    const statusTriggerButton = screen.getByRole('button', {
+      name: 'Status Archived',
+    });
+    expect(statusTriggerButton).toBeInTheDocument();
+    userEvent.click(statusTriggerButton);
 
-    expect(statusOptions).toHaveLength(2);
-    expect(statusActiveOption).toHaveTextContent('Active');
-    expect(statusArchivedOption).toHaveTextContent('Archived');
+    // Expect to have 2 options in the status dropdown
+    const statusActiveOption = screen.getByText('Active');
+    let statusArchivedOption = screen.getAllByText('Archived')[1];
+    expect(statusActiveOption).toBeInTheDocument();
+    expect(statusArchivedOption).toBeInTheDocument();
 
     userEvent.click(statusActiveOption);
     expect(router.push).toHaveBeenLastCalledWith({
@@ -393,6 +387,8 @@ describe('ReleasesList', () => {
       }),
     });
 
+    userEvent.click(statusTriggerButton);
+    statusArchivedOption = screen.getAllByText('Archived')[1];
     userEvent.click(statusArchivedOption);
     expect(router.push).toHaveBeenLastCalledWith({
       query: expect.objectContaining({